:root {
  --wf-bg: #f2f4f5;
  --wf-text: #333;
  --wf-muted: #6b7280;
  --wf-indigo-600: #4f46e5;
  --wf-indigo-800: #3730a3;
  --wf-primary-400-50: rgba(129, 140, 248, 0.5);
  --wf-stone-100: #f5f5f4;
  --wf-neutral-500: #737373;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--wf-bg);
  color: var(--wf-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji",
    "Segoe UI Emoji";
}

.wf-login-main {
  min-height: 100vh;
  padding: 1rem; /* p-4 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem; /* text-sm */
}

.wf-login-card {
  width: min(500px, 100%);
  border-radius: 1rem; /* rounded-2xl */
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); /* shadow */
  overflow: hidden;
}

.wf-login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem; /* py-5 approx */
  background: var(--wf-stone-100);
  text-decoration: none;
}

.wf-login-logo { width: 10rem; }
.wf-login-logo svg { display:block; width:100%; height:auto; }

.wf-login-body {
  width: 100%;
}

.wf-login-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.875rem; /* text-3xl */
  font-weight: 500; /* font-medium */
  padding: 1.5rem; /* p-6 */
  margin: 0;
}

.wf-login-form {
  display: flex;
  flex-direction: column;
  padding-left: 2.5rem; /* px-10 */
  padding-right: 2.5rem;
  padding-top: 1.5rem; /* pt-6 */
  padding-bottom: 2.5rem; /* pb-10 */
  gap: 1.5rem; /* gap-6 */
}

.wf-login-form-fields {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* gap-1 */
}

.wf-login-field { display:flex; flex-direction:column; gap:0.25rem; }
.wf-login-error { color:#ef4444; margin:0; }


.w-full { width: 100%; }
.text-sm { font-size: 0.875rem; }
.h-12 { height: 3rem; }
.rounded-lg { border-radius: 0.5rem; }
.border { border-width: 1px; border-style: solid; }
.border-neutral-500 { border-color: var(--wf-neutral-500); }

* {
  box-sizing: border-box;
}

.form-input {
  padding: 1rem; /* align with button !p-4 */
  line-height: 1.25rem;
  background: #fff;
  color: var(--wf-text);
}

input.form-input.h-12 {
  min-height: 3rem;
}

.hover\:border-primary-500:hover { border-color: var(--wf-indigo-600); }
.focus\:border-primary-500:focus { border-color: var(--wf-indigo-600); }
.focus\:outline-none:focus { outline: none; }

.focus\:ring:focus {
  box-shadow: 0 0 0 3px var(--wf-primary-400-50);
}

.focus\:ring-primary-400\/50:focus {
  box-shadow: 0 0 0 3px var(--wf-primary-400-50);
}

.focus\:z-10:focus { position: relative; z-index: 10; }
.disabled\:opacity-50:disabled { opacity: 0.5; }

.wf-login-btn {
  padding: 1rem; /* !p-4 */
  background: var(--wf-indigo-600);
  border-radius: 0.5rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
}

.wf-login-btn:hover { background: var(--wf-indigo-800); }
.wf-login-btn:disabled { opacity: 0.5; cursor: default; }

.wf-login-footer {
  position: absolute;
  bottom: 0;
  right: 0;
  padding-top: 1.5rem; /* py-6 */
  padding-bottom: 1.5rem;
  padding-right: 2rem; /* pr-8 */
  font-size: 0.875rem; /* text-sm */
}

.wf-login-footer ul {
  display: flex;
  gap: 2rem; /* space-x-8 */
  color: #4b5563; /* text-gray-600 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.wf-login-footer a { color: inherit; text-decoration: none; }
.wf-login-footer a:hover { text-decoration: underline; }