:root {
  color-scheme: light;
  --ink: #071b3d;
  --muted: #5e6b82;
  --line: #d9e2f1;
  --paper: #f8fbff;
  --soft: #eef4ff;
  --brand: #0b4db3;
  --brand-dark: #061b49;
  --gold: #f8c44f;
  --coral: #e63346;
  --blue: #1666d9;
  --navy: #071f4f;
  --shadow: 0 24px 70px rgba(7, 31, 79, .18);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 14% 12%, rgba(230, 51, 70, .16), transparent 26%),
    radial-gradient(circle at 86% 12%, rgba(22, 102, 217, .18), transparent 28%),
    linear-gradient(135deg, #f6f9ff 0%, #e9f1ff 46%, #fff8ee 100%);
  color: var(--ink);
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea, a { position: relative; z-index: 1; }

.app-shell {
  width: min(1180px, calc(100% - 28px));
  min-height: calc(100vh - 28px);
  margin: 14px auto;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 14px;
}

.hero-panel, .workspace {
  border: 1px solid rgba(20, 33, 27, .09);
  box-shadow: var(--shadow);
  min-width: 0;
}

.hero-panel {
  min-height: 720px;
  border-radius: 28px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(243,247,255,.96)),
    repeating-linear-gradient(135deg, rgba(7,31,79,.04) 0 1px, transparent 1px 12px);
  color: var(--navy);
  overflow: hidden;
  position: relative;
}

.poster-hero::before {
  content: "";
  position: absolute;
  inset: auto -8% -8% -8%;
  height: 30%;
  background: linear-gradient(170deg, transparent 0 28%, var(--navy) 29% 100%);
  z-index: 0;
}

.poster-hero::after {
  content: "";
  position: absolute;
  right: -62px;
  top: 34px;
  width: 210px;
  height: 210px;
  border: 2px solid rgba(7,31,79,.1);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 48%, rgba(7,31,79,.12) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(7,31,79,.12) 49% 51%, transparent 52%);
  opacity: .8;
}

.flag-ribbon {
  position: absolute;
  left: -58px;
  top: -32px;
  width: 560px;
  height: 150px;
  transform: rotate(-10deg);
  z-index: 0;
}
.flag-ribbon span {
  display: block;
  height: 28px;
  margin: 10px 0;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(7,31,79,.12);
}
.flag-ribbon span:nth-child(1) { background: var(--navy); width: 330px; }
.flag-ribbon span:nth-child(2) { background: white; width: 520px; }
.flag-ribbon span:nth-child(3) { background: var(--coral); width: 560px; }

.star-field {
  position: absolute;
  top: 14px;
  left: 18px;
  width: 150px;
  height: 116px;
  color: white;
  z-index: 1;
  pointer-events: none;
}
.star-field span { position: absolute; font-size: 24px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); }
.star-field span:nth-child(1) { left: 8px; top: 8px; }
.star-field span:nth-child(2) { left: 72px; top: 0; }
.star-field span:nth-child(3) { left: 32px; top: 56px; }
.star-field span:nth-child(4) { left: 112px; top: 48px; }

.topbar { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; margin-top: 74px; }
.topbar span { display: block; color: rgba(7,31,79,.62); font-size: 13px; margin-top: 2px; }
.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: white;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(7,31,79,.22);
}

