/* ============================================================
   MANTUS · telas de acesso (layouts/auth)
   Login, 2FA, esqueci/redefinir/trocar senha e assinatura pública.

   - Lado esquerdo: o guerreiro (partials/auth_guerreiro) — sempre noite,
     é a marca. O movimento está em js/mantus-auth.js.
   - Lado direito: cartão em relevo. O relevo vem de duas sombras: --au-lo
     (escura, do lado oposto à luz) e --au-hi (clara, do lado da luz). A luz
     nasce do guerreiro (alto/esquerda) e o JS move --au-dx/--au-dy com o
     mouse. Carregado depois do mantus.css e sobrepõe a seção "14. Auth".
   ============================================================ */

:root{
  --au-dx:.75; --au-dy:.75; --au-px:0; --au-py:0;
  --au-roxo:#7B3FF2; --au-roxo-2:#A970FF; --au-lilas:#C084FC; --au-nevoa:#F5F2FF; --au-cinza:#A4A9C3;
  --au-ring:rgba(169,112,255,.5);
  --au-bg:#1A1631; --au-hi:rgba(74,62,130,.42); --au-lo:rgba(4,3,12,.82);
  --au-ink:#F2EEFF; --au-muted:#B4B0CC; --au-subtle:#8E89AB; --au-ok:#7CE0B4; --au-erro:#FF8FA8;
}
:root[data-theme="light"]{
  --au-bg:#E8E4F4; --au-hi:rgba(255,255,255,.95); --au-lo:rgba(150,132,200,.55);
  --au-ink:#1C1633; --au-muted:#4E4868; --au-subtle:#6B6585; --au-ok:#0E7A50; --au-erro:#C2264A;
}
:root{
  --au-r-xl:calc(var(--au-dx)*18px) calc(var(--au-dy)*18px) 40px var(--au-lo), calc(var(--au-dx)*-18px) calc(var(--au-dy)*-18px) 40px var(--au-hi);
  --au-r-lg:calc(var(--au-dx)*10px) calc(var(--au-dy)*10px) 22px var(--au-lo), calc(var(--au-dx)*-10px) calc(var(--au-dy)*-10px) 22px var(--au-hi);
  --au-r-md:calc(var(--au-dx)*6px) calc(var(--au-dy)*6px) 13px var(--au-lo), calc(var(--au-dx)*-6px) calc(var(--au-dy)*-6px) 13px var(--au-hi);
  --au-r-sm:calc(var(--au-dx)*3px) calc(var(--au-dy)*3px) 7px var(--au-lo), calc(var(--au-dx)*-3px) calc(var(--au-dy)*-3px) 7px var(--au-hi);
  --au-s-md:inset calc(var(--au-dx)*5px) calc(var(--au-dy)*5px) 10px var(--au-lo), inset calc(var(--au-dx)*-5px) calc(var(--au-dy)*-5px) 10px var(--au-hi);
  --au-s-lg:inset calc(var(--au-dx)*8px) calc(var(--au-dy)*8px) 16px var(--au-lo), inset calc(var(--au-dx)*-8px) calc(var(--au-dy)*-8px) 16px var(--au-hi);
}

.mts-auth-body{background:var(--au-bg);color:var(--au-ink);overflow-x:hidden;transition:background-color .5s ease}
.mts-auth{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);min-height:100vh}

/* =====================================================================
   LADO ESQUERDO — o guerreiro
   ===================================================================== */
