/* Decks login - mirrors the admin SPA's sign-in card (PlayR sage/carbon + lime,
   tokens copied from playmaker/src/index.css). Self-contained: the SPA bundle
   stays behind the gate, so this page shares no CSS with it. */

:root {
  --background: hsl(75 18% 88%);
  --foreground: hsl(20 8% 10%);
  --card: hsl(78 28% 93%);
  --card-foreground: hsl(130 14% 10%);
  --primary: hsl(75 100% 50%);
  --primary-foreground: hsl(20 8% 10%);
  --muted-foreground: hsl(130 6% 38%);
  --destructive: hsl(4 72% 36%);
  --border: hsl(78 14% 84%);
  --input: hsl(78 14% 87%);
  --ring: hsl(75 100% 50%);
  --shadow-card: 0 1px 2px hsl(130 14% 10% / 0.03), 0 12px 32px -16px hsl(130 14% 10% / 0.08);
  --shadow-lime: 0 6px 24px -8px hsl(75 100% 50% / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: hsl(130 10% 7%);
    --foreground: hsl(75 20% 94%);
    --card: hsl(130 9% 11%);
    --card-foreground: hsl(75 20% 94%);
    --primary: hsl(75 100% 55%);
    --primary-foreground: hsl(130 14% 8%);
    --muted-foreground: hsl(130 6% 62%);
    --destructive: hsl(4 72% 50%);
    --border: hsl(130 8% 20%);
    --input: hsl(130 8% 18%);
    --ring: hsl(75 100% 55%);
    --shadow-card: 0 1px 2px hsl(0 0% 0% / 0.3), 0 12px 32px -16px hsl(0 0% 0% / 0.5);
    --shadow-lime: 0 6px 24px -8px hsl(75 100% 55% / 0.55);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--background);
  color: var(--foreground);
  font: 400 0.9375rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.card {
  width: 100%;
  max-width: 24rem;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.wordmark .dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background: var(--primary);
  box-shadow: var(--shadow-lime);
}

.wordmark .badge {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

h1 {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sub {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

label {
  display: block;
  margin: 1rem 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  font: inherit;
  color: inherit;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  outline: none;
}

input:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 35%, transparent);
}

.error {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--destructive);
}

button {
  width: 100%;
  height: 2.5rem;
  margin-top: 1.25rem;
  font: 600 0.9375rem/1 inherit;
  font-family: inherit;
  color: var(--primary-foreground);
  background: var(--primary);
  border: none;
  border-radius: 0.625rem;
  cursor: pointer;
  box-shadow: var(--shadow-lime);
}

button:hover { filter: brightness(1.05); }
button:disabled { opacity: 0.6; cursor: default; }

.hint {
  margin: 1.25rem 0 0;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}