:root{
      --bg-cream:#FFF8E5;
      --bg-cream-soft:#FFFDF4;
      --accent-yellow:#FFDE59;
      --accent-yellow-deep:#FFBA08;
      --accent-peach:#FFD4A8;
      --accent-coral:#FF8A5C;
      --accent-mint:#C4F1BE;
      --text-main:#111827;
      --text-muted:#6b7280;
      --border-soft:rgba(148,163,184,.35);
    }

    body{
      margin:0;
      min-height:100vh;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      color:var(--text-main);
      background:
        radial-gradient(circle at 0 0, #FFF9D9 0, transparent 55%),
        radial-gradient(circle at 100% 0, #FFE3CC 0, transparent 55%),
        linear-gradient(to bottom,#FFFDF6,#FFF8E5);
      position:relative;
      overflow-x:hidden;
    }

    /* фоновые буквы */
    .bg-letter{
      position:fixed;
      font-weight:900;
      font-size:120px;
      color:rgba(255,255,255,0.55);
      mix-blend-mode:screen;
      pointer-events:none;
      z-index:-1;
    }
    .bg-letter.a{top:5%;left:5%;transform:rotate(-12deg);}
    .bg-letter.e{top:18%;right:2%;transform:rotate(9deg);}
    .bg-letter.i{bottom:18%;left:10%;transform:rotate(5deg);}
    .bg-letter.o{bottom:8%;right:8%;transform:rotate(-7deg);}
    .bg-letter.u{top:45%;left:45%;transform:rotate(15deg);opacity:0.4;}

    .center-gif-block{
      width:100%;
      display:flex;
      justify-content:center;
      margin:1.2rem 0;
    }
    .center-gif-block img{
      max-width:220px;
      width:100%;
      border-radius:12px;
    }

    /* Верхний бар */
    .top-bar{
      backdrop-filter:blur(16px);
      background:linear-gradient(to right,rgba(255,255,255,.9),rgba(255,249,219,.9));
      border-bottom:1px solid rgba(0,0,0,.06);
    }

    .back-to-course-btn{
      font-size:0.85rem;
      padding:6px 14px;
      border-radius:8px;
      background:#fff9e6;
      border:1px solid #facc15;
      color:#92400e;
      text-decoration:none;
      transition:0.25s;
      white-space:nowrap;
    }
    .back-to-course-btn:hover{
      background:#fef3c7;
      border-color:#eab308;
      color:#78350f;
      box-shadow:0 4px 10px rgba(234,179,8,0.25);
    }

    .lesson-shell{
      max-width:980px;
      margin:0 auto;
      padding:1.5rem 1.25rem 3.2rem;
    }

    /* HERO */
    .hero-card{
      position:relative;
      border-radius:2rem;
      padding:1.6rem 1.7rem 1.7rem;
      background:
        radial-gradient(circle at 0 0,#FFFDF5,transparent 65%),
        radial-gradient(circle at 120% 10%,rgba(255,222,89,.55),transparent 55%),
        #FFFFFFE6;
      border:1px solid rgba(255,255,255,.6);
      box-shadow:0 20px 60px rgba(0,0,0,.16);
      overflow:hidden;
      display:flex;
      gap:1.6rem;
      align-items:stretch;
    }

    .hero-left{
      flex:1.3;
      min-width:0;
    }
    .hero-right{
      flex:1;
      min-width:220px;
      position:relative;
    }

    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      font-size:.65rem;
      text-transform:uppercase;
      letter-spacing:.16em;
      padding:.35rem .9rem;
      border-radius:999px;
      border:1px solid rgba(156,163,175,.55);
      background:rgba(255,255,255,.85);
      color:var(--text-muted);
    }
    .hero-title{
      font-size:1.95rem;
      line-height:1.1;
      letter-spacing:-0.03em;
    }
    .hero-title .em{
      background:linear-gradient(90deg,#FF8A5C,#FFDE59);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .hero-tagline{
      font-size:.8rem;
      color:var(--text-muted);
    }

    .hero-right-inner{
      position:relative;
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      padding-right:1.4rem;
    }

    .hero-bubbles-cluster{
      position:relative;
      width:170px;
      height:130px;
    }

    .hero-bubble{
      position:absolute;
      border-radius:1.1rem;
      padding:.45rem .8rem;
      font-size:.78rem;
      background:#fffdfa;
      border:1px solid rgba(148,163,184,.35);
      box-shadow:0 10px 28px rgba(15,23,42,.18);
    }

    .hero-bubble--hello{
      font-weight:700;
      font-size:.9rem;
      background:linear-gradient(135deg,#FFDE59,#FFB347);
      color:#78350f;
      box-shadow:0 12px 32px rgba(248,181,48,.65);
      top:0;
      right:8px;
    }
    .hero-bubble--morning{
      background:#fff7ed;
      top:46px;
      left:0;
    }
    .hero-bubble--hi{
      background:#FFFFFF;
      bottom:4px;
      right:26px;
    }

    .hero-bg-circle{
      position:absolute;
      width:280px;
      height:280px;
      border-radius:999px;
      background:radial-gradient(circle,#FFE9A6,#FFCE8A,#FFB48F);
      opacity:.65;
      right:-80px;
      top:-80px;
      filter:blur(10px);
    }

    /* НАВИГАЦИЯ ШАГОВ — маршрут */
    .step-nav{
      position:relative;
      display:flex;
      justify-content:center;
      gap:1.6rem;
      margin:1.8rem 0 1.4rem;
      flex-wrap:wrap;
    }
    .step-nav::before{
      content:"";
      position:absolute;
      left:8%;
      right:8%;
      top:20px;
      height:2px;
      background:linear-gradient(90deg,#fee2e2,#fde68a,#dcfce7);
      z-index:0;
    }

    .step-dot{
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:.25rem;
      font-size:.65rem;
      color:var(--text-muted);
      max-width:110px;
      text-align:center;
    }

    .step-dot-circle{
      width:32px;height:32px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      border:1px solid rgba(148,163,184,.7);
      background:rgba(255,255,255,.95);
      box-shadow:0 8px 18px rgba(0,0,0,.08);
      font-size:.8rem;
    }

    .step-dot-label{
      line-height:1.3;
    }

    .step-dot--active .step-dot-circle{
      background:linear-gradient(145deg,#FFDE59,#FFB347);
      border-color:#f97316;
      color:#78350f;
      box-shadow:0 0 0 2px rgba(255,237,213,.95),0 10px 28px rgba(249,115,22,.35);
      transform:translateY(-1px);
    }

    .step-dot--done .step-dot-circle{
      background:linear-gradient(145deg,#4ade80,#22c55e);
      border-color:#16a34a;
      color:#ecfdf5;
    }

    .step-dot--active .step-dot-label{
      color:#92400e;
      font-weight:600;
    }
    .step-dot--done .step-dot-label{
      color:#166534;
    }

    /* ПАНЕЛИ ШАГОВ */
    .step-panel{
      display:none;
      border-radius:1.7rem;
      background:rgba(255,255,255,.98);
      border:1px solid rgba(148,163,184,.25);
      box-shadow:0 18px 52px rgba(15,23,42,.18);
      padding:1.25rem 1.4rem 1.4rem;
    }
    .step-panel--visible{
      display:block;
    }

    .step-panel-header{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:.5rem;
      margin-bottom:.75rem;
    }

    .step-pill{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.26rem .7rem;
      border-radius:999px;
      font-size:.68rem;
      border:1px solid rgba(156,163,175,.65);
      background:#F9FAFB;
      color:var(--text-muted);
    }

    .step-icon{
      font-size:1.4rem;
      opacity:.95;
    }

    .step-body-text{
      font-size:.88rem;
      line-height:1.5;
      color:#1f2937;
    }
    .step-body-text--lead{
      font-size:.96rem;
      font-weight:500;
    }
    .step-body-text--accent{
      font-size:.9rem;
      font-weight:600;
    }

    .highlight{
      background:linear-gradient(to right,rgba(255,222,89,.5),rgba(255,222,89,0));
      padding:0 .15rem;
      border-radius:.4rem;
    }

    .soft-note{
      font-size:.73rem;
      color:var(--text-muted);
    }

    .soft-block{
      border-radius:1.1rem;
      padding:.8rem .9rem;
      border:1px solid rgba(226,232,240,1);
      background:linear-gradient(135deg,#FFFCF7,#FFF8E5);
      font-size:.8rem;
    }

.soft-block--blue{
  background:linear-gradient(135deg,#FFE4E6,#FFF1F2); /* нежно-розовый */
  border-color:#fecaca;
}

    .soft-block--green{
      background:linear-gradient(135deg,#ecfdf5,#f0fdf4);
      border-color:#bbf7d0;
    }

    .soft-block--rose{
      background:linear-gradient(135deg,#fff1f2,#ffe4e6);
      border-color:#fecaca;
    }
 .soft-block--orange{
      background:linear-gradient(135deg,#ffe9d6,#ffdcc4);
      border-color:#F8b98a;
    }

    .input-main{
      width:100%;
      border-radius:.95rem;
      border:1px solid rgba(209,213,219,1);
      background:#FFFFFF;
      padding:.5rem .7rem;
      font-size:.84rem;
      outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }

    .input-main:focus{
      border-color:#f97316;
      box-shadow:0 0 0 1px rgba(249,115,22,.4);
    }

    textarea.input-main{
      resize:vertical;
      min-height:90px;
    }

.btn-main{
  border-radius:999px;
  border:none;
  padding:.55rem 1.2rem;
  font-size:.8rem;
  font-weight:600;
  background:linear-gradient(135deg,#FF9F1C,#FFDE59);
  color:#78350f;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(249,115,22,0.45); /* тёплая оранжевая подсветка */
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.btn-main:active{
  transform:translateY(1px);
  box-shadow:0 6px 16px rgba(249,115,22,0.6);
}

    .btn-main:disabled{
      opacity:.4;
      box-shadow:none;
      cursor:default;
      transform:none;
    }

    .btn-ghost{
      border-radius:999px;
      padding:.5rem 1rem;
      border:1px solid rgba(148,163,184,.5);
      background:rgba(255,255,255,.9);
      font-size:.78rem;
      color:var(--text-muted);
      cursor:pointer;
    }

    /* Таблицы звуков */
    .sound-table-wrapper{
      margin-top:.6rem;
      border-radius:1rem;
      border:1px solid rgba(226,232,240,1);
      background:#ffffff;
      box-shadow:0 10px 28px rgba(15,23,42,.06);
      overflow:hidden;
    }

    .sound-table-scroll{
      overflow-x:auto;
    }

    .sound-table{
      width:100%;
      border-collapse:collapse;
      font-size:.8rem;
      min-width:420px;
    }

    .sound-table thead{
      background:linear-gradient(90deg,#FFF8E5,#FFE6B3);
    }

    .sound-table th,
    .sound-table td{
      padding:.45rem .6rem;
      border-bottom:1px solid rgba(229,231,235,1);
      text-align:left;
    }

    .sound-table th{
      font-weight:700;
      font-size:.78rem;
      color:#78350f;
      white-space:nowrap;
    }

    .sound-table td:first-child{
      font-weight:600;
      white-space:nowrap;
    }

    .sound-table td:nth-child(2){
      font-family:"SF Mono",ui-monospace;
      white-space:nowrap;
    }

    .sound-table tr:nth-child(even) td{
      background:#FFFCF7;
    }

.summary-box {
  background: linear-gradient(135deg, #FFFDF6 0%, #FFE3CC 100%);
  padding: 30px;
  border-radius: 15px;
  margin: 30px 0;
  border: 2px solid #FFBA08;
  box-shadow: 0 10px 26px rgba(248, 181, 48, 0.32);
}

.summary-box h3 {
  color: #EA580C;
  font-size: 1.5em;
  margin-bottom: 20px;
}

.summary-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.summary-box li {
  padding: 12px 0;
  font-size: 1.05em;
  color: #374151;
  line-height: 1.6;
  border-bottom: 1px solid rgba(248, 171, 64, 0.25);
}

.summary-box li:last-child {
  border-bottom: none;
}

@media (hover: none) and (pointer: fine) {
  .option-btn:hover:not(:disabled) {
    border-color: #FF8A5C;
    background: #FFF8E5;
    transform: translateX(5px);
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.25);
  }
}
  @media (hover: none) and (pointer: coarse) {
  .option-btn:hover:not(:disabled) {
    border-color: #e5e7eb;
    background: #ffffff;
    transform: none;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
  }
}
    /* tooltip + озвучка */
    .word-tip{
      position:relative;
      cursor:pointer;
      border-bottom:1px dashed rgba(156,163,175,.8);
    }
    .word-tip::after{
      content:attr(data-ru);
      position:absolute;
      left:50%;
      bottom:120%;
      transform:translateX(-50%) translateY(4px);
      font-size:.72rem;
      color:#111827;
      background:#fffefb;
      border-radius:.55rem;
      padding:.25rem .55rem;
      white-space:nowrap;
      box-shadow:0 10px 25px rgba(15,23,42,.30);
      opacity:0;
      pointer-events:none;
      transition:opacity .15s ease-out, transform .15s ease-out;
      z-index:20;
    }
    .word-tip::before{
      content:"";
      position:absolute;
      left:50%;
      bottom:110%;
      transform:translateX(-50%);
      border-width:6px 6px 0 6px;
      border-style:solid;
      border-color:#fffefb transparent transparent transparent;
      opacity:0;
      transition:opacity .15s ease-out;
      z-index:19;
    }
    .word-tip:hover::after,
    .word-tip:hover::before{
      opacity:1;
    }
    .word-tip:hover::after{
      transform:translateX(-50%) translateY(0);
    }

    .mini-toast{
      font-size:.75rem;
      color:#78350f;
      background:linear-gradient(135deg, #ffedd5, #fed7aa);
      border-radius:.9rem;
      padding:.45rem .7rem;
      display:inline-flex;
      align-items:center;
      gap:.25rem;
      border:1px solid #bbf7d0;
      box-shadow:0 4px 12px rgba(251, 146, 60, 0.25);
    }

    /* Аудио-задание */
    .audio-task-header{
      display:flex;
      gap:0.8rem;
      align-items:flex-start;
      margin-bottom:0.4rem;
    }
    .audio-mic-circle{
      width:40px;
      height:40px;
      border-radius:999px;
      background:radial-gradient(circle,#fee2e2,#fecaca);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 10px 24px rgba(248,113,113,0.45);
      font-size:1.2rem;
    }
.recording-bar-wrapper{
      margin-top:0.6rem;
      height:4px;
      border-radius:999px;
      background:rgba(252,211,77,0.35);
      overflow:hidden;
    }
    .recording-bar-fill{
      height:100%;
      width:0;
      background:linear-gradient(90deg,#f97316,#facc15);
      transition:width 0.18s ease-out;
    }
    .recording-status{
      font-size:0.75rem;
      color:#6b7280;
      margin-top:0.25rem;
    }
    /* Бейдж */
    .badge-icon-wrapper{
      width:44px;
      height:44px;
      border-radius:999px;
      background:#ffffff;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 6px 14px rgba(248,181,48,0.5);
    }
    .badge-icon-img{
      max-width:32px;
      max-height:32px;
      display:block;
    }

    .hidden{display:none;}

    /* --------- МОБИЛЬНАЯ ВЕРСТКА --------- */
    @media (max-width: 768px) {

      .lesson-shell{
        padding: 1rem .9rem 2.2rem;
      }

      /* Хедер: аккуратно упаковать элементы */
      .top-bar .max-w-7xl{
        gap: .5rem;
        flex-wrap: wrap;
      }

      #user-status{
        font-size: 0.7rem;
        flex-basis: 100%;
        order: 2;
      }

  
      .back-to-course-btn{
        order: 3;
        margin-right: 0;
      }

      /* Герой: колонки складываем в столбик */
      .hero-card{
        flex-direction: column;
        padding: 1.3rem 1.1rem 1.4rem;
        gap: 1.1rem;
      }

      .hero-title{
        font-size: 1.5rem;
      }

      .hero-right{
        width: 100%;
        min-width: 0;
      }

      .hero-right-inner{
        justify-content: flex-end;
        padding-right: 0;
      }

      .hero-bg-circle{
        width: 210px;
        height: 210px;
        right: -50px;
        top: -60px;
      }

      /* «Случайно» разбросанные пузырьки, но без налезания на текст */
      .hero-bubbles-cluster{
        align-items: flex-end;
        gap: .35rem;
      }

      .hero-bubble{
        font-size: .8rem;
        padding: .4rem .7rem;
      }

      .hero-bubble--hello{
        transform: none;
        margin-right: .4rem;
        margin-bottom: .1rem;
      }

      .hero-bubble--morning{
        transform: none;
        margin-right: 1.1rem;
      }

      .hero-bubble--hi{
        transform: none;
        margin-right: .2rem;
        margin-top: .15rem;
      }

      /* Навигация по шагам — компактнее */
      .step-nav{
        gap: 1rem;
        margin: 1.3rem 0 1.1rem;
      }

      .step-nav::before{
        left: 10%;
        right: 10%;
        top: 22px;
      }

      .step-dot{
        max-width: 80px;
        font-size: .6rem;
      }
    }
.word-tooltip {
  position: absolute;
  background: #fffdfa;
  border: 1px solid #f5d58a;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  color: #444;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  max-width: 160px;              /* ✨ ограничиваем ширину */
  z-index: 9999;
  bottom: 110%;
    left: 50%;
  transform: translateX(-50%); /* ✨ компактное позиционирование над словом */
  pointer-events: none;
  white-space: nowrap;
}

.word-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #fffdfa transparent transparent transparent;
}