/* Auth fallback styles (works without Tailwind CDN) */
:root {
  --bg: var(--color-bg, #1e293b);
  --card: var(--color-card, rgba(15, 23, 42, 0.86));
  --border: var(--color-border, #1f2937);
  --text: var(--color-text, #f3f4f6);
  --muted: var(--color-text-muted, #9ca3af);
  --brand: var(--color-primary, #0f8b8d);
  --brand-hover: var(--color-primary-hover, #14b8a6);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(circle at 10% -20%, rgba(20, 184, 166, 0.18), transparent 35%),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 90%, #020617 10%));
  color: var(--text);
}

/* Utility-like classes used by auth templates */
.h-full { min-height: 100%; }
.font-sans { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.bg-gray-950 { background: var(--bg); }
.text-gray-100 { color: var(--text); }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.p-4 { padding: 1rem; }
.w-full { width: 100%; }
.max-w-md { max-width: 28rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-1 { margin-top: .25rem; }
.mt-6 { margin-top: 1.5rem; }
.inline-flex { display: inline-flex; }
.gap-2 { gap: .5rem; }

.text-2xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-xs { font-size: .75rem; line-height: 1rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.text-white { color: #fff; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: var(--muted); }
.text-gray-600 { color: #4b5563; }
.text-brand-400 { color: var(--brand); }
.hover\:text-brand-300:hover { color: var(--brand-hover); }
.hover\:text-white:hover { color: #fff; }

.bg-gray-900 {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, #020617 8%), color-mix(in srgb, var(--card) 86%, #020617 14%));
  box-shadow: 0 20px 44px rgba(2, 8, 23, 0.3);
}
.bg-gray-800 { background: var(--color-surface-elevated, #1f2937); }
.bg-brand-600 { background: var(--brand); }
.hover\:bg-brand-500:hover { background: var(--brand-hover); }
.border { border: 1px solid var(--border); }
.border-gray-800 { border-color: var(--border); }
.border-gray-700 { border-color: var(--color-input-border, #374151); }
.rounded-2xl { border-radius: 1rem; }
.rounded-lg { border-radius: .5rem; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(2,8,23,.55); }

.p-8 { padding: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.py-2\.5, .px-4 { display: inline-block; }
.block { display: block; }

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: .625rem 1rem;
  border-radius: .5rem;
  border: 1px solid var(--color-input-border, #374151);
  background: var(--color-input, #1f2937);
  color: var(--color-text, #f3f4f6);
  outline: none;
}
input::placeholder { color: var(--muted); }
input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, .2);
}

button[type="submit"] {
  width: 100%;
  border: 0;
  border-radius: .5rem;
  padding: .625rem 1rem;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 45%, #1e293b 100%);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
button[type="submit"]:hover { filter: brightness(1.03); transform: translateY(-1px); }

a { color: #93c5fd; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Alert blocks */
.bg-red-900\/40 { background: rgba(127, 29, 29, .4); }
.border-red-700 { border-color: #b91c1c; }
.text-red-300 { color: #fca5a5; }
.bg-green-900\/40 { background: rgba(20, 83, 45, .4); }
.border-green-700 { border-color: #15803d; }
.text-green-300 { color: #86efac; }

/* login icon badge */
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.text-2xl { font-size: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }