/* Simulador Nota 6 · identidade da bandeira (azul #0A3161, vermelho #B31942, estrelas, listras) */
:root{
  --navy:#0A3161; --navy-2:#123F78; --navy-deep:#061C3A; --navy-line:#24497F;
  --red:#B31942; --red-deep:#8C1031; --red-tint:#FBEDF1; --red-line:#F0C3CF; --red-on-dark:#FF5C7C;
  --soft:#F1F5FB; --line:#DCE3EE; --ink:#1E2A3D; --muted:#55617A; --on-navy:#C6D3E8;
  --ok:#1E8E5A; --ok-bg:#EAF7F0; --warn:#B7791F; --warn-bg:#FFF6E5; --bad:#C2413B; --bad-bg:#FCEDEC;
  --cta-1:#23A566; --cta-2:#1B8A54;
  --f-sans:"Poppins",Arial,Helvetica,sans-serif; --f-serif:"Lora",Georgia,serif;
  --stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cdefs%3E%3Cpath id='s' d='M0-7 1.65-2.27 6.66-2.16 2.67.87 4.11 5.66 0 2.8-4.11 5.66-2.67.87-6.66-2.16-1.65-2.27Z'/%3E%3C/defs%3E%3Cuse href='%23s' x='15' y='13' fill='white' fill-opacity='.10'/%3E%3Cuse href='%23s' x='45' y='39' fill='white' fill-opacity='.10'/%3E%3C/svg%3E");
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--soft);color:var(--ink);font:400 16px/1.55 var(--f-sans);-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit}
a{color:var(--navy)}
.hide{display:none!important}

