/* Tela de login (referência: Delphi, na Mobbin): fundo claro com brilho pêssego embaixo, logo, campos e um botão.
   Mesma tipografia do painel (Instrument Serif nos títulos, Inter no resto). */
.login-screen{
  --lg-ink:#1d1c1a;--lg-mute:#7a766f;--lg-line:#e8e4de;
  position:relative;min-height:100dvh;display:grid;place-items:center;padding:24px;overflow:hidden;isolation:isolate;
  color:var(--lg-ink);background:#fff;
}
.login-screen::before{ /* o brilho pêssego que sobe da base da tela */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 46% at 50% 108%,rgba(255,150,110,.62) 0%,rgba(255,176,140,.38) 38%,rgba(255,214,196,.14) 62%,rgba(255,255,255,0) 82%),
    radial-gradient(120% 70% at 50% 120%,rgba(255,196,170,.5),rgba(255,255,255,0) 70%);
  animation:glow-breathe 7s ease-in-out infinite;
}
@keyframes glow-breathe{0%,100%{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(-2%) scale(1.04);opacity:.88}}
.login-screen .login-card{width:min(528px,100%);max-width:528px;padding:0;border:0;border-radius:0;background:transparent;text-align:center;margin-top:-6vh}
.login-logo{display:inline-flex;align-items:center;gap:12px;margin-bottom:34px}
.login-logo .brand-mark{width:44px;height:44px;border-radius:12px;background:var(--lg-ink);color:#fff;font:600 22px/44px Inter,system-ui,sans-serif;display:grid;place-items:center;box-shadow:none}
.login-logo b{font:500 30px/1 Inter,system-ui,sans-serif;letter-spacing:-.03em;color:var(--lg-ink)}
.login-card h1{font:400 46px/1.05 'Instrument Serif',Georgia,serif;letter-spacing:-.01em;margin:0 0 12px;color:var(--lg-ink)}
.login-card h1 em{font-style:italic}
.login-card>p.login-sub{font:400 18px/1.4 Inter,system-ui,sans-serif;color:var(--lg-mute);margin:0 0 40px}
.login-logo .brand-mark span{display:none}
.login-card form{display:flex;flex-direction:column;gap:12px;text-align:left}
.login-card .field{display:block;width:100%;height:54px;padding:0 20px;border-radius:14px;border:1px solid var(--lg-line);background:#fff;color:var(--lg-ink);
  font:400 16px Inter,system-ui,sans-serif;outline:none;box-shadow:0 1px 2px rgba(29,28,26,.04),0 6px 16px -10px rgba(29,28,26,.12);
  transition:border-color .2s,box-shadow .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.login-card .field::placeholder{color:#a9a49c}
.login-card .field:focus{border-color:#1d1c1a;box-shadow:0 0 0 4px rgba(29,28,26,.07),0 10px 22px -12px rgba(29,28,26,.2);transform:translateY(-1px)}
.login-card .field-wrap{position:relative;display:block}
.login-card .field-wrap .field{padding-right:56px}
.login-card .eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:#8f8a82;display:grid;place-items:center}
.login-card .eye:hover{background:rgba(29,28,26,.06);color:var(--lg-ink)}
.login-card .eye[aria-pressed=true]{color:var(--lg-ink)}
.login-card .eye svg{width:19px;height:19px}
.login-card .primary{margin-top:6px;height:54px;border-radius:14px;border:0;background:#1d1c1a;color:#fff;font:500 16px Inter,system-ui,sans-serif;
  box-shadow:0 14px 28px -16px rgba(29,28,26,.7);transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .2s,box-shadow .25s}
.login-card .primary:hover{background:#000;transform:translateY(-2px);box-shadow:0 20px 34px -16px rgba(29,28,26,.75)}
.login-card .primary:active{transform:scale(.98)}
.login-card .primary:disabled{opacity:.7}
#loginMessage{min-height:20px;margin:8px 0 0;text-align:center;color:#c2410c;font-size:13px}
.login-card form.shake{animation:login-shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes login-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

/* estado "entrando": o formulário recolhe e o anel de pontos gira */
.login-loader{position:relative;width:54px;height:54px;margin:0 auto;opacity:0;max-height:0;overflow:visible;transition:opacity .35s,max-height .4s}
.login-loader i{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--lg-ink);
  transform:rotate(calc(var(--k) * 51.43deg)) translateY(-21px);opacity:calc(.22 + var(--k) * .12)}
.login-card>p.login-status{min-height:18px;margin:0;font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--lg-mute);opacity:0;transition:opacity .3s}
#login.is-signing .login-card form,#login.is-signing .login-card>p.login-sub{opacity:0;max-height:0;margin:0;overflow:hidden;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s,max-height .5s cubic-bezier(.65,0,.35,1),margin .4s,transform .4s}
#login.is-signing .login-loader{opacity:1;max-height:54px;margin:22px auto 14px;animation:loader-spin 1.05s linear infinite}
#login.is-signing .login-card>p.login-status{opacity:1}
@keyframes loader-spin{to{transform:rotate(360deg)}}

/* entrada da tela */
@media (prefers-reduced-motion:no-preference){
  .login-card>*:not(.login-loader):not(.login-status){animation:login-rise .75s cubic-bezier(.22,1,.36,1) both}
  .login-card>*:nth-child(2){animation-delay:.07s}.login-card>*:nth-child(3){animation-delay:.14s}
  .login-card>form{animation-delay:.21s}
}
@keyframes login-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.login-screen::before{animation:none}}
@media (max-width:560px){.login-card h1{font-size:36px}.login-card>p.login-sub{font-size:16px}.login-logo b{font-size:26px}}

/* o login fica por cima do app enquanto o gráfico carrega e depois esmaece, revelando o gráfico */
body.intro #login[hidden]{display:grid!important}
body.intro #login{position:fixed;inset:0;z-index:400;transition:opacity .75s ease}
body.intro #login.is-leaving{opacity:0;pointer-events:none}
.intro-line{position:fixed;inset:0;width:100vw;height:100vh;z-index:420;pointer-events:none;opacity:0;transition:opacity .25s}
.intro-line.on{opacity:1}
.intro-line path{filter:drop-shadow(0 0 8px rgba(63,178,127,.45))}
body.ui-origin.ui-v2 .trend-plot path.intro-hold{opacity:0;animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important}
body.ui-origin.ui-v2 .trend-plot path.intro-hold.shown{opacity:1;transition:opacity .2s}

/* barra de carregamento fina no topo (login e abertura) */
.load-bar{position:fixed;left:0;right:0;top:0;height:2px;z-index:500;pointer-events:none;opacity:0;transition:opacity .35s ease}
.load-bar.run{opacity:1}
.load-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#3fb27f,#7cc4e8);
  box-shadow:0 0 12px rgba(63,178,127,.6);transition:transform .9s cubic-bezier(.2,.8,.2,1)}