.hero-copy { max-width: 560px; position: relative; z-index: 2; }
.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 900;
  color: var(--gold);
}
.hero-copy h1 {
  margin: 0;
  font-size: clamp(42px, 5.8vw, 78px);
  line-height: .88;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--navy);
  text-shadow: 0 2px 0 rgba(255,255,255,.8);
}
.hero-copy h1 span {
  display: block;
  color: var(--brand);
  font-size: .8em;
  letter-spacing: .02em;
}
.brush-copy {
  display: inline-block;
  margin: 16px 0 10px;
  padding: 9px 22px 11px;
  color: white !important;
  background: linear-gradient(90deg, #b11f31, var(--coral));
  font-weight: 900;
  font-size: 20px !important;
  border-radius: 8px;
  transform: rotate(-1deg);
  box-shadow: 0 12px 24px rgba(230,51,70,.22);
}
.hero-copy p:not(.eyebrow) {
  color: rgba(7,31,79,.7);
  font-size: 18px;
  line-height: 1.52;
  max-width: 480px;
}

.daily-card {
  width: min(360px, 100%);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 18px;
  padding: 18px;
  position: relative;
  z-index: 2;
  box-shadow: 0 24px 60px rgba(7,31,79,.22);
}
.daily-card span { color: var(--gold); font-weight: 900; font-size: 12px; text-transform: uppercase; }
.daily-card strong { display: block; margin-top: 6px; font-size: 22px; }
.daily-card p { margin: 8px 0 0; color: var(--muted); }

.global-scene {
  position: absolute;
  right: 22px;
  bottom: 94px;
  width: min(460px, 82%);
  height: 300px;
  z-index: 1;
  pointer-events: none;
}
.route-line {
  position: absolute;
  inset: 40px 0 auto auto;
  width: 72%;
  height: 160px;
  border-top: 3px dashed rgba(7,31,79,.35);
  border-radius: 50%;
  transform: rotate(-8deg);
}
.student-avatar {
  position: absolute;
  left: 18px;
  bottom: 0;
  width: 160px;
  height: 218px;
}
.avatar-face {
  position: absolute;
  left: 47px;
  top: 0;
  width: 76px;
  height: 82px;
  border-radius: 45% 45% 50% 50%;
  background: linear-gradient(#f2bf84, #d99058);
  box-shadow: inset -12px 0 0 rgba(94,42,26,.08);
}
.avatar-face::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -12px;
  width: 92px;
  height: 44px;
  border-radius: 48px 48px 20px 20px;
  background: #352114;
  transform: rotate(-8deg);
}
.avatar-body {
  position: absolute;
  left: 18px;
  top: 78px;
  width: 126px;
  height: 140px;
  border-radius: 36px 36px 18px 18px;
  background: linear-gradient(145deg, #0b4db3, #082a66);
  box-shadow: 0 22px 42px rgba(7,31,79,.26);
}
.passport {
  position: absolute;
  right: -12px;
  bottom: 30px;
  width: 70px;
  height: 92px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #0a275d;
  color: white;
  font-weight: 900;
  border: 3px solid rgba(255,255,255,.86);
  transform: rotate(-8deg);
}
.landmark {
  position: absolute;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  text-align: center;
  box-shadow: 0 16px 38px rgba(7,31,79,.18);
}
.landmark.london {
  left: 2px;
  bottom: 28px;
  width: 70px;
  height: 128px;
  background: linear-gradient(#d69d2f, #8d5b14);
  clip-path: polygon(42% 0, 58% 0, 58% 16%, 72% 16%, 72% 100%, 22% 100%, 22% 16%, 42% 16%);
}
.landmark.liberty {
  left: 188px;
  bottom: 18px;
  width: 72px;
  height: 150px;
  background: linear-gradient(#8fd8d1, #3f9f98);
  clip-path: polygon(50% 0, 62% 18%, 83% 10%, 72% 32%, 94% 42%, 68% 46%, 64% 100%, 32% 100%, 32% 46%, 6% 42%, 28% 32%, 17% 10%, 38% 18%);
}
.landmark.rio {
  right: 86px;
  bottom: 38px;
  width: 72px;
  height: 110px;
  border-radius: 42px 42px 12px 12px;
  background: linear-gradient(#f7f7ff, #b9c7e8);
  color: var(--navy);
}
.landmark.world {
  right: 0;
  bottom: 6px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 46%, rgba(255,255,255,.7) 47% 53%, transparent 54%),
    radial-gradient(circle, #1769d8 0 62%, #0b397f 63% 100%);
  border: 3px solid white;
}

.workspace {
  border-radius: 28px;
  padding: 18px;
  background: rgba(248,251,255,.94);
  backdrop-filter: blur(16px);
  min-height: 720px;
  display: flex;
  flex-direction: column;
}
.workspace-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 8px 6px 14px;
}
.workspace-header h2 { margin: 0; font-size: 28px; }
.install-btn, .send-btn, .share-link, .share-actions button, .visual-actions button, .repeat-form button, .voice-actions button {
  border: 0;
  background: linear-gradient(135deg, var(--brand), #073482);
  color: white;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.profile-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.profile-strip input, .profile-strip select, .chat-form input, .repeat-form input, .share-card textarea, #categoryFilter {
  width: 100%;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  border-radius: 14px;
  padding: 13px 14px;
  outline: none;
}

.demo-card {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid rgba(230,51,70,.18);
  border-radius: 22px;
  padding: 14px;
  background:
    radial-gradient(circle at 10% 12%, rgba(248,196,79,.2), transparent 34%),
    linear-gradient(135deg, #fff, #fff5f6);
  box-shadow: 0 18px 44px rgba(7,31,79,.08);
}
.demo-card h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.04;
}
.demo-card p:not(.eyebrow) {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.42;
}
.demo-card button {
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--coral), #a81327);
  color: white;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
}
.demo-visual {
  display: grid;
  place-items: center;
}
.phone-demo {
  width: 145px;
  height: 210px;
  border-radius: 28px;
  padding: 14px 10px;
  background: linear-gradient(180deg, #071f4f, #0b4db3);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.16), 0 18px 34px rgba(7,31,79,.2);
  color: white;
  position: relative;
  overflow: hidden;
}
.demo-avatar {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: white;
  color: var(--navy);
  font-weight: 900;
  margin: 0 auto 12px;
}
.demo-bubble {
  border-radius: 14px;
  padding: 8px 9px;
  font-size: 11px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.demo-bubble.one { background: rgba(255,255,255,.18); }
.demo-bubble.two { background: white; color: var(--navy); margin-left: 18px; }
.wave-bars {
  display: flex;
  gap: 4px;
  align-items: end;
  height: 42px;
  justify-content: center;
}
.wave-bars span {
  width: 8px;
  height: 14px;
  border-radius: 999px;
  background: var(--gold);
  animation: wave 1s infinite ease-in-out;
}
.wave-bars span:nth-child(2) { animation-delay: .08s; height: 24px; }
.wave-bars span:nth-child(3) { animation-delay: .16s; height: 34px; }
.wave-bars span:nth-child(4) { animation-delay: .24s; height: 22px; }
.wave-bars span:nth-child(5) { animation-delay: .32s; height: 16px; }
@keyframes wave {
  0%, 100% { transform: scaleY(.62); opacity: .65; }
  50% { transform: scaleY(1.18); opacity: 1; }
}
.demo-playing .demo-card {
  outline: 3px solid rgba(230,51,70,.22);
}

.guided-flow-card {
  margin-bottom: 12px;
  border: 1px solid rgba(7,31,79,.12);
  border-radius: 22px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(7,31,79,.98), rgba(11,77,179,.94));
  color: white;
  box-shadow: 0 18px 44px rgba(7,31,79,.16);
}
.guided-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.guided-header h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
}
.guided-header .eyebrow {
  color: var(--gold);
}
#guidedProgress {
  min-width: 54px;
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(255,255,255,.14);
  text-align: center;
  font-weight: 900;
}
.guided-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 14px 0 10px;
}
.guided-step {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 9px 8px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.84);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  text-align: left;
}
.guided-step span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
}
.guided-step.active {
  background: white;
  color: var(--navy);
}
.guided-step.done {
  background: rgba(32,177,90,.22);
  color: white;
}
.guided-step.done span {
  background: #20b15a;
}
.guided-action {
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  padding: 11px 13px;
  line-height: 1.38;
  color: rgba(255,255,255,.9);
}

