:root {
  --accent-50:  #F0F5EF;
  --accent-100: #DCE8DA;
  --accent-200: #B8CEB4;
  --accent-400: #7C9374;
  --accent-500: #5F7A5A;
  --accent-600: #4F6B49;
  --neutral-0:   #FFFEFB;
  --neutral-50:  #FDFAF5;
  --neutral-100: #F7F3ED;
  --neutral-150: #F0EBE3;
  --neutral-200: #E6E0D6;
  --neutral-300: #D1C9BD;
  --neutral-400: #A89F91;
  --neutral-500: #7C7468;
  --neutral-600: #5C5549;
  --neutral-700: #413B31;
  --neutral-800: #2A2520;
  --neutral-900: #171411;
  /* The login layout loads THIS sheet alone — ui.css is not on the page — so
     every token it uses has to be defined here. Keep in step with ui.css. */
  --error:        #EF4444;
  --error-bg:     #FEF2F2;
  --error-border: #FECACA;
  --error-text:   #991B1B;
  --surface-page: var(--neutral-100);
  --surface-card: var(--neutral-0);
  --radius-md: 8px; --radius-lg: 12px;
  --shadow-lg: 0 4px 8px rgba(23,20,17,0.03), 0 8px 24px rgba(23,20,17,0.08);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--neutral-800);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.login-card {
  background: var(--surface-card);
  border-radius: 24px;
  border: 1px solid var(--neutral-200);
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
}
.login-brand {
  margin-bottom: var(--space-6);
}
.login-brand img {
  display: block;
  height: 38px;
  width: auto;
}
.login-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}
.login-subtitle {
  font-size: 14px;
  color: var(--neutral-400);
  margin-bottom: var(--space-8);
}
.login-error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--error-text);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: var(--space-6);
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700);
}
.form-input {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--neutral-800);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  outline: none;
  transition: all 200ms var(--ease-out);
}
.form-input:focus {
  border-color: var(--accent-400);
  box-shadow: 0 0 0 3px var(--accent-100);
}
.form-input::placeholder {
  color: var(--neutral-300);
}
.btn-login {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-0);
  background: var(--accent-500);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  transition: all 200ms var(--ease-out);
  margin-top: var(--space-2);
}
.btn-login:hover {
  background: var(--accent-600);
  box-shadow: var(--shadow-lg);
}
.form-optional { color: var(--neutral-400); font-weight: 400; }
.org-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0;
}
.org-choice-role {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
}