.mts-auth .mts-auth__hero,
:root[data-theme="light"] .mts-auth .mts-auth__hero{
  position:relative;overflow:hidden;color:var(--au-nevoa);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  height:100vh;min-height:680px;padding:30px 44px 28px;
  background:
    radial-gradient(60% 55% at 50% 44%,rgba(123,63,242,.30),transparent 70%),
    radial-gradient(40% 40% at 12% 8%,rgba(169,112,255,.12),transparent 70%),
    radial-gradient(50% 40% at 90% 100%,rgba(76,29,149,.35),transparent 70%),
    #07051A}
.mts-auth .mts-auth__hero::before{content:"";position:absolute;inset:-2px;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(169,112,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(169,112,255,.06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 45%,#000 20%,transparent 75%);
  transform:translate(calc(var(--au-px)*-10px),calc(var(--au-py)*-10px))}
.mts-auth__costura{position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(transparent,rgba(169,112,255,.45),transparent);z-index:3}
.mts-auth__costura::after{content:"";position:absolute;left:-1px;width:3px;height:120px;border-radius:3px;
  background:linear-gradient(transparent,#E9D5FF,transparent);animation:au-corre 5.5s cubic-bezier(.6,0,.4,1) infinite}
@keyframes au-corre{0%{top:-130px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}

.mts-auth__topo,.mts-auth__base{position:relative;z-index:2}
.mts-auth__topo{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mts-auth__marca{display:flex;align-items:center;gap:12px}
.mts-auth__marca svg{width:46px;height:44px;filter:drop-shadow(0 0 14px rgba(169,112,255,.55))}
.mts-auth__marca b{display:block;font-weight:500;font-size:22px;letter-spacing:.32em;line-height:1}
.mts-auth__marca small{display:block;margin-top:5px;font-size:9.5px;font-weight:500;letter-spacing:.42em;color:var(--au-roxo-2)}
.mts-auth__status{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 10px;border-radius:999px;
  border:1px solid rgba(169,112,255,.22);background:rgba(17,12,40,.55);
  font:500 11px var(--ff-mono);color:var(--au-cinza);letter-spacing:.04em}
.mts-auth__status i{width:7px;height:7px;border-radius:50%;background:#7CE0B4;animation:au-ping 2s infinite}
.mts-auth__status b{color:var(--au-nevoa);font-weight:500}
@keyframes au-ping{0%{box-shadow:0 0 0 0 rgba(124,224,180,.55)}80%,100%{box-shadow:0 0 0 9px rgba(124,224,180,0)}}

.mts-auth__palco{position:relative;z-index:1;flex:1;min-height:0;margin:6px -20px 0}
.mts-palco{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.mts-auth__base{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.mts-auth__chamada h2{margin:0;font-weight:300;font-size:clamp(28px,2.6vw,40px);line-height:1.12;letter-spacing:-.01em;color:var(--au-nevoa)}
.mts-auth__chamada h2 span,.mts-auth__chamada h2 em{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(12px);animation:au-surge .9s cubic-bezier(.2,.7,.2,1) forwards}
.mts-auth__chamada h2 span:nth-child(1){animation-delay:.3s}
.mts-auth__chamada h2 span:nth-child(2){animation-delay:.45s}
.mts-auth__chamada h2 span:nth-child(3){animation-delay:.6s}
.mts-auth__chamada h2 em{font-style:normal;background:linear-gradient(90deg,#A970FF,#E9D5FF,#C084FC,#7B3FF2,#A970FF);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:au-surge .9s .9s cubic-bezier(.2,.7,.2,1) forwards,au-brilha 6s linear infinite}
@keyframes au-surge{to{opacity:1;filter:blur(0);transform:none}}
@keyframes au-brilha{to{background-position:-250% 0}}
.mts-auth__chamada p{margin:12px 0 0;max-width:46ch;font-size:14px;line-height:1.6;color:var(--au-cinza);opacity:0;animation:au-surge 1s 1.4s forwards}
.mts-auth__efesios{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:5px 12px;border-radius:999px;border:1px solid rgba(169,112,255,.35);
  font:500 10.5px var(--ff-mono);letter-spacing:.22em;color:#D8C4FF;background:rgba(123,63,242,.12)}
.mts-auth__efesios::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--au-roxo-2);transform:rotate(45deg);box-shadow:0 0 10px var(--au-roxo-2)}
.mts-auth__pilares{display:flex;gap:6px 10px;flex-wrap:wrap;justify-content:flex-end;max-width:240px}
.mts-auth__pilares span{font-size:9.5px;font-weight:600;letter-spacing:.3em;color:rgba(164,169,195,.55);transition:color .5s,text-shadow .5s}
.mts-auth__pilares span.on{color:#E9D5FF;text-shadow:0 0 12px rgba(169,112,255,.9)}

/* ---------- SVG do palco ---------- */
.mts-palco text{font-family:var(--ff-sans)}
.mts-palco .arm{fill:url(#gAco);stroke:rgba(192,132,252,.62);stroke-width:1.15;stroke-linejoin:round}
.mts-palco .arm.lat{fill:url(#gAcoLat)}
.mts-palco .arm.esc{fill:url(#gEscudo)}
.mts-palco .malha{fill:url(#gMalha);stroke:rgba(169,112,255,.28);stroke-width:1}
.mts-palco .fio{fill:none;stroke:rgba(192,132,252,.5);stroke-width:1;stroke-linecap:round}
.mts-palco .luz{fill:#E9D5FF}
/* "forja": cada traço se desenha e só depois ganha corpo */
.mts-palco .tr{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;transition:stroke-dashoffset 1s cubic-bezier(.6,0,.2,1),fill-opacity .7s .5s ease}
.mts-palco .vestida .tr{stroke-dashoffset:0;fill-opacity:1}
.mts-palco .peca{transition:opacity .5s ease,filter .6s ease}
.mts-palco .peca.lampejo,.mts-palco .peca.foco,.mts-palco .peca.aceso{filter:drop-shadow(0 0 4px rgba(233,213,255,.9)) drop-shadow(0 0 16px rgba(123,63,242,.85))}
.mts-palco .peca.foco .arm,.mts-palco .peca.aceso .arm,.mts-palco .peca.lampejo .arm{stroke:#EBDDFF}
.mts-auth__hero.cofre .peca:not(.base):not(.aceso){opacity:.2}

.mts-palco #capa{transform-box:fill-box;transform-origin:50% 0;animation:au-capa 7s ease-in-out infinite}
@keyframes au-capa{0%,100%{transform:none}50%{transform:skewX(-1.6deg) scaleX(1.02)}}
.mts-palco #corpo{transform-box:fill-box;transform-origin:50% 100%;animation:au-respira 4.6s ease-in-out infinite}
@keyframes au-respira{0%,100%{transform:none}50%{transform:translateY(-2.5px) scale(1.004)}}
.mts-palco #halo{transform-box:fill-box;transform-origin:center;animation:au-pulsa 5s ease-in-out infinite}
@keyframes au-pulsa{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}

.mts-palco #viseira{transition:opacity .35s,fill .3s;animation:au-viseira 3.4s ease-in-out infinite}
@keyframes au-viseira{0%,100%{opacity:.75}50%{opacity:1}}
.mts-palco #olhar{transition:transform .5s cubic-bezier(.3,1.4,.5,1),opacity .3s}
.mts-auth__hero[data-estado="atento"] #olhar,.mts-auth__hero[data-estado="guarda"] #olhar{transform:translateX(15px)}
/* senha visível: o guerreiro fecha a viseira — não espia */
.mts-auth__hero.viseira-fechada #viseira{opacity:.06;animation:none}
.mts-auth__hero.viseira-fechada #olhar{opacity:0}
.mts-auth__hero[data-estado="erro"] #viseira,.mts-auth__hero[data-estado="erro"] #olhar{fill:var(--au-erro)}

.mts-palco #cruzEscudo{transition:filter .4s,opacity .4s;opacity:.85}
.mts-auth__hero[data-estado="guarda"] #cruzEscudo,.mts-auth__hero[data-estado="carregando"] #cruzEscudo,.mts-auth__hero.vitoria #cruzEscudo{opacity:1;filter:drop-shadow(0 0 6px #E9D5FF) drop-shadow(0 0 20px #A970FF)}
.mts-palco #cupula{opacity:0;transition:opacity .7s ease;transform-box:fill-box;transform-origin:center}
.mts-auth__hero[data-estado="guarda"] #cupula,.mts-auth__hero[data-estado="carregando"] #cupula{opacity:1;animation:au-cupula 2.6s ease-in-out infinite}
.mts-auth__hero[data-estado="erro"] #cupula{opacity:1}
.mts-auth__hero[data-estado="erro"] #cupulaBorda{stroke:var(--au-erro)}
@keyframes au-cupula{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}

.mts-palco #espada{transform:rotate(12deg);transition:transform 1.2s cubic-bezier(.55,-.35,.3,1.35)}
.mts-auth__hero.vitoria #espada{transform:rotate(170deg)}
.mts-palco #lamina-brilho{animation:au-lamina 3.8s ease-in-out infinite}
.mts-auth__hero[data-estado="carregando"] #lamina-brilho{animation-duration:.7s}
@keyframes au-lamina{0%{transform:translateY(-60px)}55%,100%{transform:translateY(240px)}}
.mts-palco #feixe{opacity:0}
.mts-auth__hero.vitoria #feixe{animation:au-feixe 2.4s 1s ease-out forwards}
@keyframes au-feixe{0%{opacity:0}12%{opacity:1}100%{opacity:.28}}
.mts-palco #onda-vitoria{opacity:0;transform-box:fill-box;transform-origin:center}
.mts-auth__hero.vitoria #onda-vitoria{animation:au-choque 1.6s 1.05s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes au-choque{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(2.4)}}
.mts-palco #varredura{animation:au-varre 7s cubic-bezier(.45,0,.55,1) infinite}
@keyframes au-varre{0%{transform:translateY(0);opacity:0}8%{opacity:.9}46%{opacity:.9}54%{transform:translateY(500px);opacity:0}100%{transform:translateY(500px);opacity:0}}

/* Callouts — as seis peças de Efésios 6 */
.mts-palco .co{opacity:0;transition:opacity .6s ease}
.mts-palco .co.visto{opacity:.42}
.mts-palco .co.on{opacity:1}
.mts-auth__hero.cofre .co:not(.on){opacity:.12}
.mts-palco .co-linha{fill:none;stroke:#A970FF;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1)}
.mts-palco .co.visto .co-linha,.mts-palco .co.on .co-linha{stroke-dashoffset:0}
.mts-palco .co-ponto{fill:#E9D5FF}
.mts-palco .co-onda{fill:none;stroke:#C084FC;stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.mts-palco .co.on .co-onda{animation:au-onda 1.8s ease-out infinite}
@keyframes au-onda{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(5)}}
.mts-palco .co-num{fill:#C084FC;font:500 9.5px var(--ff-mono);letter-spacing:.24em}
.mts-palco .co-tit{fill:#F5F2FF;font-size:12px;font-weight:600;letter-spacing:.16em}
.mts-palco .co-desc{fill:#A4A9C3;font-size:10.5px}
.mts-palco .co-ref{fill:#A970FF;font:500 10px var(--ff-mono);letter-spacing:.06em}
.mts-palco .anel-txt{fill:rgba(192,132,252,.42);font-size:10px;font-weight:600;letter-spacing:10.4px}

/* partículas: uma camada só, por cima de tudo, sem pegar clique */
.mts-auth__fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:20}

/* =====================================================================
   LADO DIREITO — cartão em relevo
   ===================================================================== */
.mts-auth .mts-auth__panel{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--au-bg);transition:background-color .5s}
.mts-auth__bolhas{position:absolute;inset:0;pointer-events:none}
.mts-auth__bolha{position:absolute;transform:translate(calc(var(--au-px)*var(--z)*1px),calc(var(--au-py)*var(--z)*1px))}
.mts-auth__bolha i{display:block;width:var(--t);height:var(--t);border-radius:50%;background:var(--au-bg);box-shadow:var(--au-r-lg);
  animation:au-flutua var(--dur,9s) ease-in-out infinite;animation-delay:var(--atraso,0s);transition:background-color .5s}
.mts-auth__bolha.funda i{box-shadow:var(--au-s-lg)}
.mts-auth__bolha.roxa i{background:radial-gradient(circle at 32% 28%,#D9C2FF,var(--au-roxo-2) 38%,var(--au-roxo) 70%,#3B1785);box-shadow:var(--au-r-lg),0 0 30px rgba(123,63,242,.35)}
.mts-auth__bolha.lilas i{background:radial-gradient(circle at 32% 28%,#F3E8FF,var(--au-lilas) 55%,#7E3BD0);box-shadow:var(--au-r-md)}
.mts-auth__bolha.anel i{position:relative}
.mts-auth__bolha.anel i::after{content:"";position:absolute;inset:22%;border-radius:50%;box-shadow:var(--au-s-md)}
@keyframes au-flutua{0%,100%{translate:0 0}50%{translate:0 -14px}}

.mts-auth__tema{position:absolute;top:20px;right:20px;z-index:3;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:var(--au-bg);color:var(--au-roxo-2);box-shadow:var(--au-r-md);transition:box-shadow .2s,background-color .5s}
.mts-auth__tema:active{box-shadow:var(--au-s-md)}
.mts-auth__tema:focus-visible{outline:2px solid var(--au-ring);outline-offset:3px}
.mts-auth__tema [data-tema-claro]{display:none}
:root[data-theme="light"] .mts-auth__tema [data-tema-claro]{display:inline}
:root[data-theme="light"] .mts-auth__tema [data-tema-escuro]{display:none}

.mts-auth__pilha{position:relative;z-index:2;width:100%;max-width:420px}
.mts-auth .mts-auth__card{position:relative;width:100%;max-width:none;background:var(--au-bg);border:0;border-radius:30px;padding:30px 34px 26px;
  box-shadow:var(--au-r-xl);color:var(--au-ink);transition:background-color .5s}
/* fio de luz no topo do cartão, vindo do lado do guerreiro */
.mts-auth .mts-auth__card::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(192,132,252,.75),transparent);opacity:.7}
.mts-auth .mts-auth__card-brand img{height:44px}

.mts-auth__card-marca{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px;color:var(--au-ink)}
.mts-auth__card-marca svg{width:34px;height:33px}
.mts-auth__card-marca b{display:block;font-weight:500;font-size:17px;letter-spacing:.32em;line-height:1}
.mts-auth__card-marca small{display:block;font-size:8px;letter-spacing:.42em;color:var(--au-roxo-2);font-weight:600;margin-top:4px}

.mts-auth__disco{width:92px;height:92px;margin:0 auto 4px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--au-s-lg)}
.mts-auth__disco > div{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--au-bg);box-shadow:var(--au-r-md);
  font-size:26px;color:var(--au-roxo-2);transition:transform .5s cubic-bezier(.34,1.56,.64,1),background-color .5s,color .3s}
.mts-auth__prog{position:absolute;inset:-8px;transform:rotate(-90deg);pointer-events:none;display:none}
.mts-auth__card[data-tela="2fa"] .mts-auth__prog{display:block}
.mts-auth__prog circle{fill:none;stroke:var(--au-roxo-2);stroke-width:3;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .4s ease;filter:drop-shadow(0 0 4px rgba(169,112,255,.8))}
.mts-auth__disco.cheio > div{background:linear-gradient(145deg,#A970FF,#6A2FE0);color:#fff;transform:scale(1.06);box-shadow:var(--au-r-md),0 0 30px rgba(123,63,242,.6)}

.mts-auth .mts-auth__card h1{margin:16px 0 6px;text-align:center;font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--au-ink)}
.mts-auth .mts-auth__card h1 .bi{color:var(--au-roxo-2)}
.mts-auth .mts-auth__card-sub{margin:0 auto 20px;max-width:36ch;text-align:center;font-size:13.5px;line-height:1.55;color:var(--au-muted)}

/* mensagens: um rebaixo no cartão, com a cor no texto */
.mts-auth .mts-auth__error{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;padding:13px 16px;border:0;border-radius:16px;
  background:var(--au-bg);box-shadow:var(--au-s-md);color:var(--au-erro);font-size:13px;line-height:1.45}
.mts-auth .mts-auth__error .bi{margin-top:1px}
.mts-auth .mts-auth__error--ok{color:var(--au-ok)}
.mts-auth .mts-auth__error.treme{animation:au-treme .4s ease}
@keyframes au-treme{20%{translate:-7px 0}45%{translate:7px 0}70%{translate:-3px 0}}

/* campos afundados */
.mts-auth .mts-auth__card .mts-field{margin-bottom:16px}
.mts-auth .mts-auth__card .mts-field__label{display:block;margin:0 0 8px 6px;font-size:12px;font-weight:600;color:var(--au-muted)}
.mts-auth .mts-auth__card .mts-field__label .req{color:var(--au-roxo-2);margin-left:2px}
.mts-auth .mts-auth__card .mts-field__hint{display:block;margin:8px 6px 0;font-size:11.5px;line-height:1.5;color:var(--au-subtle)}
.mts-auth .mts-auth__card .mts-input{height:52px;padding:0 16px;border:0;border-radius:16px;background:var(--au-bg);color:var(--au-ink);
  font-size:14px;box-shadow:var(--au-s-md);outline:none;transition:box-shadow .25s ease,background-color .5s}
.mts-auth .mts-auth__card .mts-input:focus{box-shadow:var(--au-s-lg),0 0 0 2px var(--au-ring)}
.mts-auth .mts-auth__card .mts-input::placeholder{color:var(--au-subtle);opacity:.75}
.mts-auth .mts-auth__caixa{position:static;display:flex;align-items:center;gap:10px;height:52px;padding:0 7px 0 16px;border-radius:16px;background:var(--au-bg);
  box-shadow:var(--au-s-md);transition:box-shadow .25s ease,background-color .5s}
.mts-auth .mts-auth__caixa:focus-within{box-shadow:var(--au-s-lg),0 0 0 2px var(--au-ring)}
.mts-auth .mts-auth__caixa > .bi{flex:none;font-size:16px;color:var(--au-subtle);transition:color .25s}
.mts-auth .mts-auth__caixa:focus-within > .bi{color:var(--au-roxo-2)}
.mts-auth .mts-auth__caixa .mts-input,
.mts-auth .mts-auth__caixa .mts-input:focus{flex:1;min-width:0;height:100%;padding:0;border-radius:0;background:transparent;box-shadow:none}
.mts-auth .mts-auth__caixa .mts-input-toggle__btn{position:static;transform:none;flex:none;width:38px;height:38px;border:0;border-radius:12px;cursor:pointer;
  display:grid;place-items:center;background:var(--au-bg);color:var(--au-subtle);box-shadow:var(--au-r-sm);transition:box-shadow .2s,color .2s,background-color .5s}
.mts-auth .mts-auth__caixa .mts-input-toggle__btn:has(.bi-eye-slash){box-shadow:var(--au-s-md);color:var(--au-roxo-2)}
.mts-auth .mts-auth__caixa .mts-input-toggle__btn:focus-visible{outline:2px solid var(--au-ring);outline-offset:2px}
.mts-auth__caps{display:none;margin:8px 0 0 6px;font-size:11.5px;font-weight:600;color:#F0A35E}
.mts-auth__caps.on{display:block}

/* código do 2FA: um campo grande; os 6 rótulos embaixo acendem com as peças */
.mts-auth .mts-auth__card .mts-auth__codigo{height:60px;text-align:center;font:600 24px var(--ff-mono);letter-spacing:.42em;caret-color:var(--au-roxo-2)}
.mts-auth .mts-auth__card .mts-auth__codigo--sm{height:52px;font-size:18px;letter-spacing:.3em}
.mts-auth__pecas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:12px 2px 0}
.mts-auth__pecas span{position:relative;min-width:0;overflow:hidden;padding-top:8px;text-align:center;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--au-subtle);transition:color .3s}
.mts-auth__pecas span::before{content:"";position:absolute;top:0;left:20%;right:20%;height:3px;border-radius:3px;box-shadow:var(--au-s-md);transition:background .3s,box-shadow .3s}
.mts-auth__pecas span.on{color:var(--au-roxo-2)}
.mts-auth__pecas span.on::before{background:var(--au-roxo-2);box-shadow:0 0 8px rgba(169,112,255,.8)}

/* desafio anti-bot do "esqueci" */
.mts-auth__desafio{display:flex;align-items:center;gap:12px}
.mts-auth__soma{flex:none;padding:0 16px;height:52px;display:grid;place-items:center;border-radius:16px;background:var(--au-bg);box-shadow:var(--au-r-sm);
  font:600 16px var(--ff-mono);color:var(--au-ink)}
.mts-auth .mts-auth__desafio .mts-input{max-width:120px;text-align:center}

/* botão principal: saltado e roxo; afunda ao clicar */
.mts-auth .mts-auth__card .mts-btn--primary{position:relative;overflow:hidden;width:100%;height:52px;margin-top:4px;border:0;border-radius:16px;
  background:linear-gradient(145deg,#9B5CFF,#6A2FE0);color:#fff;font-size:14.5px;font-weight:600;letter-spacing:.02em;
  box-shadow:var(--au-r-md),inset 1px 1px 0 rgba(255,255,255,.25);transition:box-shadow .2s ease,transform .2s ease,filter .2s}
.mts-auth .mts-auth__card .mts-btn--primary:hover:not(:disabled){filter:brightness(1.08)}
.mts-auth .mts-auth__card .mts-btn--primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:au-reflexo 4.5s 2s ease-in-out infinite}
@keyframes au-reflexo{0%{left:-60%}35%,100%{left:130%}}
.mts-auth .mts-auth__card .mts-btn--primary:active,
.mts-auth .mts-auth__card .mts-btn--primary.carregando{transform:scale(.985);box-shadow:inset 4px 4px 9px rgba(40,10,100,.55),inset -3px -3px 8px rgba(200,160,255,.35)}
.mts-auth__rot{display:inline-flex;align-items:center;gap:8px}
.mts-auth__rot .bi{transition:transform .25s}
.mts-btn--primary:hover .mts-auth__rot .bi-arrow-right{transform:translateX(3px)}
.mts-btn--primary.carregando .mts-auth__rot{visibility:hidden}
.mts-btn--primary.carregando::before{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:au-gira .8s linear infinite}
.mts-btn--primary.impacto{animation:au-impacto .5s ease}
@keyframes au-gira{to{transform:rotate(360deg)}}
@keyframes au-impacto{30%{box-shadow:var(--au-r-md),0 0 0 6px rgba(169,112,255,.35),0 0 40px rgba(169,112,255,.8)}}
.mts-auth .mts-auth__card .mts-btn--secondary{border:0;border-radius:14px;background:var(--au-bg);color:var(--au-ink);box-shadow:var(--au-r-sm)}

.mts-auth__rodape{display:flex;align-items:center;justify-content:center;gap:18px;margin:20px 0 0;padding-top:16px;
  border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,var(--au-lo),transparent) 1;font-size:13px}
.mts-auth__rodape a,.mts-auth__rodape button{display:inline-flex;align-items:center;gap:6px;padding:4px 2px;border:0;background:none;cursor:pointer;
  font:inherit;font-weight:600;color:var(--au-roxo-2);text-decoration:none}
.mts-auth__rodape button{color:var(--au-muted)}
.mts-auth__rodape a:hover,.mts-auth__rodape button:hover{text-decoration:underline}
.mts-auth__rodape--acoes{margin-top:14px;padding-top:0;border:0}
.mts-auth__nota{margin:14px 0 0;text-align:center;font-size:13px;line-height:1.5;color:var(--au-muted)}
.mts-auth__assina{margin:22px 0 0;text-align:center;font-size:11px;letter-spacing:.06em;color:var(--au-subtle)}

/* =====================================================================
   Telas menores: o guerreiro vira uma faixa acima do cartão
   ===================================================================== */
@media (max-width:1100px){
  .mts-auth{grid-template-columns:1fr}
  .mts-auth .mts-auth__hero,:root[data-theme="light"] .mts-auth .mts-auth__hero{display:flex;height:auto;min-height:0;padding:20px 20px 0}
  .mts-auth__costura{display:none}
  .mts-auth__palco{flex:none;height:min(52vh,460px);margin:0 -20px}
  .mts-auth__base{display:none}
  .mts-auth .mts-auth__panel{padding:28px 16px 40px}
}
@media (max-width:640px){
  .mts-auth__palco{height:300px}
  .mts-palco .co text{display:none}
  .mts-auth__status span{display:none}
  .mts-auth .mts-auth__card{padding:26px 20px 22px;border-radius:26px}
  .mts-auth__tema{top:12px;right:12px}
}
@media (prefers-reduced-motion:reduce){
  .mts-auth *,.mts-auth *::before,.mts-auth *::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}
}