.quickstart-card {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(22, 102, 217, .18);
  border-radius: 22px;
  padding: 16px;
  background:
    radial-gradient(circle at 12% 10%, rgba(230,51,70,.13), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(238,244,255,.96));
  box-shadow: 0 18px 44px rgba(7,31,79,.1);
}
.quickstart-copy h3 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.02;
  color: var(--navy);
}
.quickstart-copy p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
}
.quick-actions {
  display: grid;
  gap: 8px;
}
.quick-actions button {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
}
#quickVoiceBtn {
  background: linear-gradient(135deg, var(--coral), #a81327);
  color: white;
  box-shadow: 0 14px 30px rgba(230,51,70,.2);
}
#quickLessonBtn {
  background: var(--navy);
  color: white;
}
#quickShareBtn {
  background: white;
  color: var(--brand-dark);
  border: 1px solid var(--line);
}
.quick-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.quick-metrics article {
  border: 1px solid rgba(217,226,241,.9);
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  padding: 12px;
}
.quick-metrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.quick-metrics strong {
  display: block;
  margin-top: 4px;
  color: var(--brand-dark);
  font-size: 20px;
}
.daily-report {
  grid-column: 1 / -1;
  border-radius: 16px;
  border: 1px solid rgba(248,196,79,.5);
  background: #fff7e7;
  color: var(--ink);
  padding: 12px 14px;
  line-height: 1.42;
}
.daily-report strong, .daily-report span {
  display: block;
}
.daily-report strong {
  color: var(--navy);
  font-size: 17px;
}
.daily-report span {
  color: var(--brand);
  font-weight: 900;
  margin-top: 4px;
}
.daily-report p {
  margin: 8px 0 0;
}
.full-report {
  margin-bottom: 10px;
}

.pronunciation-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border-radius: 18px;
  border: 1px solid rgba(22,102,217,.18);
  background: rgba(255,255,255,.9);
  padding: 14px;
}
.pronunciation-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pronunciation-card strong {
  display: block;
  margin-top: 4px;
  color: var(--navy);
  font-size: 18px;
}
.pronunciation-card p {
  margin: 6px 0 0;
  color: var(--muted);
}
.pronunciation-actions {
  display: grid;
  gap: 8px;
}
.pronunciation-actions button {
  border: 0;
  border-radius: 12px;
  padding: 11px 13px;
  background: var(--navy);
  color: white;
  font-weight: 900;
  cursor: pointer;
}
#recordPronunciationBtn {
  background: linear-gradient(135deg, var(--brand), #073482);
}
.pronunciation-result {
  grid-column: 1 / -1;
  border-radius: 14px;
  background: var(--soft);
  color: var(--brand-dark);
  padding: 11px 13px;
  line-height: 1.38;
  font-weight: 800;
}

.tutor-card {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(217,226,241,.9);
  border-radius: 20px;
  padding: 14px;
  background: rgba(255,255,255,.9);
}
.tutor-card h3 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 21px;
  line-height: 1.08;
}
.tutor-card p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  line-height: 1.38;
}
.tutor-controls {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 8px;
}
.tutor-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tutor-controls select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--ink);
  border-radius: 14px;
  padding: 12px 13px;
  outline: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 800;
}
.personality-preview {
  grid-column: 1 / -1;
  border-radius: 14px;
  padding: 11px 13px;
  background: var(--soft);
  color: var(--brand-dark);
  line-height: 1.38;
  font-weight: 800;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  background: var(--soft);
  border-radius: 16px;
}
.tab {
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 11px 8px;
  font-weight: 900;
  color: var(--muted);
  cursor: pointer;
}
.tab.active { background: white; color: var(--brand-dark); box-shadow: 0 8px 24px rgba(20, 33, 27, .08); }

.tab-panel { display: none; min-height: 0; flex: 1; padding-top: 12px; }
.tab-panel.active { display: flex; flex-direction: column; }

.messages {
  flex: 1;
  min-height: 260px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 4px;
}

.onboarding-card {
  border: 1px solid rgba(22, 102, 217, .18);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(238,244,255,.96)),
    radial-gradient(circle at 10% 10%, rgba(230,51,70,.12), transparent 30%);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 18px 44px rgba(7,31,79,.1);
}
.onboarding-card.completed {
  border-color: rgba(32, 177, 90, .26);
}
.onboarding-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.05;
  color: var(--navy);
}
.onboarding-card p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.42;
}
.onboarding-card textarea {
  width: 100%;
  min-height: 110px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  border-radius: 16px;
  padding: 13px 14px;
  resize: vertical;
  outline: none;
}
.onboarding-options {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 8px;
}
.onboarding-options select {
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
}
.onboarding-options button {
  border: 0;
  background: linear-gradient(135deg, var(--coral), #a81327);
  color: white;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
}
.assessment-box {
  margin-top: 10px;
  border-radius: 16px;
  padding: 12px 14px;
  background: #fff7e7;
  color: var(--navy);
  border: 1px solid rgba(248,196,79,.5);
}
.assessment-box strong, .assessment-box span, .assessment-box small {
  display: block;
}
.assessment-box span { margin-top: 4px; font-weight: 800; color: var(--brand); }
.assessment-box p { margin: 8px 0 4px; color: var(--ink); }
.assessment-box small { color: var(--muted); line-height: 1.35; }
.msg {
  max-width: 86%;
  border-radius: 18px;
  padding: 13px 15px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.msg.assistant { align-self: flex-start; background: white; border: 1px solid var(--line); }
.msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--navy), var(--brand)); color: white; }
.msg small { display: block; color: var(--muted); margin-top: 6px; }

