/* صفحة التدريب */
.practice{padding-bottom:180px}
.stage{padding-top:28px;max-width:820px}
.pick-h{margin-bottom:16px}
.levels{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.levels button{min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:500 15px var(--font);cursor:pointer}
.levels button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pick-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pick-list a{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none}
.pick-list b{font:700 18px var(--head)}
.pick-list p{grid-column:1/-1;color:var(--ink-2);font-size:15px}
.pick-list .meta{display:flex;gap:6px}
@media (hover:hover){.pick-list a:hover{border-color:var(--ink)}}

.intro{padding:28px;display:grid;gap:14px}
.intro-tips{margin:0;padding-inline-start:20px;color:var(--ink-2);display:grid;gap:6px}
.intro-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

.chat-head{position:sticky;top:64px;z-index:5;background:var(--paper);display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:16px}
.chat-head b{font:700 18px var(--head);margin-inline-end:6px}
.chat-head #end{margin-inline-start:auto}
.demo-meter{display:flex;align-items:center;gap:8px}
.meter{width:90px;height:6px;background:var(--line);border-radius:3px;overflow:hidden;display:block}
.meter i{display:block;height:100%;background:var(--accent);width:100%;transition:width .4s}

.thread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.msg{display:flex;flex-direction:column;gap:6px;max-width:92%}
.msg.tutor{align-self:flex-end}
.msg.me{align-self:flex-start}
.msg .who{font-size:13px;color:var(--ink-2)}
.msg.tutor .who{text-align:end}
.bub{padding:12px 16px;border-radius:var(--radius);font-size:17px;line-height:1.55;direction:ltr;text-align:left}
.tutor .bub{background:var(--surface);border:1px solid var(--line)}
.me .bub{background:var(--ink);color:var(--paper)}
.bub-row{display:flex;align-items:flex-start;gap:8px;direction:ltr}
.replay{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink-2);cursor:pointer;margin-top:6px}
.replay svg{width:16px;height:16px}

.fbk{align-self:flex-start;width:min(100%,640px);border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:var(--radius);background:var(--surface);padding:14px 16px;display:grid;gap:12px}
.fbk.clean{border-inline-start-color:var(--good)}
.fbk-top{display:flex;align-items:center;gap:10px;justify-content:space-between}
.score{font:700 15px var(--font);font-variant-numeric:tabular-nums;padding:2px 10px;border-radius:4px;background:var(--good-bg);color:var(--good)}
.score.mid{background:var(--sun-bg);color:#8A5A00}
.score.low{background:var(--bad-bg);color:var(--accent-ink)}
:root[data-theme="dark"] .score.mid{color:var(--sun)}
.better{display:flex;gap:8px;align-items:flex-start;direction:ltr}
.better p{font-size:17px;color:var(--good);font-weight:600;flex:1}
.item{display:grid;grid-template-columns:52px 1fr;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.item .k{font-size:13px;font-weight:600;color:var(--accent-ink);padding-top:2px}
.item .pair{direction:ltr;text-align:right;font-size:16px}
.item .pair .en{display:inline}
.item .why{color:var(--ink-2);font-size:15px}
.arr{display:inline-block;width:16px;height:10px;margin-inline:6px;vertical-align:middle;color:var(--ink-2)}
.words{display:flex;flex-wrap:wrap;gap:6px}
.words span{padding:2px 8px;border:1px solid var(--line);border-radius:4px;font-size:14px}
.thinking{align-self:flex-end;display:flex;gap:5px;padding:14px 16px}
.thinking i{width:7px;height:7px;border-radius:50%;background:var(--ink-2);animation:blink 1s infinite}
.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
.note{align-self:center;font-size:14px;color:var(--ink-2);text-align:center;max-width:520px}
.wall{align-self:stretch;padding:20px;display:grid;gap:12px;text-align:center;justify-items:center}

/* الشريط السفلي */
.dock{position:fixed;inset-inline:0;bottom:0;z-index:15;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.dock-in{max-width:820px;padding-block:12px;display:grid;gap:10px}
.dock-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.dock-row .icon-btn{justify-self:start}
.mic-state{justify-self:end;color:var(--ink-2);text-align:end}
.mic{position:relative;width:72px;height:72px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;touch-action:manipulation}
.mic svg{width:30px;height:30px}
.mic .ring{position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--accent);opacity:0;transform:scale(calc(1 + var(--lvl,0) * .35))}
.mic.rec{background:var(--ink)}
.mic.rec .ring{opacity:.5}
.mic:disabled{opacity:.45;cursor:not-allowed}
.live-text{min-height:0;font-size:16px;color:var(--ink-2);text-align:center}
.live-text:empty{display:none}
.type-row{display:flex;gap:8px}
.type-row input{flex:1}

/* الملخص */
.summary{display:grid;gap:18px;padding-top:12px}
.sum-score{display:flex;align-items:baseline;gap:12px}
.sum-score b{font:700 64px var(--font);font-variant-numeric:tabular-nums;line-height:1}
.sum-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sum-stats div{padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.sum-stats span{display:block;font-size:13px;color:var(--ink-2)}
.sum-stats b{font-size:22px;font-variant-numeric:tabular-nums}
.sum-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:4px 16px}
.sum-list .item:first-child{border-top:0}
.sum-cta{display:flex;flex-wrap:wrap;gap:10px}
.cta-box{padding:20px;background:var(--sun-bg);border:1px solid var(--line);border-radius:var(--radius);display:grid;gap:10px}
@media (max-width:560px){
  .stage{padding-top:16px}
  .chat-head{top:64px}
  .demo-meter .muted{display:none}
  .msg{max-width:100%}
  .sum-stats b{font-size:18px}
}