/* topo */
.top{position:sticky;top:0;z-index:20;background:var(--navy) var(--stars);background-size:38px 33px;color:#fff;padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:12px;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.top .brand{font:800 .95rem/1 var(--f-sans);letter-spacing:.18em;white-space:nowrap}
.top .brand span{color:var(--red-on-dark)}
.top .where{flex:1;min-width:0;font:500 .78rem/1.3 var(--f-sans);color:var(--on-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .where b{color:#fff;font-weight:700}
.clock{background:var(--red);color:#fff;border-radius:8px;padding:6px 10px;font:800 1rem/1 var(--f-sans);font-variant-numeric:tabular-nums;min-width:72px;text-align:center}
.clock.paused{background:var(--navy-2);box-shadow:inset 0 0 0 1.5px var(--navy-line)}
.clock.low{animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{opacity:.4}}
.stripes{height:6px;background:repeating-linear-gradient(to bottom,var(--red) 0 1.5px,#fff 1.5px 3px)}
.progress{height:4px;background:var(--line)}
.progress i{display:block;height:100%;background:var(--red);transition:width .3s}

/* layout */
.wrap{max-width:860px;margin:0 auto;padding:20px max(16px,env(safe-area-inset-right,0px)) 120px max(16px,env(safe-area-inset-left,0px))}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:16px;box-shadow:0 6px 20px rgba(10,49,97,.05)}
.eyebrow{font:700 .7rem/1.3 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
h1{font:800 1.7rem/1.15 var(--f-sans);color:var(--navy);margin:6px 0 10px;text-wrap:balance}
h2{font:800 1.25rem/1.25 var(--f-sans);color:var(--navy);margin:4px 0 8px}
h3{font:700 1rem/1.3 var(--f-sans);color:var(--navy);margin:0 0 6px}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.instr{background:var(--soft);border-radius:10px;padding:10px 14px;font-size:.92rem;margin-bottom:14px}
.instr b{color:var(--navy)}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(var(--cta-1),var(--cta-2));color:#fff;border:0;border-radius:12px;padding:14px 22px;font:800 .95rem/1.2 var(--f-sans);letter-spacing:.03em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 18px rgba(27,138,84,.25);text-decoration:none}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.btn.navy{background:var(--navy);box-shadow:0 8px 18px rgba(10,49,97,.22)}
.btn.line{background:#fff;color:var(--navy);border:1.5px solid var(--navy);box-shadow:none}
.btn.small{padding:9px 14px;font-size:.78rem}
.btn.block{width:100%}
.btn:focus-visible,.opt:focus-visible,.chunk:focus-visible,.gap:focus-visible,.rate button:focus-visible,.ck:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.bar-next{position:fixed;left:0;right:0;bottom:0;z-index:15;background:#fff;border-top:1px solid var(--line);padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));box-shadow:0 -6px 18px rgba(0,0,0,.06)}
.bar-next .in{max-width:860px;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between}
.bar-next .count{font:600 .82rem var(--f-sans);color:var(--muted)}

/* login */
.login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--navy) var(--stars);background-size:46px 40px}
.login .box{margin:auto;width:min(420px,calc(100% - 32px));background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.login .box .in{padding:26px 24px 24px}
.login .logo{font:800 1.3rem/1 var(--f-sans);letter-spacing:.2em;color:var(--navy)}
.login .logo span{color:var(--red)}
.field{display:block;width:100%;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;font:600 1.05rem var(--f-sans);letter-spacing:.08em;text-transform:uppercase;margin:14px 0 10px;color:var(--navy)}
.field:focus{outline:none;border-color:var(--navy)}
.err{color:var(--bad);font-size:.88rem;min-height:1.4em}

/* home */
.exams{display:grid;gap:14px}
.exam{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.exam .num{width:58px;height:58px;border-radius:14px;background:var(--navy) var(--stars);background-size:24px 21px;color:#fff;display:grid;place-items:center;font:800 1.5rem var(--f-sans)}
.exam .num.done{background:var(--ok)}
.exam .meta{font-size:.82rem;color:var(--muted)}
.exam .actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}
.tag{display:inline-block;font:700 .66rem/1.5 var(--f-sans);letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:2px 8px;background:var(--soft);color:var(--navy)}
.tag.ok{background:var(--ok-bg);color:var(--ok)} .tag.go{background:var(--warn-bg);color:var(--warn)}
.tips{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tips div{background:var(--soft);border-radius:12px;padding:12px;font-size:.86rem}
.tips b{display:block;color:var(--navy)}

/* reading */
.passage{font:400 1.02rem/1.75 var(--f-serif);color:var(--ink)}
.passage p+p{margin-top:10px}
.ctw{font:400 1.06rem/2.15 var(--f-serif)}
.gap{display:inline-flex;align-items:baseline;white-space:nowrap}
.gap input{width:calc(var(--n) * .66em + 14px);min-width:2.2em;border:0;border-bottom:2px solid var(--navy);background:var(--soft);font:600 1rem var(--f-serif);color:var(--navy);padding:0 4px;border-radius:4px 4px 0 0;text-align:left}
.gap input:focus{outline:none;background:#E2EAF7;border-bottom-color:var(--red)}
.notice{border:2px solid var(--navy);border-radius:12px;padding:14px 16px;font:400 .98rem/1.6 var(--f-serif)}
.notice h4{font:800 .95rem var(--f-sans);color:var(--navy);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.msg{background:var(--soft);border-radius:14px;padding:12px 14px;font:400 .98rem/1.55 var(--f-serif);max-width:92%}
.msg+.msg{margin-top:8px}
.msg.me{margin-left:auto;background:#E2EAF7}
.msg small{display:block;font:600 .72rem var(--f-sans);color:var(--muted);margin-bottom:2px}
.mail{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mail .h{background:var(--soft);padding:10px 14px;font-size:.84rem;color:var(--muted)}
.mail .h b{color:var(--ink)}
.mail .b{padding:14px;font:400 .98rem/1.6 var(--f-serif)}
.qs{margin-top:18px;display:grid;gap:16px}
.q{font:600 .98rem/1.45 var(--f-sans);color:var(--navy);margin-bottom:8px}
.opt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;margin-bottom:8px;font:400 .96rem/1.45 var(--f-sans);cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--navy)}
.opt .lt{flex:0 0 26px;height:26px;border-radius:50%;border:1.5px solid #B9C2D3;font:800 .78rem/23px var(--f-sans);color:var(--navy);text-align:center}
.opt.sel{border-color:var(--navy);background:#EEF3FB}
.opt.sel .lt{background:var(--navy);border-color:var(--navy);color:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.two .stick{position:sticky;top:84px}

/* listening */
.player{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:24px 10px}
.player .ring{width:96px;height:96px;border-radius:50%;background:var(--navy) var(--stars);background-size:26px 23px;display:grid;place-items:center;color:#fff;box-shadow:0 0 0 8px #E2EAF7}
.player.playing .ring{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 16px #E2EAF7}}
.player svg{width:40px;height:40px}
.waves{display:flex;gap:4px;height:24px;align-items:flex-end}
.waves i{width:5px;background:var(--red);border-radius:3px;height:30%}
.player.playing .waves i{animation:wv .9s ease-in-out infinite}
.waves i:nth-child(2){animation-delay:.15s!important}.waves i:nth-child(3){animation-delay:.3s!important}.waves i:nth-child(4){animation-delay:.45s!important}.waves i:nth-child(5){animation-delay:.6s!important}
@keyframes wv{50%{height:100%}}

/* writing */
.chunks{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chunk{border:1.5px solid var(--navy);background:#fff;color:var(--navy);border-radius:9px;padding:8px 13px;font:600 1rem var(--f-sans);cursor:pointer}
.chunk:disabled{opacity:.2;cursor:default}
.ansline{min-height:52px;border-bottom:2px dashed #B9C2D3;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 0;font:600 1.02rem var(--f-sans);color:var(--navy)}
.ansline:empty::before{content:"Toque nos blocos na ordem certa";color:#9AA4B5;font-weight:400;font-size:.92rem}
.ansline .w{background:var(--red-tint);border-radius:7px;padding:4px 9px}
.speaker{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.speaker .av{flex:0 0 38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 .9rem var(--f-sans)}
.speaker .av.r{background:var(--red)} .speaker .av.g{background:#5A6B8C}
.speaker .bub{background:var(--soft);border-radius:4px 14px 14px 14px;padding:10px 14px;font:400 .96rem/1.6 var(--f-serif)}
.speaker .bub b{display:block;font:700 .78rem var(--f-sans);color:var(--navy);margin-bottom:2px}
.points{margin:10px 0 0;padding-left:20px}
.points li{margin-bottom:4px}
textarea.write{width:100%;min-height:260px;border:1.5px solid var(--line);border-radius:12px;padding:14px;font:400 1rem/1.6 var(--f-serif);color:var(--ink);resize:vertical}
textarea.write:focus{outline:none;border-color:var(--navy)}
.wc{display:flex;justify-content:space-between;font:600 .8rem var(--f-sans);color:var(--muted);margin-top:6px}
.wc .ok{color:var(--ok)}

/* speaking */
.rec{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:20px 8px}
.rec .dot{width:96px;height:96px;border-radius:50%;background:#fff;border:3px solid var(--line);display:grid;place-items:center;color:var(--navy)}
.rec.on .dot{border-color:var(--red);color:var(--red);animation:recp 1s ease-in-out infinite}
@keyframes recp{50%{box-shadow:0 0 0 14px var(--red-tint)}}
.rec .dot svg{width:40px;height:40px}
.rec .bar{width:min(420px,100%);height:10px;background:var(--line);border-radius:6px;overflow:hidden}
.rec .bar i{display:block;height:100%;width:0;background:var(--red)}
.rec .lbl{font:700 .95rem var(--f-sans);color:var(--navy)}
.say{font:600 1.15rem/1.5 var(--f-serif);color:var(--navy);background:var(--soft);border-radius:12px;padding:14px 16px}

/* autoavaliação */
.ck{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;margin-bottom:8px;cursor:pointer;font:400 .94rem/1.45 var(--f-sans)}
.ck .bx{flex:0 0 22px;height:22px;border-radius:6px;border:2px solid #B9C2D3;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.8rem}
.ck.on{border-color:var(--ok);background:var(--ok-bg)}
.ck.on .bx{background:var(--ok);border-color:var(--ok)}
.ck.auto{cursor:default}
.mine{background:#fff;border:1.5px dashed var(--navy);border-radius:12px;padding:12px 14px;font:400 .96rem/1.6 var(--f-serif);white-space:pre-wrap}
.model{background:var(--ok-bg);border-radius:12px;padding:12px 14px;font:400 .96rem/1.6 var(--f-serif)}
.rate{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.rate button{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:10px 6px;font:600 .82rem/1.3 var(--f-sans);cursor:pointer}
.rate button.on{border-color:var(--navy);background:var(--navy);color:#fff}
audio{width:100%;margin:6px 0}

/* resultado */
.score{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.score div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center}
.score b{display:block;font:800 1.9rem/1 var(--f-sans);color:var(--navy)}
.score small{display:block;font:600 .7rem var(--f-sans);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.overall{background:var(--navy) var(--stars);background-size:38px 33px;color:#fff;border-radius:18px;padding:22px;display:flex;align-items:center;gap:20px;margin-bottom:14px}
.overall .big{font:800 3.6rem/1 var(--f-sans)}
.overall .big small{font-size:.35em;color:var(--on-navy);margin-left:4px}
.overall p{color:var(--on-navy);font-size:.9rem}
.overall h2{color:#fff;margin:0 0 4px}
table.tk{width:100%;border-collapse:collapse;font-size:.88rem}
table.tk th{text-align:left;font:700 .68rem var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 8px;border-bottom:2px solid var(--line)}
table.tk td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
.meter{height:8px;border-radius:5px;background:var(--line);overflow:hidden;min-width:70px}
.meter i{display:block;height:100%}
.g{background:var(--ok)} .y{background:var(--warn)} .rr{background:var(--bad)}
.pct{font:700 .85rem var(--f-sans);white-space:nowrap}
.redo{display:grid;gap:10px}
.redo div{border-left:4px solid var(--red);background:var(--red-tint);border-radius:0 12px 12px 0;padding:10px 14px;font-size:.92rem}
.redo b{color:var(--navy)}
.chart svg{width:100%;height:auto;display:block}
.note{font-size:.8rem;color:var(--muted);margin-top:10px}
.review details{border:1px solid var(--line);border-radius:12px;padding:4px 14px;margin-bottom:8px;background:#fff}
.review summary{cursor:pointer;font:700 .92rem var(--f-sans);color:var(--navy);padding:10px 0}
.rv{font-size:.9rem;border-top:1px dashed var(--line);padding:8px 0}
.rv .ok{color:var(--ok);font-weight:700} .rv .no{color:var(--bad);font-weight:700}

@media (max-width:720px){
  h1{font-size:1.45rem}
  .two{grid-template-columns:1fr}
  .two .stick{position:static}
  .score{grid-template-columns:repeat(2,1fr)}
  .tips{grid-template-columns:1fr}
  .overall{flex-direction:column;text-align:center}
  .top .where{font-size:.72rem}
}
@media print{
  .top,.bar-next,.noprint{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.chart svg{max-width:560px;margin:0 auto}