.chat-form {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.icon-btn {
  border: 1px solid var(--line);
  background: white;
  border-radius: 14px;
  font-size: 20px;
  cursor: pointer;
}

.mode-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 12px; }
.mode-heading h3 { margin: 0; font-size: 24px; }
.visual-card {
  flex: 1;
  min-height: 340px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: white;
  overflow: hidden;
}
.visual-card img { width: min(100%, 640px); height: auto; display: block; }
.visual-card .word-line { text-align: center; padding: 14px; }
.visual-card strong { font-size: 34px; }
.visual-card span { color: var(--muted); display: block; margin-top: 4px; }
.visual-actions, .repeat-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.repeat-form { grid-template-columns: 1fr auto; }
.feedback {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--soft);
  color: var(--brand-dark);
  min-height: 46px;
}

.progress-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.progress-grid article, .share-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}

.lesson-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}
.lesson-card .mode-heading button, .wide-btn, .checkout-form button, #loadAdminBtn {
  border: 0;
  background: var(--brand-dark);
  color: white;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
}
.lesson-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.lesson-step {
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 16px;
  padding: 14px;
}
.lesson-step p { color: var(--muted); line-height: 1.45; }
.lesson-step img { width: 100%; border-radius: 14px; background: white; margin: 6px 0; }
.lesson-step button {
  border: 0;
  background: white;
  color: var(--brand-dark);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
}
.plans-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.plan-card {
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 16px;
  padding: 14px;
}
.plan-card strong, .plan-card span { display: block; }
.plan-card span { color: var(--brand); font-weight: 900; margin-top: 6px; }
.plan-card p { color: var(--muted); line-height: 1.4; }
.checkout-form {
  display: grid;
  grid-template-columns: 1fr 180px auto;
  gap: 8px;
}
.checkout-form input, .checkout-form select, #adminToken {
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  border-radius: 14px;
  padding: 13px 14px;
  outline: none;
  width: 100%;
}
.students-table {
  margin-top: 12px;
  overflow: auto;
}
.students-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}
.students-table th, .students-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}
.students-table small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}
.progress-grid span { display: block; font-weight: 900; margin-bottom: 10px; }
.pill {
  display: inline-flex;
  margin: 0 6px 6px 0;
  padding: 8px 10px;
  background: var(--soft);
  color: var(--brand-dark);
  border-radius: 999px;
  font-size: 13px;
}
.share-card { margin-top: 16px; }
.share-card h3 { font-size: 30px; margin: 0 0 8px; }
.share-card textarea { min-height: 130px; resize: vertical; margin: 12px 0; }
.share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.share-link { display: inline-block; background: #20b15a; }
.share-actions button { background: linear-gradient(135deg, var(--coral), #a81327); }

.voice-card {
  flex: 1;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  border: 1px solid rgba(22, 102, 217, .18);
  border-radius: 24px;
  padding: 24px;
  background:
    radial-gradient(circle at 12% 12%, rgba(230,51,70,.13), transparent 30%),
    radial-gradient(circle at 86% 14%, rgba(22,102,217,.14), transparent 32%),
    linear-gradient(145deg, #fff, #eef4ff);
  box-shadow: 0 20px 50px rgba(7,31,79,.12);
}
.voice-card h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
}
.voice-card p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  line-height: 1.52;
}
.voice-status {
  width: fit-content;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--line);
  color: var(--brand-dark);
  font-weight: 900;
}
.voice-status[data-mode="working"] { color: var(--brand); border-color: rgba(22,102,217,.32); }
.voice-status[data-mode="connected"] { color: #08723a; border-color: rgba(32,177,90,.36); }
.voice-status[data-mode="error"] { color: #a81327; border-color: rgba(230,51,70,.42); }
.voice-actions {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 10px;
  max-width: 620px;
}
.voice-actions button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
#stopRealtimeBtn {
  background: white;
  color: var(--brand-dark);
  border: 1px solid var(--line);
}
.realtime-log {
  min-height: 110px;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.8);
  color: var(--muted);
  padding: 14px;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .app-shell { width: 100%; max-width: 100vw; min-height: 100vh; margin: 0; grid-template-columns: minmax(0, 1fr); gap: 0; overflow-x: hidden; }
  .hero-panel {
    width: 100%;
    max-width: 100vw;
    min-height: 560px;
    border-radius: 0 0 28px 28px;
    padding: 22px 18px;
  }
  .flag-ribbon { left: -94px; top: -28px; transform: rotate(-12deg) scale(.82); }
  .star-field { transform: scale(.78); transform-origin: top left; }
  .topbar { margin-top: 58px; }
  .hero-copy { margin-top: 8px; }
  .hero-copy h1 { font-size: 45px; line-height: .9; }
  .hero-copy p:not(.eyebrow) { font-size: 16px; }
  .brush-copy { font-size: 17px !important; padding: 8px 16px 10px; }
  .global-scene {
    right: -18px;
    bottom: 100px;
    width: 370px;
    height: 220px;
    transform: scale(.78);
    transform-origin: bottom right;
  }
  .daily-card { width: 100%; }
  .workspace {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    min-height: auto;
    border-radius: 24px 24px 0 0;
    margin-top: -22px;
    padding: 14px;
  }
  .workspace-header, .profile-strip, .tabs { position: relative; z-index: 2; }
  .tab-panel.active { display: block; }
  .tab-panel { width: 100%; max-width: 100%; padding-bottom: 36px; overflow-x: hidden; }
  .lesson-card, .share-card, .progress-grid article { width: 100%; max-width: 100%; position: relative; z-index: 3; overflow-x: hidden; }
  .profile-strip, .quickstart-card, .quick-metrics, .tutor-card, .tutor-controls, .demo-card, .pronunciation-card { grid-template-columns: 1fr; }
  .demo-visual { display: none; }
  .guided-header { flex-direction: column; }
  .guided-steps { grid-template-columns: 1fr; }
  .quickstart-copy h3 { font-size: 23px; }
  .workspace-header h2 { font-size: 23px; }
  .tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tab { font-size: 13px; padding: 10px 4px; }
  .messages { min-height: 330px; }
  .chat-form { grid-template-columns: 44px 1fr; }
  .send-btn { grid-column: 1 / -1; }
  .mode-heading { align-items: stretch; flex-direction: column; }
  .visual-actions, .repeat-form, .share-actions, .onboarding-options { grid-template-columns: 1fr; }
  .lesson-steps, .plans-list, .checkout-form { grid-template-columns: 1fr; }
  .voice-card { min-height: 360px; padding: 18px; }
  .voice-actions { grid-template-columns: 1fr; max-width: 100%; }
  .students-table { width: 100%; max-width: 100%; overflow-x: auto; }
  .students-table table { min-width: 520px; }
}

/* ============ TIPOGRAFIA ============ */
body, p, span, a, button, input, textarea, select, label, li {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1, h2, h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
}
h1 {
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 0.98;
}
h2, h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.18;
}
.hero-copy h1 {
  text-transform: none;
  letter-spacing: -0.015em;
}
.hero-copy h1 span {
  letter-spacing: -0.01em;
}

/* ============ CONTRASTE DOS ROTULOS ============ */
.eyebrow {
  color: #8a5a00;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
}
.hero-panel .eyebrow,
.guided-flow-card .eyebrow {
  color: #f8c44f;
}

/* ============ FIX: barra de abas estava estourando ============ */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  overflow: visible;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.06);
  background: rgba(15,23,42,.04);
}
.tabs .tab {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.tabs .tab:not(.active):hover {
  background: rgba(15,23,42,.07);
}
.tabs .tab.active {
  box-shadow: 0 2px 8px rgba(15,23,42,.12);
}

/* ============ FIX: vao vazio enorme na coluna esquerda ============ */
.hero-panel.poster-hero {
  justify-content: flex-start;
  gap: 40px;
}
.hero-panel .hero-copy {
  margin-top: 24px;
}
.hero-panel .global-scene {
  margin-top: auto;
}

/* ============ RESPIRO E CONSISTENCIA DOS CARDS ============ */
.demo-card, .guided-flow-card, .quickstart-card {
  margin-bottom: 18px;
  border-radius: 20px;
  box-shadow: 0 8px 24px -12px rgba(15,23,42,.18);
}
.daily-card.pop-card {
  border-radius: 18px;
  box-shadow: 0 10px 30px -14px rgba(15,23,42,.30);
}

/* ============ HOVER SUAVE NOS BOTOES ============ */
button {
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
button:hover {
  filter: brightness(1.04);
}

@media (max-width: 860px) {
  .tabs {
    display: flex;
    flex-wrap: wrap;
  }
  .tabs .tab {
    font-size: 13px;
    padding: 8px 10px;
  }
  .hero-copy h1 {
    font-size: 42px;
    line-height: 1;
  }
}

/* ============ APP MOBILE-FIRST: abrir = conversar ============ */
.bottom-nav {
  display: none;
}

@media (display-mode: standalone), (max-width: 860px) {
  body {
    background: #f8fbff;
  }
  .app-shell {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    display: block;
  }
  .hero-panel.poster-hero,
  .demo-card,
  .guided-flow-card,
  .quickstart-card {
    display: none;
  }
  .workspace {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(96px + env(safe-area-inset-bottom));
    background: #f8fbff;
  }
  .workspace-header {
    padding: 6px 2px 10px;
  }
  .workspace-header .eyebrow {
    display: none;
  }
  .workspace-header h2 {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .tabs {
    display: none;
  }
  .tab-panel {
    padding-top: 0;
    padding-bottom: 120px;
  }
  .tab-panel.active {
    display: block;
  }
  #chatPanel.active {
    min-height: calc(100dvh - 170px);
  }
  .onboarding-card {
    display: none;
  }
  .messages {
    min-height: calc(100dvh - 220px);
    padding: 4px 0 128px;
  }
  .msg {
    max-width: 92%;
    border-radius: 18px;
    font-size: 15px;
  }
  .chat-form {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(104px + env(safe-area-inset-bottom));
    z-index: 50;
    display: grid;
    grid-template-columns: 48px 1fr 72px;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 44px rgba(15,23,42,.16);
  }
  .chat-form input {
    min-height: 46px;
    border-radius: 14px;
  }
  .chat-form .icon-btn,
  .chat-form .send-btn {
    min-height: 46px;
    border-radius: 14px;
  }
  .send-btn {
    grid-column: auto;
    padding: 0 12px;
  }
  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr 72px 1fr 1fr;
    align-items: end;
    gap: 4px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(15,23,42,.08);
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(16px);
    box-shadow: 0 -10px 34px rgba(15,23,42,.12);
  }
  .bottom-nav button {
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }
  .bottom-nav-item.active {
    color: var(--brand-dark);
    background: var(--soft);
  }
  .bottom-nav-voice {
    width: 66px;
    height: 66px;
    min-height: 66px;
    margin: -24px auto 0;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--coral), #a81327) !important;
    color: white !important;
    font-size: 25px !important;
    box-shadow: 0 14px 34px rgba(230,51,70,.35);
  }
  .daily-report.is-empty,
  .pronunciation-card.is-empty {
    display: none;
  }
  .lesson-steps {
    display: block;
  }
  .lesson-step {
    display: none;
  }
  .lesson-step:first-child {
    display: block;
  }
  .lesson-card, .share-card, .progress-grid article, .voice-card {
    border-radius: 20px;
  }
  .profile-card .profile-strip {
    display: grid;
    grid-template-columns: 1fr;
  }
  .profile-card .tutor-card {
    margin-top: 12px;
  }
}

