/* ==================================================================
   Tela de login - direcao: terminal utilitario.
   Fundo quase preto com grade fina, tipografia monoespacada, acento
   teal (#19bd9c, a cor de tema que o proprio neko ja usava).
   ================================================================== */

.connect {
  --nk-accent: #19bd9c;
  --nk-ink:    #e8eef2;
  --nk-muted:  #5b656e;
  --nk-field:  #0b0f13;

  background:
    radial-gradient(ellipse 75% 55% at 50% 0%,   rgba(25,189,156,.11), transparent 68%),
    radial-gradient(ellipse 55% 45% at 50% 100%, rgba(25,189,156,.05), transparent 70%),
    #0a0d10 !important;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* grade fina, para o fundo nao ser uma cor chapada */
.connect::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
}

.connect ::selection { background: rgba(25,189,156,.35); color: #fff; }

/* ---------- card ---------- */
.connect .window {
  position: relative;
  z-index: 1;
  box-sizing: border-box !important;
  width: 356px !important;
  padding: 42px 34px 34px !important;
  background: linear-gradient(180deg, #14191e 0%, #0f1418 100%) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 26px 64px -14px rgba(0,0,0,.85);
  animation: nkRise .5s cubic-bezier(.16,1,.3,1) both;
}

/* barra de acento no topo - marca visual sem texto */
.connect .window::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--nk-accent), transparent);
}

/* logo do gato + wordmark, e o rotulo "PLEASE LOG IN" */
.connect .window .logo         { display: none !important; }
.connect .window .message > span { display: none !important; }

/* ---------- campos ---------- */
.connect .window .message input {
  font-family: inherit !important;
  font-size: 13px !important;
  letter-spacing: .02em !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 13px 14px !important;
  line-height: 1.4 !important;
  margin: 0 0 12px !important;
  background: var(--nk-field) !important;
  color: var(--nk-ink) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 9px !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.connect .window .message input::placeholder {
  color: var(--nk-muted) !important;
  letter-spacing: .04em !important;
}

.connect .window .message input:hover {
  border-color: rgba(255,255,255,.15) !important;
}

.connect .window .message input:focus {
  outline: none !important;
  background: #0d1216 !important;
  border-color: rgba(25,189,156,.55) !important;
  box-shadow: 0 0 0 3px rgba(25,189,156,.13) !important;
}

/* O Chrome pinta o autofill de amarelo e ignora background-color.
   O inset box-shadow gigante e a unica forma confiavel de sobrepor. */
.connect .window .message input:-webkit-autofill,
.connect .window .message input:-webkit-autofill:hover,
.connect .window .message input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--nk-ink) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--nk-field) inset !important;
  caret-color: var(--nk-ink) !important;
}

/* ---------- botao ---------- */
.connect .window .message button {
  font-family: inherit !important;
  margin: 8px 0 0 !important;
  padding: 13px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .17em !important;
  color: #04120e !important;
  background: linear-gradient(180deg, #23d3ae 0%, #16a98c 100%) !important;
  border-radius: 9px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 8px 20px -8px rgba(25,189,156,.5);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.connect .window .message button:hover {
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 12px 26px -8px rgba(25,189,156,.66);
}

.connect .window .message button:active { transform: translateY(1px); }

.connect .window .message button:focus-visible {
  outline: 2px solid rgba(25,189,156,.75);
  outline-offset: 3px;
}

/* ---------- loader durante a conexao ---------- */
.connect .window .loader { width: 58px !important; height: 58px !important; }
.connect .window .loader .bounce1,
.connect .window .loader .bounce2 { background-color: var(--nk-accent) !important; }

/* ---------- entrada escalonada ---------- */
@keyframes nkRise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes nkSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* Apenas opacidade no botao: animation com fill-mode both congela o
   transform final e mataria o :active translateY. */
@keyframes nkFade { from { opacity: 0; } to { opacity: 1; } }

.connect .window .message input:nth-of-type(1) { animation: nkSlide .45s ease-out .10s both; }
.connect .window .message input:nth-of-type(2) { animation: nkSlide .45s ease-out .17s both; }
.connect .window .message button               { animation: nkFade  .45s ease-out .24s both; }

@media (prefers-reduced-motion: reduce) {
  .connect .window,
  .connect .window .message input,
  .connect .window .message button { animation: none !important; }
}