*{
  box-sizing:border-box;
}

body{
  margin:0;
  background:#f4f7fb;
  color:#101828;
  font-family:system-ui,sans-serif;
}

.hidden{
  display:none !important;
}

.app{
  min-height:100vh;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
}

.brand{
  font-size:20px;
  font-weight:800;
}

.stats{
  display:flex;
  gap:12px;
}

.stat{
  font-size:14px;
  font-weight:700;
}

.screen{
  width:100%;
  max-width:680px;
  margin:0 auto;
  padding:24px 16px 120px;
}

.card{
  background:#fff;
  border-radius:20px;
  padding:24px;
  border:1px solid #e5e7eb;
}

.badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:800;
  margin-bottom:16px;
}

h1,h2{
  margin-top:0;
}

.hint{
  color:#667085;
  margin-bottom:18px;
}

.answerInput{
  width:100%;
  min-height:54px;
  border:1px solid #d0d5dd;
  border-radius:14px;
  padding:14px;
  font-size:16px;
}

.choices{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}

.choiceBtn{
  border:0;
  border-radius:14px;
  padding:12px 16px;
  background:#eef2ff;
  color:#1d4ed8;
  font-weight:700;
  cursor:pointer;
}

.feedback{
  margin-top:16px;
  padding:14px;
  border-radius:14px;
  background:#f8fafc;
}

.primaryBtn{
  width:100%;
  min-height:54px;
  border:0;
  border-radius:16px;
  background:#2563eb;
  color:#fff;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
}

.actionBar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:16px;
  background:#fff;
  border-top:1px solid #e5e7eb;
}

@media(max-width:640px){

  .screen{
    padding:16px 12px 110px;
  }

  .card{
    padding:18px;
  }

}

#question{
  line-height:1.3;
}


.cinematicComplete{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:12px;
}

.completeHero{
  font-size:14px;
  font-weight:700;
  color:#5b6bff;
  background:#eef1ff;
  padding:10px 14px;
  border-radius:999px;
  width:fit-content;
}

.completeTitle{
  font-size:42px;
  font-weight:800;
  line-height:1.1;
  color:#111827;
}

.aiRecapBox,
.mentorBox,
.graduationBox{
  background:#ffffff;
  border-radius:24px;
  padding:20px;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.08);
  border:1px solid #ececec;
  font-size:18px;
  line-height:1.6;
  color:#1f2937;
}

.aiRecapBox{
  border-left:6px solid #4f46e5;
}

.mentorBox{
  border-left:6px solid #10b981;
}

.graduationBox{
  border-left:6px solid #f59e0b;
}

.aiLabel{
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:12px;
  opacity:.7;
}

#question{
  width:100%;
}

#hint{
  margin-top:14px;
}


.completeTitle{
  font-size:28px !important;
  margin-bottom:8px;
}

.cinematicComplete{
  gap:12px !important;
}

.aiRecapBox,
.mentorBox,
.graduationBox{
  border-radius:28px;
  padding:18px;
  font-size:16px;
  line-height:1.45;
  transform:translateY(0);
  transition:.25s ease;
}

.aiRecapBox:active,
.mentorBox:active,
.graduationBox:active{
  transform:scale(.98);
}

#actionBtn{
  border-radius:24px !important;
  font-size:22px !important;
  font-weight:800 !important;
  box-shadow:
    0 10px 30px rgba(59,130,246,.35);
}

.completeHero{
  animation:pulseGlow 2s infinite;
}

@keyframes pulseGlow{
  0%{
    transform:scale(1);
    opacity:1;
  }
  50%{
    transform:scale(1.04);
    opacity:.9;
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}


/* ===============================
   Studeto task differentiation v1
   =============================== */

.lessonScreen{
  transition:background .25s ease;
}

.taskShell{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.taskKicker{
  width:fit-content;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
}

.taskQuestion{
  font-size:30px;
  line-height:1.18;
  font-weight:900;
}

.taskMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:#667085;
  font-size:13px;
  font-weight:700;
}

.taskMeta span{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  padding:6px 10px;
  border-radius:999px;
}

/* Fill gap = worksheet / calm */
.task-fill_gap .card{
  background:linear-gradient(180deg,#ffffff,#f8fafc);
}

.task-fill_gap .taskKicker{
  background:#ecfeff;
  color:#0369a1;
}

.task-fill_gap .taskQuestion{
  padding:18px;
  border-radius:18px;
  background:#f8fafc;
  border:2px dashed #bae6fd;
}

/* Choice = arcade buttons */
.task-choice .card{
  background:linear-gradient(180deg,#fff,#eef2ff);
}

.task-choice .taskKicker{
  background:#e0e7ff;
  color:#3730a3;
}

.task-choice .choices{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.task-choice .choiceBtn{
  width:100%;
  min-height:58px;
  border-radius:20px;
  font-size:18px;
  background:#2563eb;
  color:white;
  box-shadow:0 10px 22px rgba(37,99,235,.22);
}

.task-choice .choiceBtn:active{
  transform:scale(.98);
}

/* Translate = messenger bubble */
.task-translate .card{
  background:linear-gradient(180deg,#ffffff,#f0fdf4);
}

.task-translate .taskKicker{
  background:#dcfce7;
  color:#166534;
}

.task-translate .taskQuestion{
  background:#16a34a;
  color:white;
  padding:18px;
  border-radius:22px 22px 22px 6px;
}

/* Word order = puzzle */
.task-word_order .card{
  background:linear-gradient(180deg,#ffffff,#fff7ed);
}

.task-word_order .taskKicker{
  background:#ffedd5;
  color:#9a3412;
}

.task-word_order .taskQuestion{
  display:inline-block;
  padding:18px;
  border-radius:20px;
  background:#fff7ed;
  border:2px solid #fed7aa;
  word-spacing:8px;
}

/* Write = notebook */
.task-write .card{
  background:
    linear-gradient(#ffffff,#ffffff),
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 32px,
      #e5e7eb 33px
    );
}

.task-write .taskKicker{
  background:#fef3c7;
  color:#92400e;
}

.task-write .answerInput{
  min-height:110px;
  font-size:18px;
  line-height:1.5;
}

.answerInput{
  margin-top:8px;
}

.feedback{
  font-weight:800;
}

.retryMentorLayer{
  margin-top:14px;
  padding-top:10px;
  font-size:15px;
  line-height:1.7;
  font-weight:600;
  color:rgba(15,23,42,.82);
  white-space:pre-line;
  transition:opacity .25s ease;
  position:relative;
  z-index:20;
}

@media(max-width:640px){
  .taskQuestion{
    font-size:24px;
  }

  .task-choice .choiceBtn{
    min-height:54px;
    font-size:17px;
  }
}

.choiceSelected{
  transform:scale(.96);
  opacity:.9;
}

.task-choice .choiceBtn{
  transition:
    transform .08s ease,
    opacity .12s ease,
    background .15s ease;
}

.task-choice .choiceBtn:hover{
  transform:translateY(-2px);
}

/* =========================================
   GAME FEEL SYSTEM
========================================= */

.taskShell{
  animation:taskEnter .28s ease;
}

@keyframes taskEnter{
  from{
    opacity:0;
    transform:
      translateY(18px)
      scale(.98);
  }
  to{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }
}

.correctFlash{
  animation:correctFlash .45s ease;
}

@keyframes correctFlash{
  0%{
    transform:scale(1);
    box-shadow:0 0 0 rgba(16,185,129,0);
  }
  50%{
    transform:scale(1.02);
    box-shadow:0 0 40px rgba(16,185,129,.35);
  }
  100%{
    transform:scale(1);
    box-shadow:0 0 0 rgba(16,185,129,0);
  }
}

.wrongFlash{
  animation:wrongFlash .4s ease;
}

@keyframes wrongFlash{
  0%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(8px); }
  60%{ transform:translateX(-6px); }
  80%{ transform:translateX(6px); }
  100%{ transform:translateX(0); }
}

.comboBadge{
  position:fixed;
  top:90px;
  right:18px;
  z-index:9999;

  padding:12px 18px;
  border-radius:999px;

  background:linear-gradient(
    135deg,
    #7c3aed,
    #2563eb
  );

  color:#fff;
  font-weight:900;
  font-size:18px;

  box-shadow:
    0 10px 30px rgba(37,99,235,.35);

  animation:
    comboIn .35s ease,
    comboOut .35s ease 1.8s forwards;
}

@keyframes comboIn{
  from{
    opacity:0;
    transform:
      translateY(-12px)
      scale(.7);
  }
  to{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes comboOut{
  to{
    opacity:0;
    transform:
      translateY(-10px)
      scale(.9);
  }
}

.speedBadge{
  position:fixed;
  left:50%;
  top:140px;
  transform:translateX(-50%);

  z-index:9999;

  padding:10px 16px;
  border-radius:999px;

  background:#111827;
  color:#fff;

  font-weight:800;
  font-size:15px;

  animation:
    speedPop .22s ease,
    comboOut .35s ease 1.5s forwards;
}

@keyframes speedPop{
  from{
    opacity:0;
    transform:
      translateX(-50%)
      scale(.6);
  }
  to{
    opacity:1;
    transform:
      translateX(-50%)
      scale(1);
  }
}

.task-choice .choiceBtn{
  transition:
    transform .08s ease,
    opacity .12s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.task-choice .choiceBtn:active{
  transform:scale(.93);
}

.task-choice .choiceBtn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 8px 20px rgba(37,99,235,.18);
}

.streakPulse{
  animation:streakPulse .6s ease;
}

@keyframes streakPulse{
  0%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.16);
  }
  100%{
    transform:scale(1);
  }
}


/* =========================================
   WORD ORDER GAME MODE
========================================= */

.wordBuilder{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  min-height:72px;

  margin-bottom:18px;
  padding:14px;

  border-radius:22px;

  background:#ffffff;
  border:2px dashed #c7d2fe;
}

.wordBank{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin-top:12px;
}

.wordChip{
  border:0;
  border-radius:16px;

  padding:12px 16px;

  background:#dbeafe;
  color:#1e3a8a;

  font-size:18px;
  font-weight:800;

  cursor:pointer;

  transition:
    transform .08s ease,
    opacity .12s ease,
    background .15s ease;
}

.wordChip:active{
  transform:scale(.92);
}

.wordChip.used{
  opacity:.35;
  transform:scale(.9);
}

.builderWord{
  background:#2563eb;
  color:#fff;
}

.wordBuilderGlow{
  animation:builderGlow .35s ease;
}

@keyframes builderGlow{
  0%{
    transform:scale(1);
    box-shadow:0 0 0 rgba(37,99,235,0);
  }
  50%{
    transform:scale(1.02);
    box-shadow:0 0 30px rgba(37,99,235,.25);
  }
  100%{
    transform:scale(1);
    box-shadow:0 0 0 rgba(37,99,235,0);
  }
}


/* =========================================
   WORD ORDER V2 GAME UI
========================================= */

.wordGameShell{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:18px;
}

.wordGameProgress{
  font-size:14px;
  font-weight:700;
  opacity:.75;
  padding-left:4px;
}

.wordBuilder{
  min-height:88px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding:18px;
  border-radius:28px;
  background:
    linear-gradient(
      180deg,
      #fff7ed,
      #ffedd5
    );

  border:2px dashed #fdba74;

  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.7),
    0 10px 30px rgba(251,146,60,.10);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.wordBuilderGlow{
  animation:builderPulse .35s ease;
}

.wordBuilderComplete{
  border-color:#10b981;
  background:
    linear-gradient(
      180deg,
      #ecfdf5,
      #d1fae5
    );

  box-shadow:
    0 0 0 4px rgba(16,185,129,.10),
    0 16px 40px rgba(16,185,129,.18);
}

.wordBank{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.wordChip{
  border:none;
  outline:none;
  cursor:pointer;

  min-height:52px;

  padding:
    14px 18px;

  border-radius:18px;

  background:white;

  font-size:18px;
  font-weight:700;

  color:#111827;

  box-shadow:
    0 6px 18px rgba(0,0,0,.08);

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease,
    opacity .12s ease;
}

.wordChip:hover{
  transform:
    translateY(-3px)
    scale(1.02);

  box-shadow:
    0 12px 28px rgba(0,0,0,.12);
}

.wordChip:active{
  transform:
    scale(.96);
}

.builderWord{
  background:
    linear-gradient(
      180deg,
      #fb923c,
      #f97316
    );

  color:white;

  box-shadow:
    0 10px 24px rgba(249,115,22,.28);
}

.wordBank .wordChip{
  animation:tokenAppear .24s ease;
}

@keyframes tokenAppear{
  from{
    opacity:0;
    transform:
      translateY(10px)
      scale(.95);
  }

  to{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes builderPulse{
  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.01);
  }

  100%{
    transform:scale(1);
  }
}

@media(max-width:640px){

  .wordBuilder{
    min-height:78px;
    padding:14px;
    border-radius:24px;
  }

  .wordChip{
    min-height:48px;
    font-size:16px;
    padding:12px 16px;
  }
}


/* =========================================
   PHASE 1B: RUNTIME MOOD ENGINE
========================================= */

.mode-calm .taskShell{
  filter:none;
}

.mode-mentor .taskShell{
  position:relative;
}

.mode-mentor .taskShell::before{
  content:"AI mentor sleduje tvůj vzor";
  display:inline-flex;
  margin-bottom:10px;
  padding:7px 11px;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}

.mode-mission .taskShell{
  border-radius:28px;
}

.mode-mission .taskKicker{
  background:#fef3c7 !important;
  color:#92400e !important;
}

.mode-mission .taskQuestion{
  box-shadow:
    inset 0 0 0 1px rgba(251,191,36,.35),
    0 12px 28px rgba(251,191,36,.12);
}

.mode-arcade .taskShell{
  animation:
    taskEnter .28s ease,
    arcadeBreath 2.6s ease-in-out infinite;
}

.mode-arcade .taskKicker{
  background:#ede9fe !important;
  color:#5b21b6 !important;
}

.mode-arcade .choiceBtn{
  box-shadow:
    0 12px 30px rgba(37,99,235,.28),
    0 0 0 3px rgba(37,99,235,.08);
}

.mode-combo .taskShell{
  animation:
    taskEnter .28s ease,
    comboBreath 1.8s ease-in-out infinite;
}

.mode-combo .taskKicker{
  background:#ffedd5 !important;
  color:#9a3412 !important;
}

.mode-combo .taskQuestion{
  border-color:#fb923c !important;
  box-shadow:
    0 0 0 4px rgba(251,146,60,.10),
    0 16px 34px rgba(251,146,60,.16);
}

.mode-focus .card{
  background:linear-gradient(180deg,#ffffff,#f8fafc) !important;
}

.mode-focus .taskShell{
  opacity:.98;
}

.mode-focus .taskKicker{
  background:#e5e7eb !important;
  color:#111827 !important;
}

.mode-focus .taskQuestion{
  border-color:#cbd5e1 !important;
  box-shadow:none !important;
}

.mode-speed .taskShell{
  animation:
    taskEnter .18s ease,
    speedBreath 1.4s ease-in-out infinite;
}

.mode-speed .taskKicker{
  background:#dcfce7 !important;
  color:#166534 !important;
}

.mode-speed .choiceBtn{
  min-height:64px;
  font-size:19px;
}

@keyframes arcadeBreath{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}

@keyframes comboBreath{
  0%,100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.012);
  }
}

@keyframes speedBreath{
  0%,100%{
    box-shadow:0 0 0 rgba(16,185,129,0);
  }
  50%{
    box-shadow:0 0 26px rgba(16,185,129,.18);
  }
}


/* =========================================
   PHASE 1C: STRUCTURAL VISUAL DIVERGENCE
========================================= */

.taskLayoutSpeed{
  padding:18px;
  border-radius:30px;
  background:
    radial-gradient(circle at top right, rgba(34,197,94,.24), transparent 34%),
    linear-gradient(180deg,#f0fdf4,#ffffff);
  border:2px solid rgba(34,197,94,.25);
}

.speedTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  font-size:13px;
  font-weight:900;
  color:#166534;
}

.speedTop span{
  background:#dcfce7;
  padding:8px 12px;
  border-radius:999px;
}

.speedMeter{
  height:8px;
  background:#dcfce7;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:18px;
}

.speedMeter span{
  display:block;
  height:100%;
  width:100%;
  background:#22c55e;
  animation:speedDrain 3.5s linear forwards;
}

.speedQuestion{
  font-size:32px !important;
  line-height:1.12;
  background:white !important;
  border:0 !important;
  box-shadow:0 18px 38px rgba(34,197,94,.14);
}

.taskLayoutMentor{
  display:grid;
  gap:16px;
  padding:18px;
  border-radius:30px;
  background:
    linear-gradient(180deg,#eef2ff,#ffffff);
  border:1px solid #c7d2fe;
}

.mentorBubble{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:22px 22px 22px 8px;
  background:#ffffff;
  box-shadow:0 12px 28px rgba(79,70,229,.12);
}

.mentorAvatar{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#e0e7ff;
  font-size:24px;
}

.mentorBubble p{
  margin:4px 0 0;
  font-size:13px;
  line-height:1.35;
  color:#475569;
  font-weight:700;
}

.mentorQuestion{
  border:0 !important;
  background:#f8fafc !important;
  font-size:28px !important;
}

.taskLayoutArcade{
  position:relative;
  overflow:hidden;
  padding:20px;
  border-radius:32px;
  background:
    radial-gradient(circle at 10% 0%, rgba(124,58,237,.22), transparent 30%),
    radial-gradient(circle at 100% 20%, rgba(37,99,235,.22), transparent 35%),
    linear-gradient(180deg,#ffffff,#eef2ff);
  border:1px solid rgba(99,102,241,.22);
}

.arcadeHeader{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:16px;
}

.arcadeHeader span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#4f46e5;
  color:white;
  font-size:25px;
  box-shadow:0 12px 26px rgba(79,70,229,.24);
}

.arcadeHeader b{
  display:block;
  font-size:18px;
}

.arcadeHeader small{
  color:#6366f1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.arcadeQuestion{
  font-size:31px !important;
  background:white !important;
  border:0 !important;
  box-shadow:0 18px 38px rgba(79,70,229,.16);
}

.taskLayoutCombo{
  padding:20px;
  border-radius:32px;
  background:
    radial-gradient(circle at top left, rgba(251,146,60,.35), transparent 34%),
    linear-gradient(180deg,#fff7ed,#ffffff);
  border:2px solid rgba(251,146,60,.34);
}

.comboHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.comboHeader span{
  padding:8px 12px;
  border-radius:999px;
  background:#fed7aa;
  color:#9a3412;
  font-weight:1000;
  font-size:13px;
}

.comboHeader b{
  color:#c2410c;
  font-size:14px;
}

.comboQuestion{
  font-size:34px !important;
  background:#fff !important;
  border:0 !important;
  box-shadow:
    0 0 0 4px rgba(251,146,60,.10),
    0 20px 44px rgba(251,146,60,.18);
}

.taskLayoutFocus{
  padding:22px;
  border-radius:28px;
  background:#ffffff;
  border:1px solid #e5e7eb;
}

.focusHeader{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:18px;
  color:#334155;
}

.focusHeader span{
  font-weight:1000;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.focusHeader b{
  font-size:14px;
  color:#64748b;
}

.focusQuestion{
  font-size:30px !important;
  background:#f8fafc !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:none !important;
}

.taskLayoutMission{
  padding:18px;
  border-radius:30px;
  background:
    linear-gradient(180deg,#fffbeb,#ffffff);
  border:2px solid rgba(245,158,11,.25);
}

.missionHeader{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}

.missionHeader span{
  padding:8px 12px;
  border-radius:999px;
  background:#fef3c7;
  color:#92400e;
  font-size:12px;
  font-weight:1000;
}

.missionHeader b{
  font-size:15px;
  color:#78350f;
}

.missionQuestion{
  background:#fff !important;
  border:2px dashed #fbbf24 !important;
  font-size:29px !important;
  box-shadow:0 14px 30px rgba(245,158,11,.12);
}

.mode-speed .choices{
  gap:16px !important;
}

.mode-speed .choiceBtn,
.mode-arcade .choiceBtn,
.mode-combo .choiceBtn{
  min-height:70px;
  font-size:20px;
  border-radius:24px;
}

.mode-focus .choiceBtn{
  background:#111827 !important;
  box-shadow:none !important;
}

.mode-mentor .choiceBtn{
  background:#4f46e5 !important;
}

@keyframes speedDrain{
  from{ width:100%; }
  to{ width:12%; }
}

@media(max-width:640px){
  .speedQuestion,
  .arcadeQuestion,
  .comboQuestion{
    font-size:28px !important;
  }

  .taskLayoutSpeed,
  .taskLayoutArcade,
  .taskLayoutCombo,
  .taskLayoutMentor,
  .taskLayoutMission,
  .taskLayoutFocus{
    padding:15px;
    border-radius:24px;
  }

  .mode-speed .choiceBtn,
  .mode-arcade .choiceBtn,
  .mode-combo .choiceBtn{
    min-height:62px;
    font-size:18px;
  }
}


/* =========================================
   PHASE 2 — STRUCTURAL VISUAL DIVERGENCE
========================================= */

/* MISSION = HUD / GAME CARD */

.mode-mission .taskShell{
  position:relative;
  overflow:hidden;
  padding:26px;
  border-radius:34px;
  background:
    radial-gradient(circle at top right,
      rgba(59,130,246,.18),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #ffffff,
      #eff6ff
    );

  border:2px solid #93c5fd;

  box-shadow:
    0 24px 60px rgba(37,99,235,.14);
}

.mode-mission .taskShell::after{
  content:"MISSION";
  position:absolute;
  top:14px;
  right:18px;

  font-size:11px;
  font-weight:1000;
  letter-spacing:.18em;

  color:#2563eb;
  opacity:.7;
}

.mode-mission .taskQuestion{
  font-size:34px;
  line-height:1.15;
}

/* ARCADE = BIG BUTTON GAME */

.mode-arcade .choices{
  gap:18px;
}

.mode-arcade .choiceBtn{
  min-height:78px !important;

  border-radius:28px !important;

  font-size:22px !important;
  font-weight:900;

  transform-origin:center;

  background:
    linear-gradient(
      180deg,
      #3b82f6,
      #2563eb
    ) !important;

  box-shadow:
    0 18px 40px rgba(37,99,235,.28),
    inset 0 2px 0 rgba(255,255,255,.25);
}

.mode-arcade .choiceBtn:hover{
  transform:
    translateY(-4px)
    scale(1.03);
}

/* SPEED = TERMINAL / REACTION MODE */

.mode-speed .taskShell{
  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      #052e16,
      #071f12
    ) !important;

  border:2px solid #22c55e;
}

.mode-speed .taskQuestion{
  color:#86efac !important;

  font-size:30px;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}

.mode-speed .taskKicker{
  background:#14532d !important;
  color:#bbf7d0 !important;
}

/* FOCUS = MINIMAL CLEAN */

.mode-focus .taskShell{
  background:white !important;

  border:1px solid #d1d5db !important;

  box-shadow:none !important;
}

.mode-focus .taskQuestion{
  font-size:28px;

  color:#111827 !important;
}

.mode-focus .choiceBtn{
  background:white !important;
  color:#111827 !important;

  border:2px solid #d1d5db !important;

  box-shadow:none !important;
}

/* COMBO = POWER MODE */

.mode-combo .taskShell{
  transform:scale(1.02);

  background:
    radial-gradient(circle at top,
      rgba(251,146,60,.22),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #fff7ed,
      #ffffff
    ) !important;

  border:2px solid #fb923c;
}

.mode-combo .taskQuestion{
  font-size:36px;

  background:
    linear-gradient(
      90deg,
      #ea580c,
      #f97316
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* MENTOR = AI TUTOR PANEL */

.mode-mentor .taskShell{
  padding-top:48px;
}

.mode-mentor .taskQuestion{
  background:#f8fafc;

  border-left:
    6px solid #6366f1;

  padding:22px;

  border-radius:22px;

  font-size:30px;
}

.mode-mentor .taskMeta{
  margin-top:16px;
}

/* MOBILE */

@media(max-width:640px){

  .mode-arcade .choiceBtn{
    min-height:70px !important;
    font-size:19px !important;
  }

  .mode-combo .taskQuestion,
  .mode-mission .taskQuestion,
  .mode-mentor .taskQuestion{
    font-size:28px;
  }

  .mode-speed .taskQuestion{
    font-size:24px;
  }
}















/* =========================
   FINAL PREMIUM INTRO
========================= */



@keyframes introFade{

  from{
    opacity:0;
    transform:translateY(14px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}









.introGoals div{
  font-size:1.02rem;
  line-height:1.5;
}





.mentorHeader{
  display:flex;
  align-items:center;
  gap:12px;

  margin-bottom:14px;
}



@keyframes mentorPulse{

  0%{
    transform:scale(1);
    opacity:1;
  }

  50%{
    transform:scale(1.35);
    opacity:.55;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }
}









/* =========================
   PREMIUM INTRO V2
========================= */













.mentorHeader{
  display:flex;
  align-items:center;
  gap:12px;

  margin-bottom:14px;
}













@keyframes mentorPulse{
  0%{
    transform:scale(1);
    opacity:1;
  }

  50%{
    transform:scale(1.25);
    opacity:.7;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }
}



/* =======================================================
   STUDENTO PREMIUM INTRO FINAL
======================================================= */

.introHeroCard{
  position:relative;
  overflow:hidden;
  padding:28px;
  border-radius:30px;
  background:
    linear-gradient(180deg,#0f172a 0%,#111827 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
  color:white;
  animation:introFade .45s ease;
}

.introHeroCard::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at top right,
    rgba(59,130,246,.28),
    transparent 40%);
  pointer-events:none;
}

.introTitle{
  position:relative;
  z-index:2;
  font-size:34px;
  line-height:1.1;
  font-weight:900;
  margin-bottom:10px;
  letter-spacing:-0.03em;
}

.introSubtitle{
  position:relative;
  z-index:2;
  color:#cbd5e1;
  font-size:15px;
  margin-bottom:24px;
}

.introGoals{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:22px;
}

.introGoals div{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  padding:13px 16px;
  border-radius:16px;
  font-weight:700;
  color:#f8fafc;
  backdrop-filter:blur(10px);
}

.mentorCard{
  position:relative;
  z-index:2;
  margin-top:22px;
  margin-bottom:24px;
  border-radius:24px;
  padding:22px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.04)
    );
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}

.mentorLabel{
  color:#60a5fa;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  font-weight:900;
  margin-bottom:14px;
}

.introDesc{
  font-size:19px;
  line-height:1.75;
  color:#f8fafc;
  font-weight:500;
}

.introCTA{
  width:100%;
  height:68px;
  border:none;
  border-radius:22px;
  background:
    linear-gradient(
      90deg,
      #2563eb,
      #3b82f6
    );
  color:white;
  font-size:22px;
  font-weight:900;
  letter-spacing:-0.02em;
  box-shadow:
    0 18px 40px rgba(37,99,235,.35);
}

.introCTA:active{
  transform:scale(.98);
}

.introStats{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  margin-top:18px;
  color:#cbd5e1;
  font-size:14px;
  font-weight:700;
}

@keyframes introFade{
  from{
    opacity:0;
    transform:translateY(16px);
  }
  to{
    opacity:1;
    transform:none;
  }
}


/* ===== STABLE INTRO READABILITY FIX ===== */
.introHeroCard{
  max-width:100% !important;
  padding:22px !important;
}

.mentorCard{
  padding:18px !important;
  margin-top:16px !important;
  margin-bottom:14px !important;
}

.introDesc{
  font-size:16px !important;
  line-height:1.55 !important;
  font-weight:500 !important;
  white-space:normal !important;
  overflow:visible !important;
}

.introTitle{
  font-size:30px !important;
}

.introGoals div{
  font-size:16px !important;
}


/* STUDETO INTRO AVATAR ONLY */
.studetoMentorCard{
  display:grid;
  grid-template-columns:82px 1fr;
  gap:16px;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 0%, rgba(37,99,235,.13), transparent 36%),
    linear-gradient(180deg,#ffffff,#f8fafc);
}

.studetoMentorAvatar{
  position:relative;
  width:76px;
  height:76px;
  border-radius:28px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.96), rgba(255,255,255,.18) 34%, transparent 56%),
    linear-gradient(135deg,#2563eb,#06b6d4);
  box-shadow:
    0 18px 42px rgba(37,99,235,.30),
    inset 0 0 0 1px rgba(255,255,255,.38);
  flex-shrink:0;
  animation:studetoMentorFloat 3s ease-in-out infinite;
}

.studetoMentorAura{
  position:absolute;
  inset:-16px;
  border-radius:34px;
  background:radial-gradient(circle, rgba(37,99,235,.24), transparent 62%);
  animation:studetoMentorAura 2.4s ease-in-out infinite;
}

.studetoMentorHead{
  position:relative;
  width:50px;
  height:46px;
  border-radius:20px;
  background:rgba(255,255,255,.94);
  box-shadow:
    inset 0 -8px 18px rgba(15,23,42,.09),
    0 8px 18px rgba(15,23,42,.10);
}

.studetoMentorAntenna{
  position:absolute;
  left:50%;
  top:-15px;
  width:3px;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  transform:translateX(-50%);
}

.studetoMentorAntenna::after{
  content:"";
  position:absolute;
  left:50%;
  top:-8px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#fff;
  transform:translateX(-50%);
  box-shadow:0 0 16px rgba(255,255,255,.9);
}

.studetoMentorEyes{
  position:absolute;
  left:12px;
  right:12px;
  top:15px;
  display:flex;
  justify-content:space-between;
}

.studetoMentorEyes span{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#111827;
  animation:studetoMentorBlink 4.2s infinite;
}

.studetoMentorMouth{
  position:absolute;
  left:50%;
  bottom:12px;
  width:18px;
  height:6px;
  border-radius:0 0 999px 999px;
  background:#111827;
  transform:translateX(-50%);
  opacity:.9;
}

.studetoMentorAvatar.talking .studetoMentorMouth{
  animation:studetoMentorTalk .34s ease-in-out infinite;
}

.studetoMentorSpeech{
  min-width:0;
}

.studetoMentorBubble{
  position:relative;
  margin-top:8px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid rgba(148,163,184,.30);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 14px 32px rgba(15,23,42,.08);
  font-weight:700;
  line-height:1.45;
}

.studetoMentorBubble::before{
  content:"";
  position:absolute;
  left:-8px;
  top:22px;
  width:14px;
  height:14px;
  background:#fff;
  border-left:1px solid rgba(148,163,184,.30);
  border-bottom:1px solid rgba(148,163,184,.30);
  transform:rotate(45deg);
}

@keyframes studetoMentorTalk{
  0%,100%{
    height:5px;
    width:16px;
    border-radius:0 0 999px 999px;
  }
  50%{
    height:13px;
    width:14px;
    border-radius:999px;
  }
}

@keyframes studetoMentorBlink{
  0%,92%,100%{
    transform:scaleY(1);
  }
  95%{
    transform:scaleY(.12);
  }
}

@keyframes studetoMentorFloat{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-4px);
  }
}

@keyframes studetoMentorAura{
  0%,100%{
    opacity:.55;
    transform:scale(.96);
  }
  50%{
    opacity:1;
    transform:scale(1.04);
  }
}

@media(max-width:640px){
  .studetoMentorCard{
    grid-template-columns:64px 1fr;
    gap:12px;
  }

  .studetoMentorAvatar{
    width:62px;
    height:62px;
    border-radius:22px;
  }

  .studetoMentorHead{
    width:42px;
    height:39px;
    border-radius:17px;
  }

  .studetoMentorEyes{
    left:10px;
    right:10px;
    top:13px;
  }

  .studetoMentorBubble{
    padding:12px 13px;
    border-radius:16px;
  }
}


/* STUDETO INTRO STREAM VISIBILITY FIX */
.studetoMentorCard{
  align-items:flex-start !important;
}

.studetoMentorSpeech{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.introDesc.studetoMentorBubble,
.studetoMentorBubble{
  color:#1f2937 !important;
  opacity:1 !important;
  -webkit-text-fill-color:#1f2937 !important;
  background:#ffffff !important;
  border:1px solid rgba(148,163,184,.28) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1.5 !important;
  padding:14px 16px !important;
  border-radius:18px !important;
  margin-top:8px !important;
  min-height:auto !important;
  max-height:240px !important;
  overflow:auto !important;
  white-space:pre-wrap !important;
}

.studetoMentorBubble::before{
  background:#ffffff !important;
}

.studetoMentorAvatar{
  flex-shrink:0;
}

.studetoMentorAvatar:not(.talking) .studetoMentorMouth{
  width:16px !important;
  height:4px !important;
  border-radius:999px !important;
  animation:none !important;
}

.studetoMentorAvatar.talking .studetoMentorMouth{
  animation:studetoMentorTalk .34s ease-in-out infinite !important;
}

@media(max-width:640px){
  .introDesc.studetoMentorBubble,
  .studetoMentorBubble{
    max-height:200px !important;
    font-size:14px !important;
    padding:12px 13px !important;
  }
}


/* STUDETO INTRO AVATAR V5 SAFE CLEAN */

/* Necháme v horních cílech jen počet úkolů = 3. položka. */
.introGoals > div:nth-child(1),
.introGoals > div:nth-child(2){
  display:none !important;
}

.introGoals{
  display:block !important;
  margin-top:22px !important;
  margin-bottom:22px !important;
}

.introGoals > div:nth-child(3){
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:62px !important;
  width:100% !important;
  font-size:25px !important;
  font-weight:950 !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  color:#ffffff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Dole necháme jen první badge s počtem úkolů. */
.introStats span:nth-child(n+2){
  display:none !important;
}

.introStats{
  justify-content:center !important;
  opacity:.92 !important;
}

.introStats span:first-child{
  font-size:18px !important;
  font-weight:900 !important;
}

/* Mentor karta: čistší, méně přeplácaná. */
.studetoMentorCard{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  padding:22px 16px !important;
  border-radius:30px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(59,130,246,.13), transparent 42%),
    linear-gradient(180deg,#ffffff,#f8fafc) !important;
  overflow:visible !important;
}

/* Hezčí avatar – větší, jednoduchý, brandový. */
.studetoMentorAvatar{
  position:relative !important;
  width:96px !important;
  height:96px !important;
  border-radius:32px !important;
  display:grid !important;
  place-items:center !important;
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.92), rgba(255,255,255,.18) 34%, transparent 56%),
    linear-gradient(135deg,#2563eb,#0ea5e9) !important;
  box-shadow:
    0 16px 34px rgba(37,99,235,.28),
    inset 0 0 0 1px rgba(255,255,255,.42) !important;
  animation:studetoMentorFloat 3.2s ease-in-out infinite !important;
}

.studetoMentorAura{
  position:absolute !important;
  inset:-18px !important;
  border-radius:38px !important;
  background:radial-gradient(circle, rgba(59,130,246,.20), transparent 64%) !important;
  animation:studetoMentorAura 2.6s ease-in-out infinite !important;
}

.studetoMentorHead{
  position:relative !important;
  width:62px !important;
  height:56px !important;
  border-radius:23px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:
    inset 0 -8px 18px rgba(15,23,42,.09),
    0 8px 18px rgba(15,23,42,.10) !important;
}

.studetoMentorAntenna{
  top:-15px !important;
}

.studetoMentorEyes{
  left:15px !important;
  right:15px !important;
  top:18px !important;
}

.studetoMentorEyes span{
  width:9px !important;
  height:9px !important;
  background:#111827 !important;
}

.studetoMentorMouth{
  left:50% !important;
  bottom:15px !important;
  width:22px !important;
  height:5px !important;
  border-radius:999px !important;
  background:#111827 !important;
  transform:translateX(-50%) !important;
  animation:none !important;
}

.studetoMentorAvatar.talking .studetoMentorMouth{
  animation:studetoMentorTalk .28s ease-in-out infinite !important;
}

/* Bublina: krátká, čitelná, chat-like. */
.studetoMentorSpeech{
  width:100% !important;
  min-width:0 !important;
}

.studetoMentorSpeech .mentorLabel{
  text-align:center !important;
  color:#3b82f6 !important;
  letter-spacing:.14em !important;
  font-size:12px !important;
  font-weight:950 !important;
  margin-bottom:10px !important;
}

.introDesc.studetoMentorBubble,
.studetoMentorBubble{
  width:min(100%, 350px) !important;
  margin:0 auto !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  background:#ffffff !important;
  border:1px solid rgba(148,163,184,.30) !important;
  border-radius:22px !important;
  padding:15px 17px !important;
  font-size:16px !important;
  font-weight:800 !important;
  line-height:1.42 !important;
  max-height:118px !important;
  overflow:auto !important;
  box-shadow:0 16px 32px rgba(15,23,42,.10) !important;
  opacity:1 !important;
}

.studetoMentorBubble::before{
  left:50% !important;
  top:-8px !important;
  width:14px !important;
  height:14px !important;
  background:#ffffff !important;
  border-left:1px solid rgba(148,163,184,.30) !important;
  border-top:1px solid rgba(148,163,184,.30) !important;
  border-bottom:0 !important;
  transform:translateX(-50%) rotate(45deg) !important;
}

@media(max-width:640px){
  .introGoals > div:nth-child(3){
    min-height:58px !important;
    font-size:23px !important;
  }

  .studetoMentorCard{
    padding:20px 14px !important;
    border-radius:28px !important;
  }

  .studetoMentorAvatar{
    width:86px !important;
    height:86px !important;
    border-radius:29px !important;
  }

  .studetoMentorHead{
    width:56px !important;
    height:50px !important;
    border-radius:21px !important;
  }

  .studetoMentorEyes{
    left:14px !important;
    right:14px !important;
    top:16px !important;
  }

  .introDesc.studetoMentorBubble,
  .studetoMentorBubble{
    max-height:105px !important;
    font-size:15px !important;
    padding:14px 15px !important;
  }
}


/* STUDETO PREMIUM INTRO AVATAR EXACT */

.introHeroCard{
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.premiumIntroCard{
  position:relative;
  min-height:760px;
  padding:34px 28px 30px;
  border-radius:36px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 50% 42%, rgba(37,99,235,.28), transparent 38%),
    radial-gradient(circle at 50% 95%, rgba(14,165,233,.22), transparent 36%),
    linear-gradient(180deg,#0f1a2e 0%, #081326 100%);
  border:1px solid rgba(147,197,253,.28);
  box-shadow:
    0 32px 80px rgba(2,6,23,.32),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.premiumIntroCard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.08), transparent 28%, transparent 72%, rgba(255,255,255,.04));
}

.premiumIntroHeader{
  position:relative;
  z-index:2;
}

.premiumIntroTitle{
  font-size:42px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:-.04em;
  color:#fff;
  text-shadow:0 8px 22px rgba(0,0,0,.25);
}

.premiumIntroSubtitle{
  margin-top:18px;
  font-size:24px;
  font-weight:650;
  color:rgba(226,232,240,.82);
}

.premiumTaskCountCard{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:34px;
  padding:24px 28px;
  min-height:112px;
  border-radius:28px;
  background:rgba(15,23,42,.48);
  border:1px solid rgba(148,163,184,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 38px rgba(2,6,23,.20);
}

.premiumTaskIcon{
  width:72px;
  height:72px;
  border-radius:24px;
  display:grid;
  place-items:center;
  font-size:42px;
  background:
    radial-gradient(circle, rgba(96,165,250,.28), transparent 62%),
    rgba(15,23,42,.45);
  box-shadow:inset 0 0 0 1px rgba(96,165,250,.20);
}

.premiumTaskNumber{
  font-size:30px;
  font-weight:950;
  color:#fff;
  letter-spacing:-.02em;
}

.premiumTaskLabel{
  margin-top:6px;
  font-size:19px;
  font-weight:650;
  color:rgba(191,219,254,.78);
}

.premiumMentorStage{
  position:relative;
  z-index:2;
  margin-top:36px;
  min-height:480px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
}

.premiumSpeechBubble{
  position:relative;
  z-index:4;
  width:min(100%, 455px);
  margin-bottom:-24px;
}

.introDesc.studetoMentorBubble,
.studetoMentorBubble{
  position:relative;
  width:100% !important;
  max-height:185px !important;
  overflow:auto !important;
  padding:26px 30px !important;
  border-radius:28px !important;
  background:
    linear-gradient(180deg,#ffffff 0%, #f8fafc 100%) !important;
  border:1px solid rgba(226,232,240,.95) !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  font-size:23px !important;
  font-weight:850 !important;
  line-height:1.55 !important;
  letter-spacing:-.015em !important;
  box-shadow:
    0 28px 58px rgba(2,6,23,.22),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  opacity:1 !important;
}

.studetoMentorBubble::before{
  content:"";
  position:absolute;
  left:74px !important;
  bottom:-18px !important;
  top:auto !important;
  width:38px !important;
  height:38px !important;
  border-radius:0 0 0 10px !important;
  background:#f8fafc !important;
  border:0 !important;
  transform:rotate(45deg) !important;
  box-shadow:14px 14px 26px rgba(2,6,23,.08);
}

.premiumAvatarWrap{
  position:relative;
  z-index:3;
  width:310px;
  height:360px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  filter:drop-shadow(0 26px 44px rgba(2,6,23,.36));
}

.premiumAvatarImg{
  position:absolute;
  left:50%;
  bottom:0;
  width:310px;
  max-width:100%;
  height:auto;
  transform:translateX(-50%);
  object-fit:contain;
  object-position:center bottom;
  z-index:2;
}

.premiumAvatarImg.avatarMissing{
  display:none;
}

.premiumAvatarFallback{
  position:absolute;
  left:50%;
  bottom:20px;
  width:190px;
  height:190px;
  border-radius:54px;
  display:grid;
  place-items:center;
  transform:translateX(-50%);
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,.95), rgba(255,255,255,.20) 34%, transparent 56%),
    linear-gradient(135deg,#2563eb,#0ea5e9);
  box-shadow:
    0 24px 58px rgba(37,99,235,.34),
    inset 0 0 0 1px rgba(255,255,255,.42);
  z-index:1;
}

.premiumAvatarImg:not(.avatarMissing) + .premiumAvatarFallback{
  display:none;
}

.premiumFallbackFace{
  position:relative;
  width:118px;
  height:96px;
  border-radius:38px;
  background:rgba(255,255,255,.96);
  box-shadow:inset 0 -10px 22px rgba(15,23,42,.10);
}

.premiumFallbackFace span{
  position:absolute;
  top:32px;
  width:13px;
  height:13px;
  border-radius:999px;
  background:#111827;
}

.premiumFallbackFace span:first-child{
  left:32px;
}

.premiumFallbackFace span:nth-child(2){
  right:32px;
}

.premiumFallbackFace i{
  position:absolute;
  left:50%;
  bottom:26px;
  width:36px;
  height:8px;
  border-radius:999px;
  background:#111827;
  transform:translateX(-50%);
}

.premiumAvatarWrap.speaking .premiumFallbackFace i{
  animation:premiumTutorMouth .28s ease-in-out infinite;
}

.premiumAvatarWrap.speaking .premiumAvatarImg{
  animation:premiumAvatarSpeak 1.2s ease-in-out infinite;
}

.premiumTalkWave{
  position:absolute;
  left:4px;
  bottom:130px;
  width:34px;
  height:70px;
  border-left:5px solid rgba(129,140,248,.82);
  border-radius:50%;
  opacity:0;
  z-index:1;
}

.premiumTalkWave.wave2{
  left:-14px;
  width:52px;
  height:90px;
  bottom:120px;
  opacity:0;
}

.premiumAvatarWrap.speaking .premiumTalkWave.wave1{
  animation:premiumWave 1s ease-in-out infinite;
}

.premiumAvatarWrap.speaking .premiumTalkWave.wave2{
  animation:premiumWave 1s ease-in-out infinite .18s;
}

@keyframes premiumTutorMouth{
  0%,100%{
    height:7px;
    width:34px;
    border-radius:999px;
  }
  50%{
    height:24px;
    width:26px;
    border-radius:999px;
  }
}

@keyframes premiumAvatarSpeak{
  0%,100%{
    transform:translateX(-50%) translateY(0);
  }
  50%{
    transform:translateX(-50%) translateY(-3px);
  }
}

@keyframes premiumWave{
  0%,100%{
    opacity:.18;
    transform:scale(.9);
  }
  50%{
    opacity:1;
    transform:scale(1.08);
  }
}

@media(max-width:640px){
  .premiumIntroCard{
    min-height:700px;
    padding:30px 24px 28px;
    border-radius:34px;
  }

  .premiumIntroTitle{
    font-size:38px;
  }

  .premiumIntroSubtitle{
    font-size:21px;
  }

  .premiumTaskCountCard{
    min-height:98px;
    padding:20px 22px;
    gap:18px;
  }

  .premiumTaskIcon{
    width:62px;
    height:62px;
    font-size:35px;
    border-radius:21px;
  }

  .premiumTaskNumber{
    font-size:27px;
  }

  .premiumTaskLabel{
    font-size:17px;
  }

  .premiumMentorStage{
    min-height:430px;
    margin-top:30px;
  }

  .premiumSpeechBubble{
    width:min(100%, 390px);
    margin-bottom:-20px;
  }

  .introDesc.studetoMentorBubble,
  .studetoMentorBubble{
    max-height:150px !important;
    padding:22px 24px !important;
    border-radius:26px !important;
    font-size:20px !important;
    line-height:1.5 !important;
  }

  .premiumAvatarWrap{
    width:270px;
    height:320px;
  }

  .premiumAvatarImg{
    width:270px;
  }

  .premiumAvatarFallback{
    width:166px;
    height:166px;
    border-radius:48px;
  }

  .premiumFallbackFace{
    width:104px;
    height:86px;
    border-radius:34px;
  }
}


/* STUDETO LIVING MENTOR INTRO V5 */
.livingMentorIntro{
  position:relative !important;
  overflow:hidden !important;
  padding:24px 20px 22px !important;
  border-radius:34px !important;
  background:
    radial-gradient(circle at 78% 8%, rgba(168,85,247,.22), transparent 34%),
    radial-gradient(circle at 8% 35%, rgba(59,130,246,.24), transparent 38%),
    linear-gradient(180deg,#0b1223 0%,#071426 100%) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 28px 70px rgba(2,6,23,.34) !important;
}

.livingIntroKicker{
  color:#7dd3fc !important;
  text-transform:uppercase !important;
  letter-spacing:.16em !important;
  font-size:12px !important;
  font-weight:900 !important;
  margin-bottom:8px !important;
}

.livingIntroTitle{
  color:#ffffff !important;
  font-size:38px !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  letter-spacing:-.04em !important;
}

.livingIntroSub{
  color:rgba(226,232,240,.82) !important;
  margin-top:10px !important;
  font-size:18px !important;
  font-weight:800 !important;
}

.livingTaskCount{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  padding:14px 16px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#fff !important;
  margin:20px 0 16px !important;
}

.livingTaskIcon{
  display:grid !important;
  place-items:center !important;
  width:54px !important;
  height:54px !important;
  border-radius:19px !important;
  background:rgba(37,99,235,.18) !important;
  font-size:28px !important;
}

.livingTaskCount strong{
  display:block !important;
  font-size:32px !important;
  line-height:1 !important;
  font-weight:950 !important;
}

.livingTaskCount span{
  display:block !important;
  margin-top:5px !important;
  color:rgba(226,232,240,.72) !important;
  font-size:16px !important;
  font-weight:850 !important;
}

.livingMentorStage{
  position:relative !important;
  min-height:500px !important;
  border-radius:30px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 35% 20%, rgba(96,165,250,.18), transparent 35%),
    radial-gradient(circle at 78% 8%, rgba(168,85,247,.22), transparent 42%),
    linear-gradient(180deg, rgba(15,23,42,.30), rgba(15,23,42,.62)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}

.livingMentorGlow{
  position:absolute !important;
  left:50% !important;
  top:46% !important;
  width:360px !important;
  height:360px !important;
  transform:translate(-50%,-50%) !important;
  border-radius:999px !important;
  background:
    radial-gradient(circle, rgba(96,165,250,.25), transparent 64%),
    radial-gradient(circle, rgba(168,85,247,.18), transparent 72%) !important;
  filter:blur(4px) !important;
  animation:livingGlowPulse 3.6s ease-in-out infinite !important;
}

.livingMentorImg{
  position:absolute !important;
  left:50% !important;
  bottom:-8px !important;
  width:min(96%, 440px) !important;
  max-height:460px !important;
  object-fit:cover !important;
  object-position:center top !important;
  transform:translateX(-50%) scale(1.01) !important;
  border-radius:0 !important;
  filter:drop-shadow(0 28px 44px rgba(0,0,0,.34)) !important;
  animation:livingMentorBreath 4.2s ease-in-out infinite !important;
}

.livingSpeechWrap{
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  top:14px !important;
  z-index:5 !important;
}

.livingSpeechLabel{
  margin-left:10px !important;
  margin-bottom:8px !important;
  color:#93c5fd !important;
  font-size:12px !important;
  font-weight:950 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

.livingSpeechBubble{
  width:min(100%, 390px) !important;
  max-height:118px !important;
  overflow:auto !important;
  margin:0 !important;
  padding:15px 17px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.94) !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:0 20px 48px rgba(2,6,23,.22) !important;
  font-size:17px !important;
  line-height:1.35 !important;
  font-weight:850 !important;
  backdrop-filter:blur(14px) !important;
}

.livingVoiceWave{
  position:absolute !important;
  right:24px !important;
  top:52% !important;
  width:82px !important;
  height:82px !important;
  border-radius:999px !important;
  border:2px solid rgba(125,211,252,0) !important;
  opacity:0 !important;
  z-index:4 !important;
  pointer-events:none !important;
}

.livingMentorStage.speaking .livingVoiceWave{
  opacity:1 !important;
  border-color:rgba(125,211,252,.48) !important;
}

.livingMentorStage.speaking .waveA{
  animation:livingVoiceWave 1.2s ease-out infinite !important;
}

.livingMentorStage.speaking .waveB{
  animation:livingVoiceWave 1.2s ease-out .38s infinite !important;
}

.livingMentorStage.speaking .livingMentorImg{
  animation:
    livingMentorSpeak 1.1s ease-in-out infinite,
    livingMentorBreath 4.2s ease-in-out infinite !important;
}

@keyframes livingMentorBreath{
  0%,100%{ transform:translateX(-50%) translateY(0) scale(1.01); }
  50%{ transform:translateX(-50%) translateY(-6px) scale(1.025); }
}

@keyframes livingMentorSpeak{
  0%,100%{ filter:drop-shadow(0 28px 44px rgba(0,0,0,.34)) brightness(1); }
  50%{ filter:drop-shadow(0 34px 54px rgba(59,130,246,.30)) brightness(1.05); }
}

@keyframes livingGlowPulse{
  0%,100%{ opacity:.72; transform:translate(-50%,-50%) scale(.96); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); }
}

@keyframes livingVoiceWave{
  0%{ transform:scale(.62); opacity:.75; }
  100%{ transform:scale(1.38); opacity:0; }
}

@media(max-width:640px){
  .livingMentorIntro{
    padding:22px 16px 20px !important;
    border-radius:32px !important;
  }

  .livingIntroTitle{
    font-size:34px !important;
  }

  .livingIntroSub{
    font-size:17px !important;
  }

  .livingMentorStage{
    min-height:450px !important;
    border-radius:28px !important;
  }

  .livingMentorImg{
    width:100% !important;
    max-height:415px !important;
    bottom:-4px !important;
  }

  .livingSpeechBubble{
    max-height:108px !important;
    font-size:15px !important;
    padding:14px 15px !important;
  }
}


/* STUDETO MENTOR V6 BEST DESIGN */
.mentorV6Card{
  position:relative !important;
  overflow:hidden !important;
  padding:22px 18px 20px !important;
  border-radius:34px !important;
  background:
    radial-gradient(circle at 85% 0%, rgba(168,85,247,.28), transparent 34%),
    radial-gradient(circle at 0% 35%, rgba(59,130,246,.26), transparent 38%),
    linear-gradient(180deg,#070d1d 0%,#08172a 100%) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 28px 70px rgba(2,6,23,.34) !important;
}

.mentorV6Header{
  position:relative !important;
  z-index:4 !important;
}

.mentorV6Kicker{
  color:#7dd3fc !important;
  text-transform:uppercase !important;
  letter-spacing:.18em !important;
  font-size:12px !important;
  font-weight:950 !important;
  margin-bottom:8px !important;
}

.mentorV6Title{
  color:#ffffff !important;
  font-size:38px !important;
  line-height:1.04 !important;
  font-weight:950 !important;
  letter-spacing:-.045em !important;
}

.mentorV6Sub{
  color:rgba(226,232,240,.78) !important;
  margin-top:10px !important;
  font-size:18px !important;
  font-weight:850 !important;
}

.mentorV6Count{
  position:relative !important;
  z-index:4 !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin:18px 0 14px !important;
  padding:14px 16px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#fff !important;
}

.mentorV6CountIcon{
  display:grid !important;
  place-items:center !important;
  width:52px !important;
  height:52px !important;
  border-radius:18px !important;
  background:linear-gradient(135deg,rgba(37,99,235,.30),rgba(168,85,247,.22)) !important;
  font-size:27px !important;
}

.mentorV6Count strong{
  display:block !important;
  font-size:31px !important;
  line-height:1 !important;
  font-weight:950 !important;
}

.mentorV6Count span{
  display:block !important;
  margin-top:4px !important;
  color:rgba(226,232,240,.72) !important;
  font-size:16px !important;
  font-weight:850 !important;
}

.mentorV6Stage{
  position:relative !important;
  z-index:3 !important;
  min-height:455px !important;
  border-radius:30px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 40% 14%, rgba(96,165,250,.20), transparent 36%),
    radial-gradient(circle at 80% 10%, rgba(168,85,247,.24), transparent 44%),
    linear-gradient(180deg, rgba(15,23,42,.22), rgba(15,23,42,.66)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}

.mentorV6Aura{
  position:absolute !important;
  border-radius:999px !important;
  pointer-events:none !important;
}

.mentorV6Aura.aura1{
  left:50% !important;
  top:54% !important;
  width:360px !important;
  height:360px !important;
  transform:translate(-50%,-50%) !important;
  background:radial-gradient(circle, rgba(96,165,250,.25), transparent 66%) !important;
  filter:blur(5px) !important;
  animation:mentorV6Glow 3.6s ease-in-out infinite !important;
}

.mentorV6Aura.aura2{
  right:-80px !important;
  top:28% !important;
  width:220px !important;
  height:220px !important;
  background:radial-gradient(circle, rgba(168,85,247,.23), transparent 68%) !important;
  filter:blur(7px) !important;
}

.mentorV6Img{
  position:absolute !important;
  left:50% !important;
  bottom:-12px !important;
  width:min(103%, 430px) !important;
  max-height:430px !important;
  object-fit:cover !important;
  object-position:center top !important;
  transform:translateX(-50%) translateY(0) scale(1.015) !important;
  filter:drop-shadow(0 28px 44px rgba(0,0,0,.36)) !important;
  animation:mentorV6Idle 4.2s ease-in-out infinite !important;
}

.mentorV6Stage.speaking .mentorV6Img{
  animation:
    mentorV6Speak 1s ease-in-out infinite,
    mentorV6Idle 4.2s ease-in-out infinite !important;
}

.mentorV6BubbleWrap{
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  top:14px !important;
  z-index:7 !important;
}

.mentorV6BubbleLabel{
  margin-left:10px !important;
  margin-bottom:7px !important;
  color:#93c5fd !important;
  font-size:11px !important;
  font-weight:950 !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
}

.mentorV6Bubble{
  width:100% !important;
  max-height:none !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:15px 16px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.96) !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border:1px solid rgba(255,255,255,.76) !important;
  box-shadow:0 20px 48px rgba(2,6,23,.24) !important;
  font-size:16px !important;
  line-height:1.32 !important;
  font-weight:850 !important;
  backdrop-filter:blur(14px) !important;
}

.mentorV6Wave{
  position:absolute !important;
  right:28px !important;
  top:52% !important;
  width:82px !important;
  height:82px !important;
  border-radius:999px !important;
  border:2px solid rgba(125,211,252,0) !important;
  opacity:0 !important;
  z-index:6 !important;
  pointer-events:none !important;
}

.mentorV6Stage.speaking .mentorV6Wave{
  opacity:1 !important;
  border-color:rgba(125,211,252,.50) !important;
}

.mentorV6Stage.speaking .wave1{
  animation:mentorV6Voice 1.15s ease-out infinite !important;
}

.mentorV6Stage.speaking .wave2{
  animation:mentorV6Voice 1.15s ease-out .32s infinite !important;
}

.mentorV6Stage.speaking .wave3{
  animation:mentorV6Voice 1.15s ease-out .64s infinite !important;
}

@keyframes mentorV6Idle{
  0%,100%{
    transform:translateX(-50%) translateY(0) scale(1.015);
  }
  50%{
    transform:translateX(-50%) translateY(-7px) scale(1.035);
  }
}

@keyframes mentorV6Speak{
  0%,100%{
    filter:drop-shadow(0 28px 44px rgba(0,0,0,.36)) brightness(1);
  }
  50%{
    filter:drop-shadow(0 34px 58px rgba(96,165,250,.35)) brightness(1.07);
  }
}

@keyframes mentorV6Glow{
  0%,100%{
    opacity:.72;
    transform:translate(-50%,-50%) scale(.96);
  }
  50%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.07);
  }
}

@keyframes mentorV6Voice{
  0%{
    transform:scale(.55);
    opacity:.75;
  }
  100%{
    transform:scale(1.38);
    opacity:0;
  }
}

@media(max-width:640px){
  .mentorV6Card{
    padding:20px 15px 18px !important;
    border-radius:32px !important;
  }

  .mentorV6Title{
    font-size:34px !important;
  }

  .mentorV6Sub{
    font-size:17px !important;
  }

  .mentorV6Stage{
    min-height:420px !important;
    border-radius:28px !important;
  }

  .mentorV6Img{
    width:106% !important;
    max-height:392px !important;
    bottom:-8px !important;
  }

  .mentorV6Bubble{
    font-size:15px !important;
    padding:14px 15px !important;
    line-height:1.30 !important;
  }
}


/* STUDETO MENTOR V8 VISIBLE FIX */
.mentorV7BubbleText,
.mentorV8BubbleText,
.introDesc.mentorV7BubbleText,
.introDesc.mentorV8BubbleText{
  max-height:none !important;
  height:auto !important;
  overflow:hidden !important;
  scrollbar-width:none !important;
  display:block !important;
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  background:rgba(255,255,255,.97) !important;
  font-size:15px !important;
  line-height:1.24 !important;
  font-weight:850 !important;
  padding:14px 16px !important;
  border-radius:22px !important;
}

.mentorV7BubbleText::-webkit-scrollbar,
.mentorV8BubbleText::-webkit-scrollbar{
  display:none !important;
}

.mentorV8Stage,
.mentorV7Stage{
  min-height:390px !important;
  overflow:hidden !important;
}

.mentorV8Img,
.mentorV7Img{
  bottom:-20px !important;
  max-height:370px !important;
  width:min(108%, 430px) !important;
  object-fit:cover !important;
  object-position:center top !important;
  transform-origin:50% 70% !important;
  animation:mentorV8Alive 2.9s ease-in-out infinite !important;
  will-change:transform,filter !important;
}

.mentorV8Stage::after,
.mentorV7Stage::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:57% !important;
  width:220px !important;
  height:220px !important;
  border-radius:999px !important;
  transform:translate(-50%,-50%) !important;
  background:radial-gradient(circle, rgba(96,165,250,.22), transparent 66%) !important;
  opacity:.8 !important;
  animation:mentorV8Aura 2.4s ease-in-out infinite !important;
  pointer-events:none !important;
}

.mentorV8Stage.speaking .mentorV8Img,
.mentorV7Stage.speaking .mentorV7Img,
.mentorV7Stage.speaking .mentorV8Img{
  animation:mentorV8Speak 0.82s ease-in-out infinite !important;
  filter:drop-shadow(0 32px 58px rgba(96,165,250,.42)) brightness(1.08) saturate(1.08) !important;
}

.mentorV8Stage.speaking::after,
.mentorV7Stage.speaking::after{
  animation:mentorV8AuraSpeak .9s ease-in-out infinite !important;
  opacity:1 !important;
}

.mentorV7Voice,
.mentorV8Voice,
.livingVoiceWave{
  display:block !important;
  opacity:0 !important;
}

.mentorV8Stage.speaking .mentorV7Voice,
.mentorV7Stage.speaking .mentorV7Voice,
.mentorV8Stage.speaking .mentorV8Voice,
.mentorV7Stage.speaking .livingVoiceWave{
  opacity:1 !important;
  border-color:rgba(125,211,252,.62) !important;
  animation:mentorV8Wave 1.05s ease-out infinite !important;
}

@keyframes mentorV8Alive{
  0%,100%{
    transform:translateX(-50%) translateY(0) scale(1.018) rotate(-.15deg);
    filter:drop-shadow(0 28px 44px rgba(0,0,0,.36)) brightness(1);
  }
  50%{
    transform:translateX(-50%) translateY(-10px) scale(1.045) rotate(.15deg);
    filter:drop-shadow(0 34px 54px rgba(59,130,246,.28)) brightness(1.04);
  }
}

@keyframes mentorV8Speak{
  0%,100%{
    transform:translateX(-50%) translateY(-3px) scale(1.035) rotate(-.2deg);
  }
  35%{
    transform:translateX(-50%) translateY(-13px) scale(1.06) rotate(.35deg);
  }
  70%{
    transform:translateX(-50%) translateY(-6px) scale(1.045) rotate(-.1deg);
  }
}

@keyframes mentorV8Aura{
  0%,100%{ transform:translate(-50%,-50%) scale(.94); opacity:.55; }
  50%{ transform:translate(-50%,-50%) scale(1.08); opacity:1; }
}

@keyframes mentorV8AuraSpeak{
  0%,100%{ transform:translate(-50%,-50%) scale(.96); opacity:.75; }
  50%{ transform:translate(-50%,-50%) scale(1.18); opacity:1; }
}

@keyframes mentorV8Wave{
  0%{ transform:scale(.55); opacity:.72; }
  100%{ transform:scale(1.45); opacity:0; }
}

@media(max-width:640px){
  .mentorV8Stage,
  .mentorV7Stage{
    min-height:370px !important;
  }

  .mentorV8Img,
  .mentorV7Img{
    max-height:350px !important;
    bottom:-18px !important;
  }

  .mentorV7BubbleText,
  .mentorV8BubbleText,
  .introDesc.mentorV7BubbleText,
  .introDesc.mentorV8BubbleText{
    font-size:14px !important;
    line-height:1.22 !important;
    padding:13px 15px !important;
  }
}


/* STUDETO MENTOR V10 SIDE BUBBLE */
.mentorV10Card{
  position:relative !important;
  overflow:hidden !important;
  padding:26px 22px 24px !important;
  border-radius:34px !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(168,85,247,.25), transparent 34%),
    radial-gradient(circle at 0% 38%, rgba(59,130,246,.22), transparent 42%),
    linear-gradient(180deg,#0b1223 0%,#071426 100%) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 28px 70px rgba(2,6,23,.34) !important;
}

.mentorV10Header{
  position:relative !important;
  z-index:3 !important;
  margin-bottom:22px !important;
}

.mentorV10Kicker{
  color:#7dd3fc !important;
  font-size:12px !important;
  font-weight:950 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  margin-bottom:8px !important;
}

.mentorV10Title{
  color:#fff !important;
  font-size:38px !important;
  line-height:1.06 !important;
  font-weight:950 !important;
  letter-spacing:-.04em !important;
}

.mentorV10Sub{
  color:rgba(226,232,240,.78) !important;
  margin-top:10px !important;
  font-size:18px !important;
  font-weight:850 !important;
}

.mentorV10Goal{
  position:relative !important;
  z-index:3 !important;
  display:flex !important;
  align-items:center !important;
  gap:15px !important;
  padding:14px 16px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  margin-bottom:18px !important;
}

.mentorV10GoalIcon{
  display:grid !important;
  place-items:center !important;
  width:56px !important;
  height:56px !important;
  border-radius:20px !important;
  background:rgba(37,99,235,.20) !important;
  font-size:28px !important;
}

.mentorV10Goal strong{
  display:block !important;
  color:#fff !important;
  font-size:32px !important;
  line-height:1 !important;
  font-weight:950 !important;
}

.mentorV10Goal span{
  display:block !important;
  color:rgba(226,232,240,.72) !important;
  font-size:16px !important;
  font-weight:850 !important;
  margin-top:4px !important;
}

.mentorV10Stage{
  position:relative !important;
  z-index:3 !important;
  display:grid !important;
  grid-template-columns: 1fr 46% !important;
  gap:12px !important;
  align-items:end !important;
  min-height:310px !important;
  overflow:hidden !important;
  border-radius:30px !important;
  padding:16px !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(168,85,247,.28), transparent 42%),
    radial-gradient(circle at 54% 48%, rgba(96,165,250,.22), transparent 44%),
    linear-gradient(180deg, rgba(15,23,42,.42), rgba(15,23,42,.72)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}

.mentorV10BubbleCol{
  position:relative !important;
  z-index:7 !important;
  align-self:center !important;
  min-width:0 !important;
}

.mentorV10BubbleLabel{
  color:#93c5fd !important;
  font-size:11px !important;
  font-weight:950 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  margin:0 0 8px 4px !important;
}

.mentorV10Bubble{
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-height:none !important;
  height:auto !important;
  overflow:hidden !important;
  scrollbar-width:none !important;
  padding:15px 16px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.97) !important;
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:0 18px 38px rgba(2,6,23,.22) !important;
  font-size:15px !important;
  line-height:1.24 !important;
  font-weight:900 !important;
}

.mentorV10Bubble::-webkit-scrollbar{
  display:none !important;
}

.mentorV10Bubble::after{
  content:"" !important;
  position:absolute !important;
  right:-8px !important;
  top:42% !important;
  width:16px !important;
  height:16px !important;
  background:rgba(255,255,255,.97) !important;
  transform:rotate(45deg) !important;
  border-top:1px solid rgba(255,255,255,.75) !important;
  border-right:1px solid rgba(255,255,255,.75) !important;
}

.mentorV10AvatarCol{
  position:relative !important;
  z-index:4 !important;
  min-height:295px !important;
  align-self:stretch !important;
}

.mentorV10Glow{
  position:absolute !important;
  left:54% !important;
  top:44% !important;
  width:220px !important;
  height:220px !important;
  transform:translate(-50%,-50%) !important;
  border-radius:999px !important;
  background:
    radial-gradient(circle, rgba(96,165,250,.35), transparent 64%),
    radial-gradient(circle, rgba(168,85,247,.20), transparent 72%) !important;
  opacity:.8 !important;
  animation:mentorV10Glow 3s ease-in-out infinite !important;
  pointer-events:none !important;
}

.mentorV10Img{
  position:absolute !important;
  right:-28px !important;
  bottom:-18px !important;
  width:230px !important;
  max-width:none !important;
  height:auto !important;
  max-height:330px !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  filter:drop-shadow(0 26px 38px rgba(0,0,0,.38)) brightness(1.03) !important;
  transform-origin:50% 68% !important;
  animation:mentorV10Alive 3.4s ease-in-out infinite !important;
  will-change:transform,filter !important;
}

.mentorV10Mouth{
  position:absolute !important;
  right:72px !important;
  top:104px !important;
  width:22px !important;
  height:5px !important;
  border-radius:999px !important;
  background:rgba(15,23,42,.70) !important;
  opacity:0 !important;
  z-index:9 !important;
  transform-origin:center center !important;
  pointer-events:none !important;
}

.mentorV10Stage.speaking .mentorV10Mouth{
  opacity:.75 !important;
  animation:mentorV10Mouth .26s ease-in-out infinite !important;
}

.mentorV10Stage.speaking .mentorV10Img{
  animation:mentorV10Speak .82s ease-in-out infinite !important;
  filter:drop-shadow(0 30px 48px rgba(96,165,250,.40)) brightness(1.08) saturate(1.06) !important;
}

.mentorV10Voice{
  position:absolute !important;
  right:52px !important;
  top:92px !important;
  width:70px !important;
  height:70px !important;
  border-radius:999px !important;
  border:2px solid rgba(125,211,252,.0) !important;
  opacity:0 !important;
  z-index:8 !important;
  pointer-events:none !important;
}

.mentorV10Stage.speaking .mentorV10Voice{
  opacity:1 !important;
  border-color:rgba(125,211,252,.62) !important;
}

.mentorV10Stage.speaking .mentorV10Voice.v1{
  animation:mentorV10Voice 1.05s ease-out infinite !important;
}

.mentorV10Stage.speaking .mentorV10Voice.v2{
  animation:mentorV10Voice 1.05s ease-out .34s infinite !important;
}

@keyframes mentorV10Alive{
  0%,100%{
    transform:translateY(0) scale(1.01) rotate(-.12deg);
  }
  50%{
    transform:translateY(-8px) scale(1.035) rotate(.12deg);
  }
}

@keyframes mentorV10Speak{
  0%,100%{
    transform:translateY(-2px) scale(1.025) rotate(-.18deg);
  }
  35%{
    transform:translateY(-10px) scale(1.055) rotate(.28deg);
  }
  70%{
    transform:translateY(-5px) scale(1.04) rotate(-.08deg);
  }
}

@keyframes mentorV10Mouth{
  0%,100%{
    transform:scaleX(.75) scaleY(.65);
    opacity:.45;
  }
  50%{
    transform:scaleX(1.15) scaleY(1.9);
    opacity:.9;
  }
}

@keyframes mentorV10Voice{
  0%{
    transform:scale(.55);
    opacity:.75;
  }
  100%{
    transform:scale(1.55);
    opacity:0;
  }
}

@keyframes mentorV10Glow{
  0%,100%{
    transform:translate(-50%,-50%) scale(.95);
    opacity:.65;
  }
  50%{
    transform:translate(-50%,-50%) scale(1.08);
    opacity:1;
  }
}

@media(max-width:640px){
  .mentorV10Card{
    padding:24px 18px 22px !important;
    border-radius:32px !important;
  }

  .mentorV10Title{
    font-size:34px !important;
  }

  .mentorV10Sub{
    font-size:17px !important;
  }

  .mentorV10Stage{
    grid-template-columns: 1fr 44% !important;
    gap:8px !important;
    min-height:292px !important;
    padding:14px !important;
    border-radius:28px !important;
  }

  .mentorV10AvatarCol{
    min-height:276px !important;
  }

  .mentorV10Img{
    right:-34px !important;
    bottom:-16px !important;
    width:218px !important;
    max-height:310px !important;
  }

  .mentorV10Bubble{
    font-size:14px !important;
    line-height:1.22 !important;
    padding:13px 14px !important;
    border-radius:22px !important;
  }

  .mentorV10Mouth{
    right:61px !important;
    top:98px !important;
    width:20px !important;
  }

  .mentorV10Voice{
    right:42px !important;
    top:84px !important;
    width:64px !important;
    height:64px !important;
  }
}


/* STUDETO VOICE BUTTON V12 REAL */
.mentorVoiceV12Wrap{
  display:flex !important;
  justify-content:flex-start !important;
  margin-top:10px !important;
  position:relative !important;
  z-index:50 !important;
}

.mentorVoiceV12Btn{
  appearance:none !important;
  border:0 !important;
  cursor:pointer !important;
  border-radius:999px !important;
  padding:10px 15px !important;
  background:linear-gradient(135deg,#2563eb,#7c3aed) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  font-weight:900 !important;
  font-size:14px !important;
  box-shadow:0 12px 26px rgba(37,99,235,.30) !important;
  touch-action:manipulation !important;
}

.mentorVoiceV12Btn:active{
  transform:scale(.97) !important;
}

@media(max-width:640px){
  .mentorVoiceV12Wrap{
    justify-content:center !important;
    margin-top:8px !important;
  }

  .mentorVoiceV12Btn{
    width:100% !important;
    max-width:270px !important;
    min-height:44px !important;
    font-size:14px !important;
  }
}


/* STUDETO VOICE BUTTON V13 ANDROID FIX */
.mentorVoiceV12Wrap{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  margin-top:12px !important;
  position:relative !important;
  z-index:80 !important;
}

.mentorVoiceV12Btn{
  appearance:none !important;
  border:0 !important;
  border-radius:999px !important;
  padding:13px 18px !important;
  min-height:48px !important;
  background:linear-gradient(135deg,#2563eb,#7c3aed) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  font-size:15px !important;
  font-weight:950 !important;
  box-shadow:0 14px 34px rgba(37,99,235,.30) !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  user-select:none !important;
}

.mentorVoiceV12Btn[data-voice-state="loading"]{
  opacity:.82 !important;
}

.mentorVoiceV12Btn[data-voice-state="speaking"]{
  background:linear-gradient(135deg,#06b6d4,#2563eb) !important;
  animation:mentorVoiceBtnPulseV13 .85s ease-in-out infinite !important;
}

.mentorVoiceV12Btn[data-voice-state="error"]{
  background:linear-gradient(135deg,#ef4444,#f97316) !important;
}

.mentorVoiceV12Status{
  min-height:16px !important;
  color:rgba(226,232,240,.82) !important;
  -webkit-text-fill-color:rgba(226,232,240,.82) !important;
  font-size:12px !important;
  font-weight:800 !important;
  text-align:center !important;
  line-height:1.25 !important;
  max-width:330px !important;
}

.mentorVoiceV12Status[data-voice-state="error"]{
  color:#fecaca !important;
  -webkit-text-fill-color:#fecaca !important;
}

@keyframes mentorVoiceBtnPulseV13{
  0%,100%{
    transform:scale(1);
    filter:brightness(1);
  }
  50%{
    transform:scale(1.035);
    filter:brightness(1.08);
  }
}

@media(max-width:640px){
  .mentorVoiceV12Btn{
    width:100% !important;
    max-width:300px !important;
    font-size:14px !important;
  }

  .mentorVoiceV12Status{
    font-size:11px !important;
  }
}

/* GPT INTRO DISPLAY V22 */
.mentorV10Bubble,
.introDesc.mentorV10Bubble{
  max-height:none !important;
  overflow:hidden !important;
  line-height:1.28 !important;
  font-size:15px !important;
}

/* VOICE FULL TEXT + EN PRONUNCIATION V26 */
.mentorVoiceV12Btn:disabled{
  opacity:.72 !important;
  cursor:wait !important;
}

.mentorVoiceV12Status{
  margin-top:7px !important;
  font-size:12px !important;
  font-weight:800 !important;
  color:rgba(226,232,240,.72) !important;
  text-align:center !important;
}

.engTerm{
  display:inline-block;
  padding:1px 6px;
  border-radius:8px;
  background:rgba(2,84,100,.09);
  color:#025464;
  font-weight:800;
  letter-spacing:.01em;
}

.endDashV30{
  display:grid;
  gap:18px;
  text-align:left;
}

.endDashHero{
  font-size:clamp(26px,5vw,42px);
  font-weight:900;
  letter-spacing:-.04em;
  text-align:center;
  margin-bottom:4px;
}

.endDashGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.endDashCard{
  border:1px solid rgba(2,84,100,.12);
  background:rgba(255,255,255,.72);
  border-radius:18px;
  padding:14px;
  box-shadow:0 10px 28px rgba(2,84,100,.08);
}

.endDashCard span,
.endSkillV30 span{
  display:block;
  font-size:12px;
  opacity:.7;
  margin-bottom:4px;
}

.endDashCard strong{
  font-size:24px;
  font-weight:900;
  color:#025464;
}

.endSkillV30{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-radius:20px;
  padding:16px;
  background:linear-gradient(135deg,rgba(2,84,100,.10),rgba(247,127,0,.10));
  border:1px solid rgba(2,84,100,.12);
}

.endSkillV30 strong{
  font-size:18px;
}

.endSkillScoreV30{
  font-size:22px;
  font-weight:900;
  color:#025464;
  white-space:nowrap;
}

.endSummaryV30{
  border-radius:18px;
  padding:14px 16px;
  line-height:1.55;
  background:rgba(2,84,100,.06);
  border:1px solid rgba(2,84,100,.10);
}

.endNextV30{
  text-align:center;
  font-weight:800;
  opacity:.85;
}

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

  .endSkillV30{
    align-items:flex-start;
    flex-direction:column;
  }
}

.endDashV31{
  max-width:820px;
  margin:0 auto;
}

.grammarProfileV31{
  display:grid;
  gap:12px;
  border-radius:24px;
  padding:16px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(2,84,100,.12);
  box-shadow:0 16px 42px rgba(2,84,100,.08);
}

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

.grammarHeadV31 > div:first-child{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.grammarHeadV31 span{
  font-weight:900;
  color:#025464;
}

.grammarHeadV31 strong{
  font-size:22px;
  color:#F77F00;
}

.grammarTotalBarV31,
.grammarBarV31{
  height:10px;
  border-radius:999px;
  background:rgba(2,84,100,.10);
  overflow:hidden;
}

.grammarTotalBarV31 i,
.grammarBarV31 i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#025464,#F77F00);
}

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

.grammarSkillV31{
  border-radius:18px;
  padding:13px;
  background:rgba(232,241,242,.72);
  border:1px solid rgba(2,84,100,.10);
}

.grammarSkillV31.active{
  outline:2px solid rgba(247,127,0,.35);
  background:linear-gradient(135deg,rgba(247,127,0,.12),rgba(2,84,100,.06));
}

.grammarTopV31{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:9px;
}

.grammarTopV31 strong{
  display:block;
  font-size:16px;
  color:#025464;
}

.grammarTopV31 span{
  display:block;
  font-size:12px;
  opacity:.74;
  margin-top:2px;
}

.grammarTopV31 b{
  font-size:15px;
  white-space:nowrap;
  color:#025464;
}

.grammarBottomV31{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  font-size:12px;
}

.grammarBottomV31 span{
  opacity:.78;
}

.grammarBottomV31 em{
  font-style:normal;
  font-weight:900;
  color:#F77F00;
  white-space:nowrap;
}

.grammarSkillV31.done .grammarBottomV31 em{
  color:#0b7a44;
}

@media(max-width:520px){
  .grammarHeadV31 > div:first-child,
  .grammarTopV31,
  .grammarBottomV31{
    flex-direction:column;
    align-items:flex-start;
  }
}
.l15Room{
  height:100dvh;
  min-height:0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
}

.l15Header{
  position:relative;
}

.l15Topics{
  width:100%;
  max-width:720px;
  margin:10px auto 0;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
}

.l15Topics button{
  flex:0 0 auto;
  min-height:34px;
  padding:7px 11px;
  border:1px solid rgba(159,176,173,.22);
  border-radius:8px;
  background:rgba(20,33,38,.86);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

.l15Topics button.active{
  border-color:rgba(88,204,2,.48);
  background:rgba(88,204,2,.14);
  color:#eaffdc;
}

.l15Chat{
  width:100%;
  max-width:720px;
  min-height:0;
  margin:0 auto;
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto;
}

.l15Message{
  max-width:min(82%, 520px);
  display:grid;
  gap:6px;
}

.l15Message.user{
  align-self:flex-end;
}

.l15Message.ai{
  align-self:flex-start;
}

.l15Bubble{
  padding:12px 13px;
  border:1px solid rgba(159,176,173,.16);
  border-radius:8px;
  background:rgba(16,25,29,.96);
  color:var(--text);
  font-size:17px;
  line-height:1.32;
  font-weight:800;
  overflow-wrap:anywhere;
}

.l15Message.user .l15Bubble{
  border-color:rgba(47,128,237,.42);
  background:rgba(47,128,237,.2);
}

.l15Message.ai .l15Bubble{
  border-color:rgba(88,204,2,.32);
  background:rgba(88,204,2,.1);
}

.l15Hint{
  padding:0 4px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
  font-weight:750;
}

.l15CorrectedAnswer{
  color:#eaffdc;
}

.l15Correction{
  color:#ffd2d2;
}

.l15AnswerHelp{
  color:#d8e8e4;
}

.l15Source{
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.78;
}

.l15ExampleChips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:1px 0 0;
}

.l15ExampleChip{
  max-width:100%;
  min-height:30px;
  padding:5px 9px;
  border:1px solid rgba(159,176,173,.22);
  border-radius:8px;
  background:rgba(20,33,38,.78);
  color:var(--text);
  font-size:12px;
  line-height:1.25;
  font-weight:850;
  overflow-wrap:anywhere;
  cursor:pointer;
}

.l15ExampleChip:hover{
  border-color:rgba(88,204,2,.42);
  background:rgba(88,204,2,.12);
}

.l15Composer{
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:10px 14px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(159,176,173,.14);
  background:rgba(7,16,19,.96);
}

.l15Voice{
  margin:0 0 9px;
}

.l15InputRow{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}

.l15Input{
  width:100%;
  min-height:48px;
  border-radius:8px;
}

.l15Send{
  position:static;
  min-width:96px;
  min-height:48px;
  border-radius:8px;
}

@media (max-width:520px){
  .l15Message{
    max-width:92%;
  }

  .l15InputRow{
    grid-template-columns:1fr;
  }

  .l15Send{
    width:100%;
  }
}

.quickAnswerChip{
  max-width:100%;
  min-height:42px;
  padding:9px 12px;
  border:2px solid rgba(159,176,173,.2);
  border-radius:8px;
  background:#1b3037;
  color:var(--text);
  font-size:15px;
  font-weight:900;
  overflow-wrap:anywhere;
  cursor:pointer;
  box-shadow:0 4px 0 #0a1518;
  transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease,opacity .12s ease;
  touch-action:manipulation;
}

.quickAnswerChip:hover:not(:disabled){
  background:#243f48;
}

.quickAnswerChip:active,
.quickAnswerChip.selected{
  transform:translateY(2px);
  border-color:rgba(88,204,2,.76);
  background:rgba(88,204,2,.17);
  color:#ecffdf;
  box-shadow:0 2px 0 #0a1518;
}

.choiceGrid{
  display:grid;
  gap:9px;
  margin-top:10px;
}

.choiceButton{
  position:relative;
  width:100%;
  min-height:56px;
  padding:12px 14px;
  border:2px solid rgba(159,176,173,.18);
  border-radius:8px;
  background:var(--panel-2);
  color:var(--text);
  font-size:16px;
  font-weight:850;
  text-align:left;
  cursor:pointer;
  box-shadow:0 5px 0 rgba(7,16,19,.95);
  transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease,opacity .12s ease;
  touch-action:manipulation;
}

.choiceButton:hover:not(:disabled){
  border-color:rgba(159,176,173,.34);
  background:#193038;
}

.choiceButton:active,
.choiceButton.selected,
.choiceButton.pressed{
  transform:translateY(2px);
  border-color:rgba(47,128,237,.8);
  background:#19345a;
  box-shadow:0 2px 0 rgba(7,16,19,.95);
}

.choiceButton.correct{
  border-color:rgba(88,204,2,.88);
  background:rgba(88,204,2,.17);
  color:#ecffdf;
  animation:cardPop .24s ease;
}

.choiceButton.wrong{
  border-color:rgba(255,90,95,.88);
  background:rgba(255,90,95,.14);
  color:#ffe1e2;
  animation:shake .28s ease;
}

.choiceButton:disabled{
  cursor:default;
}

.choiceButton:disabled:not(.selected):not(.correct):not(.wrong){
  opacity:.62;
}

.wordOrder{
  display:grid;
  gap:9px;
  margin-top:10px;
}

.builtAnswer{
  min-height:54px;
  padding:10px;
  border:1px dashed rgba(159,176,173,.34);
  border-radius:8px;
  background:#081114;
  color:var(--text);
  font-size:18px;
  font-weight:800;
  line-height:1.35;
  display:flex;
  align-items:flex-start;
  align-content:flex-start;
  flex-wrap:wrap;
  gap:8px;
  transition:border-color .16s ease,background .16s ease;
}

.builtAnswer.hasWords{
  border-style:solid;
  border-color:rgba(88,204,2,.28);
}

.builtAnswer:empty:before{
  content:"Tap words in order";
  color:var(--muted);
  font-weight:700;
}

.builtAnswer.correct{
  border-style:solid;
  border-color:rgba(88,204,2,.72);
  background:rgba(88,204,2,.08);
}

.builtAnswer.wrong{
  border-style:solid;
  border-color:rgba(255,90,95,.72);
  background:rgba(255,90,95,.08);
}

.builtChip{
  max-width:100%;
  min-height:34px;
  padding:7px 9px;
  border:1px solid rgba(88,204,2,.26);
  border-radius:8px;
  background:rgba(88,204,2,.12);
  color:var(--text);
  font-weight:900;
  overflow-wrap:anywhere;
  cursor:pointer;
  animation:chipIn .16s ease;
  touch-action:manipulation;
}

.chipGrid{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  min-width:0;
  align-items:flex-start;
}

.chipButton{
  max-width:100%;
  min-height:44px;
  padding:9px 12px;
  border:2px solid rgba(159,176,173,.2);
  border-radius:8px;
  background:#1d2f35;
  color:var(--text);
  font-weight:850;
  overflow-wrap:anywhere;
  cursor:pointer;
  box-shadow:0 4px 0 #0a1518;
  transition:transform .12s ease,opacity .12s ease,background .12s ease,box-shadow .12s ease;
  touch-action:manipulation;
}

.chipButton:active{
  transform:translateY(2px);
  box-shadow:0 2px 0 #0a1518;
}

.chipButton:hover:not(.used){
  background:#264149;
}

.chipButton.used{
  opacity:.28;
  pointer-events:none;
}

.chipButton.flyOut{
  animation:chipFly .18s ease;
}

.feedbackPanel{
  position:absolute;
  left:12px;
  right:12px;
  bottom:8px;
  z-index:12;
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:0;
  padding:10px 11px;
  border-radius:8px;
  border:1px solid rgba(159,176,173,.14);
  background:rgba(16,25,29,.96);
  color:var(--text);
  font-size:14px;
  line-height:1.32;
  white-space:pre-line;
  overflow-wrap:anywhere;
  max-height:min(24svh,180px);
  overflow-y:auto;
  overflow-anchor:none;
  transition:opacity .18s ease,transform .18s ease;
}

.feedbackTitle{
  font-size:15px;
  line-height:1.2;
}

.feedbackText{
  color:rgba(245,247,242,.88);
}

.feedbackPanel.correct{
  border-color:rgba(88,204,2,.4);
  background:rgba(88,204,2,.12);
}

.feedbackPanel.wrong,
.feedbackPanel.network{
  border-color:rgba(255,90,95,.4);
  background:rgba(255,90,95,.12);
}

.feedbackPanel.retry{
  border-color:rgba(248,184,78,.42);
  background:rgba(248,184,78,.12);
}

.feedbackPanel.correction{
  border-color:rgba(255,126,64,.48);
  background:linear-gradient(90deg,rgba(255,90,95,.1),rgba(248,184,78,.08));
}

.feedbackPanel.retry .feedbackTitle{
  color:#ffe0a6;
}

.feedbackPanel.correction .feedbackTitle{
  color:#ffcf9d;
}

.feedbackPanel.correct .feedbackTitle{
  color:#b7e94b;
}

.feedbackPanel.wrong .feedbackTitle{
  color:#ffb3b5;
}

.summaryCard{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
}

.summaryCard:before{
  content:"";
  grid-column:1 / -1;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--amber),var(--blue));
  box-shadow:0 0 18px rgba(88,204,2,.18);
}

.summaryStat{
  min-height:78px;
  padding:13px;
  border:1px solid rgba(159,176,173,.15);
  border-radius:8px;
  background:rgba(8,17,20,.72);
}

.summaryStat strong{
  display:block;
  color:var(--text);
  font-size:28px;
  line-height:1;
  font-weight:950;
}

.summaryStat span{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}

.summaryCloser{
  grid-column:1 / -1;
  margin:2px 0 0;
  padding:12px;
  border:1px solid rgba(88,204,2,.22);
  border-radius:8px;
  background:rgba(88,204,2,.09);
  color:#eaffdc;
  font-size:15px;
  font-weight:850;
  line-height:1.35;
}

.submitBar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:30;
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(159,176,173,.14);
  background:rgba(7,16,19,.96);
  backdrop-filter:blur(14px);
}

.primaryButton,
.secondaryButton{
  min-height:48px;
  border:0;
  border-radius:8px;
  font-size:16px;
  font-weight:950;
  cursor:pointer;
  touch-action:manipulation;
}

.primaryButton{
  background:linear-gradient(180deg,#70df1a,var(--green));
  color:#0c2104;
  box-shadow:0 5px 0 var(--green-dark);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}

.primaryButton:not(:disabled):hover{
  filter:brightness(1.04);
}

.primaryButton:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 var(--green-dark);
}

.primaryButton:disabled,
.secondaryButton:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

.secondaryButton{
  min-width:76px;
  padding:0 12px;
  border:1px solid rgba(159,176,173,.18);
  background:#1d2a2f;
  color:var(--text);
}

.taskIn{
  animation:taskIn .22s ease;
}

.taskLeaving{
  animation:taskLeaving .12s ease;
}

.successFlash{
  animation:successFlash .42s ease;
}

.retryWarn{
  border-color:rgba(248,184,78,.5);
  box-shadow:0 0 0 3px rgba(248,184,78,.08),var(--shadow);
}

.correctionLock{
  padding:14px;
  border-color:rgba(255,108,64,.78);
  box-shadow:0 0 0 2px rgba(255,108,64,.1),0 0 20px rgba(255,90,95,.11),var(--shadow);
}

.taskSurface.correctionLock .answerArea{
  margin-top:6px;
}

.softWrong{
  border-color:rgba(255,90,95,.38);
  box-shadow:0 0 0 3px rgba(255,90,95,.06),var(--shadow);
}

.pulse{
  animation:pulse .32s ease;
}

.bump{
  animation:bump .28s ease;
}

.shake{
  animation:shake .3s ease;
}

.softNudge{
  animation:softNudge .28s ease;
}

.correctionPulse{
  animation:correctionPulse .58s ease;
}

.correctionShake{
  animation:correctionShake .22s ease;
}

.feedbackIn{
  animation:feedbackIn .18s ease;
}

.comboPop{
  animation:comboPop .34s ease;
}

.momentumIn{
  animation:momentumIn .2s ease;
}

.momentumLift{
  animation:momentumLift .28s ease;
}

.summaryIn{
  animation:summaryIn .28s ease;
}

.burstIn{
  animation:burstIn .72s ease forwards;
}

.fxLayer{
  position:fixed;
  inset:0;
  z-index:35;
  pointer-events:none;
  overflow:hidden;
}

.tapRipple{
  position:absolute;
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  border-radius:999px;
  background:rgba(245,247,242,.22);
  animation:tapRipple .46s ease-out forwards;
}

@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

@keyframes xpFloat{
  0%{opacity:0;transform:translateY(4px) scale(.9)}
  25%{opacity:1}
  100%{opacity:0;transform:translateY(-18px) scale(1.08)}
}

@keyframes bump{
  0%{transform:translateY(0)}
  45%{transform:translateY(-3px)}
  100%{transform:translateY(0)}
}

@keyframes comboPop{
  0%{transform:scale(.96)}
  55%{transform:scale(1.06)}
  100%{transform:scale(1)}
}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

@keyframes softNudge{
  0%,100%{transform:translateX(0)}
  35%{transform:translateX(-3px)}
  70%{transform:translateX(3px)}
}

@keyframes correctionPulse{
  0%{box-shadow:0 0 0 2px rgba(255,126,64,.05),var(--shadow)}
  45%{box-shadow:0 0 0 5px rgba(255,126,64,.1),var(--shadow)}
  100%{box-shadow:0 0 0 2px rgba(255,126,64,.06),var(--shadow)}
}

@keyframes correctionShake{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-3px)}
  65%{transform:translateX(3px)}
}

@keyframes feedbackIn{
  from{opacity:.2;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes taskIn{
  from{opacity:.65;transform:translateY(12px) scale(.992)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes introIn{
  from{opacity:.55;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes introLeaving{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-14px)}
}

@keyframes taskLeaving{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:.72;transform:translateY(-6px) scale(.996)}
}

@keyframes successFlash{
  0%{box-shadow:var(--shadow)}
  45%{box-shadow:0 0 0 4px rgba(88,204,2,.32),var(--shadow)}
  100%{box-shadow:var(--shadow)}
}

@keyframes burstIn{
  0%{opacity:0;transform:translateY(8px) scale(.94)}
  18%{opacity:1;transform:translateY(0) scale(1.04)}
  70%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-10px) scale(.98)}
}

@keyframes tapRipple{
  from{opacity:.5;transform:scale(.7)}
  to{opacity:0;transform:scale(4)}
}

@keyframes cardPop{
  0%{transform:scale(.99)}
  55%{transform:scale(1.015)}
  100%{transform:scale(1)}
}

@keyframes chipIn{
  from{opacity:.2;transform:translateY(8px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes chipFly{
  from{transform:translateY(0) scale(1);opacity:1}
  to{transform:translateY(-10px) scale(.92);opacity:.28}
}

@keyframes momentumIn{
  from{opacity:.25;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes momentumLift{
  0%{transform:translateY(0)}
  45%{transform:translateY(-3px)}
  100%{transform:translateY(0)}
}

@keyframes summaryIn{
  from{opacity:.2;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

@media (min-width:640px){
  .runtimeHeader{
    padding-left:22px;
    padding-right:22px;
  }

  .lessonMain{
    padding-top:26px;
  }

  .introCard{
    padding:34px 30px 28px;
  }

  .taskSurface{
    padding:26px;
  }

  .question{
    font-size:46px;
  }

  .isTextChallenge .question{
    font-size:30px;
  }

  .choiceGrid{
    grid-template-columns:1fr 1fr;
  }

  .submitBar{
    left:50%;
    width:min(720px,100%);
    transform:translateX(-50%);
    border-left:1px solid rgba(159,176,173,.14);
    border-right:1px solid rgba(159,176,173,.14);
  }
}

@media (max-width:420px){
  :root{
    --submit-bar-space:74px;
  }

  .runtimeHeader{
    padding:9px 12px 8px;
  }

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

  .metricRow{
    max-width:172px;
  }

  .metric{
    min-height:30px;
    padding:7px 8px;
    font-size:10px;
  }

  .metric strong{
    font-size:12px;
  }

  .question{
    font-size:25px;
    margin:6px 0 7px;
  }

  .isTextChallenge .question{
    font-size:20px;
  }

  .choiceButton{
    min-height:50px;
    padding:10px 11px;
  }

  .choiceGrid,
  .wordOrder,
  .answerArea.textChallenge{
    gap:7px;
  }

  .lessonMain{
    padding:9px 10px 6px;
  }

  .runtimeShell[data-state="intro"] .lessonMain{
    padding-top:0;
    padding-bottom:0;
  }

  .introHero{
    min-height:0;
  }

  .introCard{
    min-height:min(390px,100%);
    padding:24px 16px 18px;
  }

  .introTitle{
    font-size:36px;
  }

  .introFeatures{
    gap:7px;
    margin:18px 0;
  }

  .introFeatures span{
    min-height:40px;
    font-size:12px;
  }

  .taskSurface{
    min-height:0;
    padding:12px;
  }

  .runtimeShell[data-state="retry"] .taskSurface,
  .runtimeShell[data-state="correctionMode"] .taskSurface,
  .taskSurface.correctionLock,
  .runtimeShell[data-state="retry"] .taskSurface.isTextChallenge,
  .runtimeShell[data-state="correctionMode"] .taskSurface.isTextChallenge,
  .taskSurface.correctionLock.isTextChallenge{
    min-height:0;
    padding:12px;
  }

  .runtimeNotice{
    margin-bottom:7px;
    padding:8px 9px;
  }

  .stepInfo{
    margin-bottom:9px;
    font-size:14px;
  }

  .feedbackPanel{
    max-height:112px;
    margin-top:6px;
    padding:9px;
    font-size:13px;
  }

  .feedbackTitle{
    font-size:15px;
  }

  .answerInput{
    min-height:48px;
    padding:11px;
    font-size:16px;
  }

  textarea.answerInput,
  textarea.answerInput.challengeInput{
    min-height:86px;
    max-height:168px;
    max-height:min(28svh,168px);
  }

  .runtimeShell[data-state="retry"] textarea.answerInput,
  .runtimeShell[data-state="correctionMode"] textarea.answerInput,
  .taskSurface.correctionLock textarea.answerInput,
  .runtimeShell[data-state="retry"] textarea.answerInput.challengeInput,
  .runtimeShell[data-state="correctionMode"] textarea.answerInput.challengeInput,
  .taskSurface.correctionLock textarea.answerInput.challengeInput{
    min-height:86px;
    max-height:168px;
    max-height:min(28svh,168px);
  }

  .tokenHints,
  .chipGrid,
  .quickAnswerGrid{
    gap:5px;
  }

  .tapAnswerPreview{
    min-height:46px;
    padding:10px 11px;
    font-size:16px;
  }

  .quickAnswerChip{
    min-height:38px;
    padding:8px 10px;
    font-size:14px;
  }

  .builtAnswer{
    min-height:52px;
    padding:10px;
    gap:6px;
  }

  .builtChip{
    min-height:32px;
    padding:6px 8px;
  }

  .chipButton{
    min-height:40px;
    padding:8px 10px;
  }

  .resultBurst{
    top:12px;
    right:12px;
    max-width:52%;
  }

  .summaryCard{
    gap:8px;
  }

  .summaryStat{
    min-height:68px;
    padding:11px;
  }

  .summaryStat strong{
    font-size:24px;
  }

  .submitBar{
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding:7px 10px calc(8px + env(safe-area-inset-bottom));
  }

  .primaryButton,
  .secondaryButton{
    min-height:42px;
    font-size:15px;
  }

  .secondaryButton{
    min-width:0;
    padding:0 10px;
  }

  .primaryButton{
    grid-column:1 / -1;
  }

  .secondaryButton.hidden + .secondaryButton.hidden + .primaryButton{
    grid-column:1 / -1;
  }
}

@media (max-height:520px) and (orientation:landscape){
  .runtimeHeader{
    position:sticky;
  }

  .runtimeShell{
    --submit-bar-space:86px;
  }

  .introHero{
    min-height:0;
  }

  .introCard{
    max-width:520px;
    padding:18px;
  }

  .introTitle{
    margin-top:10px;
    font-size:32px;
  }

  .introFeatures{
    grid-template-columns:repeat(4,1fr);
    margin:14px 0;
  }

  .taskSurface,
  .taskSurface.isTextChallenge{
    min-height:0;
  }

  .question{
    font-size:26px;
  }

  textarea.answerInput{
    min-height:78px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *:before,
  *:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}


.mentorGuide{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(135deg,#1e293b,#0f172a);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  line-height:1.5;
}

.mentorGuideBadge{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  opacity:.75;
  margin-bottom:8px;
}

.mentorGuideText{
  font-size:15px;
  font-weight:650;
}


.introGuide{
  margin:16px 0;
}

/* STUDETO_L15_VOICE_UI_HOTFIX_V1 */
.l15VoiceBar,
.studetoL15VoiceBar,
.voiceBridgeBar,
#l15VoiceBar {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 10px 0 12px 0 !important;
  width: 100% !important;
}

.l15VoiceBar button,
.studetoL15VoiceBar button,
.voiceBridgeBar button,
#l15VoiceBar button,
button[data-l15-voice],
button[data-l15-speak],
.l15SpeakBtn,
.l15MicBtn {
  width: 56px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  border-radius: 16px !important;
  padding: 0 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 56px !important;
}

.l15VoiceBar .primaryBtn,
.studetoL15VoiceBar .primaryBtn,
.voiceBridgeBar .primaryBtn {
  width: 56px !important;
  height: 48px !important;
  min-height: 48px !important;
}

.l15InputRow {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.l15InputRow input,
.l15InputRow textarea,
#answerInput {
  min-height: 54px !important;
  font-size: 18px !important;
}

.l15Room .primaryBtn,
.l15Room button {
  touch-action: manipulation !important;
}

.l15Chat {
  padding-bottom: 20px !important;
}