/* ============ POLIMENTO PWA: visual mais pop e nativo ============ */
.app-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  border: 1px solid rgba(11, 77, 179, .14);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .78);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 30px rgba(7, 31, 79, .08);
}

.app-status-pill span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 6px rgba(22, 163, 74, .14);
}

.bottom-nav-item {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
}

.bottom-nav-item span {
  display: block;
  font-size: 17px;
  line-height: 1;
}

@media (display-mode: standalone), (max-width: 860px) {
  html {
    background: #f5f8ff;
  }

  body {
    background:
      radial-gradient(circle at 20% -10%, rgba(248, 196, 79, .26), transparent 30%),
      radial-gradient(circle at 100% 0%, rgba(11, 77, 179, .16), transparent 34%),
      linear-gradient(180deg, #f7faff 0%, #eef5ff 52%, #f9fbff 100%);
    color: var(--ink);
  }

  .workspace {
    background: transparent;
    overflow-x: hidden;
  }

  .workspace-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    margin: 0 -2px 10px;
    padding: 10px 10px 12px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(239,246,255,.78));
    box-shadow: 0 18px 42px rgba(7, 31, 79, .10);
    backdrop-filter: blur(18px);
  }

  .workspace-header h2 {
    color: #051a42;
    font-weight: 950;
  }

  .install-btn {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 4px;
    border-radius: 999px;
  }

  .app-status-pill {
    padding: 7px 10px;
    font-size: 11px;
    background: rgba(255,255,255,.9);
  }

  .messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 162px;
  }

  .msg {
    position: relative;
    line-height: 1.45;
    letter-spacing: 0;
  }

  .msg.assistant {
    border: 1px solid rgba(11, 77, 179, .10);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    color: #10233f;
    box-shadow: 0 12px 26px rgba(7, 31, 79, .08);
  }

  .msg.user {
    align-self: flex-end;
    border: 1px solid rgba(255, 255, 255, .22);
    background: linear-gradient(135deg, #071f4f, #0b4db3 72%, #1666d9);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(11, 77, 179, .24);
  }

  .msg strong {
    color: inherit;
  }

  .chat-form {
    border-color: rgba(11, 77, 179, .13);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,255,.96));
    box-shadow: 0 20px 54px rgba(7, 31, 79, .20);
  }

  .chat-form input {
    border-color: rgba(11, 77, 179, .10);
    background: #ffffff;
    color: #061b49;
    font-weight: 700;
  }

  .chat-form input::placeholder {
    color: #71809a;
    font-weight: 700;
  }

  .chat-form .icon-btn {
    background: #eef5ff;
    color: var(--brand-dark);
  }

  .chat-form .send-btn {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(11, 77, 179, .24);
  }

  .bottom-nav {
    border-top-color: rgba(11, 77, 179, .10);
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(243,248,255,.98));
    box-shadow: 0 -18px 46px rgba(7, 31, 79, .16);
  }

  .bottom-nav button {
    color: #66748b;
  }

  .bottom-nav-item.active {
    color: #061b49;
    background: linear-gradient(180deg, #ffffff, #edf5ff);
    box-shadow: inset 0 0 0 1px rgba(11, 77, 179, .09), 0 8px 18px rgba(7, 31, 79, .08);
  }

  .bottom-nav-item.active span {
    transform: translateY(-1px);
  }

  .bottom-nav-voice {
    background: linear-gradient(135deg, #e63346, #b9182b 52%, #7d1022) !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 16px 38px rgba(230, 51, 70, .38), 0 0 0 6px rgba(230, 51, 70, .08);
  }

  .voice-card,
  .lesson-card,
  .share-card,
  .profile-card,
  .progress-grid article,
  .pronunciation-card,
  .daily-report {
    border: 1px solid rgba(11, 77, 179, .10);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,255,.94));
    box-shadow: 0 16px 38px rgba(7, 31, 79, .10);
  }

  .voice-card h3,
  .lesson-card h3,
  .share-card h3,
  .profile-card h3,
  .daily-report h3,
  .pronunciation-card h3 {
    color: #051a42;
    letter-spacing: 0;
  }

  .voice-status {
    border: 1px solid rgba(11, 77, 179, .10);
    border-radius: 18px;
    padding: 12px;
    background: #f3f7ff;
    color: #243858;
    font-weight: 800;
  }

  .primary-action,
  .voice-action,
  .share-btn {
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    box-shadow: 0 12px 28px rgba(11, 77, 179, .22);
  }

  .lesson-step {
    border-color: rgba(11, 77, 179, .10);
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(7, 31, 79, .07);
  }

  .profile-card select,
  .profile-card input,
  .profile-card textarea {
    border-color: rgba(11, 77, 179, .12);
    background: #ffffff;
    color: #071f4f;
    font-weight: 750;
  }
}