:root {
  --navy:#0e2a47; --navy2:#173e68; --blue:#2f6fed; --blue-soft:#eaf1ff;
  --orange:#ff6a2b; --orange-soft:#fff0e9; --ink:#152334; --muted:#6e7b8b;
  --line:#dce4ee; --surface:#fff; --bg:#f4f7fb; --success:#16875b; --danger:#c53e3e;
  --shadow:0 14px 40px rgba(14,42,71,.12); --radius-xl:28px; --radius-lg:20px; --radius-md:14px;
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,textarea,select{font:inherit} button{cursor:pointer}
.app-shell{width:min(100%,560px);min-height:100vh;margin:0 auto;background:var(--surface);box-shadow:var(--shadow);position:relative;overflow-x:hidden}
.screen{min-height:100vh;padding:22px 18px 104px}.hidden{display:none!important}.stack{display:grid;gap:12px}.full{width:100%}
.primary,.secondary,.ghost,.danger-btn{border:0;border-radius:16px;padding:15px 18px;font-weight:850}
.primary{background:var(--orange);color:#fff;box-shadow:0 10px 24px rgba(255,106,43,.28)}
.secondary{background:var(--blue);color:#fff}.ghost{background:#fff;color:var(--blue);border:1px solid var(--line)}
.danger-btn{background:#fff;color:var(--danger);border:1px solid #f0c9c9}.small{font-size:13px;color:var(--muted)}
.hero{min-height:100vh;padding:30px 24px;color:#fff;background:radial-gradient(circle at 80% 8%,rgba(255,106,43,.55),transparent 30%),linear-gradient(145deg,var(--navy),#1e4d86 62%,var(--blue));display:flex;flex-direction:column;justify-content:space-between}
.logo{font-size:31px;font-weight:900;letter-spacing:-.9px}.logo-dot{color:var(--orange)}
.hero-copy h1{font-size:clamp(42px,10vw,60px);line-height:.98;margin:0 0 16px;letter-spacing:-2px}.hero-copy p{color:rgba(255,255,255,.84);font-size:18px;line-height:1.5;margin:0}
.hero-tagline{margin-top:15px;padding:12px 14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);border-radius:14px;text-align:center;font-weight:800;color:#fff}
.hero-faces{display:flex;align-items:center;justify-content:center;margin:22px 0}.hero-faces .avatar{margin-left:-10px;border:4px solid rgba(255,255,255,.92)}.hero-faces .avatar:first-child{margin-left:0}
.card{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;padding:17px;box-shadow:0 7px 20px rgba(14,42,71,.05)}
.section-title{margin:7px 0 5px;font-size:29px;letter-spacing:-.7px}.section-subtitle{margin:0 0 20px;color:var(--muted);line-height:1.48}
.avatar{border-radius:50%;overflow:hidden;background:var(--blue-soft);box-shadow:0 8px 20px rgba(14,42,71,.17);flex:0 0 auto;display:grid;place-items:center}.avatar img{width:100%;height:100%;object-fit:contain;object-position:center center;display:block}
.avatar-tiny{width:36px;height:36px}.avatar-small{width:66px;height:66px}.avatar-medium{width:92px;height:92px}.avatar-launch{width:92px;height:92px}.avatar-large{width:136px;height:136px}
.onboarding-progress{height:7px;background:#e6edf5;border-radius:99px;overflow:hidden;margin:10px 0 25px}.onboarding-progress div{height:100%;background:linear-gradient(90deg,var(--blue),var(--orange));transition:.2s}
.choice-grid{display:grid;gap:11px}.choice{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff;text-align:left;font-weight:750;color:var(--ink)}.choice.selected{border-color:var(--blue);background:var(--blue-soft);color:var(--navy)}
.language-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.language-choice{text-align:center}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.topbar h1{margin:0;font-size:26px}.pill{padding:8px 11px;border-radius:999px;font-size:13px;font-weight:850;background:var(--orange-soft);color:#a83c0f}
.home-hero{background:linear-gradient(145deg,var(--navy),var(--navy2));color:#fff;border-radius:26px;padding:20px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}.home-hero h2{margin:0 0 7px;font-size:25px}.home-hero p{margin:0;color:rgba(255,255,255,.75);line-height:1.45}
.quick-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:13px 0}.stat{text-align:center}.stat strong{display:block;font-size:24px;color:var(--navy)}.stat span{font-size:12px;color:var(--muted)}
.daily-goal{display:flex;justify-content:space-between;align-items:center;gap:15px}.progress-ring{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--orange) var(--progress),#e9eef5 0);position:relative}.progress-ring:after{content:"";position:absolute;inset:7px;background:#fff;border-radius:50%}.progress-ring strong{position:relative;z-index:1;font-size:14px}
.tutor-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:5px;scrollbar-width:none}.tutor-strip::-webkit-scrollbar{display:none}.tutor-mini{min-width:145px;text-align:center}.tutor-mini .avatar{margin:0 auto 9px}.tutor-mini strong{display:block}
.suggested-card{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center}.suggested-card h3{margin:0 0 4px}.chev{font-size:28px;color:var(--blue)}
.topic-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}.topic-row::-webkit-scrollbar{display:none}.topic{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 13px;font-weight:750;color:var(--ink)}
.call-card{border-radius:var(--radius-xl);color:#fff;background:linear-gradient(145deg,var(--navy),#225a98);padding:22px;text-align:center;position:relative;overflow:hidden}.call-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.05);top:-85px;right:-75px}
.call-avatar-wrap{width:176px;height:176px;margin:4px auto 15px;border-radius:50%;display:grid;place-items:center;border:10px solid rgba(255,255,255,.10);transition:.2s;background:rgba(255,255,255,.03)}.call-avatar-wrap.listening{border-color:rgba(255,106,43,.7);transform:scale(1.03)}.call-avatar-wrap.thinking{border-color:rgba(96,159,255,.7)}.call-avatar-wrap.speaking{border-color:rgba(86,220,168,.7)}
.timer{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:31px;font-weight:850}.status{margin:5px 0 18px;color:rgba(255,255,255,.78)}
.mic{width:74px;height:74px;border-radius:50%;border:0;background:var(--orange);color:#fff;font-size:28px;box-shadow:0 0 0 12px rgba(255,106,43,.16)}
.done-speaking{margin:18px auto 0;border:1px solid rgba(255,255,255,.55);background:#fff;color:var(--navy);border-radius:16px;padding:12px 18px;font-weight:900;min-width:210px}.done-speaking .bi-primary,.done-speaking .bi-secondary{display:block}.done-speaking .bi-secondary{font-size:12px;color:var(--muted);margin-top:2px}.mic.active{animation:pulse 1.2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 25px rgba(255,106,43,0)}}
.call-controls{display:flex;justify-content:center;gap:10px;margin-top:16px}.round-control{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.11);color:#fff;font-size:19px}
.chat{margin-top:15px;display:grid;gap:11px;max-height:360px;overflow-y:auto}.bubble-row{display:flex;align-items:flex-end;gap:8px}.assistant-row{justify-content:flex-start}.user-row{justify-content:flex-end}.bubble{max-width:84%;padding:12px 14px;border-radius:16px;line-height:1.45;white-space:pre-wrap}.bubble.user{color:#fff;background:var(--blue);border-bottom-right-radius:5px}.bubble.assistant{background:var(--blue-soft);border-bottom-left-radius:5px}
.composer{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}.composer textarea{min-height:48px;max-height:100px;resize:vertical;border:1px solid var(--line);border-radius:14px;padding:12px}.icon-btn{width:48px;border:0;border-radius:14px;background:var(--blue);color:#fff;font-weight:900}
.tutor-grid{display:grid;gap:12px}.tutor-card-wrap{display:grid;gap:9px}.tutor-card-main{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;text-align:left;width:100%;border:0;background:transparent;padding:0;color:inherit}.tutor-name{font-weight:900;font-size:18px}.tutor-meta{color:var(--muted);font-size:13px;margin-top:4px;line-height:1.38}.mini-ghost{border:1px solid rgba(47,111,237,.15);background:#f7faff;color:var(--blue);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;justify-self:start}
.bottom-nav{position:fixed;z-index:20;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,560px);padding:9px 8px max(9px,env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr)}.nav-btn{border:0;background:transparent;color:var(--muted);padding:7px 2px;border-radius:12px;font-size:11px;font-weight:850}.nav-btn span{display:block;font-size:19px;margin-bottom:2px}.nav-btn.active{color:var(--blue);background:var(--blue-soft)}
.word-list{display:grid;gap:10px}.word strong{font-size:17px}.word p{margin:5px 0;color:var(--muted);line-height:1.4}.word em{color:var(--ink)}
.form-group{display:grid;gap:7px;margin-bottom:14px}.form-group label{font-weight:800}.form-group input,.form-group select{border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff}
.notice{padding:13px;background:#fff8dc;border:1px solid #f0dc8d;border-radius:14px;color:#6c5715;font-size:14px;line-height:1.45}
.summary-card{background:linear-gradient(180deg,#fff,#f8fbff)}.summary-list{display:grid;gap:10px;margin:15px 0}.summary-item{display:flex;gap:10px;align-items:flex-start}.summary-icon{width:30px;height:30px;border-radius:50%;background:var(--blue-soft);display:grid;place-items:center;flex:0 0 auto}
.plan-card{border:2px solid var(--blue);position:relative}.plan-badge{position:absolute;top:-12px;right:16px;background:var(--orange);color:#fff;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}.price{font-size:36px;font-weight:950;color:var(--navy)}.price small{font-size:14px;color:var(--muted);font-weight:700}.feature-list{display:grid;gap:10px;margin:16px 0}.feature{display:flex;gap:9px;align-items:flex-start}.feature:before{content:"✓";color:var(--success);font-weight:900}
.legal-links{display:flex;gap:14px;flex-wrap:wrap}.legal-link{border:0;background:transparent;color:var(--blue);padding:0;text-decoration:underline}.modal-backdrop{position:fixed;z-index:100;inset:0;background:rgba(10,24,40,.55);display:grid;place-items:end center}.modal{width:min(100%,560px);max-height:85vh;overflow-y:auto;background:#fff;border-radius:26px 26px 0 0;padding:22px}.modal h2{margin-top:0}
@media(min-width:720px){body{padding:26px 0}.app-shell,.hero,.screen{min-height:calc(100vh - 52px)}.app-shell{border-radius:30px;overflow:hidden}}

.call-avatar-wrap.speaking { border-color: rgba(87,181,255,.72); }
.call-avatar-wrap.explaining { border-color: rgba(255,196,83,.72); }
.call-avatar-wrap.encouraging, .call-avatar-wrap.celebrating { border-color: rgba(74,216,150,.72); }
.call-avatar-wrap.gently_correcting { border-color: rgba(255,160,120,.78); }

.speech-mode{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 auto 14px;max-width:330px;background:rgba(255,255,255,.09);padding:5px;border-radius:14px}.speech-mode-btn{border:0;border-radius:10px;padding:10px 8px;background:transparent;color:rgba(255,255,255,.72);font-size:12px;font-weight:800}.speech-mode-btn.active{background:white;color:var(--navy);box-shadow:0 5px 14px rgba(0,0,0,.12)}.form-group select{border:1px solid var(--line);border-radius:14px;padding:13px;background:white;width:100%}

.language-grid{max-height:330px;overflow-y:auto;padding-right:3px}.hidden{display:none!important}

.home-purpose {
  margin: -4px 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.lesson-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 22px;
  font-weight: 900;
  flex: 0 0 auto;
}

.trial-terms{margin-top:14px;padding:12px 13px;border-radius:14px;background:#f7faff;border:1px solid #dce8ff;color:#35455a;font-size:13px;line-height:1.5}.trial-terms strong{color:var(--navy)}

/* Bilingual interface labels: native language first, English beneath */
.bi-primary,.bi-secondary{display:block;line-height:1.12;text-align:center}
.bi-primary{font-weight:850}
.bi-secondary{font-size:.68em;font-weight:650;opacity:.68;margin-top:3px;letter-spacing:.01em}
.language-choice .bi-primary{font-size:15px}
.language-choice .bi-secondary{font-size:11px}
.nav-btn .bi-primary{font-size:10px}
.nav-btn .bi-secondary{font-size:8px;margin-top:1px}
.nav-btn .nav-icon{display:block;font-size:19px;margin-bottom:2px}
.primary .bi-secondary,.secondary .bi-secondary{opacity:.72}
.speech-mode-btn .bi-primary{font-size:12px}
.speech-mode-btn .bi-secondary{font-size:9px}
.ghost .bi-primary,.mini-ghost .bi-primary{font-size:inherit}

/* Mandatory account and subscription gate */
.access-gate{padding-bottom:34px}.gate-faces{display:flex;justify-content:center;gap:10px;margin:18px 0 22px}.gate-faces .avatar{border:3px solid #fff}.consent-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;margin:16px 0;font-size:13px;line-height:1.45;color:var(--ink)}.consent-row input{margin-top:3px;width:18px;height:18px}.gate-note{font-size:12px;line-height:1.5;color:var(--muted);background:#f7faff;border:1px solid #dce8ff;border-radius:14px;padding:11px 12px}.account-card{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.status-badge{font-size:11px;font-weight:900;letter-spacing:.06em;padding:7px 9px;border-radius:999px;background:#e8f8ef;color:#177245}

.beta-badge{display:inline-block;margin-left:8px;padding:3px 7px;border-radius:999px;background:var(--orange,#f28c28);color:#fff;font-size:10px;font-weight:900;letter-spacing:.12em;vertical-align:middle}

.tutor-mini .avatar-medium{width:96px;height:96px}
.home-hero .avatar-large{box-shadow:0 12px 28px rgba(5,18,34,.25)}

.status{white-space:pre-line}
.status::first-line{font-weight:700}

/* v28.0: clear, itemized session vocabulary */
.summary-phrases{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 5px}.summary-phrases span{display:inline-block;background:var(--blue-soft);color:var(--navy);border:1px solid #d8e7ff;border-radius:999px;padding:5px 9px;font-size:13px;font-weight:800}