* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 20px;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(55% 40% at 50% 0%, var(--bg-accent), transparent 70%);
  pointer-events: none;
}

.login-card {
  position: relative;
  width: min(94vw, 380px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 34px 28px calc(28px + env(safe-area-inset-bottom) / 2);
  animation: card-in 600ms var(--spring);
}

@supports (backdrop-filter: blur(1px)) {
  .login-card { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
}

@keyframes card-in {
  from { transform: translateY(18px) scale(0.97); opacity: 0; }
}

.login-card.shake { animation: shake 500ms var(--ease-out); }

@keyframes shake {
  10%, 50%, 90% { transform: translateX(-7px); }
  30%, 70% { transform: translateX(7px); }
}

.mark {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  display: block;
}

h1 {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sub {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin: 3px 0 24px;
}

.alert {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 11px 14px;
  margin-bottom: 16px;
}

.alert.error { background: var(--red-soft); color: var(--red); }
.alert.success { background: var(--green-soft); color: var(--green); }

.field { position: relative; margin-bottom: 14px; }

.field input {
  width: 100%;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 16px 8px;
  transition: border-color var(--t-fast), background var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}

.field input:focus {
  outline: none;
  border-color: var(--amber);
}

.field label {
  position: absolute;
  left: 17px;
  top: 16px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-faint);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast);
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  transform: translateY(-9px) scale(0.72);
  color: var(--text-dim);
}

.field input::placeholder { color: transparent; }

.login-btn {
  width: 100%;
  margin-top: 8px;
  padding: 15px;
  font: inherit;
  font-weight: 700;
  color: var(--amber-ink);
  background: var(--amber);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--t-fast) var(--spring), filter var(--t-fast);
  touch-action: manipulation;
}

.login-btn:active { transform: scale(0.97); filter: brightness(1.08); }

a.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  text-align: center;
}

.g-mark { width: 20px; height: 20px; flex: none; }

.cancel { text-align: center; margin-top: 16px; font-size: var(--fs-sm); }
.cancel a { color: var(--text-dim); }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}