/* مُستخرَج من student-home.html (كتلة <style> رقم 1، الجزء 2 من 2) — منقولٌ حرفيّاً، وموضعُ وسمَي الجزأين في الصفحة هو موضعُ الكتلة نفسُه (ترتيبُ التتالي كما كان). */
  /* Open Mic: when JS controls heights, pause CSS animation for clean visualizer */
  .child-voice-wave.live span { animation-play-state: paused; }
  @keyframes child-voice-wave {
    0%, 100% { transform: scaleY(.45); opacity: .62; }
    50% { transform: scaleY(1.15); opacity: 1; }
  }
  body.child-lesson-active #mode-bar { display: none; }
  body.child-lesson-active main {
    max-width: none !important;
    padding: 0 !important;
  }
  body.child-lesson-active #tasmi-section {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(14px, 3vw, 28px);
    background: #f0fdfa;
  }
  body.child-lesson-active #child-auto-shell {
    width: min(860px, 100%);
  }
  body.child-lesson-active .child-stage {
    min-height: calc(100svh - clamp(28px, 6vw, 56px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(18px, 3vw, 30px);
    border-radius: clamp(22px, 4vw, 36px);
    padding: clamp(18px, 4vw, 42px);
    background: transparent;
    border: 0;
  }
  body.child-lesson-active .child-stage-top,
  body.child-lesson-active #child-stage-stars,
  body.child-lesson-active #child-ayah-segments {
    display: none !important;
  }
  body.child-lesson-active .child-stage-meta {
    width: min(520px, 100%);
    display: flex;
    justify-content: center;
    order: 1;
    margin: 0;
    padding: 0;
  }
  body.child-lesson-active #child-stage-reciter { display: none; }
  body.child-lesson-active #child-stage-progress {
    position: relative;
    min-width: min(420px, 100%);
    padding: 13px 18px;
    border-radius: 999px;
    text-align: center;
    color: #052e10;
    background: linear-gradient(90deg, rgba(34,197,94,.18), rgba(34,197,94,.06));
    border: 1px solid rgba(34,197,94,.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 18px -8px rgba(34,197,94,.35);
    font-weight: 900;
  }
  body.child-lesson-active .child-verse-card {
    width: min(720px, 100%);
    order: 2;
    border: 1px solid rgba(255,255,255,.86);
    background: #fff;
    color: #07140b;
    padding: clamp(26px, 6vw, 62px);
    margin: 0;
    border-radius: clamp(26px, 4vw, 42px);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.22), 0 0 0 1px rgba(34,197,94,.06);
    overflow: hidden;
  }
  body.child-lesson-active #child-ayah-words,
  body.child-lesson-active #ayah-full-text {
    min-height: clamp(178px, 30svh, 300px);
    font-size: clamp(54px, 9vw, 72px);
    line-height: 1.35;
    color: #06140a;
    text-shadow: none;
    overflow: visible;
    white-space: normal;
    word-break: keep-all;
    padding-block: .15em;
  }
  .child-live-word {
    display: inline-block;
    margin-inline: .12em;
    padding: .06em .22em;
    border-radius: 14px;
    color: #334155;
    background: transparent;
    transition: all .2s ease;
  }
  .child-live-word.is-done {
    color: #166534;
    background: rgba(34,197,94,.18);
  }
  .child-live-word.is-current {
    color: #052e16;
    background: rgba(34,197,94,.28);
    box-shadow: 0 10px 24px -18px rgba(34,197,94,.8);
  }
  .child-live-word.is-wrong {
    color: #9a3412;
    background: rgba(251,146,60,.24);
  }
  .quran-ayah-marker {
    display: inline-grid;
    place-items: center;
    width: 1.25em;
    height: 1.25em;
    margin-inline: .18em;
    border-radius: 50%;
    border: .07em solid #8f7a3f;
    color: #7a642b;
    background:
      radial-gradient(circle at center, #fffdf3 45%, transparent 47%),
      conic-gradient(from 45deg, #b59b57 0 12.5%, #fffdf3 0 25%, #b59b57 0 37.5%, #fffdf3 0 50%, #b59b57 0 62.5%, #fffdf3 0 75%, #b59b57 0 87.5%, #fffdf3 0);
    font-family: 'Amiri Quran', serif;
    font-size: .58em;
    font-weight: 900;
    line-height: 1;
    vertical-align: middle;
    box-shadow: 0 0 0 .04em rgba(143, 122, 63, .28) inset;
  }
  body.child-lesson-active .child-listen-panel {
    width: min(380px, 100%);
    order: 3;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.72);
    border-top: 4px solid #22c55e;
    border-radius: 28px;
    padding: 22px 18px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8px 32px 0 rgba(22,163,74,.14);
  }
  body.child-lesson-active #child-stage-help {
    display: block;
    font-size: 14px;
    color: #059669;
    font-weight: 600;
    margin-bottom: 8px;
  }
  body.child-lesson-active #child-stage-status {
    display: block;
    color: #064e3b;
    font-size: clamp(22px, 5vw, 32px);
    font-weight: 900;
    margin-bottom: 4px;
  }
  body.child-lesson-active .child-mic-orb {
    width: 96px;
    height: 96px;
    margin: 0 auto 12px;
    color: #fff;
  }
  body.child-lesson-active .child-mic-orb .ring {
    display: none;
  }
  body.child-lesson-active .child-mic-orb .core {
    width: 96px;
    height: 96px;
    background: #22c55e;
    border: none;
    box-shadow: 0 0 0 0 rgba(16,185,129,.7);
    animation: micPulse 2s infinite;
  }
  body.child-lesson-active .child-mic-orb[data-state="muted"] .core,
  body.child-lesson-active .child-mic-orb[data-state="thinking"] .core {
    background: #94a3b8;
    border: none;
    box-shadow: 0 10px 24px -8px rgba(15,23,42,.4);
    animation: none;
    color: #fff;
  }
  body.child-lesson-active .child-mic-orb svg {
    width: 44px;
    height: 44px;
  }
  @media (max-width: 640px) {
      .student-top-actions {
        gap: 6px;
      }
      .student-top-btn {
        padding: 9px 10px;
        font-size: 11px;
      }
      .tasmi-stage {
        padding: 12px;
        border-radius: 28px;
      }
    body.child-lesson-active #child-ayah-words,
    body.child-lesson-active #ayah-full-text {
      min-height: clamp(138px, 24svh, 210px);
      font-size: clamp(38px, 12vw, 56px);
      line-height: 1.45;
      max-width: 100%;
    }
    body.child-lesson-active .child-stage {
      min-height: 100svh;
      border-radius: 0;
      border-inline: 0;
      padding-inline: 18px;
    }
    body.child-lesson-active #child-stage-progress {
      min-width: 100%;
    }
    body.child-lesson-active .child-verse-card {
      padding: 24px 14px;
      overflow: visible;
    }
    body.child-lesson-active .child-live-word {
      margin-inline: .04em;
      padding: .04em .14em;
      border-radius: 12px;
    }
    body.child-lesson-active .child-mic-orb {
      width: 88px;
      height: 88px;
    }
    body.child-lesson-active .child-mic-orb .core {
      width: 88px;
      height: 88px;
    }
  }

  /* ═══════════════════════════════════════
     تقييم النجوم
  ═══════════════════════════════════════ */
  .star { font-size:22px; transition: transform .2s; display:inline-block; }
  .star.lit { animation: star-pop .3s ease; }
  @keyframes star-pop{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}

  /* ═══════════════════════════════════════
     تأثير الدخول
  ═══════════════════════════════════════ */
  .fade-in { animation: fadeIn .4s ease both; }
  @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  /* ═══════════════════════════════════════
     No-scrollbar
  ═══════════════════════════════════════ */
  .no-sb::-webkit-scrollbar{display:none}

  /* ═══════════════════════════════════════
     Sprint 9: تصميم الدرس الفاتح
  ═══════════════════════════════════════ */
  .quran-frame {
    position: relative;
    background: #fff;
    border-radius: 22px;
    border: 3px solid #16a34a;
    outline: 1.5px dashed rgba(22,163,74,.40);
    outline-offset: -10px;
    box-shadow:
      0 0 0 8px rgba(22,163,74,.10),
      0 0 0 18px rgba(22,163,74,.05),
      0 24px 60px -28px rgba(15,23,42,.18);
  }
  .glass-card-light {
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 8px 32px 0 rgba(22,163,74,.12);
  }
  @keyframes micPulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
    70%  { transform: scale(1.08); box-shadow: 0 0 0 18px rgba(34,197,94,0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  }
  @keyframes micWaveBar {
    0%,100% { transform: scaleY(.4); }
    50%     { transform: scaleY(1); }
  }
  .mic-wave-bar { animation: micWaveBar .8s ease-in-out infinite; }
  #child-mic-badge { display:none; }
  body.child-lesson-active #child-mic-badge { display:block; }
  .lesson-dots { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:14px; }
  .lesson-dots span { height:6px; border-radius:999px; transition:width .3s ease; }
  .lesson-dots .dot-active { width:28px; background:#22c55e; }
  .lesson-dots .dot-rest { width:8px; background:rgba(34,197,94,.22); }
  .result-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0 18px; }
  .result-stat-grid .stat-cell {
    background:#fff;
    border-radius:18px;
    padding:12px 6px;
    border:1px solid rgba(34,197,94,.14);
    box-shadow:0 4px 12px -6px rgba(15,23,42,.10);
    text-align:center;
  }
  .result-stat-grid .stat-cell .stat-label {
    font-size:11px;
    color:#16a34a;
    font-weight:700;
    margin-bottom:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:18px;
  }
  .result-stat-grid .stat-cell .stat-label svg {
    width:15px;
    height:15px;
    opacity:.9;
  }
  .result-stat-grid .stat-cell .stat-value { font-size:22px; font-weight:900; color:#0f172a; line-height:1; display:block; }
  .quote-box {
    padding:16px 18px;
    border-radius:20px;
    background:#f0fdf4;
    border:2px dashed rgba(34,197,94,.28);
    color:#166534;
    font-size:15px;
    font-weight:700;
    font-style:italic;
    line-height:1.65;
    text-align:center;
  }
  /* child-mode: خلفية فاتحة لجميع شاشات الطفل (ترحيب + نتيجة + إنهاء) */
  body.child-mode #tasmi-section {
    background: #f0fdfa;
  }