/* =========================================================
   LOGIN (token-driven)
   Cambia con il tema: radius, font-size, shadow, focus ring
   ========================================================= */

/* Center container */
.center{
  width:100%;

  height: 100vh;
  height: 100svh;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:16px;
}

/* Login card (reuse global .card style) */
.card{
  width: min(420px, 100%);
  background: var(--panel);
  padding: 18px;

  border-radius: var(--radius);
  box-shadow: var(--shadow);

  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

/* Stack layout for form */
.stack{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}

/* Inputs */
.stack input{
  padding:10px;

  min-height: var(--inputHeight);
  border-radius: var(--buttonRadius);

  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: var(--mutedPanel);

  color: var(--text);
  outline:none;
}

.stack input::placeholder{
  color: color-mix(in srgb, var(--text) 55%, transparent);
}

.stack input:focus{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: var(--focusRing);
}

/* Primary button */
.stack button{
  padding:10px;

  min-height: var(--inputHeight);
  border:none;

  border-radius: var(--buttonRadius);
  background: var(--accent);

  cursor:pointer;
  font-weight:700;

  color: #0b0f1a; /* leggibile su accent chiaro */
}

.stack button:hover{ filter:brightness(1.05); }
.stack button:active{ transform: translateY(1px); }
.stack button:focus{
  outline:none;
  box-shadow: var(--focusRing);
}