/* ═══ مملكة الحروف — Claymorphism / kids ═══ */
:root {
  --indigo: #4f46e5; --indigo-2: #818cf8; --indigo-deep: #3730a3;
  --accent: #ea580c; --accent-2: #fb923c;
  --bg: #eef2ff; --card: #fff; --ink: #1e1b4b; --muted: #5b5f8a;
  --border: #c7d2fe;
  --ok: #16a34a; --no: #dc2626;
  --c0: #f43f5e; --c1: #f59e0b; --c2: #84cc16; --c3: #14b8a6;
  --c4: #0ea5e9; --c5: #8b5cf6; --c6: #ec4899; --c7: #f97316;
  --r: 24px; --r-sm: 16px; --r-lg: 34px;
  --clay: 0 10px 0 rgba(30, 27, 75, .10), 0 18px 32px rgba(30, 27, 75, .16);
  --clay-in: inset 0 -6px 0 rgba(30, 27, 75, .07), inset 0 5px 0 rgba(255, 255, 255, .75);
  --t: .18s cubic-bezier(.34, 1.56, .64, 1);
  --font-d: 'Baloo Bhaijaan 2', 'Cairo', system-ui, sans-serif;
  --font-b: 'Cairo', system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh; font-family: var(--font-b); color: var(--ink);
  background: linear-gradient(170deg, #e0e7ff 0%, var(--bg) 45%, #fdf4ff 100%);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 12px; }

.bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(6px); opacity: .5; }
.b1 { width: 260px; height: 260px; background: radial-gradient(circle at 35% 30%, #a5b4fc, #6366f1); top: -70px; right: -60px; animation: drift 14s ease-in-out infinite; }
.b2 { width: 180px; height: 180px; background: radial-gradient(circle at 35% 30%, #fda4af, #fb7185); bottom: 6%; left: -50px; animation: drift 18s ease-in-out infinite reverse; }
.b3 { width: 140px; height: 140px; background: radial-gradient(circle at 35% 30%, #fcd34d, #f59e0b); top: 42%; right: 6%; animation: drift 20s ease-in-out infinite; }
.b4 { width: 200px; height: 200px; background: radial-gradient(circle at 35% 30%, #6ee7b7, #14b8a6); bottom: -60px; right: 22%; animation: drift 16s ease-in-out infinite reverse; }
@keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-24px, 26px) scale(1.09); } }

.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }

/* ── Topbar ── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .7rem clamp(.7rem, 3vw, 1.6rem);
  background: rgba(238, 242, 255, .82); backdrop-filter: blur(14px);
  border-bottom: 2px solid rgba(199, 210, 254, .8);
}
.icon-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 700;
  background: #fff; color: var(--indigo-deep);
  box-shadow: 0 4px 0 rgba(30, 27, 75, .12), 0 8px 16px rgba(30, 27, 75, .1);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { transform: translateY(-2px) rotate(-2deg); }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(30, 27, 75, .12); }
.icon-btn.is-off { background: #ffe4e6; color: var(--no); }
.hud { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .8rem; border-radius: 999px;
  background: #fff; font-weight: 800; font-size: .9rem;
  box-shadow: 0 4px 0 rgba(30, 27, 75, .1);
  font-variant-numeric: tabular-nums;
}
.chip svg { width: 17px; height: 17px; color: var(--indigo); }
.chip-star svg { color: var(--c1); }
.chip-time svg { color: var(--accent); }
.chip.pop { animation: chipPop .35s ease; }
@keyframes chipPop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
.is-hidden { display: none !important; }

/* ── Screens / layout ── */
#main { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: clamp(.8rem, 3vw, 2rem) clamp(.7rem, 3vw, 1.5rem) 5rem; }
.screen { display: none; }
.screen.is-active { display: block; animation: fadeUp .38s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero { text-align: center; padding: clamp(1rem, 5vw, 2.4rem) 0 1.4rem; }
.kicker {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .12em;
  color: var(--indigo-deep); background: rgba(129, 140, 248, .22);
  padding: .3rem .9rem; border-radius: 999px; margin-bottom: .9rem;
}
.title { font-family: var(--font-d); font-size: clamp(2.1rem, 9vw, 3.8rem); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; }
.title-letters { display: inline-flex; gap: .18em; vertical-align: middle; }
.title-letters span {
  display: inline-grid; place-items: center; width: 1.5em; height: 1.5em;
  border-radius: 30% 40% 34% 38%; color: #fff; font-size: .78em;
  background: linear-gradient(165deg, var(--cl), var(--cc));
  box-shadow: var(--clay-in), 0 6px 0 rgba(30, 27, 75, .14);
  animation: bob 2.6s ease-in-out infinite;
}
.lede { color: var(--muted); font-size: clamp(.95rem, 3.4vw, 1.1rem); max-width: 34rem; margin: 1rem auto 1.6rem; font-weight: 600; }
.lede.center { text-align: center; }

.section-title {
  display: flex; align-items: center; gap: .5rem; font-family: var(--font-d);
  font-size: clamp(1.2rem, 4.6vw, 1.6rem); font-weight: 800; margin: 1.6rem 0 .9rem;
}
.section-title svg { width: 24px; height: 24px; color: var(--indigo); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem; border-radius: 999px; font-size: 1rem; font-weight: 800;
  font-family: var(--font-d); transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
.btn svg { width: 21px; height: 21px; }
.btn-primary { background: linear-gradient(160deg, var(--indigo-2), var(--indigo)); color: #fff; box-shadow: 0 7px 0 var(--indigo-deep), 0 14px 26px rgba(79, 70, 229, .35); }
.btn-accent { background: linear-gradient(160deg, var(--accent-2), var(--accent)); color: #fff; box-shadow: 0 7px 0 #9a3412, 0 14px 26px rgba(234, 88, 12, .32); }
.btn-lg { font-size: 1.15rem; padding: 1rem 2.4rem; }
.btn:hover { transform: translateY(-3px); filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(30, 27, 75, .3); }

/* ── Mode cards ── */
.mode-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.mode-card {
  position: relative; text-align: right; padding: 1.3rem 1.2rem 1.2rem;
  border-radius: var(--r-lg); background: #fff; color: var(--ink);
  box-shadow: var(--clay-in), var(--clay); border: 3px solid var(--border);
  transition: transform var(--t), box-shadow var(--t); overflow: hidden;
}
.mode-card::after {
  content: ''; position: absolute; inset: auto -20% -55% auto; width: 150px; height: 150px;
  border-radius: 50%; background: var(--cc); opacity: .13;
}
.mode-card:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--clay-in), 0 16px 0 rgba(30, 27, 75, .12), 0 26px 44px rgba(30, 27, 75, .2); }
.mode-card:active { transform: translateY(3px); }
.mode-icon {
  display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: .8rem;
  border-radius: 34% 44% 38% 42%; background: linear-gradient(165deg, var(--cl), var(--cc));
  box-shadow: var(--clay-in), 0 6px 0 rgba(30, 27, 75, .16);
}
.mode-icon svg { width: 32px; height: 32px; color: #fff; }
.mode-name { display: block; font-family: var(--font-d); font-size: 1.22rem; font-weight: 800; }
.mode-desc { display: block; color: var(--muted); font-size: .88rem; font-weight: 600; margin-top: .25rem; }
.mode-tag {
  display: inline-flex; align-items: center; gap: .25rem; margin-top: .7rem;
  font-size: .72rem; font-weight: 800; padding: .2rem .6rem; border-radius: 999px;
  background: rgba(30, 27, 75, .06); color: var(--cc);
}

/* ── Settings ── */
.settings { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.setting { background: #fff; border: 3px solid var(--border); border-radius: var(--r); padding: .9rem 1rem; box-shadow: var(--clay-in), 0 6px 0 rgba(30, 27, 75, .08); }
.setting-label { display: block; font-weight: 800; font-size: .9rem; margin-bottom: .55rem; color: var(--indigo-deep); }
.seg { display: flex; gap: .35rem; background: #f1f5ff; padding: .3rem; border-radius: 999px; }
.seg-center { justify-content: center; max-width: 22rem; margin: 0 auto 1.2rem; }
.seg button {
  flex: 1; padding: .42rem .6rem; border-radius: 999px; font-size: .84rem; font-weight: 800;
  color: var(--muted); transition: all var(--t); white-space: nowrap;
}
.seg button:hover { color: var(--indigo-deep); background: #fff; }
.seg button.is-on { background: linear-gradient(160deg, var(--indigo-2), var(--indigo)); color: #fff; box-shadow: 0 3px 0 var(--indigo-deep); }

/* ── Letter swatches ── */
.c0 { --cc: #f43f5e; --cl: #fda4af; }
.c1 { --cc: #f59e0b; --cl: #fcd34d; }
.c2 { --cc: #65a30d; --cl: #bef264; }
.c3 { --cc: #0d9488; --cl: #5eead4; }
.c4 { --cc: #0284c7; --cl: #7dd3fc; }
.c5 { --cc: #7c3aed; --cl: #c4b5fd; }
.c6 { --cc: #db2777; --cl: #f9a8d4; }
.c7 { --cc: #ea580c; --cl: #fdba74; }

/* ── Quiz screen ── */
.prompt-card {
  text-align: center; background: #fff; border: 3px solid var(--border);
  border-radius: var(--r-lg); padding: 1.2rem 1rem 1.4rem; margin-bottom: 1.3rem;
  box-shadow: var(--clay-in), var(--clay);
}
.prompt-label { font-weight: 800; font-size: 1rem; color: var(--indigo-deep); margin-bottom: .7rem; }
.target-letter {
  display: grid; place-items: center; width: clamp(120px, 34vw, 168px); height: clamp(120px, 34vw, 168px);
  margin: 0 auto .9rem; border-radius: 30% 40% 34% 38%;
  background: linear-gradient(165deg, var(--cl), var(--cc));
  box-shadow: var(--clay-in), 0 12px 0 rgba(30, 27, 75, .18), 0 22px 34px rgba(30, 27, 75, .22);
  transition: transform var(--t); animation: bob 3.2s ease-in-out infinite;
}
.target-letter:hover { transform: scale(1.05) rotate(-3deg); }
.target-letter span { font-family: var(--font-d); font-size: clamp(4rem, 20vw, 6rem); font-weight: 800; color: #fff; line-height: 1; text-shadow: 0 5px 0 rgba(30, 27, 75, .16); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.btn-ghost-sm {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .95rem; border-radius: 999px; font-weight: 800; font-size: .86rem;
  background: #eef2ff; color: var(--indigo-deep); border: 2px solid var(--border);
  transition: transform var(--t), background var(--t);
}
.btn-ghost-sm svg { width: 17px; height: 17px; }
.btn-ghost-sm:hover { background: #e0e7ff; transform: translateY(-2px); }

.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: clamp(.7rem, 2.6vw, 1.1rem); max-width: 720px; margin: 0 auto; }
.opt {
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  font-family: var(--font-d); font-weight: 800; color: #fff; line-height: 1;
  font-size: clamp(2.6rem, 13vw, 4rem);
  border-radius: 26% 34% 30% 32%; border: 3px solid rgba(255, 255, 255, .55);
  background: linear-gradient(165deg, var(--cl), var(--cc));
  box-shadow: var(--clay-in), 0 10px 0 rgba(30, 27, 75, .18), 0 18px 28px rgba(30, 27, 75, .18);
  transition: transform var(--t), box-shadow var(--t), opacity .3s;
  text-shadow: 0 4px 0 rgba(30, 27, 75, .18);
}
.opt:hover { transform: translateY(-6px) rotate(2deg) scale(1.03); }
.opt:active { transform: translateY(4px); box-shadow: var(--clay-in), 0 3px 0 rgba(30, 27, 75, .2); }
.opt.is-right { animation: rightPop .5s ease; box-shadow: var(--clay-in), 0 0 0 8px rgba(22, 163, 74, .35), 0 12px 0 rgba(22, 163, 74, .5); }
.opt.is-wrong { animation: shake .42s ease; opacity: .55; }
@keyframes rightPop { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px) rotate(-4deg); } 50% { transform: translateX(10px) rotate(4deg); } 80% { transform: translateX(-6px); } }

/* ── Bubbles screen ── */
.bubbles-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.target-chip {
  display: inline-flex; align-items: center; gap: .6rem; padding: .4rem .55rem .4rem 1.1rem;
  background: #fff; border: 3px solid var(--border); border-radius: 999px; font-weight: 800;
  box-shadow: var(--clay-in), 0 6px 0 rgba(30, 27, 75, .1);
}
.target-chip b {
  display: grid; place-items: center; width: 56px; height: 56px; color: #fff;
  border-radius: 30% 40% 34% 38%; font-family: var(--font-d); font-size: 2rem;
  background: linear-gradient(165deg, var(--cl), var(--cc));
  box-shadow: var(--clay-in), 0 5px 0 rgba(30, 27, 75, .16);
}
.timebar { flex: 1; min-width: 150px; height: 22px; background: #fff; border: 3px solid var(--border); border-radius: 999px; overflow: hidden; box-shadow: var(--clay-in); }
.timebar span { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #84cc16); transition: width .25s linear; }
.timebar.is-low span { background: linear-gradient(90deg, #f97316, #ef4444); }
.playfield {
  position: relative; height: min(60vh, 500px); overflow: hidden;
  border: 3px dashed var(--border); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(224, 231, 255, .55));
}
.bubble {
  position: absolute; display: grid; place-items: center; border-radius: 50%;
  color: #fff; font-family: var(--font-d); font-weight: 800; border: 3px solid rgba(255, 255, 255, .6);
  background: linear-gradient(165deg, var(--cl), var(--cc));
  box-shadow: var(--clay-in), 0 8px 18px rgba(30, 27, 75, .2);
  cursor: pointer; will-change: transform; animation: rise var(--dur) linear forwards;
  text-shadow: 0 3px 0 rgba(30, 27, 75, .18);
}
@keyframes rise {
  0% { transform: translateY(28px) scale(.65); opacity: 0; }
  10% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(var(--dist)) scale(1); opacity: 1; }
}
.bubble.is-popped { animation: popOut .34s ease forwards !important; }
@keyframes popOut { 40% { transform: scale(1.42); opacity: .85; } 100% { transform: scale(.1); opacity: 0; } }
.playfield-note { text-align: center; color: var(--muted); font-weight: 700; font-size: .86rem; margin-top: .8rem; }

/* ── Letter board ── */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .7rem; margin-bottom: 1.3rem; }
.tile {
  aspect-ratio: 1 / 1; display: grid; place-items: center; color: #fff; font-weight: 800;
  font-family: var(--font-d); font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1;
  border-radius: 28% 36% 32% 34%; border: 3px solid rgba(255, 255, 255, .55);
  background: linear-gradient(165deg, var(--cl), var(--cc));
  box-shadow: var(--clay-in), 0 7px 0 rgba(30, 27, 75, .16);
  transition: transform var(--t), box-shadow var(--t);
  text-shadow: 0 3px 0 rgba(30, 27, 75, .16);
}
.tile:hover { transform: translateY(-5px) rotate(-3deg) scale(1.05); }
.tile:active { transform: translateY(3px); box-shadow: var(--clay-in), 0 2px 0 rgba(30, 27, 75, .18); }
.tile.is-open { box-shadow: var(--clay-in), 0 0 0 6px rgba(79, 70, 229, .35), 0 7px 0 rgba(30, 27, 75, .16); }

.detail-card {
  background: #fff; border: 3px solid var(--border); border-radius: var(--r-lg);
  padding: 1.3rem; box-shadow: var(--clay-in), var(--clay); text-align: center;
  animation: fadeUp .3s ease both;
}
.detail-head { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.detail-big {
  display: grid; place-items: center; width: 112px; height: 112px; border-radius: 30% 40% 34% 38%;
  background: linear-gradient(165deg, var(--cl), var(--cc)); color: #fff; font-family: var(--font-d);
  font-size: 4rem; font-weight: 800; line-height: 1; box-shadow: var(--clay-in), 0 10px 0 rgba(30, 27, 75, .18);
  text-shadow: 0 4px 0 rgba(30, 27, 75, .16);
}
.detail-meta { text-align: right; }
.detail-name { font-family: var(--font-d); font-size: 1.5rem; font-weight: 800; }
.detail-word { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-weight: 700; margin-top: .3rem; }
.detail-word svg { width: 22px; height: 22px; color: var(--indigo); }
.forms-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: .7rem; margin-top: 1.1rem; }
.form-box {
  background: #f6f7ff; border: 2px solid var(--border); border-radius: var(--r-sm); padding: .6rem .4rem;
}
.form-box b { display: block; font-family: var(--font-d); font-size: 2rem; line-height: 1.3; color: var(--indigo-deep); }
.form-box span { font-size: .76rem; font-weight: 700; color: var(--muted); }

/* ── Result screen ── */
.result-card {
  text-align: center; background: #fff; border: 3px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 6vw, 2.6rem) 1.3rem;
  box-shadow: var(--clay-in), var(--clay); max-width: 620px; margin: 1rem auto;
}
.trophy {
  display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto .8rem;
  border-radius: 34% 44% 38% 42%; background: linear-gradient(165deg, #fcd34d, #f59e0b);
  box-shadow: var(--clay-in), 0 8px 0 #b45309; animation: bob 2.4s ease-in-out infinite;
}
.trophy svg { width: 48px; height: 48px; color: #fff; }
.result-title { font-family: var(--font-d); font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 800; }
.stars { display: flex; justify-content: center; gap: .4rem; margin: .8rem 0; }
.stars svg { width: 42px; height: 42px; color: #d1d5db; }
.stars svg.on { color: #f59e0b; animation: starIn .45s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes starIn { from { transform: scale(0) rotate(-45deg); } to { transform: scale(1) rotate(0); } }
.result-score { font-weight: 800; font-size: 1.15rem; color: var(--indigo-deep); }
.result-msg { color: var(--muted); font-weight: 700; margin: .7rem 0 1.4rem; }
.result-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ── Toast ── */
.toast-wrap { position: fixed; inset: auto 1rem 1.2rem 1rem; z-index: 95; display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; }
.toast {
  padding: .6rem 1.2rem; border-radius: 999px; font-weight: 800; font-size: .92rem; color: #fff;
  box-shadow: 0 8px 22px rgba(30, 27, 75, .28); animation: fadeUp .25s ease both;
}
.toast.ok { background: linear-gradient(160deg, #22c55e, #15803d); }
.toast.no { background: linear-gradient(160deg, #f87171, #dc2626); }
.toast.info { background: linear-gradient(160deg, var(--indigo-2), var(--indigo)); }

/* ── Responsive & motion ── */
@media (max-width: 560px) {
  .icon-btn span { display: none; }
  .icon-btn { padding: .5rem .6rem; }
  .hud { gap: .3rem; }
  .chip { padding: .32rem .6rem; font-size: .82rem; }
  .options { grid-template-columns: repeat(2, 1fr); }
  .board { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .bubble { animation-duration: var(--dur) !important; }
  .bubble.is-popped { animation-duration: .2s !important; }
}

/* ── إضافات ── */
.target-letter.is-name span { font-size: clamp(1.6rem, 9vw, 2.6rem); padding: 0 .3rem; }
.mode-card { color: var(--ink); }
.detail-word span { font-family: var(--font-d); font-size: 1.15rem; }
#screen-quiz .prompt-card { max-width: 720px; margin-inline: auto; }
.playfield-empty {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted);
  font-weight: 800; font-size: 1rem;
}
.btn:focus-visible, .opt:focus-visible, .tile:focus-visible, .bubble:focus-visible { outline: 3px solid var(--indigo-deep); outline-offset: 4px; }

@media (max-width: 640px) {
  .seg { overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { flex: 0 0 auto; padding-inline: .7rem; }
  .seg-center button { flex: 1; }
  .title-letters span { width: 1.35em; height: 1.35em; }
  .detail-big { width: 88px; height: 88px; font-size: 3rem; }
}

/* ═══ لوحة الصوت والتلفّظ ═══ */
.setting-wide { flex-direction: column; align-items: stretch; }
.voice-box { border-radius: var(--r-sm); padding: .85rem 1rem; margin-bottom: .6rem; border: 2px solid transparent; }
.voice-box.ok { background: #e8fbf3; border-color: #6ee7b7; }
.voice-box.warn { background: #fff7ed; border-color: #fdba74; }
.voice-box b { display: block; font-size: 1rem; font-weight: 800; margin-bottom: .2rem; }
.voice-box.ok b { color: #047857; }
.voice-box.warn b { color: #c2410c; }
.voice-box p { font-size: .88rem; line-height: 1.75; color: var(--muted); margin: .15rem 0; }
.voice-steps { margin: .3rem 1.1rem .3rem 0; padding: 0; list-style: disc; }
.voice-steps li { font-size: .86rem; line-height: 1.8; color: var(--muted); margin-bottom: .25rem; }
.voice-steps li b { display: inline; color: var(--ink); font-size: .86rem; margin: 0; }
.voice-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.voice-select {
  flex: 1 1 210px; min-width: 0; font-family: inherit; font-size: .88rem; color: var(--ink);
  padding: .6rem .7rem; border-radius: var(--r-sm); border: 2px solid var(--border); background: #fff;
  box-shadow: inset 0 -3px 0 rgba(30, 27, 75, .05);
}
.voice-select:focus { border-color: var(--indigo); outline: none; }
.tiny { font-size: .76rem; color: var(--muted); margin: .5rem 0 0; }
.voice-box.note { background: #eef2ff; border-color: #a5b4fc; }
.voice-box.note b { color: #4338ca; }