/* ============================================================
   FSQ LOGIN ENHANCE (aditivo — carregado por último)
   Mesmos detalhes do site: botão de tema SVG, Liquid Glass,
   efeitos dinâmicos e responsividade. Reversível: remover o <link>.
   ============================================================ */

/* ---------- Botão de tema: símbolo SVG (sol/lua) ---------- */
.public-theme-control{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:15px;color:#d5e7e6;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);transition:background .25s,border-color .25s,transform .2s}
.public-theme-control:hover{background:rgba(88,231,214,.16);border-color:rgba(88,231,214,.5);color:#eafffb}
.public-theme-control:active{transform:scale(.92)}
html[data-theme="light"] .public-theme-control{color:#0b2a2c;background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.public-theme-control .fsq-theme-ico{width:23px;height:23px;display:block}
.fsq-theme-ico .ico-sun,.fsq-theme-ico .ico-moon{transform-origin:12px 12px}
@media (prefers-reduced-motion:no-preference){
  .fsq-theme-ico .ico-sun,.fsq-theme-ico .ico-moon{transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
}
.fsq-theme-ico .ico-moon{opacity:0;transform:rotate(-90deg) scale(.4)}
.fsq-theme-ico .ico-sun{opacity:1;transform:none}
html[data-theme="dark"] .fsq-theme-ico .ico-sun{opacity:0;transform:rotate(90deg) scale(.4)}
html[data-theme="dark"] .fsq-theme-ico .ico-moon{opacity:1;transform:none}

/* ---------- Liquid Glass no cartão / painel ---------- */
.login-panel{
  background:linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.04))!important;
  border:1px solid rgba(255,255,255,.16)!important;border-radius:26px!important;
  -webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
  box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.06)!important}
html[data-theme="light"] .login-panel{
  background:linear-gradient(165deg, rgba(255,255,255,.82), rgba(255,255,255,.6))!important;
  border-color:rgba(255,255,255,.9)!important;
  box-shadow:0 30px 80px rgba(9,40,38,.18), inset 0 1px 0 rgba(255,255,255,.95)!important}

/* ---------- Inputs de vidro + brilho no foco ---------- */
.input-wrap{
  background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:15px!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .25s ease,box-shadow .3s ease,background .25s ease}
html[data-theme="light"] .input-wrap{background:rgba(0,0,0,.03)!important;border-color:rgba(0,0,0,.1)!important}
.input-wrap:focus-within{
  border-color:rgba(88,231,214,.6)!important;background:rgba(88,231,214,.06)!important;
  box-shadow:0 0 0 3px rgba(0,210,190,.18), 0 8px 24px rgba(0,210,190,.14)}
.input-wrap:focus-within .fa-solid{color:#5ff0dd!important}

/* ---------- Botão Entrar: brilho deslizante + realce ---------- */
.btn-entrar{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .3s ease}
.btn-entrar:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(0,210,190,.4)}
@media (prefers-reduced-motion:no-preference){
  .btn-entrar::before{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;pointer-events:none;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .7s ease}
  .btn-entrar:hover::before{left:150%}
}

/* ---------- Trust items: leve realce no hover ---------- */
.trust-item{transition:transform .3s ease,color .3s ease}
.trust-item:hover{transform:translateY(-3px)}

/* ---------- Entrada suave (reveal) ---------- */
@media (prefers-reduced-motion:no-preference){
  .login-intro{animation:fsqLoginIn .8s cubic-bezier(.22,1,.36,1) both}
  .login-panel-wrap{animation:fsqLoginIn .8s cubic-bezier(.22,1,.36,1) .12s both}
  @keyframes fsqLoginIn{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
  .login-panel .field{animation:fsqFieldIn .6s ease both}
  .login-panel .field:nth-of-type(1){animation-delay:.22s}
  .login-panel .field:nth-of-type(2){animation-delay:.30s}
  @keyframes fsqFieldIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ---------- Responsividade mobile ---------- */
html,body{overflow-x:clip}
@media (max-width:600px){
  .public-theme-control{width:42px;height:42px}
  .btn-entrar{min-height:54px}
  .input-fsq{min-height:26px}
}