/* Stellplatz – Login (iOS-native) */

:root {
  --ios-bg: #000000;
  --ios-bg-elevated: #1c1c1e;
  --ios-bg-grouped: #2c2c2e;
  --ios-separator: rgba(84, 84, 88, 0.65);
  --ios-text: #ffffff;
  --ios-text-secondary: rgba(235, 235, 245, 0.6);
  --ios-blue: #0a84ff;
  --ios-green: #30d158;
  --ios-red: #ff453a;
  --ios-radius-md: 14px;
  --ios-radius-lg: 20px;
  --ios-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --touch-min: 44px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--ios-font);
  font-size: 17px;
  line-height: 1.47;
  color: var(--ios-text);
  background: var(--ios-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding: calc(var(--safe-top) + 24px) 20px calc(var(--safe-bottom) + 24px);
}

.login-app {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 48px);
}

.login-card {
  width: min(400px, 100%);
  padding: 32px 24px;
  border-radius: var(--ios-radius-lg);
  background: var(--ios-bg-elevated);
  border: 0.5px solid var(--ios-separator);
  text-align: center;
}

.login-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.login-card h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.login-sub {
  margin: 0 0 28px;
  font-size: 15px;
  color: var(--ios-text-secondary);
}

.login-form { text-align: left; }

.login-form label {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.login-form input {
  display: block;
  width: 100%;
  min-height: var(--touch-min);
  margin-top: 6px;
  padding: 12px 16px;
  border: 0.5px solid var(--ios-separator);
  border-radius: var(--ios-radius-md);
  background: var(--ios-bg-grouped);
  color: var(--ios-text);
  font-size: 17px;
}

.login-form input:focus {
  outline: none;
  border-color: var(--ios-blue);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.25);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 0 20px;
  border: none;
  border-radius: var(--ios-radius-md);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}

.btn:active:not(:disabled) { transform: scale(0.97); filter: brightness(0.92); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--ios-blue); color: #fff; }
.btn-secondary {
  background: var(--ios-bg-grouped);
  color: var(--ios-text);
  border: 0.5px solid var(--ios-separator);
  margin-top: 10px;
}
.btn-block { width: 100%; }

.alert {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--ios-radius-md);
  font-size: 15px;
  text-align: left;
}

.alert-error {
  background: rgba(255, 69, 58, 0.15);
  border: 0.5px solid rgba(255, 69, 58, 0.4);
  color: var(--ios-red);
}

.hidden { display: none !important; }

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