:root{
--navy:#3B1768; --navy-deep:#211039; --navy-deeper:#120A21;
--cyan:#8B5CF6; --lime:#FFB624; --purple:#7C3AED;
--ink:#F5F7FF; --muted:#8A94C2; --muted-dim:#5A6398;
--card:rgba(255,255,255,.045); --card-line:rgba(255,255,255,.10);
--ok:#3ED598; --warn:#FFB454;
--radius:18px; --shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
font-family:"Manrope",system-ui,sans-serif;color:var(--ink);
background:
radial-gradient(1100px 700px at 78% -8%, rgba(139,92,246,.16), transparent 60%),
radial-gradient(900px 650px at 6% 108%, rgba(91,63,191,.30), transparent 55%),
linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 55%, var(--navy-deeper) 100%);
background-attachment:fixed;min-height:100dvh;-webkit-font-smoothing:antialiased;
display:flex;justify-content:center;align-items:stretch;
}
h1,h2,h3,.font-display{font-family:"Manrope",sans-serif}
.eyebrow{font-family:"Manrope";font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
button{font-family:"Manrope",system-ui,sans-serif;cursor:pointer;border:none}
button:focus-visible, textarea:focus-visible, select:focus-visible, input:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
/* phone-app shell */
.app{position:relative;width:100%;max-width:440px;height:100dvh;overflow:hidden;
background:linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 58%, var(--navy-deeper) 100%);
box-shadow:0 0 0 1px rgba(255,255,255,.04)}
@media (min-width:500px){
body{align-items:center;padding:20px}
.app{height:min(calc(100dvh - 40px), 900px);border-radius:34px;
box-shadow:0 50px 120px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08)}
}
.screen{position:absolute;inset:0;display:none;flex-direction:column;animation:fade .45s ease both}
.screen.active{display:flex}
#setup{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.45) transparent}
#diagnosis,#interview{overflow:hidden}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--purple));font-family:"Manrope";font-weight:800;color:var(--navy-deeper);font-size:16px;box-shadow:0 8px 24px -8px rgba(139,92,246,.7);flex:0 0 auto}
/* ---------- Setup ---------- */
.hero{max-width:680px}
.hero h1{font-size:clamp(30px,5vw,50px);line-height:1.04;font-weight:800;margin:14px 0 0}
.hero h1 .hi{background:linear-gradient(100deg,var(--cyan),var(--lime));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:var(--muted);font-size:17px;line-height:1.6;margin:16px 0 0;max-width:560px}
.missions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.mtag{font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:12.5px;color:var(--ink);background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.28);padding:7px 13px;border-radius:999px;display:inline-flex;gap:7px;align-items:center}
.mtag b{color:var(--lime)}
.form{margin-top:28px;background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);max-width:620px;backdrop-filter:blur(6px)}
.field{margin-bottom:18px}.field:last-of-type{margin-bottom:0}
label.lbl{display:block;font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.control{width:100%;background:rgba(18,10,33,.55);border:1px solid var(--card-line);color:var(--ink);border-radius:12px;padding:13px 14px;font-size:15px;font-family:"Manrope";transition:border-color .2s,background .2s}
.control::placeholder{color:var(--muted-dim)}
.control:hover{border-color:rgba(139,92,246,.5)}
select.control{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cta{background:var(--cyan);color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em;padding:15px 24px;border-radius:12px;width:100%;margin-top:26px;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .12s,box-shadow .2s;box-shadow:0 12px 30px -10px rgba(139,92,246,.55)}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(139,92,246,.72)}
.cta:active{transform:translateY(0)}
.fineprint{color:var(--muted-dim);font-size:12.5px;line-height:1.5;margin-top:16px}
.persona-hint{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted);background:rgba(139,92,246,.08);border-left:3px solid var(--cyan);border-radius:0 10px 10px 0;padding:11px 14px}
.persona-hint b{color:var(--ink);font-family:"Manrope",system-ui,sans-serif;font-weight:700}
/* ---------- Game menu flow ---------- */
.menu2{display:flex;flex-direction:column;min-height:100%;justify-content:center;align-items:center;text-align:center;gap:14px;padding:18px 20px calc(28px + env(safe-area-inset-bottom,0px))}
.menu-marcelo{position:relative;width:200px;height:230px;display:none;place-items:center;flex:0 0 auto}
.menu-marcelo.revealed{display:grid;animation:marceloReveal .85s cubic-bezier(.2,.9,.3,1.05) both}
@keyframes marceloReveal{0%{opacity:0;transform:scale(.35) translateY(28px) rotate(-6deg)}55%{opacity:1;transform:scale(1.09) translateY(-6px) rotate(2deg)}78%{transform:scale(.97) translateY(2px) rotate(0deg)}100%{opacity:1;transform:none}}
@keyframes marceloIn{0%{opacity:0;transform:scale(.55) translateY(24px)}55%{opacity:1}100%{opacity:1;transform:none}}
.mring{position:absolute;inset:8px;border-radius:50%;border:2px solid var(--cyan);opacity:0;animation:pulse 3s ease-out infinite}
.mring:nth-child(2){animation-delay:1s}.mring:nth-child(3){animation-delay:2s}
.menu-marcelo.speaking .mring{animation-duration:1.5s}
.mhead{width:120px;height:120px;border-radius:50%;position:relative;background:radial-gradient(95px 95px at 50% 30%, #143a92, var(--navy-deep));border:2px solid rgba(139,92,246,.6);box-shadow:0 0 0 6px rgba(139,92,246,.07), 0 20px 46px -18px rgba(139,92,246,.5), inset 0 -10px 26px rgba(0,0,0,.4);animation:idlefloat 4.6s ease-in-out infinite;transition:box-shadow .3s}
@keyframes idlefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.menu-marcelo.speaking .mhead{box-shadow:0 0 0 6px rgba(139,92,246,.16), 0 0 42px -4px rgba(139,92,246,.75), inset 0 -10px 26px rgba(0,0,0,.4)}
.meyes{position:absolute;top:44px;left:0;right:0;display:flex;justify-content:center;gap:22px}
.meyes i{width:13px;height:13px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:blink 5s infinite}
.mmouth{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);width:28px;height:6px;background:var(--cyan);border-radius:0 0 16px 16px;box-shadow:0 0 10px rgba(139,92,246,.6);transition:height .08s linear}
.menu-stage{width:100%;max-width:400px}
.mstep{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.mstep[hidden]{display:none}
.stepin{animation:stepIn .45s ease both}
@keyframes stepIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.liveavatar-launch{align-self:center;margin-top:2px;border:1px solid rgba(139,92,246,.34);background:rgba(139,92,246,.08);color:#fff;border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:8px;font-family:"Manrope",system-ui,sans-serif;font-weight:700;cursor:pointer;transition:.2s}
.liveavatar-launch:hover{transform:translateY(-1px);border-color:rgba(139,92,246,.7);background:rgba(139,92,246,.14)}
.liveavatar-launch small{color:var(--cyan);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.liveavatar-launch-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.brand-mini{display:flex;align-items:center;justify-content:center;width:100%}
.brand-lockup{display:flex;align-items:center;justify-content:center;gap:18px;min-height:86px}
.brand-logo{display:block;height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.28))}
.brand-logo.emprega{width:min(172px,48vw);margin-inline:-22px}
.brand-logo.iel{width:min(150px,42vw);margin-inline:-8px}
.brand-divider{width:1px;height:52px;background:linear-gradient(transparent,rgba(255,255,255,.32),transparent);flex:0 0 auto}
.game-title{font-size:clamp(28px,8vw,40px);line-height:1;font-weight:800;margin:6px 0 0;letter-spacing:-.01em}
.game-title .hi{background:linear-gradient(100deg,var(--cyan),var(--lime));-webkit-background-clip:text;background-clip:text;color:transparent}
.game-title.app-brand{margin:0;line-height:0;align-self:center;width:min(85%,340px,44dvh)}
.mstep[data-step="welcome"] .game-title.app-brand{width:min(68%,272px,35.2dvh)}
.app-brand-image{display:block;width:100%;height:auto;object-fit:contain}
.title-sub{color:var(--muted);font-size:14px;line-height:1.5;margin:0}
.guide-bubble{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.28);border-radius:16px;border-top-left-radius:5px;padding:14px 16px;font-size:14px;line-height:1.5;text-align:left;white-space:pre-line;min-height:56px}
.seg-label{font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;text-align:left}
.segmented{display:flex;gap:7px}
.seg-item{flex:1;position:relative;background:rgba(18,10,33,.5);border:1.5px solid var(--card-line);border-radius:12px;padding:10px 6px;text-align:center;color:var(--ink);transition:.16s}
.seg-item .si-ic{font-size:17px;display:block;margin-bottom:2px}
.seg-item .si-name{font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:13px}
.seg-item.selected{border-color:var(--lime);background:rgba(234,255,21,.09);box-shadow:0 0 0 2px rgba(234,255,21,.14)}
.seg-item .si-badge{position:absolute;top:-8px;right:-4px;font-family:"Manrope",system-ui,sans-serif;font-weight:800;font-size:9px;color:var(--navy-deeper);background:var(--lime);padding:2px 6px;border-radius:999px;box-shadow:0 5px 14px -5px rgba(234,255,21,.7)}
/* ===== Cartões de seleção (dificuldade + vaga) ===== */
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
/* ===== Modalidade (chips) ===== */
/* ===== Combobox de vaga (expansível + busca) ===== */
@keyframes comboIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.vaga-layout,.vaga-column{display:contents}
/* ===== Identificação da pessoa candidata ===== */
/* ===== Consentimento e privacidade ===== */
.privacy-box{display:flex;align-items:center;gap:9px;text-align:left;padding:2px 1px;color:var(--muted)}
.privacy-box input{appearance:none;width:19px;height:19px;flex:0 0 auto;margin:0;border:1.5px solid rgba(255,255,255,.4);border-radius:5px;background:rgba(18,10,33,.72);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.privacy-box input::after{content:"✓";font-family:"Manrope";font-size:13px;font-weight:900;color:var(--navy-deeper);opacity:0;transform:scale(.35);transition:.16s}
.privacy-box input:checked{background:var(--cyan);border-color:var(--cyan)}
.privacy-box input:checked::after{opacity:1;transform:scale(1)}
.privacy-link{padding:0;background:transparent;color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.4;text-decoration:underline;text-decoration-color:rgba(139,92,246,.62);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.privacy-link:hover{color:var(--cyan);text-decoration-color:var(--cyan)}
.privacy-box.invalid input{border-color:#ff8e8e;box-shadow:0 0 0 3px rgba(255,128,128,.12)}
.privacy-box.invalid .privacy-link{color:#ffb6b6}
.privacy-error{display:none;margin:-4px 2px 0;color:#ffb6b6;font-size:11.5px;text-align:left}
.privacy-error.show{display:block}
/* ===== Microinterações gerais ===== */
.cta{position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .55s ease;pointer-events:none}
.cta:hover::after,.cta:active::after{left:135%}
.mback{transition:transform .12s ease,background .2s,border-color .2s}
.mback:hover{border-color:rgba(139,92,246,.5)}
.mback:active{transform:scale(.96)}
.chip{transition:transform .16s cubic-bezier(.2,.9,.2,1),background .2s,border-color .2s}
.chip:hover{transform:translateY(-1px)}
.iconbtn,.micbtn,#sendBtn,#micBtn{transition:transform .12s ease,background .2s,box-shadow .2s}
.iconbtn:active,.micbtn:active,#sendBtn:active,#micBtn:active{transform:scale(.9)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
/* ===== Botão engrenagem no menu ===== */
.menu-gear{position:absolute;top:14px;right:14px;z-index:6;width:38px;height:38px;border-radius:50%;background:rgba(18,10,33,.6);border:1px solid var(--card-line);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:transform .14s,color .2s,border-color .2s,background .2s}
.menu-gear:hover{color:var(--cyan);border-color:rgba(139,92,246,.5);transform:rotate(35deg)}
.menu-gear:active{transform:scale(.92)}
/* ===== Modal de voz ===== */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-end;justify-content:center}
.modal.show{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,7,25,.62);backdrop-filter:blur(3px);animation:fadein .2s ease}
.modal-card{position:relative;width:100%;max-width:440px;background:linear-gradient(180deg,#2c1944,#190e2b);border:1px solid var(--card-line);border-top-left-radius:22px;border-top-right-radius:22px;padding:20px 20px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -22px 54px -12px rgba(0,0,0,.65);animation:sheetup .3s cubic-bezier(.2,.9,.2,1)}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-title{font-family:"Manrope";font-weight:800;font-size:17px}
.modal-x{background:rgba(255,255,255,.08);border:none;color:var(--ink);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:13px;transition:.15s}
.modal-x:hover{background:rgba(255,255,255,.16)}
.mfield{display:block;margin-bottom:18px}
.voice-provider{display:flex;gap:11px;align-items:center;margin:2px 0 18px;padding:12px 13px;border:1px solid rgba(139,92,246,.24);border-radius:12px;background:rgba(139,92,246,.07)}
.voice-provider-dot{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:#f4b740;box-shadow:0 0 0 4px rgba(244,183,64,.14)}
.voice-provider[data-mode="ready"] .voice-provider-dot{background:#8B5CF6;box-shadow:0 0 0 4px rgba(139,92,246,.15)}
.voice-provider[data-mode="fallback"] .voice-provider-dot{background:#8e98aa;box-shadow:0 0 0 4px rgba(142,152,170,.13)}
.voice-provider strong,.voice-provider span{display:block}
.voice-provider strong{font:700 13px/1.25 Manrope,sans-serif;color:var(--ink)}
.voice-provider div span{margin-top:3px;font-size:11.5px;line-height:1.35;color:var(--muted)}
.mflabel{display:block;font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.mflabel b{color:var(--cyan);float:right;letter-spacing:0;font-size:13px}
.mrange{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:rgba(255,255,255,.15);outline:none}
.mrange::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--cyan);cursor:pointer;box-shadow:0 4px 12px -2px rgba(139,92,246,.7)}
.mrange::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--cyan);cursor:pointer}
.mrange-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:7px}
.modal-actions{display:flex;gap:10px;margin-top:2px}
.modal-actions .btn-ghost,.modal-actions .btn-solid{flex:1}
.mnote{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:14px}
.terms-card{max-height:min(82dvh,700px);overflow:auto}
.terms-content{color:var(--muted);font-size:13px;line-height:1.58}
.terms-content p{margin:0 0 12px}
.terms-content strong{color:var(--ink)}
.terms-content ul{margin:0 0 18px;padding-left:20px}
.terms-content li+li{margin-top:7px}
.mic-test-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:17px 16px;background:rgba(18,10,33,.48);border:1px solid var(--card-line);border-radius:17px;transition:border-color .25s,box-shadow .25s}
.mic-test-card.active{border-color:rgba(139,92,246,.48);box-shadow:0 12px 30px -22px rgba(139,92,246,.8)}
.mic-test-card.ready{border-color:rgba(62,213,152,.58)}
.mic-test-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--cyan);background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.32);transition:.25s}
.mic-test-card.active .mic-test-icon{color:#fff;background:var(--cyan);box-shadow:0 0 0 7px rgba(139,92,246,.1),0 10px 24px -12px rgba(139,92,246,.9)}
.mic-test-title{margin:0;font-family:"Manrope",sans-serif;font-size:17px;font-weight:800}
.mic-test-copy{margin:-3px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45}
.mic-meter{width:100%;height:9px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.09);box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
.mic-meter-fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--lime));transition:width .08s linear}
.mic-test-status{min-height:18px;margin:0;color:var(--muted);font-size:12px;font-weight:600}
.mic-test-status.ok{color:var(--ok)}
.mic-test-status.error{color:#ffb6b6}
.mic-test-btn{width:100%;padding:11px 16px;border-radius:11px;background:rgba(139,92,246,.13);border:1px solid rgba(139,92,246,.35);color:var(--cyan);font-weight:700;transition:.2s}
.mic-test-btn:hover{background:rgba(139,92,246,.2);border-color:var(--cyan)}
.mic-test-btn:disabled{opacity:.55;cursor:wait}
.mic-test-note{margin:0;color:var(--muted);font-size:11.5px;line-height:1.42;text-align:center}
.cta:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.cta.play{margin-top:4px;font-size:16px;gap:10px;flex:0 0 auto}
.mrow{display:flex;gap:10px;margin-top:2px}
.mrow .cta.play{flex:1;margin-top:0}
.mback{flex:0 0 auto;background:transparent;color:var(--muted);border:1px solid var(--card-line);font-weight:700;font-size:14px;padding:0 20px;border-radius:12px;transition:.2s}
.mback:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.mstep[data-step="title"] .brand-mini{animation:stepIn .6s ease both .35s}
.mstep[data-step="title"] .game-title{animation:stepIn .7s ease both .5s}
.mstep[data-step="title"] .title-sub{animation:stepIn .7s ease both .65s}
.mstep[data-step="title"] .cta.play{animation:stepIn .7s ease both .85s}
/* ---------- HUD (top app bar) ---------- */
.hud{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--card-line);background:rgba(18,10,33,.35);flex-wrap:wrap}
.hudchips{display:flex;gap:7px;flex:0 0 auto}
.chip{font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:11.5px;padding:7px 10px;border-radius:10px;display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.05);border:1px solid var(--card-line)}
.timerbar{position:relative;height:30px;border-radius:10px;background:rgba(18,10,33,.6);border:1px solid var(--card-line);overflow:hidden;display:flex;align-items:center}
.timerfill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,var(--cyan),var(--lime));opacity:.35;transition:width .2s linear}
.timertxt{position:relative;z-index:1;margin:0 auto;font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.02em;color:var(--ink)}
.timertxt b{font-size:15px;font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums;margin-left:4px}
/* Últimos 10 segundos: tudo vermelho. */
.timerbar.low{border-color:#ef4444;background:rgba(127,29,29,.55);box-shadow:0 0 0 2px rgba(239,68,68,.35)}
.timerbar.low .timerfill{background:#ef4444;opacity:.75;animation:tlow .7s ease infinite}
.timerbar.low .timertxt{color:#fff}
@keyframes tlow{0%,100%{opacity:.5}50%{opacity:.85}}
@keyframes hotpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.chip .q{color:var(--cyan)}
/* ---------- Palco do entrevistador ---------- */
.stage{flex:0 0 auto;display:grid;grid-template-columns:1fr;justify-items:stretch;gap:10px;padding:12px 16px;position:relative;overflow:hidden;background:radial-gradient(120% 130% at 30% -20%, rgba(139,92,246,.16), transparent 62%);border-bottom:1px solid var(--card-line)}
.liveavatar-stage{position:relative;width:100%;max-width:420px;aspect-ratio:16/9;justify-self:center;overflow:hidden;border-radius:18px;background:radial-gradient(circle at 50% 28%,#173477,#071027 72%);border:1px solid rgba(139,92,246,.34);box-shadow:0 14px 36px rgba(0,0,0,.26)}
.liveavatar-idle{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;opacity:1;transition:opacity .28s ease,filter .28s ease}
.liveavatar-stage.connecting .liveavatar-idle{filter:none}
.liveavatar-stage.ready .liveavatar-idle{opacity:0;visibility:hidden}
.liveavatar-stage #liveAvatarVideo{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity .35s ease;background:#071027}
.liveavatar-stage.ready #liveAvatarVideo{opacity:1}
.liveavatar-stage-placeholder{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;padding:18px;color:#fff;background:rgba(5,12,31,.3);opacity:0;visibility:hidden;pointer-events:none;transition:.25s}
.liveavatar-stage.fallback .liveavatar-stage-placeholder{opacity:1;visibility:visible}
.liveavatar-stage.ready .liveavatar-stage-placeholder{opacity:0;visibility:hidden;pointer-events:none}
.liveavatar-stage-placeholder strong{font-family:"Manrope",sans-serif;font-size:14px}
.liveavatar-stage-placeholder small{max-width:270px;color:var(--muted);font-size:10px;line-height:1.4}
.liveavatar-stage-spinner{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--cyan);animation:spin .9s linear infinite}
.interview-loading{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;background:rgba(18,10,33,.7);color:white;font-size:13px;pointer-events:none}
.interview-loading[hidden]{display:none}
.stage.liveavatar-enabled .orb-slot{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.orb-slot{position:relative;width:120px;height:140px;display:grid;place-items:center;flex:0 0 auto}
.marcelo-face.has3d .head,.marcelo-face.has3d .mhead{display:none}
#stageOrb,.menu-marcelo{position:relative}
#stageOrb canvas,.menu-marcelo canvas{position:absolute;inset:0}
@keyframes gNod{0%,100%{transform:translateY(0)}20%{transform:translateY(6px)}45%{transform:translateY(-2px)}70%{transform:translateY(4px)}}
@keyframes gShake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-6px) rotate(-5deg)}45%{transform:translateX(6px) rotate(5deg)}70%{transform:translateX(-4px) rotate(-3deg)}}
@keyframes gReact{0%{transform:scale(1)}35%{transform:scale(1.13) translateY(-5px)}65%{transform:scale(.97)}100%{transform:scale(1)}}
.ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--cyan);opacity:0}
.stage.speaking .ring{animation:pulse 1.8s ease-out infinite}
.stage.speaking .ring:nth-child(2){animation-delay:.6s}
.stage.speaking .ring:nth-child(3){animation-delay:1.2s}
@keyframes pulse{0%{transform:scale(.72);opacity:.55}100%{transform:scale(1.15);opacity:0}}
.head{width:84px;height:84px;border-radius:50%;position:relative;background:radial-gradient(70px 70px at 50% 32%, #12327f, var(--navy-deep));border:2px solid rgba(139,92,246,.55);box-shadow:0 0 0 5px rgba(139,92,246,.08), inset 0 -8px 22px rgba(0,0,0,.35);transition:filter .3s}
.stage:not(.speaking) .head{filter:saturate(.85) brightness(.95)}
.eyes{position:absolute;top:30px;left:0;right:0;display:flex;justify-content:center;gap:16px}
.eye{width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px var(--cyan);animation:blink 5.4s infinite}
.mouth{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:26px;height:5px;background:var(--cyan);border-radius:0 0 14px 14px;box-shadow:0 0 10px rgba(139,92,246,.6);transition:height .08s linear}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.stage-meta{width:100%;display:grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;gap:8px;min-width:0;text-align:center}
.who{font-family:"Manrope";font-weight:800;font-size:20px;line-height:1}
.statuspill{font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;background:rgba(139,92,246,.12);color:var(--cyan);border:1px solid rgba(139,92,246,.3);transition:.25s}
.statuspill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.statuspill[data-mode="listening"]{background:rgba(234,255,21,.12);color:var(--lime);border-color:rgba(234,255,21,.35)}
.statuspill[data-mode="thinking"]{background:rgba(138,148,194,.14);color:var(--muted)}
/* ---------- LiveAvatar sandbox preview ---------- */
.modal-kicker{display:block;color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-40px) scale(1.1)}}
/* ---------- Chat ---------- */
.transcript{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;display:flex;flex-direction:column;gap:12px}
.bubble{max-width:86%;padding:12px 15px;border-radius:16px;line-height:1.5;font-size:15px;animation:fade .35s ease both}
.bubble.marina{align-self:flex-start;background:rgba(139,92,246,.13);border:1px solid rgba(139,92,246,.28);border-bottom-left-radius:5px}
.bubble.me{align-self:flex-end;background:rgba(91,63,191,.28);border:1px solid rgba(91,63,191,.5);border-bottom-right-radius:5px}
.bubble .tag{display:block;font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-bottom:5px}
.typing{align-self:flex-start;display:flex;align-items:center;gap:6px;padding:14px 18px;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.22);border-radius:16px;border-bottom-left-radius:5px;animation:fade .25s ease both}
.typing b{font-family:"Manrope",system-ui,sans-serif;font-size:12px;line-height:1;color:var(--muted);font-weight:700;margin-right:4px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:tp 1.2s infinite}
.typing i:nth-of-type(2){animation-delay:.2s}.typing i:nth-of-type(3){animation-delay:.4s}
@keyframes tp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
/* ---------- Composer (bottom) ---------- */
.composer{flex:0 0 auto;border-top:1px solid var(--card-line);padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;background:rgba(18,10,33,.35)}
.inputrow{display:flex;gap:9px;align-items:flex-end}
textarea.answer{flex:1;resize:none;min-height:50px;max-height:130px;background:rgba(18,10,33,.55);border:1px solid var(--card-line);color:var(--ink);border-radius:14px;padding:13px 15px;font-family:"Manrope";font-size:15px;line-height:1.5;transition:border-color .2s}
textarea.answer::placeholder{color:var(--muted-dim)}
textarea.answer:hover{border-color:rgba(139,92,246,.45)}
.iconbtn{width:50px;height:50px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--card-line);color:var(--ink);transition:.2s}
.iconbtn:hover{background:rgba(255,255,255,.11)}
.iconbtn.mic.on{background:var(--cyan);color:#fff;border-color:var(--cyan);animation:micpulse 1.3s infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(234,255,21,.5)}50%{box-shadow:0 0 0 12px rgba(234,255,21,0)}}
.iconbtn.send{background:var(--cyan);color:#fff;border-color:var(--cyan)}
.iconbtn.send:hover{filter:brightness(1.08)}
.iconbtn:disabled{opacity:.4;cursor:not-allowed}
.voice-review{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border:1px solid rgba(139,92,246,.32);border-radius:12px;background:rgba(139,92,246,.1)}
.voice-review[hidden]{display:none}
.voice-review span{min-width:0;color:var(--muted);font-size:12px;line-height:1.35}
.reviewbtn{flex:0 0 auto;border:1px solid var(--card-line);border-radius:10px;background:rgba(255,255,255,.06);color:var(--ink);font-family:"Manrope",system-ui,sans-serif;font-weight:800;font-size:12px;padding:8px 10px}
.reviewbtn.primary{background:var(--cyan);border-color:var(--cyan);color:#fff}
.composer-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hint{color:var(--muted-dim);font-size:11.5px}
.endbtn{background:transparent;color:var(--lime);border:1px solid rgba(234,255,21,.4);font-weight:700;font-size:12.5px;letter-spacing:.02em;padding:9px 14px;border-radius:11px;transition:.2s;flex:0 0 auto}
.endbtn:hover{background:rgba(234,255,21,.1)}
.endbtn:disabled{opacity:.4;cursor:not-allowed}
/* ---------- Toasts ---------- */
.toasts{position:fixed;top:18px;right:18px;display:flex;flex-direction:column;gap:10px;z-index:50}
.toast{display:flex;align-items:center;gap:12px;background:rgba(8,20,60,.92);border:1px solid rgba(234,255,21,.4);border-radius:14px;padding:12px 16px;box-shadow:0 16px 40px -12px rgba(0,0,0,.7);animation:toastin .4s cubic-bezier(.2,.9,.2,1) both;min-width:230px}
@keyframes toastin{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.toast .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:20px;background:rgba(234,255,21,.16);flex:0 0 auto}
.toast .tt{font-family:"Manrope";font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.toast .tb{font-size:14px;font-weight:600;margin-top:2px}
/* confetti */
/* ---------- Results (tabbed, one screen) ---------- */
.loadwrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:30px 20px;text-align:center}
.spinner{width:48px;height:48px;border-radius:50%;border:4px solid rgba(139,92,246,.2);border-top-color:var(--cyan);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#diagContent{height:100%}
.diagwrap{display:flex;flex-direction:column;height:100%;padding:16px 16px calc(14px + env(safe-area-inset-bottom,0px))}
.resulthero{background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(91,63,191,.22));border:1px solid rgba(139,92,246,.34);border-radius:18px;padding:22px;text-align:center;margin:16px}
.resulthero .eyebrow{color:var(--lime)}
.resulthero h1{font-size:24px;font-weight:800;margin:8px 0 4px}
.diagcard{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);margin-top:18px;backdrop-filter:blur(6px)}
.summary{font-size:16px;line-height:1.65}
.score .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.score .name{font-family:"Manrope";font-weight:700;font-size:14px}
.score .val{font-family:"Manrope";font-weight:800;font-size:15px;color:var(--cyan)}
.track{height:9px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--purple),var(--cyan));width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.score .cmt{color:var(--muted);font-size:13px;margin-top:7px;line-height:1.5}
.cols{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px}
.diag-actions{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.diag-actions button{flex:1}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--card-line);font-weight:700;font-size:14px;padding:13px 22px;border-radius:12px;transition:.2s}
.btn-ghost:hover{background:rgba(255,255,255,.07)}
.btn-solid{background:var(--cyan);color:#fff;font-weight:800;font-size:14px;padding:13px 22px;border-radius:12px;transition:.2s}
.btn-solid:hover{filter:brightness(1.05)}
.errmsg{background:rgba(255,120,120,.12);border:1px solid rgba(255,120,120,.4);color:#ffd4d4;border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.5;margin-top:16px}
.answer{scrollbar-width:none}
.answer::-webkit-scrollbar{width:0;height:0}
@media (max-width:520px){
.stage{padding:10px 12px}
.liveavatar-stage{max-width:100%;border-radius:14px}
.stage-meta{grid-template-columns:1fr;justify-items:center;gap:6px}
.who{font-size:18px}
.cols{grid-template-columns:1fr}
.two{grid-template-columns:1fr}
}
@media (max-height:760px){
.liveavatar-stage{max-width:320px}
.orb-slot{width:88px;height:88px}
.head{width:70px;height:70px}
.eyes{top:24px;gap:13px}.eye{width:8px;height:8px}
.mouth{bottom:15px;width:22px}
.stage{padding:10px 14px;gap:8px}
.who{font-size:19px}
.menu-marcelo{width:118px;height:118px}
.mhead{width:94px;height:94px}
.meyes{top:34px;gap:17px}.meyes i{width:11px;height:11px}
.mmouth{bottom:24px;width:24px}
.game-title{font-size:26px}
.menu2{justify-content:flex-start;gap:8px;padding-top:14px;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
.mstep[data-step="title"]:not([hidden]){min-height:calc(100dvh - 40px);justify-content:center}
.guide-bubble{padding:11px 13px;font-size:13px;line-height:1.42;min-height:0}
.cta.play{margin-top:2px}
}
/* ---------- Tablet horizontal e desktop ---------- */
@media (min-width:768px) and (orientation:landscape){
body{padding:0;align-items:stretch;overflow:hidden}
.app{width:100%;max-width:none;height:100dvh;border-radius:0;box-shadow:none}
.app::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
radial-gradient(760px 480px at 14% 18%,rgba(139,92,246,.09),transparent 68%),
radial-gradient(700px 520px at 92% 88%,rgba(91,63,191,.16),transparent 66%)}
.screen{z-index:1}
/* Menu e configuração */
.menu2{min-height:100%;justify-content:center;padding:clamp(28px,4vw,62px);gap:20px}
.menu-stage{max-width:1120px}
.mstep{gap:18px}
.mstep[data-step="title"]{max-width:720px;margin:0 auto;gap:20px}
.brand-lockup{min-height:112px;gap:30px}
.brand-logo.emprega{width:232px;margin-inline:-28px}
.brand-logo.iel{width:204px;margin-inline:-11px}
.brand-divider{height:68px}
.game-title{font-size:clamp(48px,5vw,72px);letter-spacing:-.035em}
.title-sub{font-size:18px;line-height:1.6;max-width:620px;align-self:center}
.mstep[data-step="title"] .cta.play{width:270px;align-self:center;margin-top:8px}
.mstep[data-step="diff"]{max-width:1040px;margin:0 auto}
.mstep[data-step="diff"] .cta.play{width:280px;align-self:flex-end;margin-top:4px}
.mstep[data-step="vaga"]{max-width:1040px;margin:0 auto;gap:16px}
.guide-bubble{padding:16px 18px;font-size:15px;min-height:0}
.vaga-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;text-align:left}
.vaga-column{display:flex;flex-direction:column;gap:13px;min-width:0;padding:22px;border:1px solid var(--card-line);border-radius:20px;background:linear-gradient(145deg,rgba(44,24,70,.7),rgba(18,10,33,.44));box-shadow:0 18px 48px -32px rgba(0,0,0,.9)}
.vaga-column .seg-label[style]{margin-top:10px!important}
.privacy-box{margin-top:auto;padding-top:13px;border-top:1px solid var(--card-line)}
.mrow{gap:12px}
.mstep[data-step="vaga"] .mrow{justify-content:flex-end}
.mstep[data-step="vaga"] .mrow .mback{flex:0 0 150px}
.mstep[data-step="vaga"] .mrow .cta{flex:0 0 270px}
.mstep[data-step="microfone"]{max-width:760px;margin:0 auto}
.mic-test-card{padding:26px}
/* Entrevista: avatar e conversa dividem a tela */
#interview.screen.active{display:grid;grid-template-columns:minmax(360px,42%) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
.hud{grid-column:1/-1;grid-row:1;flex-wrap:nowrap;padding:13px clamp(20px,2.4vw,36px);gap:14px;background:rgba(18,10,33,.58);backdrop-filter:blur(14px)}
.hudchips{gap:9px}
.stage{grid-column:1;grid-row:2/4;min-height:0;padding:clamp(24px,3.5vw,54px);align-content:center;gap:20px;border-right:1px solid var(--card-line);border-bottom:0;background:radial-gradient(120% 100% at 35% 12%,rgba(139,92,246,.20),transparent 64%)}
.liveavatar-stage{max-width:680px;border-radius:24px;box-shadow:0 28px 70px -26px rgba(0,0,0,.78),0 0 0 1px rgba(139,92,246,.08)}
.stage-meta{gap:12px}
.who{font-size:26px}
.transcript{grid-column:2;grid-row:2;min-height:0;padding:clamp(22px,3vw,40px);gap:16px;background:linear-gradient(180deg,rgba(26,14,43,.26),rgba(18,10,33,.08))}
.bubble{max-width:min(78%,720px);padding:15px 18px;border-radius:18px;font-size:16px;line-height:1.58}
.composer{grid-column:2;grid-row:3;padding:16px clamp(22px,3vw,40px) 20px;gap:11px;background:rgba(18,10,33,.58);backdrop-filter:blur(14px)}
textarea.answer{min-height:58px;font-size:16px;padding:16px 17px}
.iconbtn{width:58px;height:58px;border-radius:16px}
.composer-foot{min-height:36px}
/* Resultado e modais */
.diagwrap{max-width:1180px;margin:0 auto;padding:24px 32px 26px}
.cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.diag-actions{max-width:760px;width:100%;align-self:center}
.modal{align-items:center;padding:24px}
.modal-card{border-radius:22px;max-height:calc(100dvh - 48px);overflow-y:auto;padding:24px}
}
.pdf-preview{width:min(960px,94vw);height:90dvh;max-height:94dvh;border:1px solid var(--card-line);border-radius:18px;background:#0b1630;color:white;padding:20px}
.pdf-preview[open]{display:flex;flex-direction:column;gap:12px}
.pdf-preview::backdrop{background:rgba(0,0,0,.75)}
.pdf-preview iframe{width:100%;flex:1;min-height:180px;border:0;background:white}
.pdf-preview>div{display:flex;gap:12px;justify-content:flex-end}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important}}
/* Invitation entry uses the same navy/cyan palette as the candidate setup. */
.invitation-field{width:min(100%,400px);align-self:center;display:flex;flex-direction:column;gap:10px;text-align:left;box-sizing:border-box}
.invitation-field label{font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;color:#dce7fa}
#invitationCode{box-sizing:border-box;width:100%;min-height:62px;padding:16px 18px;border:1px solid rgba(143,178,220,.3);border-radius:14px;background:rgba(30,17,48,.75);color:#fff;font-family:'Manrope',sans-serif;font-size:clamp(16px,4.8vw,21px);font-weight:600;letter-spacing:2px;text-align:center;text-transform:uppercase;outline:none;box-shadow:inset 0 1px 3px #0002;transition:border-color .18s,box-shadow .18s}
#invitationCode::placeholder{color:#8293b5;font-weight:500;opacity:1}
#invitationCode:hover{border-color:#7091ba}
#invitationCode:focus{border-color:#8B5CF6;box-shadow:0 0 0 4px rgba(139,92,246,.13)}
#invitationCode[aria-invalid=true]{border-color:#ff9292;box-shadow:0 0 0 3px #ff929214}
#invitationHelp{font-size:12px;line-height:1.5;color:#a8b9d4}
#invitationStatus{margin:0;font-size:12px;line-height:1.5;color:#aeeef3}
#invitationStatus:empty{display:none}
.invitation-field:has([aria-invalid=true]) #invitationStatus{color:#ffb5b5}
.mstep[data-step="title"] #beginBtn{width:min(100%,400px);align-self:center}
.candidate-account{box-sizing:border-box;width:min(100%,620px);margin:24px auto;padding:28px;border:1px solid #ffffff20;border-radius:20px;background:#1e1130cc;display:flex;flex-direction:column;gap:20px;text-align:left}
.candidate-account h1{font-family:Manrope,sans-serif;font-size:28px;margin:0;color:#fff}
.candidate-account p,.candidate-account details{font-size:13px;line-height:1.7;color:#b4c4dc;margin:0}
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.account-grid[hidden],#registrationPrivacy[hidden]{display:none}
.account-grid label{display:flex;flex-direction:column;gap:7px;color:#dce7fa;font-size:12px;font-weight:600}
.account-grid .full{grid-column:1/-1}
.account-grid input,.account-grid select{box-sizing:border-box;width:100%;min-height:46px;padding:12px;border-radius:10px;border:1px solid #66517c;background:#29193e;color:#fff;font:14px 'Manrope',sans-serif}
.account-grid input:focus,.account-grid select:focus{outline:2px solid #8B5CF6;outline-offset:2px}
.account-grid input::placeholder{color:#99abc7}
.candidate-account .account-check{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.6;color:#c8d7eb;margin-top:16px}
.account-check input{flex:0 0 18px;width:18px;height:18px;margin-top:2px;accent-color:#8B5CF6}
.candidate-account summary{cursor:pointer;color:#62dfed}
#accountStatus,#resetStatus{color:#ffb8b8}
.candidate-account .reset-code[hidden]{display:none}
#passwordResetForm h1{margin:0}
.welcome-actions{display:flex;flex-direction:column;gap:12px;width:min(100%,340px);margin:26px auto 0}
.welcome-actions .cta,.welcome-actions .btn-ghost{width:100%;margin:0;min-height:52px;border-radius:14px;font-size:15px}
.welcome-actions .btn-ghost{border:1px solid rgba(139,92,246,.4);color:#e0d2ff;background:rgba(139,92,246,.06)}
.welcome-actions button:focus-visible{outline:3px solid #8B5CF6;outline-offset:4px}
.candidate-account .cta{width:100%}
.candidate-account .account-switch{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:12px 18px;margin:0;border:1px solid rgba(139,92,246,.3);border-radius:12px;background:rgba(139,92,246,.045);color:#cdb5ff;font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;line-height:1.5;text-align:center;box-shadow:none;transition:background .18s,border-color .18s,color .18s}
.candidate-account .account-switch:hover{background:rgba(139,92,246,.11);border-color:#8B5CF6;color:#eee5ff}
.candidate-account .account-switch:active{background:rgba(139,92,246,.17)}
.candidate-account .account-switch:focus-visible{outline:3px solid #8B5CF6;outline-offset:3px}
/* Long account forms must grow inside the setup scroller, never shrink/clip. */
#setup:has(.mstep[data-step="register"]:not([hidden])) .menu2{justify-content:flex-start;flex:0 0 auto;min-height:100%;width:100%}
.candidate-account,.account-grid,.account-grid label{min-width:0}
.candidate-account input,.candidate-account select{scroll-margin-block:24px}
.candidate-account .account-check>span{min-width:0;flex:1}
.candidate-account .account-check small{display:inline}
.candidate-account summary{padding-block:10px;min-height:44px}
@media(max-width:767px){
body:has(#setup.active){padding:0;align-items:stretch}
body:has(#setup.active) .app{width:100%;max-width:none;height:100dvh;border-radius:0;box-shadow:none}
#setup.active .menu2{padding:20px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));flex-shrink:0}
#setup.active .menu-stage{max-width:560px;min-width:0}
.candidate-account{width:100%;padding:8px 0 16px;margin:0;gap:20px;border:0;border-radius:0;background:transparent}
.candidate-account h1{font-size:26px;line-height:1.25}
.candidate-account p{font-size:14px;line-height:1.6}
.candidate-account .account-grid{grid-template-columns:minmax(0,1fr);gap:18px}
.candidate-account .account-grid label{font-size:14px;gap:8px}
.candidate-account .account-grid input,.candidate-account .account-grid select{min-height:52px;font-size:16px;padding:14px;border-radius:12px}
.candidate-account .account-check{font-size:13px;gap:12px;padding-block:5px}
.candidate-account .account-check input{width:22px;height:22px;flex-basis:22px}
.candidate-account .cta,.candidate-account .account-switch{min-height:52px;padding:14px 16px;font-size:14px;white-space:normal;line-height:1.5}
.candidate-account .cta{margin-top:0}
#accountStatus{overflow-wrap:anywhere}
}
/* Account screen is a document, not a fixed-height interview stage.
Keep one scroll owner so the first field and final buttons stay reachable. */
html:has(#setup.active .mstep[data-step="register"]:not([hidden])){height:auto;min-height:100%;overflow-y:auto}
body:has(#setup.active .mstep[data-step="register"]:not([hidden])){display:block;height:auto;min-height:100dvh;overflow:visible;padding:0}
body:has(#setup.active .mstep[data-step="register"]:not([hidden])) .app{height:auto;min-height:100dvh;width:100%;max-width:none;margin:0;border-radius:0;overflow:visible}
#setup.active:has(.mstep[data-step="register"]:not([hidden])){position:relative;inset:auto;display:block;height:auto;overflow:visible;animation:none}
#setup.active:has(.mstep[data-step="register"]:not([hidden])) .menu2{display:block;min-height:0;height:auto;padding:24px 20px}
#setup.active:has(.mstep[data-step="register"]:not([hidden])) .menu-stage{width:100%;max-width:620px;margin-inline:auto}
.candidate-account{overflow-wrap:anywhere}
@media(max-width:767px){
#setup.active:has(.mstep[data-step="register"]:not([hidden])) .menu2{padding:24px max(16px,env(safe-area-inset-right,0px)) max(32px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.candidate-account{padding:0;margin:0;max-width:100%}
.account-grid input,.account-grid select{min-width:0;max-width:100%}
}
/* Company-defined interview confirmation: no candidate-controlled job setup. */
.enterprise-summary{width:100%;max-width:720px;margin:18px auto;padding:24px;border:1px solid rgba(180,202,255,.22);border-radius:20px;background:rgba(30,17,48,.75);text-align:left}
.enterprise-summary h2{font-size:22px;margin:8px 0 20px}
.enterprise-summary dl{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0}
.enterprise-summary dt{font-size:12px;color:#adc1e4;margin-bottom:5px}
.enterprise-summary dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.enterprise-summary p{font-size:13px;line-height:1.6;color:#bdcce5;margin:20px 0 0}
.vaga-layout.enterprise-confirmation{display:block;max-width:720px;margin:auto}
.enterprise-confirmation [hidden]{display:none!important}
@media(max-width:540px){.enterprise-summary{padding:18px}.enterprise-summary dl{grid-template-columns:1fr}.enterprise-summary h2{font-size:19px}}
/* ===== Revisão de UI e UX do fluxo do candidato =====
Fica no fim do arquivo para prevalecer sobre as regras anteriores. */
.candidate-account [hidden]{display:none!important}
/* Cadastro em três passos */
.candidate-account{gap:16px}
.candidate-account h1{font-size:24px}
.reg-progress{display:flex;gap:6px}
.reg-progress i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.14);transition:background .25s}
.reg-progress i.on{background:var(--cyan)}
.account-grid label{font-size:13px}
/* 16px evita o zoom automático do iOS ao focar um campo. */
.account-grid input,.account-grid select{min-height:50px;border-radius:12px;font-size:16px;color-scheme:dark}
.password-field{position:relative;display:block}
.password-field input{padding-right:92px}
.password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:38px;padding:0 12px;border-radius:9px;background:rgba(139,92,246,.18);color:#e0d2ff;font-size:12.5px;font-weight:700}
.password-toggle:hover{background:rgba(139,92,246,.3)}
#invitationCode{font-size:18px}
/* Conferência da oportunidade: o que esperar e o consentimento */
.mstep[data-step="vaga"] .guide-bubble{display:none}
.enterprise-summary{margin:0 auto}
.enterprise-summary h2{margin:6px 0 16px}
.enterprise-summary p{margin-top:16px}
.expect-card{width:100%;max-width:720px;margin:0 auto;padding:18px 20px;border:1px solid rgba(180,202,255,.16);border-radius:20px;background:rgba(139,92,246,.08);text-align:left}
.expect-card h2{margin:0 0 10px;font-size:15px}
.expect-card ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.expect-card li{position:relative;padding-left:18px;font-size:13px;line-height:1.5;color:#c9d5ea}
.expect-card li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--lime)}
.expect-card strong{color:#fff}
.privacy-box{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:0;padding:14px 16px;border:1px solid var(--card-line);border-radius:14px;background:rgba(255,255,255,.04)}
.consent-label{display:flex;align-items:center;gap:11px;flex:1;min-width:0;cursor:pointer;color:var(--ink);font-size:14px;font-weight:600;line-height:1.35;text-align:left}
.privacy-box input{width:24px;height:24px;border-radius:7px}
.privacy-link{flex:none;min-height:32px;font-size:13px;color:#cdb5ff}
.privacy-box.invalid{border-color:#ff8e8e}
.privacy-error{margin:6px 2px 0;font-size:12.5px}
/* Gravação ligada: o aviso fica junto do aceite, antes de a pessoa marcar o consentimento. */
.audio-notice{margin:10px 2px 0;padding:10px 12px;border-radius:10px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.35);color:var(--ink);font-size:12.5px;line-height:1.5;text-align:left}
.audio-notice[hidden]{display:none}
/* Entrevista: progresso legível, sem rótulos do simulador */
.hud{justify-content:space-between;gap:10px}
.progress-chip{gap:6px;padding:8px 12px;font-size:12.5px}
.progress-chip .q{color:var(--muted);font-weight:600}
.q-progress{flex:1 0 100%;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.q-progress i{display:block;width:0;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--lime));transition:width .4s ease}
.who,.eyebrow{font-family:"Manrope",system-ui,sans-serif}
textarea.answer{font-family:"Manrope",system-ui,sans-serif;font-size:16px}
.errmsg .btn-solid{margin-top:12px}
/* Concluir é irreversível: o botão fica discreto e pede confirmação. */
.endbtn{color:#d9c9ff;border-color:rgba(255,255,255,.22);font-weight:600}
.endbtn:hover{background:rgba(255,255,255,.06)}
.end-confirm-text{margin:4px 0 18px;font-size:14px;line-height:1.6;color:#c9d5ea}
.end-confirm-text strong{display:block;margin-bottom:4px;color:#fff}
#endConfirmModal .modal-actions{display:flex;flex-wrap:wrap;gap:10px}
#endConfirmModal .modal-actions button{flex:1 1 160px;min-height:48px}
.resulthero .btn-solid{margin-top:16px}
/* Acabamento: fontes com alternativa, rodapé do compositor e recibo centralizado */
.modal-title,.mic-test-title{font-family:"Manrope",system-ui,sans-serif}
.composer-foot .hint{flex:1;min-width:0}
.endbtn{padding:9px 12px;font-size:12px}
#endConfirmModal .modal-actions button{padding:12px 10px;font-size:13.5px}
#diagnosis.active{justify-content:center}
#diagContent{width:100%}
/* Telas de encerramento com um único cartão (recibo, envio não confirmado, sem respostas)
ficam centralizadas; o estilo inline define display:block, por isso o !important. */
#diagContent:has(>.resulthero:only-child){display:flex!important;flex:1;flex-direction:column;justify-content:center}
.resulthero{padding:28px 22px}
.resulthero p{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:#d5def0}
.resulthero.receipt::before{content:"✓";display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:rgba(62,213,152,.16);color:var(--ok);font-size:28px;font-weight:800}
/* ===== Centralização vertical e acabamento geral ===== */
/* Cadastro e login: passos curtos ficam no meio da tela; passos longos crescem e rolam normalmente. */
#setup.active:has(.mstep[data-step="register"]:not([hidden])) .menu2{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh}
/* Demais passos: centralizados quando cabem; se não couberem, começam do topo sem cortar. */
#setup.active .menu2{justify-content:safe center}
#setup.active .menu-stage{margin-block:auto}
.mstep{justify-content:center}
/* Botões com a mesma altura em todas as etapas */
.cta,.mback,.btn-ghost,.btn-solid{min-height:52px}
.mrow{align-items:stretch}
.mrow .mback{display:flex;align-items:center;justify-content:center}
.cta:disabled{opacity:.45}
/* Campos de texto: foco em violeta claro, menos agressivo que o contorno âmbar dos botões */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #B79CFF;outline-offset:1px}
#invitationCode{text-align:center;letter-spacing:.12em;font-weight:700}
#invitationCode::placeholder{letter-spacing:.12em;font-weight:500}
.title-sub{max-width:34ch;margin-inline:auto}
/* Teste de microfone */
.mic-test-card{gap:12px;padding:22px 18px}
.mic-test-btn{min-height:48px}
/* Entrevista: nome e situação na mesma linha, para sobrar espaço para a conversa */
.stage-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px}
.bubble{overflow-wrap:anywhere}
.composer{padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
.iconbtn{min-width:48px;min-height:48px}
@media(max-width:767px){
.liveavatar-stage{max-height:32dvh}
.who{font-size:17px}
.transcript{padding:14px}
.bubble{max-width:90%}
}
/* Busca de endereço pelo CEP */
.zip-status{font-size:12.5px;font-weight:400;line-height:1.4;color:#b4c4dc}
.zip-status.warn{color:#ffc98a}
/* Guia de senha no cadastro: cada regra fica marcada quando é cumprida */
.password-guide{list-style:none;display:grid;gap:6px;margin:-4px 0 0;padding:0;font-size:12.5px;line-height:1.4;color:#b4c4dc}
.password-guide li{display:flex;align-items:center;gap:8px}
.password-guide li::before{content:"";display:grid;place-items:center;width:15px;height:15px;flex:none;border:1.5px solid rgba(255,255,255,.35);border-radius:50%;font-size:10px;font-weight:800;line-height:1;color:#12091f}
.password-guide li.ok{color:#8ff0c2}
.password-guide li.ok::before{content:"\2713";border-color:var(--ok);background:var(--ok)}
#startConfirmModal .modal-actions{display:flex;flex-wrap:wrap;gap:10px}
#startConfirmModal .modal-actions button{flex:1 1 160px;min-height:48px;padding:12px 10px;font-size:13.5px}
/* Detalhe técnico de erro: só é preenchido no ambiente local de desenvolvimento */
.errdetail{display:block;margin-top:8px;font-size:12px;line-height:1.45;opacity:.75;overflow-wrap:anywhere}
.errdetail:empty{display:none}
.errmsg p{margin:0}
/* Aviso de convite recebido por link, na tela inicial */
.invite-note{max-width:34ch;margin:14px auto 0;padding:10px 14px;border:1px solid rgba(255,182,36,.4);border-radius:12px;background:rgba(255,182,36,.1);color:#ffe2a6;font-size:13.5px;line-height:1.45}
/* ===== Tela inicial ===== */
.welcome-actions[hidden],.invite-chooser[hidden],.invite-card[hidden]{display:none}
/* Brilho suave atrás do logo, para dar profundidade ao fundo */
/* Espaçamento definido aqui, sem o gap genérico das etapas: 16px dentro dos grupos, 32px entre eles */
.mstep.welcome{position:relative;isolation:isolate;gap:0}
.mstep.welcome::before{content:"";position:absolute;z-index:-1;left:50%;top:-40px;width:min(520px,130%);aspect-ratio:1.6;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(139,92,246,.18),rgba(139,92,246,.05) 60%,transparent);pointer-events:none}
.mstep.welcome .title-sub{font-family:"Manrope",sans-serif;font-weight:600;font-size:clamp(17px,4.6vw,19px);line-height:1.4;letter-spacing:-.01em;color:#e7defc;max-width:28ch;margin:16px auto 0;text-wrap:balance}
.mstep.welcome .title-sub em{font-style:normal;color:var(--lime)}
.mstep.welcome .welcome-actions{width:min(100%,360px);margin-top:32px}
.mstep.welcome>.invite-card{margin-top:32px}
.mstep.welcome>.invite-card:not([hidden])~.welcome-actions{margin-top:16px}
.mstep.welcome .welcome-actions .btn-ghost{border-color:rgba(183,156,255,.28);background:transparent}
.mstep.welcome .welcome-actions .btn-ghost:hover{background:rgba(139,92,246,.10);border-color:rgba(183,156,255,.5)}
.mstep.welcome .welcome-actions button:active{transform:scale(.98)}
/* Cartão do convite: notícia boa, com ícone, no lugar do aviso amarelo */
.invite-card{display:flex;align-items:flex-start;gap:12px;width:min(100%,360px);margin:0 auto;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(255,182,36,.14),rgba(255,182,36,.04));box-shadow:inset 0 0 0 1px rgba(255,182,36,.28);text-align:left;color:#f3e6c9;font-size:13.5px;line-height:1.45}
.invite-card p{margin:0}
.invite-card strong{display:block;color:#fff;font-family:"Manrope",sans-serif;font-weight:700;font-size:14.5px;margin-bottom:2px}
.invite-card-icon{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:rgba(255,182,36,.18);color:var(--lime)}
/* Escolha ao abrir o convite no Android: cartões com ícone, título e explicação */
.invite-chooser{display:flex;flex-direction:column;gap:10px;width:min(100%,360px);margin:32px auto 0}
.invite-chooser .invite-card{margin-bottom:6px}
.choice{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(183,156,255,.20);color:var(--ink);text-align:left;text-decoration:none;font:inherit;cursor:pointer;transition:background .2s,box-shadow .2s,transform .12s}
.choice:hover{background:rgba(139,92,246,.10);box-shadow:inset 0 0 0 1px rgba(183,156,255,.45)}
.choice:active{transform:scale(.98)}
.choice:focus-visible{outline:3px solid #B79CFF;outline-offset:3px}
.choice-icon{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(139,92,246,.16);color:#cdb5ff}
.choice-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.choice-text strong{font-family:"Manrope",sans-serif;font-weight:700;font-size:15px;color:#fff}
.choice-text small{font-size:12.5px;line-height:1.35;color:#b9b0d6}
.choice-arrow{flex:0 0 auto;color:#9d8fc9;transition:transform .2s}
.choice:hover .choice-arrow{transform:translateX(2px)}
.choice-primary{background:#7b4fe6;box-shadow:none}
.choice-primary:hover{background:#8459ee;box-shadow:none}
.choice-primary .choice-icon{background:rgba(255,255,255,.18);color:#fff}
.choice-primary .choice-text small{color:#ece3ff}
.choice-primary .choice-arrow{color:#fff}
/* Download: link pequeno, abaixo das opções */
.invite-download-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin:6px 0 0;font-size:13px;color:#b9b0d6}
.invite-download{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff;font-weight:700;text-decoration:none;transition:background .2s}
.invite-download:hover{background:rgba(255,255,255,.11)}
.invite-download:focus-visible{outline:3px solid #B79CFF;outline-offset:3px}
.invite-download .play-icon{flex:0 0 auto}
/* Exclusão da conta: discreta, abaixo da ação principal. */
.account-delete{width:min(100%,400px);align-self:center;margin-top:18px;text-align:left;font-size:12px;line-height:1.5;color:#a8b9d4}
.account-delete summary{cursor:pointer;text-align:center;color:#c7d3e8;text-decoration:underline}
.account-delete[open]{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid rgba(255,146,146,.35);border-radius:14px}
.account-delete label{font-weight:600;color:#dce7fa}
.account-delete input{box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid rgba(143,178,220,.3);border-radius:10px;background:rgba(30,17,48,.75);color:#fff;font-size:15px}
.account-delete .btn-ghost{color:#ffb5b5;border-color:rgba(255,146,146,.5)}
/* Entrevistas em andamento e oferta de biometria, acima do campo do código. */
.open-interviews,.biometric-offer{width:min(100%,400px);align-self:center;display:flex;flex-direction:column;gap:10px;box-sizing:border-box}
#openInterviews .open-interview{width:100%;margin:0;flex-direction:column;align-items:center;gap:2px;padding:12px 16px;white-space:normal;line-height:1.35;animation:none}
.open-interview strong{font-size:16px}
.open-interview span{font-size:13px;font-weight:500;opacity:.9}
.biometric-offer{padding:14px;border:1px solid rgba(139,92,246,.4);border-radius:14px;background:rgba(139,92,246,.08);color:#e0d2ff;font-size:14px;line-height:1.45;text-align:center}
.biometric-offer p{margin:0}
.open-interviews[hidden],.biometric-offer[hidden]{display:none}
.biometric-offer-actions{display:flex;gap:10px}
#biometricOffer .biometric-offer-actions button{flex:1 1 0;width:auto;padding:0 14px;margin:0;min-height:48px;border-radius:12px;font-size:14px;animation:none}
.candidate-account .biometric-retry{width:100%;min-height:44px;margin:0;padding:8px;border:0;background:none;color:#cdb5ff;font-size:14px;font-weight:600;text-decoration:underline;cursor:pointer}
#biometricDisable{width:min(100%,400px);align-self:center;margin-top:14px;padding:6px;border:0;background:none;color:#c7d3e8;font-size:12px;text-decoration:underline;cursor:pointer}
#deleteStatus{margin:0}
#deleteStatus:empty{display:none}
/* ===== Computador: tela dividida (marca à esquerda, etapa atual à direita) ===== */
.setup-brand,.desktop-heading{display:none}
@media (min-width:1024px){
/* #setup#setup vence as regras do cadastro longo, que trocam o layout para rolagem da página */
#setup#setup.active{display:grid;grid-template-columns:minmax(400px,40%) minmax(0,1fr);align-items:start;min-height:100dvh}
.setup-brand{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:36px;padding:clamp(40px,5vw,72px);box-sizing:border-box;background:linear-gradient(160deg,rgba(18,10,33,.55),rgba(18,10,33,.25));border-right:1px solid rgba(183,156,255,.12);overflow:hidden;isolation:isolate}
.setup-brand::before{content:"";position:absolute;z-index:-1;inset:auto -20% -30% -20%;height:70%;background:radial-gradient(closest-side,rgba(139,92,246,.22),transparent);pointer-events:none}
.setup-brand-logo{width:150px;height:auto}
.setup-brand-title{margin:auto 0 0;font-family:"Manrope",sans-serif;font-weight:800;font-size:clamp(30px,2.8vw,42px);line-height:1.12;letter-spacing:-.025em;color:#fff;max-width:14ch;text-wrap:balance}
.setup-brand-title em{font-style:normal;color:var(--lime)}
.setup-steps{list-style:none;margin:0 0 auto;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:none}
.setup-steps li{position:relative;display:flex;align-items:flex-start;gap:16px;padding:12px 0;color:#b9b0d6}
.setup-steps li:not(:last-child)::after{content:"";position:absolute;left:17px;top:50px;bottom:-14px;width:2px;border-radius:2px;background:rgba(183,156,255,.16)}
.setup-step-num{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(183,156,255,.35);font-family:"Manrope",sans-serif;font-weight:700;font-size:14px;color:#cdb5ff;transition:background .25s,color .25s,box-shadow .25s}
.setup-steps strong{display:block;font-family:"Manrope",sans-serif;font-weight:700;font-size:15px;color:#e7defc;margin:7px 0 3px}
.setup-steps small{display:block;font-size:13px;line-height:1.45;color:#a59bc7}
/* Passo atual em destaque; os anteriores aparecem como concluídos */
#setup[data-phase="1"] .setup-steps li[data-phase="1"] .setup-step-num,
#setup[data-phase="2"] .setup-steps li[data-phase="2"] .setup-step-num,
#setup[data-phase="3"] .setup-steps li[data-phase="3"] .setup-step-num{background:var(--cyan);box-shadow:0 0 0 5px rgba(139,92,246,.22);color:#fff}
#setup[data-phase="1"] .setup-steps li[data-phase="1"] strong,
#setup[data-phase="2"] .setup-steps li[data-phase="2"] strong,
#setup[data-phase="3"] .setup-steps li[data-phase="3"] strong{color:#fff}
#setup[data-phase="2"] .setup-steps li[data-phase="1"] .setup-step-num,
#setup[data-phase="3"] .setup-steps li[data-phase="1"] .setup-step-num,
#setup[data-phase="3"] .setup-steps li[data-phase="2"] .setup-step-num{background:rgba(62,213,152,.16);box-shadow:inset 0 0 0 1.5px rgba(62,213,152,.55);color:transparent;background-image:url("data:image/svg+xml;utf8,");background-size:18px;background-position:center;background-repeat:no-repeat}
.setup-brand-foot{margin:0;font-size:12.5px;line-height:1.5;color:#8f86b3;max-width:36ch}
/* Coluna da direita: a etapa atual, centralizada na altura e alinhada à esquerda */
#setup#setup.active .menu2{display:flex;flex-direction:column;justify-content:safe center;align-items:center;min-height:100dvh;height:auto;padding:56px clamp(32px,5vw,80px);box-sizing:border-box;text-align:left}
#setup#setup.active .menu-stage{width:100%;max-width:440px;margin:0}
#setup#setup.active:has(.mstep[data-step="vaga"]:not([hidden])) .menu-stage,
#setup#setup.active:has(.mstep[data-step="microfone"]:not([hidden])) .menu-stage{max-width:760px}
#setup .mstep{max-width:none;margin:0;text-align:left}
#setup .vaga-layout.enterprise-confirmation{width:100%;max-width:none;margin:0}
/* O logo e a frase já estão no painel da esquerda */
#setup .mstep.welcome .app-brand,#setup .mstep.welcome>.title-sub,#setup .mstep[data-step="title"] .app-brand{display:none}
#setup .mstep.welcome::before{display:none}
.desktop-heading{display:block}
.desktop-heading h2{margin:0;font-family:"Manrope",sans-serif;font-weight:800;font-size:30px;line-height:1.2;letter-spacing:-.02em;color:#fff}
.desktop-heading p{margin:8px 0 0;font-size:15px;line-height:1.55;color:#b9b0d6}
#setup .mstep[data-step="title"] .title-sub{margin:-8px 0 4px;font-size:15px;line-height:1.55;color:#b9b0d6;max-width:none;align-self:stretch;text-align:left}
#setup .mstep.welcome .welcome-actions,#setup .invite-card,#setup .invite-chooser,#setup .invitation-field,
#setup .mstep[data-step="title"] .cta.play{width:100%;margin-left:0;margin-right:0;align-self:stretch}
#setup .mstep.welcome>.invite-card{margin-top:28px}
#setup .mstep.welcome .welcome-actions{margin-top:28px}
#setup .mstep.welcome>.invite-card:not([hidden])~.welcome-actions{margin-top:16px}
#setup .account-delete,#setup #biometricDisable{align-self:flex-start}
/* Formulários sem cartão: a coluna já é a superfície */
#setup .candidate-account{width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;gap:18px}
#setup .candidate-account h1{font-size:30px;line-height:1.2;letter-spacing:-.02em}
#setup .candidate-account p{font-size:14.5px;line-height:1.6}
/* Ações secundárias como links, para o botão principal ficar evidente */
#setup .candidate-account .account-switch,#setup .candidate-account #accountBack,#setup .candidate-account #resetBack{width:auto;min-height:40px;align-self:center;padding:6px 10px;border:0;border-radius:8px;background:none;color:#cdb5ff;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;box-shadow:none}
#setup .candidate-account #accountBack,#setup .candidate-account #resetBack{color:#a59bc7;font-weight:500}
/* Links juntos, logo abaixo do botão principal */
#setup .candidate-account .cta~.account-switch,#setup .candidate-account .cta~.biometric-retry,#setup .candidate-account .cta~#accountBack,#setup .candidate-account .cta~#resetBack{margin-top:-12px}
#setup .candidate-account .biometric-retry{width:auto;align-self:center;min-height:40px;padding:6px 10px}
#setup .candidate-account .account-switch:hover,#setup .candidate-account #accountBack:hover,#setup .candidate-account #resetBack:hover{background:rgba(139,92,246,.10);color:#fff}
}
/* ===== Computador: mesmo visual do portal da empresa (compartilhado/portal.css) =====
Fonte Manrope, painel com a foto à esquerda e coluna clara à direita, com as cores do portal. */
@media (min-width:1024px){
#setup{--p-brand:#7439D8;--p-brand-hover:#6027BE;--p-soft:#F1EAFC;--p-text:#1A1326;--p-muted:#665F75;--p-line:#E8E3EF;--p-line-strong:#D3CBDF;--p-surface-2:#FAF8FC;
--p-wait-bg:#FBF1DC;--p-wait-fg:#76500E;--p-done-fg:#1A6545;--p-stop-fg:#9C2F27;--p-live-fg:#5523B3;
--p-shadow:0 1px 2px rgba(42,20,74,.04),0 4px 14px -6px rgba(42,20,74,.08)}
#setup,#setup button,#setup input,#setup select,#setup textarea{font-family:"Manrope",system-ui,sans-serif}
/* Mesma proporção da entrada do portal: a foto ocupa a maior parte e a coluna clara tem até 520px */
#setup#setup.active{grid-template-columns:minmax(0,1fr) clamp(420px,34vw,520px)}
#setup#setup.active:has(.mstep[data-step="vaga"]:not([hidden])),
#setup#setup.active:has(.mstep[data-step="microfone"]:not([hidden])){grid-template-columns:minmax(0,1fr) clamp(520px,44vw,700px)}
#setup#setup.active .menu2{padding:48px 44px}
#setup#setup.active .menu-stage{max-width:400px}
#setup#setup.active:has(.mstep[data-step="vaga"]:not([hidden])) .menu-stage,
#setup#setup.active:has(.mstep[data-step="microfone"]:not([hidden])) .menu-stage{max-width:600px}
/* A foto fica à esquerda: o painel ganha a largura maior e o texto não estica */
.setup-brand{padding:48px clamp(32px,4.5vw,80px)}
.setup-brand-title{max-width:16ch;font-size:clamp(32px,3.2vw,46px)}
.setup-steps{max-width:440px}
/* Painel da esquerda: a foto do portal, escurecida no roxo da marca */
.setup-brand{background:linear-gradient(180deg,rgba(32,17,50,.50) 0%,rgba(32,17,50,.72) 45%,rgba(24,12,38,.94) 100%),url(/midia/login-foto.jpg) 62% 30%/cover no-repeat,#201132;border-right:0}
.setup-brand::before{display:none}
.setup-brand-title,.setup-steps{text-shadow:0 2px 18px rgba(16,8,28,.45)}
.setup-brand-title{font-family:"Manrope",sans-serif;font-weight:700;letter-spacing:-.025em}
.setup-steps strong{font-family:"Manrope",sans-serif}
.setup-step-num{font-family:"Manrope",sans-serif;background:rgba(32,17,50,.55)}
.setup-brand-foot{color:#C5B8DC}
/* Vídeo de fundo, como na entrada do portal: entre a foto (fundo) e o véu (::after); aparece quando já está tocando */
.setup-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:32% 28%;opacity:0;filter:blur(1.3px) saturate(1.06);transform:scale(1.03);transition:opacity .8s ease;pointer-events:none}
.setup-brand.has-video .setup-video{opacity:1}
.setup-brand.has-video::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/midia/login-grao.png) repeat,linear-gradient(180deg,rgba(32,17,50,.62) 0%,rgba(32,17,50,.2) 22%,rgba(32,17,50,.25) 45%,rgba(26,13,42,.82) 66%,rgba(22,11,36,.96) 100%),linear-gradient(90deg,rgba(116,57,216,.34),rgba(116,57,216,.14) 60%)}
/* Coluna da direita clara, com o leve tom da marca no topo, como no portal */
#setup#setup.active .menu2{background:radial-gradient(500px 300px at 50% 0%,var(--p-soft),transparent 70%),#fff;color:var(--p-text)}
#setup .menu2 :is(h1,h2,h3,.candidate-account h1,.enterprise-summary h2,.expect-card h2,.mic-test-title){font-family:"Manrope",sans-serif;font-weight:800;letter-spacing:-.03em;color:var(--p-text)}
#setup .menu2 :is(.desktop-heading p,.candidate-account p,.candidate-account details p,.mstep[data-step="title"] .title-sub,#invitationHelp,.zip-status,.mic-test-copy,.mic-test-note,.enterprise-summary p){color:var(--p-muted)}
#setup .menu2 .seg-label{color:var(--p-muted)}
#setup .menu2 .reg-progress i{background:var(--p-line)}
#setup .menu2 .reg-progress i.on{background:var(--p-brand)}
/* Campos */
#setup .menu2 .account-grid label,#setup .menu2 .invitation-field label,#setup .menu2 .account-delete label{color:var(--p-text);font-size:13px;font-weight:600}
#setup .menu2 :is(.account-grid input,.account-grid select,#invitationCode,.account-delete input){min-height:46px;padding:11px 13px;border:1px solid var(--p-line-strong);border-radius:10px;background:#fff;color:var(--p-text);font-size:15px;box-shadow:none;color-scheme:light;transition:border-color .15s,box-shadow .15s}
#setup .menu2 #invitationCode{min-height:54px;font-size:18px;font-weight:700;letter-spacing:.14em}
#setup .menu2 :is(.account-grid input,#invitationCode,.account-delete input)::placeholder{color:#9A93A8}
#setup .menu2 :is(.account-grid input,.account-grid select,#invitationCode,.account-delete input):hover{border-color:#B9AECB}
#setup .menu2 :is(.account-grid input,.account-grid select,#invitationCode,.account-delete input):focus{outline:none;border-color:var(--p-brand);box-shadow:0 0 0 3px rgba(116,57,216,.16)}
#setup .menu2 #invitationCode[aria-invalid=true]{border-color:var(--p-stop-fg);box-shadow:0 0 0 3px rgba(156,47,39,.1)}
#setup .menu2 .password-toggle{background:transparent;color:var(--p-muted);font-weight:700}
#setup .menu2 .password-toggle:hover{background:var(--p-soft);color:var(--p-brand)}
#setup .menu2 .password-guide li{color:var(--p-muted)}
#setup .menu2 .password-guide li::before{border-color:var(--p-line-strong);color:#fff}
#setup .menu2 .password-guide li.ok{color:var(--p-done-fg)}
#setup .menu2 .password-guide li.ok::before{background:#2E9E6B;border-color:#2E9E6B}
#setup .menu2 .account-check{color:var(--p-muted)}
#setup .menu2 :is(.account-check input,.privacy-box input){accent-color:var(--p-brand)}
#setup .menu2 .candidate-account summary,#setup .menu2 .account-delete summary{color:var(--p-brand)}
#setup .menu2 :is(#accountStatus,#resetStatus,#deleteStatus){color:var(--p-stop-fg)}
#setup .menu2 #invitationStatus{color:var(--p-live-fg)}
#setup .menu2 .invitation-field:has([aria-invalid=true]) #invitationStatus{color:var(--p-stop-fg)}
#setup .menu2 .zip-status.warn{color:var(--p-wait-fg)}
/* Botões: roxo sólido do portal, sem brilho; secundários brancos com borda */
#setup .menu2 .cta{min-height:46px;padding:12px 20px;border-radius:10px;background:var(--p-brand);color:#fff;font-size:15px;font-weight:700;letter-spacing:0;box-shadow:0 1px 2px rgba(42,20,74,.12);transform:none}
#setup .menu2 .cta::after{display:none}
#setup .menu2 .cta:hover{background:var(--p-brand-hover);box-shadow:0 1px 2px rgba(42,20,74,.12);transform:none}
#setup .menu2 .cta:active{transform:translateY(1px)}
#setup .menu2 :is(.btn-ghost,.mback){min-height:46px;border:1px solid var(--p-line-strong);border-radius:10px;background:#fff;color:var(--p-text);font-weight:700}
#setup .menu2 :is(.btn-ghost,.mback):hover{background:var(--p-surface-2);border-color:#B9AECB;color:var(--p-text)}
#setup .menu2 .mstep.welcome .welcome-actions .btn-ghost{border-color:var(--p-line-strong);background:#fff}
#setup .menu2 .candidate-account :is(.account-switch,.biometric-retry){color:var(--p-brand);background:none}
#setup .menu2 .candidate-account :is(#accountBack,#resetBack){border:0;background:none;color:var(--p-muted)}
#setup .menu2 .candidate-account :is(.account-switch,.biometric-retry,#accountBack,#resetBack):hover{background:var(--p-soft);color:var(--p-brand-hover)}
#setup .menu2 #biometricDisable{color:var(--p-muted)}
/* Cartão do convite no tom âmbar de "aguardando" do portal */
#setup .menu2 .invite-card{background:var(--p-wait-bg);box-shadow:inset 0 0 0 1px #F0DDAE;color:var(--p-wait-fg)}
#setup .menu2 .invite-card strong{color:var(--p-text)}
#setup .menu2 .invite-card-icon{background:#F6E3B6;color:#B57A12}
/* Vaga e microfone: cartões brancos como os do portal */
#setup .menu2 :is(.enterprise-summary,.expect-card,.mic-test-card,.privacy-box){border:1px solid var(--p-line);border-radius:16px;background:#fff;box-shadow:var(--p-shadow);color:var(--p-text)}
#setup .menu2 .vaga-column{padding:0;border:0;background:none;box-shadow:none}
#setup .menu2 .enterprise-summary dt{color:var(--p-muted)}
#setup .menu2 :is(.enterprise-summary dd,.expect-card strong,.consent-label){color:var(--p-text)}
#setup .menu2 .expect-card li{color:var(--p-muted)}
#setup .menu2 .expect-card li::before{background:var(--p-brand)}
#setup .menu2 .privacy-link{color:var(--p-brand);text-decoration-color:rgba(116,57,216,.4)}
#setup .menu2 .privacy-box.invalid{border-color:var(--p-stop-fg)}
#setup .menu2 .privacy-error{color:var(--p-stop-fg)}
#setup .menu2 .guide-bubble{border:0;background:var(--p-soft);color:var(--p-text)}
#setup .menu2 .mic-test-icon{border:0;background:var(--p-soft);color:var(--p-brand)}
#setup .menu2 .mic-test-card.active .mic-test-icon{background:var(--p-brand);color:#fff}
#setup .menu2 .mic-test-btn{border:1px solid transparent;background:var(--p-soft);color:var(--p-brand)}
#setup .menu2 .mic-test-btn:hover{border-color:rgba(116,57,216,.3);background:#E8DCFA}
#setup .menu2 .mic-meter{background:#EEE9F4;box-shadow:none}
#setup .menu2 .mic-meter-fill{background:var(--p-brand)}
#setup .menu2 .mic-test-status{color:var(--p-muted)}
#setup .menu2 .mic-test-status.ok{color:var(--p-done-fg)}
#setup .menu2 .mic-test-status.error{color:var(--p-stop-fg)}
#setup .menu2 .account-delete{color:var(--p-muted)}
#setup .menu2 .account-delete[open]{border-color:#F1C9C5}
#setup .menu2 .account-delete .btn-ghost{color:var(--p-stop-fg);border-color:#F1C9C5}
/* Caixa do consentimento clara; marcada, fica no roxo da marca */
#setup .menu2 .privacy-box input{border:1.5px solid var(--p-line-strong);background:#fff}
#setup .menu2 .privacy-box input::after{color:#fff}
#setup .menu2 .privacy-box input:checked{background:var(--p-brand);border-color:var(--p-brand)}
/* Links como no portal: roxos, sem sublinhado; o sublinhado aparece ao passar o mouse */
#setup .menu2 .candidate-account :is(.account-switch,.biometric-retry,#accountBack,#resetBack),#setup .menu2 .privacy-link{text-decoration:none;font-size:14px}
#setup .menu2 .candidate-account :is(.account-switch,.biometric-retry,#accountBack,#resetBack):hover,#setup .menu2 .privacy-link:hover{background:none;text-decoration:underline}
#setup .menu2 :focus-visible{outline-color:var(--p-brand)}
}
/* ===== Área do candidato (celular: tema escuro do app; computador: claro, como o portal) ===== */
.mstep.home{gap:0;text-align:left}
.home-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.home-kicker{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.home-head h1{margin:0;font-family:"Manrope",sans-serif;font-size:28px;line-height:1.2;color:#fff}
.home-link{flex:none;min-height:40px;padding:8px 12px;border-radius:10px;background:none;color:#cdb5ff;font-size:14px;font-weight:700}
.home-link:hover{background:rgba(139,92,246,.12)}
.mstep.home>.biometric-offer{width:100%;margin-top:20px}
.mstep.home>#homeNewCode{margin-top:24px}
.home-section{margin-top:32px}
.home-section h2{margin:0 0 12px;font-family:"Manrope",sans-serif;font-size:17px;color:#fff}
.home-list{display:flex;flex-direction:column;gap:10px}
.home-card{display:grid;gap:4px;padding:16px;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(183,156,255,.18)}
.home-card h3{margin:6px 0 0;font-family:"Manrope",sans-serif;font-size:16px;line-height:1.3;color:#fff}
.home-meta,.home-when{margin:0;font-size:13px;line-height:1.45;color:#b9b0d6}
.home-when{font-size:12.5px}
.home-badge{justify-self:start;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(255,255,255,.08);color:#d9d2ee}
.home-card[data-status="novo"] .home-badge{background:rgba(255,182,36,.16);color:#ffd27a}
.home-card[data-status="andamento"] .home-badge{background:rgba(139,92,246,.22);color:#d9c6ff}
.home-card[data-status="concluida"] .home-badge{background:rgba(62,213,152,.16);color:#8ff0c2}
.home-card[data-status="expirada"],.home-card[data-status="cancelada"]{opacity:.75}
.home-card .home-card-action{margin-top:10px;min-height:44px;font-size:14px;font-weight:700;border:1px solid rgba(183,156,255,.5);border-radius:12px;background:transparent;color:#e0d2ff}
.home-card .home-card-action:hover{background:rgba(139,92,246,.14)}
.home-empty{margin:0;padding:16px;border-radius:14px;background:rgba(255,255,255,.03);font-size:13.5px;line-height:1.5;color:#b9b0d6}
.home-empty[hidden],.home-empty:empty{display:none}
.home-menu{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(183,156,255,.18)}
.home-menu-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:14px 44px 14px 16px;background:rgba(255,255,255,.03);color:#fff;text-align:left;position:relative;transition:background .15s}
.home-menu-item+.home-menu-item{border-top:1px solid rgba(183,156,255,.14)}
.home-menu-item::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg);opacity:.5}
.home-menu-item:hover{background:rgba(139,92,246,.10)}
.home-menu-item strong{font-size:15px}
.home-menu-item small{font-size:12.5px;color:#b9b0d6}
.home-back{align-self:center;min-height:40px;margin-top:16px;padding:6px 12px;border-radius:8px;background:none;color:#cdb5ff;font-size:14px;font-weight:600}
.home-back:hover{text-decoration:underline}
.home-back[hidden]{display:none}
.profile-locked{font-size:12.5px;color:#b4c4dc;margin-top:-8px}
#profileForm input[readonly]{opacity:.7;cursor:not-allowed}
#profileStatus,#passwordStatus{margin:0;font-size:13.5px;color:#d9c6ff}
#profileStatus:empty,#passwordStatus:empty{display:none}
[data-step="profile"] .account-delete{margin-top:24px}
@media (min-width:1024px){
#setup .menu2 :is(.home-head h1,.home-section h2,.home-card h3){font-family:"Manrope",sans-serif;font-weight:800;letter-spacing:-.02em;color:var(--p-text)}
#setup .menu2 .home-head h1{font-size:30px}
#setup .menu2 .home-kicker{color:var(--p-muted)}
#setup .menu2 :is(.home-link,.home-back){color:var(--p-brand)}
#setup .menu2 .home-link:hover{background:var(--p-soft)}
#setup .menu2 .home-card{background:#fff;box-shadow:none;border:1px solid var(--p-line);box-shadow:var(--p-shadow)}
#setup .menu2 :is(.home-meta,.home-when,.home-empty,.home-menu-item small,.profile-locked){color:var(--p-muted)}
#setup .menu2 .home-badge{background:#F0EDF4;color:#5D566B}
#setup .menu2 .home-card[data-status="novo"] .home-badge{background:var(--p-wait-bg);color:var(--p-wait-fg)}
#setup .menu2 .home-card[data-status="andamento"] .home-badge{background:#EFE8FD;color:var(--p-live-fg)}
#setup .menu2 .home-card[data-status="concluida"] .home-badge{background:#E1F3E9;color:var(--p-done-fg)}
#setup .menu2 .home-empty{background:var(--p-surface-2);border:1px dashed var(--p-line-strong)}
#setup .menu2 .home-menu{box-shadow:var(--p-shadow);border:1px solid var(--p-line)}
#setup .menu2 .home-menu-item{background:#fff;color:var(--p-text)}
#setup .menu2 .home-menu-item+.home-menu-item{border-top-color:var(--p-line)}
#setup .menu2 .home-menu-item:hover{background:var(--p-surface-2)}
#setup .menu2 :is(#profileStatus,#passwordStatus){color:var(--p-live-fg)}
#setup .menu2 .home-card .home-card-action{border-color:var(--p-brand);background:#fff;color:var(--p-brand)}
#setup .menu2 .home-card .home-card-action:hover{background:var(--p-soft);border-color:var(--p-brand);color:var(--p-brand-hover)}
#setup .menu2 #profileForm input[readonly]{background:var(--p-surface-2);opacity:1;color:var(--p-muted)}
}
/* ===== Computador, depois do login: estrutura de plataforma igual à do portal da empresa =====
Menu lateral escuro, cabeçalho branco e conteúdo em cartões sobre fundo claro. Só com data-area="1". */
.cand-rail,.cand-top,.home-stats{display:none}
@media (min-width:1024px){
/* Três ids para vencer as regras da tela de entrada (foto à esquerda, coluna clara à direita) */
#setup#setup#setup.active[data-area="1"]{grid-template-columns:248px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch;background:#F7F5FA}
#setup[data-area="1"] .setup-brand{display:none}
#setup[data-area="1"] .cand-rail{grid-column:1;grid-row:1/3;position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:22px;padding:18px 14px;box-sizing:border-box;background:#201132;color:#C8B6DF;overflow-y:auto}
.cand-rail-logo{width:130px;height:auto;margin:8px 0 0 10px}
.cand-nav{display:flex;flex-direction:column;gap:2px}
.cand-nav :is(button,a){position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:#C8B6DF;font:inherit;font-size:15px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer}
.cand-nav svg{width:20px;height:20px;flex:none}
.cand-nav :is(button,a):hover{background:rgba(255,255,255,.06);color:#fff}
.cand-nav button[aria-current=page]{background:rgba(255,255,255,.1);color:#fff}
.cand-nav button[aria-current=page]::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#FFB624}
.cand-nav button[aria-current=page] svg{color:#FFB624}
.cand-nav hr{width:100%;margin:10px 0;border:0;border-top:1px solid #49325E}
.cand-nav :focus-visible{outline:2px solid #FFB624;outline-offset:2px}
.cand-rail-card{margin-top:auto;display:grid;gap:4px;padding:14px;border:1px solid #49325E;border-radius:12px;background:#301C48;font-size:12px;font-weight:600}
.cand-rail-card strong{font-size:26px;line-height:1.1;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
#setup[data-area="1"] .cand-top{grid-column:2;grid-row:1;position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:12px 32px;box-sizing:border-box;background:#fff;border-bottom:1px solid #E8E3EF}
.cand-top-title{min-width:0}
.cand-top h1{margin:0;font-family:"Manrope",sans-serif;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:#1A1326}
.cand-top-title p{margin:2px 0 0;font-size:13px;color:#665F75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cand-top-actions{display:flex;align-items:center;gap:12px;flex:none}
.cand-top-cta{min-height:40px;padding:9px 16px;border-radius:10px;background:#7439D8;color:#fff;font-size:14px;font-weight:700}
.cand-top-cta:hover{background:#6027BE}
.cand-avatar{display:grid;place-items:center;width:34px;height:34px;margin-left:8px;border-radius:50%;background:#F1EAFC;color:#7439D8;font-size:12px;font-weight:800}
.cand-avatar:empty{display:none}
.cand-name{font-size:14px;font-weight:600;color:#1A1326;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cand-top-link{min-height:36px;padding:6px 10px;border-radius:8px;background:none;color:#665F75;font-size:14px;font-weight:600}
.cand-top-link:hover{background:#F7F5FA;color:#1A1326}
/* Conteúdo: fundo claro do portal, alinhado ao topo */
#setup#setup#setup.active[data-area="1"] .menu2{grid-column:2;grid-row:2;display:block;min-height:0;height:auto;padding:28px 32px 48px;background:#F7F5FA}
#setup#setup#setup.active[data-area="1"] .menu-stage{max-width:1100px;margin:0 auto}
#setup[data-area="1"] .mstep{animation:none}
/* Início */
#setup[data-area="1"] .mstep.home{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#setup[data-area="1"] .mstep.home[hidden]{display:none}
#setup[data-area="1"] .mstep.home>*{grid-column:1/-1}
#setup[data-area="1"] .home-head,#setup[data-area="1"] #homeNewCode,#setup[data-area="1"] .home-section[aria-labelledby="homeAccountTitle"]{display:none}
#setup[data-area="1"] .home-stats{display:contents}
#setup[data-area="1"] .home-stat{grid-column:auto;display:grid;gap:4px;padding:20px 22px;border:1px solid #E8E3EF;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(42,20,74,.04),0 4px 14px -6px rgba(42,20,74,.08)}
.home-stat span{font-size:13px;font-weight:600;color:#665F75}
.home-stat strong{font-size:32px;line-height:1.1;font-weight:700;color:#1A1326;font-variant-numeric:tabular-nums}
.home-stat small{font-size:13px;color:#665F75}
#setup[data-area="1"] .home-section{margin:0;padding:22px 24px;border:1px solid #E8E3EF;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(42,20,74,.04),0 4px 14px -6px rgba(42,20,74,.08)}
#setup[data-area="1"] .home-section h2{font-size:17px;margin-bottom:16px}
#setup[data-area="1"] .home-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
#setup[data-area="1"] .home-card{box-shadow:none;border:1px solid #E8E3EF;background:#FAF8FC;align-content:start}
#setup[data-area="1"] .home-card .home-card-action{align-self:end}
#setup[data-area="1"] .mstep.home>.biometric-offer{margin:0}
/* Meus dados, trocar senha e código: cartões brancos centralizados, como "Minha conta" no portal */
#setup[data-area="1"] :is([data-step="profile"],[data-step="password"],[data-step="title"]){max-width:880px;margin:0 auto}
#setup[data-area="1"] [data-step="password"],#setup[data-area="1"] [data-step="title"]{max-width:560px}
#setup[data-area="1"] :is(#profileForm,#passwordForm),#setup[data-area="1"] .mstep[data-step="title"]{padding:28px;border:1px solid #E8E3EF;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(42,20,74,.04),0 4px 14px -6px rgba(42,20,74,.08)}
#setup[data-area="1"] :is(#profileForm,#passwordForm) h1{font-size:18px}
#setup[data-area="1"] #profileForm .account-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
#setup[data-area="1"] #profileForm .account-grid .full{grid-column:1/-1}
/* Pares lado a lado, como em "Minha conta" no portal */
#setup[data-area="1"] #profileForm .account-grid label.full:is(:has(input[name=email]),:has(input[name=cpf]),:has(input[name=city]),:has(input[name=street])){grid-column:auto}
#setup[data-area="1"] .mstep[data-step="title"] #openInterviews{display:none}
#setup[data-area="1"] :is(#profileForm,#passwordForm) :is(.cta,#profileBack,#passwordBack){width:auto;align-self:flex-start}
#setup[data-area="1"] :is(#profileBack,#passwordBack,#titleHome){display:none}
#setup[data-area="1"] [data-step="profile"] .account-delete{max-width:none;padding:0 4px}
#setup[data-area="1"] .mstep[data-step="title"] .desktop-heading{display:none}
#setup[data-area="1"] .mstep[data-step="title"] .title-sub{margin:0}
#setup[data-area="1"] :is([data-step="vaga"],[data-step="microfone"]){max-width:760px;margin:0 auto}
}
@media (min-width:1024px){#setup[data-area="1"] :is(.enterprise-summary,.expect-card){max-width:none}}
/* Meus dados: dados pessoais, senha e exclusão da conta na mesma página */
#passwordForm h2{margin:0;font-family:"Manrope",sans-serif;font-size:20px;color:#fff}
@media (max-width:1023px){#passwordForm{margin-top:12px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}}
@media (min-width:1024px){
#setup[data-area="1"] [data-step="profile"]{gap:18px}
#setup .menu2 #passwordForm h2{font-family:"Manrope",sans-serif;font-size:18px;font-weight:800;color:var(--p-text)}
#setup[data-area="1"] #passwordForm .account-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
#setup[data-area="1"] #passwordForm .password-guide{grid-column:2}
}
@media (min-width:1024px){#setup[data-area="1"] #passwordForm .account-grid label.full{grid-column:auto}}
/* ===== Melhorias de UX (celular e computador) ===== */
/* Botão principal no roxo do portal, sem brilho, nos dois tamanhos de tela */
.cta{background:#7439D8;box-shadow:none}
.cta::after{display:none}
.cta:hover{background:#6027BE;box-shadow:none;transform:none}
.cta:active{transform:translateY(1px)}
.choice-primary,.choice-primary:hover{background:#7439D8}
.choice-primary:hover{background:#6027BE}
/* Um botão principal por tela: as outras ações do login, cadastro e nova senha viram links */
#setup .candidate-account :is(.account-switch,#accountBack,#resetBack,.biometric-retry,#resetResend){width:auto;min-height:40px;align-self:center;margin:-8px 0 0;padding:6px 10px;border:0;border-radius:8px;background:none;box-shadow:none;color:#cdb5ff;font-size:14px;font-weight:600;text-decoration:none}
#setup .candidate-account :is(#accountBack,#resetBack){color:#a59bc7;font-weight:500}
#setup .candidate-account :is(.account-switch,#accountBack,#resetBack,.biometric-retry,#resetResend):hover{background:none;text-decoration:underline}
#setup .candidate-account [hidden]{display:none}
/* "Esqueci minha senha" logo abaixo do campo, alinhado à direita */
.forgot-link{align-self:flex-end;min-height:36px;margin:-12px 0 -4px;padding:4px 2px;background:none;color:#cdb5ff;font-size:13.5px;font-weight:600}
.forgot-link:hover{text-decoration:underline}
.forgot-link[hidden]{display:none}
/* Ajuda abaixo de um campo (ex.: por que pedimos o CPF) */
.field-help{font-size:12.5px;font-weight:400;line-height:1.45;color:#b4c4dc}
/* Tela do código: título curto no lugar do logo; as entrevistas em andamento ficam no Início */
.mstep[data-step="title"] .app-brand,#openInterviews{display:none}
.mstep[data-step="title"] .desktop-heading{display:block;text-align:left}
.mstep[data-step="title"] .desktop-heading h2{margin:0;font-size:26px;line-height:1.2;color:#fff}
.mstep[data-step="title"] .title-sub{max-width:none;margin:0;text-align:left;font-size:14.5px;line-height:1.55}
/* Como funciona (só no celular; no computador o painel da esquerda já mostra os passos) */
.welcome-how{list-style:none;display:grid;gap:10px;width:min(100%,360px);margin:28px auto 0;padding:0;text-align:left}
.welcome-how li{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:#e7defc}
.welcome-how span{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(183,156,255,.45);font-size:13px;font-weight:700;color:#FFB624}
.welcome-how[hidden]{display:none}
/* Etapas da preparação: vaga → microfone → entrevista */
.prep-steps{list-style:none;display:flex;align-items:center;gap:8px;margin:0 0 4px;padding:0;font-size:13px;font-weight:600;color:#a59bc7}
.prep-steps li{display:flex;align-items:center;gap:8px}
.prep-steps li+li::before{content:"";width:18px;height:2px;border-radius:2px;background:rgba(183,156,255,.25)}
.prep-steps span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(183,156,255,.4);font-size:12px;font-weight:700}
.prep-steps li[aria-current=step]{color:#fff}
.prep-steps li[aria-current=step] span{background:#7439D8;box-shadow:none;color:#fff}
.prep-steps li.done span{background:rgba(62,213,152,.18);box-shadow:inset 0 0 0 1.5px rgba(62,213,152,.6);color:#8ff0c2}
/* Menu fixo embaixo, na área do candidato no celular */
.cand-tabbar{display:none}
@media (max-width:1023px){
#setup[data-area="1"]:has(:is(.mstep[data-step="home"],.mstep[data-step="title"],.mstep[data-step="profile"]):not([hidden])) .cand-tabbar{position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);flex:none;padding:6px 8px max(8px,env(safe-area-inset-bottom));background:rgba(22,11,36,.94);backdrop-filter:blur(12px);border-top:1px solid rgba(183,156,255,.16)}
.cand-tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;padding:6px 4px;border-radius:12px;background:none;color:#a59bc7;font-size:12px;font-weight:600}
.cand-tabbar svg{width:22px;height:22px}
.cand-tabbar button[aria-current=page]{color:#fff}
.cand-tabbar button[aria-current=page] svg{color:#FFB624}
/* Com o menu fixo, somem os atalhos repetidos */
#setup[data-area="1"] :is(#titleHome,#profileBack,.home-menu){display:none}
#setup[data-area="1"] .home-section[aria-labelledby="homeAccountTitle"]:not(:has(#biometricDisable:not([hidden]))){display:none}
}
@media (min-width:1024px){
.welcome-how{display:none}
#setup .menu2 :is(.prep-steps li[aria-current=step],.prep-steps li){color:var(--p-muted)}
#setup .menu2 .prep-steps li[aria-current=step]{color:var(--p-text)}
#setup .menu2 .prep-steps span{box-shadow:inset 0 0 0 1.5px var(--p-line-strong)}
#setup .menu2 .prep-steps li[aria-current=step] span{background:var(--p-brand);box-shadow:none;color:#fff}
#setup .menu2 .prep-steps li.done span{background:#E1F3E9;box-shadow:none;color:var(--p-done-fg)}
#setup .menu2 .prep-steps li+li::before{background:var(--p-line)}
#setup .menu2 .field-help{color:var(--p-muted)}
#setup .menu2 :is(.forgot-link,.candidate-account .account-switch,.candidate-account .biometric-retry,.candidate-account #resetResend){color:var(--p-brand)}
#setup .menu2 .candidate-account :is(#accountBack,#resetBack){color:var(--p-muted)}
}
/* ===== Ajuda (mesmo padrão da Ajuda do portal da empresa; celular no tema escuro) ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mstep.help{gap:14px;text-align:left}
.help-hero,.help-faq,.help-support{padding:20px;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(183,156,255,.18)}
.help-hero{display:grid;gap:16px;background:linear-gradient(120deg,rgba(116,57,216,.35),rgba(255,255,255,.04) 70%)}
.help-hero h2,.help-card-head h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff}
.help-card-head h2{font-size:18px}
.help-hero p,.help-card-head p{margin:4px 0 0;font-size:14px;line-height:1.55;color:#b9b0d6}
.help-search input{box-sizing:border-box;width:100%;min-height:48px;padding:12px 14px;border:1px solid rgba(183,156,255,.3);border-radius:12px;background:rgba(18,10,33,.6);color:#fff;font:inherit;font-size:15px}
.help-search input::placeholder{color:#8f86b3}
.help-shortcuts{display:grid;gap:10px}
.help-tile{display:grid;gap:2px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(183,156,255,.18);color:#fff;text-align:left;text-decoration:none;font:inherit;transition:background .15s}
.help-tile:hover{background:rgba(139,92,246,.12)}
.help-tile strong{font-size:15px;font-weight:800}
.help-tile span{font-size:13px;color:#b9b0d6}
.help-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
#faqCount{font-size:13px;color:#b9b0d6}
.faq-group+.faq-group{margin-top:18px}
.faq-group h3{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#a59bc7}
.faq-group[hidden],.faq[hidden],.help-empty[hidden]{display:none}
.faq{border-radius:12px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(183,156,255,.16);transition:box-shadow .18s}
.faq+.faq{margin-top:6px}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 16px;box-sizing:border-box;font-size:14.5px;font-weight:700;color:#fff;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:8px;height:8px;flex:none;border-right:2px solid #a59bc7;border-bottom:2px solid #a59bc7;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.faq[open]{box-shadow:inset 0 0 0 1px rgba(183,156,255,.45)}
.faq[open] summary::after{transform:rotate(-135deg)}
.faq p{margin:0;padding:0 16px 16px;font-size:14px;line-height:1.65;color:#c9c1e3}
.faq p b{color:#fff}
.help-empty{padding:18px;text-align:center;color:#b9b0d6}
.help-empty h3{margin:0 0 4px;font-size:16px;color:#fff}
.help-empty p{margin:0;font-size:14px}
.support-form{display:grid;gap:14px}
.support-form label{display:grid;gap:7px;font-size:13px;font-weight:600;color:#e7defc}
.support-form :is(select,textarea){box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid rgba(183,156,255,.3);border-radius:12px;background:rgba(18,10,33,.6);color:#fff;font:inherit;font-size:15px}
.support-form textarea{resize:vertical;min-height:110px}
.support-error{margin:0;font-size:13px;color:#ffb8b8}
.support-error:empty{display:none}
.support-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
#supportChannels{flex:1 1 100%;font-size:12.5px;color:#b9b0d6}
.support-actions .cta{width:auto;margin:0;padding:12px 20px}
.support-actions .btn-ghost{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;text-decoration:none}
@media (max-width:1023px){
#setup[data-area="1"]:has(.mstep[data-step="help"]:not([hidden])) .cand-tabbar{position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);flex:none;padding:6px 8px max(8px,env(safe-area-inset-bottom));background:rgba(22,11,36,.94);backdrop-filter:blur(12px);border-top:1px solid rgba(183,156,255,.16)}
#setup[data-area="1"] .cand-tabbar{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1024px){
#setup[data-area="1"] .mstep.help{gap:18px}
#setup .menu2 :is(.help-hero,.help-faq,.help-support){padding:24px 28px;border:1px solid var(--p-line);background:#fff;box-shadow:var(--p-shadow)}
#setup .menu2 .help-hero{padding:28px;background:linear-gradient(120deg,var(--p-soft),#fff 70%)}
#setup .menu2 :is(.help-hero h2,.help-card-head h2,.help-empty h3){color:var(--p-text)}
#setup .menu2 .help-hero h2{font-size:24px}
#setup .menu2 :is(.help-hero p,.help-card-head p,#faqCount,.help-empty,#supportChannels,.help-tile span){color:var(--p-muted)}
#setup .menu2 .help-search input{border-color:var(--p-line-strong);background:#fff;color:var(--p-text)}
#setup .menu2 .help-search input::placeholder{color:#9A93A8}
#setup .menu2 .help-search input:focus{outline:none;border-color:var(--p-brand);box-shadow:0 0 0 3px rgba(116,57,216,.16)}
#setup .menu2 .help-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#setup .menu2 .help-tile{padding:16px 18px;border:1px solid var(--p-line);background:#fff;box-shadow:var(--p-shadow);color:var(--p-text);transition:transform .15s,box-shadow .15s,border-color .15s}
#setup .menu2 .help-tile:hover{border-color:rgba(116,57,216,.45);box-shadow:0 2px 4px rgba(42,20,74,.05),0 12px 28px -10px rgba(42,20,74,.18);transform:translateY(-2px)}
#setup .menu2 .faq-group h3{color:var(--p-muted)}
#setup .menu2 .faq{border:1px solid var(--p-line);background:#fff;box-shadow:none}
#setup .menu2 .faq[open]{border-color:rgba(116,57,216,.45)}
#setup .menu2 .faq summary{color:var(--p-text)}
#setup .menu2 .faq summary::after{border-color:var(--p-muted)}
#setup .menu2 .faq p{color:var(--p-muted)}
#setup .menu2 .faq p b{color:var(--p-text)}
#setup .menu2 .support-form label{color:var(--p-text)}
#setup .menu2 .support-form :is(select,textarea){border-color:var(--p-line-strong);background:#fff;color:var(--p-text);color-scheme:light}
#setup .menu2 .support-form :is(select,textarea):focus{outline:none;border-color:var(--p-brand);box-shadow:0 0 0 3px rgba(116,57,216,.16)}
#setup .menu2 .support-error{color:var(--p-stop-fg)}
#setup .menu2 .support-actions{justify-content:flex-end}
#setup .menu2 #supportChannels{flex:1 1 auto}
}
.support-actions [hidden]{display:none}
/* ===== Tour de primeiro acesso (mesmo padrão do portal da empresa) ===== */
.tour{position:fixed;inset:0;z-index:60;font-family:"Manrope",system-ui,sans-serif}
.tour[hidden]{display:none}
.tour::before{content:"";position:absolute;inset:0;background:rgba(18,9,32,.55)}
.tour:has(.tour-spot:not([hidden]))::before{display:none}
.tour-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 3px #7439D8,0 0 0 9999px rgba(18,9,32,.55);transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease;pointer-events:none}
.tour-spot[hidden]{display:none}
.tour-card{position:fixed;box-sizing:border-box;width:min(340px,calc(100vw - 24px));padding:20px 20px 16px;border-radius:16px;background:#fff;color:#1A1326;box-shadow:0 24px 64px -16px rgba(30,12,58,.4);transition:left .25s ease,top .25s ease;text-align:left}
.tour-card.centered{left:50%!important;top:50%!important;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 32px));padding:28px 26px 20px}
.tour-card.centered h2{font-size:22px}
.tour-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tour-count{font-size:12px;font-weight:700;color:#7439D8}
.tour-skip{min-height:32px;padding:4px 6px;border-radius:8px;background:none;color:#665F75;font-size:12.5px;font-weight:600}
.tour-skip:hover{text-decoration:underline}
.tour-card h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.015em;color:#1A1326}
.tour-card p{margin:6px 0 0;font-size:14px;line-height:1.55;color:#665F75}
.tour-foot{display:flex;align-items:center;gap:8px;margin-top:18px}
.tour-dots{display:flex;gap:5px;margin-right:auto}
.tour-dots i{width:7px;height:7px;border-radius:50%;background:#D3CBDF;transition:width .2s,background-color .2s}
.tour-dots i.on{width:18px;border-radius:4px;background:#7439D8}
.tour-btn{min-height:38px;padding:8px 14px;border-radius:10px;font-size:14px;font-weight:700}
.tour-btn[hidden]{display:none}
.tour-btn.primary{background:#7439D8;color:#fff}
.tour-btn.primary:hover{background:#6027BE}
.tour-btn.ghost{border:1px solid #D3CBDF;background:#fff;color:#1A1326}
.tour-btn.ghost:hover{background:#FAF8FC}
.tour :focus-visible{outline:3px solid #7439D8;outline-offset:2px}
body.touring{overflow:hidden}
@media (prefers-reduced-motion:reduce){.tour-spot,.tour-card{transition:none}}
/* ===== Tela da entrevista: vez, pergunta atual, conexão e tela final ===== */
/* "Encerrar" no topo, discreto e longe do botão de enviar */
.hud .endbtn{flex:none;margin-left:auto;padding:7px 12px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:transparent;color:#c9c1e3;font-size:12.5px;font-weight:600}
.hud .endbtn:hover:not(:disabled){border-color:rgba(255,146,146,.55);color:#ffd4d4}
.hud .endbtn:disabled{opacity:.45}
.hud .q-progress{flex:1 1 auto}
/* A dica antiga embaixo do campo dá lugar à faixa de vez */
.composer-foot{display:none}
/* Faixa de vez: o que está acontecendo, em palavras, junto de onde a pessoa responde */
.turn{display:flex;align-items:center;gap:10px;min-height:40px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(183,156,255,.16);font-size:13.5px;font-weight:600;line-height:1.35;color:#c9c1e3;transition:background .2s,box-shadow .2s,color .2s}
.turn-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#8f86b3}
.turn[data-mode="wait"] .turn-dot{animation:turnPulse 1.4s ease-in-out infinite}
.turn[data-mode="you"]{background:rgba(116,57,216,.28);box-shadow:inset 0 0 0 1px rgba(183,156,255,.5);color:#fff}
.turn[data-mode="you"] .turn-dot{background:#FFB624;box-shadow:0 0 0 4px rgba(255,182,36,.2)}
.turn[data-mode="rec"]{background:rgba(239,68,68,.16);box-shadow:inset 0 0 0 1px rgba(255,146,146,.5);color:#fff}
.turn[data-mode="rec"] .turn-dot{background:#ef4444;animation:turnPulse 1s ease-in-out infinite}
.turn[data-mode="answer"] .turn-dot{background:#FFB624;animation:turnPulse 1s ease-in-out infinite}
@keyframes turnPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
/* Aviso de conexão */
.net-banner{padding:10px 12px;border-radius:12px;background:rgba(255,182,36,.14);box-shadow:inset 0 0 0 1px rgba(255,182,36,.45);color:#ffe2a6;font-size:13px;font-weight:600;line-height:1.4}
.net-banner.ok{background:rgba(62,213,152,.14);box-shadow:inset 0 0 0 1px rgba(62,213,152,.5);color:#bff5dc}
.net-banner[hidden]{display:none}
/* Cronômetro: âmbar a partir de 30 segundos, vermelho nos últimos 10 */
.timerbar.warn{border-color:#FFB624;background:rgba(120,80,10,.4)}
.timerbar.warn .timerfill{background:#FFB624;opacity:.6}
/* Pergunta atual, presa no topo da conversa */
.current-q{position:sticky;top:-16px;z-index:2;display:grid;gap:4px;width:100%;margin:-16px 0 0;padding:12px 14px;border:0;border-radius:0 0 14px 14px;background:rgba(30,17,48,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(183,156,255,.2),0 10px 20px -14px rgba(0,0,0,.8);color:#fff;text-align:left;font:inherit;cursor:pointer}
.current-q[hidden]{display:none}
.current-q-label{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FFB624}
.current-q-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;font-weight:600;line-height:1.45;color:#f1ecff}
.current-q.open .current-q-text{display:block}
/* Erro com reenvio */
.errmsg p{margin:0}
.errmsg-retry{margin-top:10px;min-height:40px;padding:8px 14px;border-radius:10px;background:#7439D8;color:#fff;font-size:14px;font-weight:700}
.errmsg-retry:hover{background:#6027BE}
/* Celular: o avatar diminui enquanto o candidato responde */
@media (max-width:767px){
#interview .liveavatar-stage{transition:max-height .35s ease}
#interview.answering .liveavatar-stage{max-height:15dvh}
#interview.answering .stage{padding-block:8px}
#interview.answering .stage-meta{display:none}
}
@media (min-width:768px) and (orientation:landscape){
.current-q{top:calc(-1 * clamp(22px,3vw,40px));margin-top:calc(-1 * clamp(22px,3vw,40px));padding:14px 18px}
.current-q-text{font-size:15px}
}
/* Tela final: o que acontece agora */
.resulthero.receipt{max-width:560px;margin-inline:auto;text-align:center}
.next-steps{margin:20px 0 0;padding:16px 18px;border-radius:14px;background:rgba(18,10,33,.45);text-align:left}
.next-steps h2{margin:0 0 10px;font-size:15px;font-weight:800;color:#fff}
.next-steps ol{margin:0;padding-left:20px;display:grid;gap:8px}
.next-steps li{font-size:14px;line-height:1.5;color:#d5def0}
.next-steps b{color:#fff}
.receipt-actions{display:grid;gap:10px;margin-top:20px}
.receipt-actions :is(.btn-solid,.btn-ghost){width:100%;min-height:48px;border-radius:12px;font-weight:700}
.receipt-actions .btn-solid{background:#7439D8;box-shadow:none}
.receipt-actions .btn-solid:hover{background:#6027BE}
/* ===== Dicas antes da entrevista ===== */
.tips-card{width:100%;max-width:720px;margin:0 auto;padding:18px 20px;border-radius:20px;background:rgba(255,182,36,.07);box-shadow:inset 0 0 0 1px rgba(255,182,36,.25);text-align:left;box-sizing:border-box}
.tips-card h2{margin:0 0 10px;font-size:15px;color:#fff}
.tips-card ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.tips-card li{position:relative;padding-left:22px;font-size:13px;line-height:1.5;color:#e6dcc4}
.tips-card li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;color:#FFB624}
.tips-card strong{color:#fff}
@media (min-width:1024px){
#setup .menu2 .tips-card{max-width:none;border:1px solid #F0DDAE;border-radius:16px;background:#FFFBF2;box-shadow:var(--p-shadow)}
#setup .menu2 .tips-card h2{font-family:"Manrope",sans-serif;font-weight:800;color:var(--p-text)}
#setup .menu2 .tips-card li{color:var(--p-muted)}
#setup .menu2 .tips-card strong{color:var(--p-text)}
#setup .menu2 .tips-card li::before{color:#B57A12}
}
/* ===== Convite perto de vencer, em destaque no Início ===== */
.home-card.expiring{box-shadow:inset 0 0 0 1.5px rgba(255,182,36,.6)}
.home-expiring{margin:6px 0 0;padding:8px 10px;border-radius:10px;background:rgba(255,182,36,.14);font-size:13px;font-weight:700;line-height:1.4;color:#ffd27a}
@media (min-width:1024px){
#setup[data-area="1"] .home-card.expiring{border-color:#E9C36A;box-shadow:none}
#setup[data-area="1"] .home-expiring{background:var(--p-wait-bg);color:var(--p-wait-fg)}
}
/* ===== Acessibilidade ===== */
/* Cinza dos textos de apoio e exemplos nos campos: contraste mínimo de 4,5:1 sobre o fundo escuro */
:root{--muted-dim:#9098C6}
/* Foco visível também em links, itens de abrir e fechar e elementos focáveis */
a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #B79CFF;outline-offset:2px;border-radius:6px}
/* Áreas de toque de pelo menos 44px nos links pequenos */
.forgot-link,.tour-skip,.home-link,.home-back{min-height:44px}
.account-delete summary{min-height:44px;display:flex;align-items:center;justify-content:center}