:root{
  color-scheme: light;
  --navy:#041F47; --bg:#eef3fb; --card:#ffffff; --ink:#0D0D0D; --muted:#5b6577;
  --line:#d6e0f0; --brand:#003B91; --brand2:#0043D8; --azulmed:#4399FF; --azulcla:#177FE5;
  --en:#041F47; --es:#177FE5; --fr:#003B91; --it:#0043D8;
  --good:#1f8f4e; --warn:#E8B461; --gold:#E8B461; --soft:#e9f0fb;
  --shadow:0 1px 3px rgba(4,31,71,.08),0 8px 24px rgba(4,31,71,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Aptos","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.5;}
.wrap{max-width:760px;margin:0 auto;padding:14px 14px 90px;}
header{margin-bottom:12px;}
.brandbar{background:var(--navy);border-radius:18px;padding:20px 22px;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap;box-shadow:0 12px 32px rgba(4,31,71,.20);
  background-image:radial-gradient(130% 150% at 100% 0%, rgba(67,153,255,.22), transparent 55%);}
.brandtxt{flex:1;min-width:180px;}
.logo{font-weight:800;font-size:25px;letter-spacing:-.5px;color:#fff;line-height:1.04;}
.logo span{color:var(--azulmed);font-weight:800;}
.tagline{font-size:10px;color:var(--azulmed);letter-spacing:.28em;font-weight:700;margin-top:7px;
  display:flex;align-items:center;gap:8px;}
.tagline::before{content:"";width:16px;height:2px;background:var(--gold);border-radius:2px;}
.levelbadge{font-size:12px;color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  padding:7px 13px;border-radius:999px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.toprow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;}
.spacer{flex:1}
.profilebox{display:flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:4px 6px 4px 11px;box-shadow:var(--shadow);}
.profilebox .plabel{font-size:14px;}
.profilebox select{border:0;background:transparent;font-weight:700;color:var(--brand);font-size:13px;
  font-family:inherit;cursor:pointer;max-width:120px;padding:3px;}
.profilebox select:focus{outline:none;}
.profilebox button{border:0;background:var(--soft);color:var(--brand);border-radius:50%;width:26px;height:26px;
  cursor:pointer;font-size:13px;font-weight:700;line-height:1;}
.profilebox button:hover{background:var(--azulmed);color:#fff;}
.langtoggle{display:flex;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:3px;box-shadow:var(--shadow);}
.langtoggle button{border:0;background:transparent;padding:7px 14px;border-radius:999px;
  font-weight:700;cursor:pointer;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:6px;}
.langtoggle button.active{color:#fff;}
.langtoggle button.active[data-l="en"]{background:var(--en);}
.langtoggle button.active[data-l="es"]{background:var(--es);}
.langtoggle button.active[data-l="fr"]{background:var(--fr);}
.langtoggle button.active[data-l="it"]{background:var(--it);}

.tabs{display:flex;gap:2px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:14px;padding:5px;box-shadow:var(--shadow);
  margin-bottom:16px;position:sticky;top:8px;z-index:5;}
.tabs button{flex:1;border:0;background:transparent;padding:10px 4px 11px;border-radius:9px;
  font-weight:700;cursor:pointer;color:var(--muted);font-size:12.5px;position:relative;transition:color .15s;}
.tabs button.active{color:var(--brand);}
.tabs button.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:3px;
  width:22px;height:3px;background:var(--navy);border-radius:3px;}
.tabs button:hover{color:var(--brand);}

.panel{display:none;animation:fade .25s ease;}
.panel.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px;box-shadow:var(--shadow);margin-bottom:14px;}

/* chat */
#chat{display:flex;flex-direction:column;gap:12px;min-height:320px;max-height:54vh;overflow-y:auto;padding:4px;}
.msg{max-width:88%;padding:10px 13px;border-radius:16px;position:relative;}
.msg.user{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:5px;}
.msg.ai{align-self:flex-start;background:var(--soft);border-bottom-left-radius:5px;}
.msg .pt{margin-top:6px;font-size:13px;color:var(--muted);font-style:italic;}
.msg.user .pt{color:#dfe0ff;}
.speakbtn{border:0;background:rgba(0,0,0,.06);border-radius:8px;cursor:pointer;
  font-size:12px;padding:3px 8px;margin-top:7px;color:var(--ink);font-weight:600;}
.correction{align-self:flex-start;max-width:92%;background:#fbf4e6;border:1px solid #ecd29a;
  border-left:3px solid var(--gold);border-radius:14px;padding:10px 12px;font-size:13.5px;}
.correction b{color:#a9772b;}
.correction .row{margin-top:4px;}
.strike{text-decoration:line-through;color:#b91c1c;}
.fix{color:var(--good);font-weight:700;}
.vocabchip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.vocabchip{font-size:12px;background:var(--soft);border:1px solid var(--line);color:var(--brand);
  border-radius:999px;padding:4px 9px;cursor:pointer;font-weight:600;}
.vocabchip:hover{background:#dce8fb;border-color:var(--azulmed);}

/* chat tools / mission / roleplay */
.chattools{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.chattools select{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:7px 10px;
  font-size:13px;font-weight:700;color:var(--brand);font-family:inherit;cursor:pointer;}
.chattools select:focus{outline:none;border-color:var(--brand);}
.tool{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:7px 11px;font-size:13px;
  font-weight:700;cursor:pointer;color:var(--ink);}
.tool:hover{border-color:var(--brand);color:var(--brand);}
.mission{margin-bottom:10px;}
.mission .mission-in{display:flex;align-items:center;gap:12px;background:var(--navy);color:#fff;border-radius:14px;padding:13px 15px;
  background-image:radial-gradient(130% 160% at 100% 0%, rgba(232,180,97,.28), transparent 55%);}
.mission .mission-in>div{flex:1;}
.mission b{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
.mission .mtext{font-weight:700;margin:3px 0 2px;}
.mission .mission-in .small{color:#cdd7ea;}
.mission button{border:0;background:var(--gold);color:var(--navy);font-weight:800;border-radius:10px;padding:9px 13px;cursor:pointer;white-space:nowrap;}
.personabar{display:none;align-items:center;gap:10px;background:#fbf4e6;border:1px solid #ecd29a;border-radius:12px;
  padding:9px 12px;margin-bottom:10px;font-size:13px;}
.personabar.on{display:flex;}
.personabar .pb-x{margin-left:auto;border:0;background:var(--navy);color:#fff;border-radius:8px;padding:5px 10px;cursor:pointer;font-weight:700;font-size:12px;}
.rolerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.rolerow .rl-label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--azulcla);}
.rolerow #personas{display:flex;gap:6px;flex-wrap:wrap;}
.rolechip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 11px;font-size:12.5px;
  cursor:pointer;font-weight:600;color:var(--ink);}
.rolechip:hover{border-color:var(--gold);color:#a9772b;}

/* overlays */
#summaryOverlay,#voiceOverlay{position:fixed;inset:0;background:rgba(4,31,71,.55);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:60;padding:16px;}
#summaryOverlay.show,#voiceOverlay.show{display:flex;}
.ov-card,.vo-card{background:var(--card);border-radius:18px;padding:20px;max-width:440px;width:100%;
  box-shadow:0 20px 60px rgba(4,31,71,.4);max-height:86vh;overflow-y:auto;}
.sm-score{font-size:44px;font-weight:800;text-align:center;color:var(--brand);}
.sm-bar{height:10px;background:var(--soft);border-radius:999px;overflow:hidden;margin:6px 0 14px;}
.sm-bar>div{height:100%;background:linear-gradient(90deg,var(--azulcla),var(--azulmed));}
.sm-blk{margin-bottom:12px;}
.sm-blk h4{margin:0 0 5px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--azulcla);}
.sm-blk ul{margin:0;padding-left:18px;} .sm-blk li{margin-bottom:3px;font-size:14px;}
.ov-close{border:0;background:var(--brand);color:#fff;border-radius:12px;padding:11px;font-weight:800;cursor:pointer;width:100%;margin-top:6px;}
.vo-card{text-align:center;}
.vo-title{font-weight:800;color:var(--navy);margin-bottom:6px;}
.vo-status{font-size:15px;font-weight:700;color:var(--brand);margin-bottom:12px;min-height:22px;}
.vo-log{text-align:left;max-height:40vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.vo-b{padding:8px 12px;border-radius:14px;max-width:90%;font-size:14px;}
.vo-b.u{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:5px;}
.vo-b.a{align-self:flex-start;background:var(--soft);border-bottom-left-radius:5px;}
.vo-b .vp{display:block;font-size:12px;color:var(--muted);font-style:italic;margin-top:3px;}
.vo-actions{display:flex;gap:8px;}
.vo-actions button{flex:1;border:0;border-radius:12px;padding:12px;font-weight:800;cursor:pointer;}
#voRepeat{background:var(--soft);color:var(--brand);}
#voStop{background:#c0392b;color:#fff;}

.scenarios{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.scenarios button{border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:7px 12px;font-size:13px;cursor:pointer;font-weight:600;color:var(--ink);}
.scenarios button:hover{border-color:var(--brand);color:var(--brand);}

.inputbar{display:flex;gap:8px;align-items:flex-end;}
.inputbar textarea{flex:1;border:1px solid var(--line);border-radius:14px;padding:11px 13px;
  font-size:15px;resize:none;font-family:inherit;min-height:46px;max-height:120px;background:var(--card);color:var(--ink);}
.inputbar textarea:focus{outline:none;border-color:var(--brand);}
.sendbtn{border:0;background:var(--brand);color:#fff;border-radius:14px;padding:0 18px;height:46px;
  font-weight:800;cursor:pointer;font-size:15px;}
.sendbtn:disabled{opacity:.5;cursor:default;}
.hint{font-size:12px;color:var(--muted);margin-top:8px;text-align:center;}
.typing{align-self:flex-start;color:var(--muted);font-size:13px;padding:4px 6px;}
.typing span{animation:blink 1.2s infinite;}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* vocab */
.flash{perspective:1000px;height:200px;margin-bottom:12px;}
.flash-inner{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d;cursor:pointer;}
.flash.flipped .flash-inner{transform:rotateY(180deg);}
.flash-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;background:var(--card);}
.flash-back{transform:rotateY(180deg);background:var(--soft);}
.flash-face .big{font-size:30px;font-weight:800;letter-spacing:-.5px;}
.flash-face .sub{color:var(--muted);font-size:13px;margin-top:8px;}
.flash-face .ex{margin-top:10px;font-size:13px;font-style:italic;color:var(--ink);}
.flash-face .tag{position:absolute;top:12px;left:14px;font-size:11px;font-weight:700;text-transform:uppercase;}
.tag.en{color:var(--en)}.tag.es{color:var(--es)}.tag.fr{color:var(--fr)}.tag.it{color:var(--it)}
.review-actions{display:flex;gap:8px;}
.review-actions button{flex:1;border:0;border-radius:12px;padding:11px;font-weight:700;cursor:pointer;color:#fff;}
.btn-again{background:#7c8aa0;}.btn-ok{background:var(--good);}.btn-flip{background:var(--brand);}
.vocount{font-size:12px;color:var(--muted);text-align:center;margin-bottom:10px;}
.vlist{display:flex;flex-direction:column;gap:7px;max-height:300px;overflow-y:auto;}
.vrow{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:12px;}
.vrow .w{font-weight:700;}.vrow .t{color:var(--muted);font-size:13px;}
.vrow .mini{margin-left:auto;display:flex;gap:5px;}
.vrow .mini button{border:0;background:var(--soft);border-radius:8px;cursor:pointer;padding:4px 8px;font-size:12px;color:var(--ink);font-weight:600;}
.addrow{display:flex;gap:6px;margin-top:10px;}
.addrow input{flex:1;border:1px solid var(--line);border-radius:10px;padding:9px;font-size:14px;background:var(--card);color:var(--ink);}
.addrow input:focus{outline:none;border-color:var(--brand);}
.addrow button{border:0;background:var(--brand);color:#fff;border-radius:10px;padding:0 14px;font-weight:700;cursor:pointer;}

/* progress */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;text-align:center;box-shadow:var(--shadow);}
.stat .n{font-size:30px;font-weight:800;color:var(--brand);}
.stat .l{font-size:12px;color:var(--muted);margin-top:3px;font-weight:600;}
.streakcard{display:flex;align-items:center;gap:14px;}
.streakcard .fire{font-size:38px;}
.weekdots{display:flex;gap:6px;margin-top:10px;}
.weekdots div{flex:1;text-align:center;font-size:11px;color:var(--muted);}
.weekdots .dot{width:26px;height:26px;border-radius:50%;margin:0 auto 3px;background:var(--soft);
  display:flex;align-items:center;justify-content:center;font-size:12px;}
.weekdots .dot.on{background:var(--good);color:#fff;}
h3.sec{font-size:11px;margin:0 0 13px;color:var(--azulcla);text-transform:uppercase;letter-spacing:.18em;
  font-weight:800;display:flex;align-items:center;gap:8px;}
h3.sec::before{content:"";width:14px;height:2px;background:var(--gold);border-radius:2px;flex:none;}

/* pronunciation */
.ptarget{font-size:26px;font-weight:800;letter-spacing:-.5px;text-align:center;margin:6px 0 4px;line-height:1.25;}
.ptarget-pt{text-align:center;color:var(--muted);font-style:italic;font-size:14px;margin-bottom:12px;}
.voicepick{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:14px;flex-wrap:wrap;}
.voicepick span{font-size:12px;color:var(--muted);font-weight:600;}
.voicepick select{max-width:230px;border:1px solid var(--line);border-radius:10px;padding:6px 9px;font-size:12.5px;
  font-family:inherit;color:var(--ink);background:var(--card);cursor:pointer;}
.voicepick select:focus{outline:none;border-color:var(--brand);}
.pron-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.pron-controls button{border:0;border-radius:12px;padding:11px 14px;font-weight:700;cursor:pointer;font-size:14px;}
.btn-model{background:var(--soft);color:var(--brand);}
.btn-mic{background:var(--brand);color:#fff;min-width:120px;}
.btn-mic.rec{background:#ef4444;animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.btn-skip{background:var(--card);border:1px solid var(--line)!important;color:var(--ink);}
#pronResult{margin-top:16px;}
.score{text-align:center;font-size:40px;font-weight:800;margin:6px 0;}
.score.good{color:var(--good);}.score.mid{color:var(--warn);}.score.low{color:#ef4444;}
.score-label{text-align:center;font-weight:700;margin-bottom:10px;}
.heard{text-align:center;font-size:13px;color:var(--muted);margin-bottom:10px;}
.wordmap{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px;}
.wordmap span{padding:4px 10px;border-radius:999px;font-weight:700;font-size:14px;}
.wordmap .ok{background:#ecfdf5;color:#065f46;}
.wordmap .miss{background:#fef2f2;color:#b91c1c;}
.tipbox{background:#fbf4e6;border:1px solid #ecd29a;border-left:3px solid var(--gold);
  border-radius:12px;padding:11px 13px;font-size:13.5px;}
.tipbox b{color:#a9772b;}

/* level + toast — o selo (carimbo) é o elemento de assinatura */
.levelbox .lvltop{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;}
.levelbox .lvlc{width:76px;height:76px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:25px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:.5px;
  background:#fff;border:2px solid var(--navy);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--gold);}
.lvlbar{height:12px;background:var(--soft);border-radius:999px;overflow:hidden;}
.lvlbar>div{height:100%;background:linear-gradient(90deg,var(--azulcla),var(--azulmed));border-radius:999px;transition:width .6s ease;}
.xpchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px;}
.xpchips span{font-size:11px;background:var(--soft);color:var(--brand);border-radius:999px;padding:4px 9px;font-weight:600;}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(140%);
  background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;font-size:14px;
  box-shadow:0 8px 30px rgba(4,31,71,.35);max-width:88%;text-align:center;z-index:50;transition:transform .35s;}
#toast.show{transform:translateX(-50%) translateY(0);}
#toast.big{background:var(--brand);border:2px solid var(--gold);font-size:15px;}

/* content */
.clink{display:flex;align-items:flex-start;gap:11px;padding:12px;border:1px solid var(--line);
  border-radius:14px;text-decoration:none;color:var(--ink);margin-bottom:9px;background:var(--card);transition:border-color .15s;}
.clink:hover{border-color:var(--brand);}
.clink .ico{font-size:22px;line-height:1.2;}
.clink .ct{flex:1;}
.clink .ct .t{font-weight:700;}
.clink .ct .d{font-size:13px;color:var(--muted);margin-top:2px;}
.clink .ct .u{font-size:11px;color:var(--brand);margin-top:4px;word-break:break-all;}
.clink .go{font-size:18px;color:var(--muted);}
.empty{text-align:center;color:var(--muted);padding:24px 10px;font-size:14px;}
.small{font-size:12px;color:var(--muted);}
.linkbtn{background:none;border:0;color:var(--brand);cursor:pointer;font-weight:600;text-decoration:underline;font-size:13px;padding:0;}

/* micro-interações + acessibilidade */
.sendbtn,.addrow button,.pron-controls button,.review-actions button,.scenarios button,.clink,.tabs button,.langtoggle button,.profilebox button{transition:filter .15s,transform .12s,border-color .15s,background .15s,color .15s;}
.sendbtn:hover:not(:disabled),.addrow button:hover,.btn-mic:hover,.review-actions button:hover{filter:brightness(1.07);}
.sendbtn:active:not(:disabled),.addrow button:active,.pron-controls button:active,.review-actions button:active{transform:translateY(1px);}
.card{transition:box-shadow .2s;}
.clink:hover{box-shadow:var(--shadow);transform:translateY(-1px);}
:focus-visible{outline:2px solid var(--azulcla);outline-offset:2px;border-radius:8px;}
@media (max-width:420px){ .tabs button{font-size:11.5px;} .logo{font-size:22px;} }
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important;} .flash-inner{transition:none!important;} }

/* ---------- tela de login (Passo C) ---------- */
#authGate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--navy);background-image:radial-gradient(130% 120% at 100% 0%, rgba(67,153,255,.25), transparent 55%);}
#authGate.hidden{display:none;}
.auth-card{background:var(--card);border-radius:20px;padding:26px 22px;max-width:380px;width:100%;margin:auto;
  max-height:90vh;max-height:calc(100dvh - 40px);overflow-y:auto;
  box-shadow:0 24px 70px rgba(4,31,71,.5);}
.auth-logo{font-weight:800;font-size:24px;letter-spacing:-.5px;color:var(--navy);line-height:1.04;}
.auth-logo span{color:var(--azulcla);}
.auth-tag{font-size:10px;color:var(--azulmed);letter-spacing:.28em;font-weight:700;margin-top:6px;
  display:flex;align-items:center;gap:8px;}
.auth-tag::before{content:"";width:16px;height:2px;background:var(--gold);border-radius:2px;}
.auth-title{font-size:21px;font-weight:800;color:var(--ink);margin:18px 0 4px;}
.auth-sub{font-size:13px;color:var(--muted);margin-bottom:16px;line-height:1.45;}
.auth-card input{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;font-size:15px;
  font-family:inherit;background:var(--card);color:var(--ink);margin-bottom:10px;}
.auth-card input:focus{outline:none;border-color:var(--brand);}
.auth-msg{font-size:13px;min-height:18px;margin:2px 0 8px;color:var(--muted);}
.auth-msg.err{color:#c0392b;font-weight:600;}
.auth-msg.ok{color:var(--brand);}
.auth-btn{width:100%;border:0;background:var(--brand);color:#fff;border-radius:12px;padding:13px;
  font-weight:800;font-size:15px;cursor:pointer;}
.auth-btn:hover{filter:brightness(1.07);}
.auth-btn:disabled{opacity:.55;cursor:default;}
.auth-switch{text-align:center;font-size:13px;color:var(--muted);margin-top:14px;}

/* ---------- fonética (aba Pronúncia) ---------- */
.pronphon{text-align:center;margin:2px 0 14px;}
.pronphon .tool{font-size:13px;}
.phon{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:11px 13px;text-align:center;}
.phon-ipa{font-size:22px;font-weight:700;color:var(--brand);letter-spacing:.5px;
  font-family:"Aptos","Segoe UI",system-ui,sans-serif;}
.phon-approx{margin-top:7px;font-size:15px;color:var(--ink);}
.phon-approx .phon-lab{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--azulcla);text-transform:uppercase;}
.phon-tip{margin-top:8px;font-size:13px;color:#7a5a1e;background:#fbf4e6;border:1px solid #ecd29a;
  border-radius:10px;padding:7px 10px;text-align:left;}
.hs-row{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-top:1px solid var(--line);}
.hs-row:first-of-type{border-top:0;}
.hs-sym{flex:none;min-width:54px;text-align:center;font-weight:800;color:var(--brand);background:var(--soft);
  border-radius:9px;padding:6px 8px;font-size:13px;}
.hs-body{flex:1;}
.hs-ex{font-weight:600;margin-bottom:2px;}

/* ---------- exercícios de listening ---------- */
.listen-controls{display:flex;gap:8px;justify-content:center;margin-bottom:12px;flex-wrap:wrap;}
.ls-input{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:15px;
  font-family:inherit;min-height:64px;background:var(--card);color:var(--ink);margin-bottom:10px;resize:vertical;}
.ls-input:focus{outline:none;border-color:var(--brand);}
.ls-q{font-weight:700;margin:4px 0 10px;}
.ls-opts{display:flex;flex-direction:column;gap:8px;}
.ls-opt{text-align:left;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:11px 13px;
  font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s;}
.ls-opt:hover:not(:disabled){border-color:var(--brand);}
.ls-opt:disabled{cursor:default;}
.ls-opt.correct{background:#ecfdf5;border-color:#34d399;color:#065f46;}
.ls-opt.wrong{background:#fef2f2;border-color:#f87171;color:#b91c1c;}
.ls-fb{font-weight:800;font-size:16px;margin-top:12px;}
.ls-fb.ok{color:var(--good);}
.ls-fb.no{color:#c0392b;}