:root {
  --auth-bg: #ffffff;
  --auth-card: #ffffff;
  --auth-text: var(--color-ink, #1a1a1a);
  --auth-muted: var(--color-ink-muted, #6b7280);
  --auth-border: var(--color-border, #ecedee);
}

* { box-sizing: border-box; }

/* Mobile first: the card runs full-bleed so the page reads as one screen,
   the same treatment the unified-auth pages get. It only becomes a floating
   card once there is room for one (see the media query at the bottom). */
.basic-auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--auth-bg);
  color: var(--auth-text);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

.basic-auth-shell { width: 100%; max-width: 420px; margin: 0 auto; }

.basic-auth-card {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.basic-auth-card h2 { margin: 0 0 var(--space-2); font-size: var(--font-xl); text-align: center; }
.basic-auth-intro { margin: 0 0 var(--space-5); color: var(--auth-muted); font-size: var(--font-sm); text-align: center; }
.basic-auth-field { margin-bottom: var(--space-4); }
.basic-auth-label { display: block; margin-bottom: var(--space-2); color: var(--auth-text); font-size: var(--font-sm); font-weight: 700; }
.basic-auth-input, .basic-auth-select {
  width: 100%; min-height: var(--tap-min); padding: var(--space-3); border: 1px solid var(--auth-border);
  border-radius: var(--radius-sm); background: #fff; color: var(--auth-text); font: inherit; font-size: var(--font-base);
}
.basic-auth-input:focus, .basic-auth-select:focus { outline: 3px solid var(--color-primary-tint); border-color: var(--color-primary); }
.basic-auth-password { position: relative; }
.basic-auth-password .basic-auth-input { padding-right: 3.25rem; }
.basic-auth-reveal { position: absolute; top: 50%; right: var(--space-2); min-width: var(--tap-min); min-height: var(--tap-min); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--auth-muted); transform: translateY(-50%); }
.basic-auth-reveal:active { transform: translateY(-50%); transition: none; }
.basic-auth-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); font-size: var(--font-sm); }
.basic-auth-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); }
.basic-auth-check input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.basic-auth-link { color: var(--color-primary-dark); font-weight: 700; text-decoration: none; }
.basic-auth-link:hover { text-decoration: underline; }
.basic-auth-submit { width: 100%; min-height: var(--tap-min); display: flex; align-items: center; justify-content: center; gap: var(--space-2); border: 0; border-radius: var(--radius-sm); background: var(--color-primary); color: #fff; font: inherit; font-size: var(--font-base); font-weight: 800; }
.basic-auth-submit:hover { background: var(--color-primary-dark); }
.basic-auth-error, .basic-auth-success, .basic-auth-demo { margin-bottom: var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-sm); }
.basic-auth-error { color: #a71919; background: #fff0f0; }
.basic-auth-field-error { margin-top: var(--space-2); color: var(--color-danger); font-size: var(--font-sm); }
.basic-auth-success { color: #087315; background: var(--color-primary-tint); }
.basic-auth-demo { color: #315176; background: #eff6ff; }
.basic-auth-footer { margin: var(--space-5) 0 0; color: var(--auth-muted); font-size: var(--font-sm); text-align: center; }
.basic-auth-language { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--font-sm); }

/* Lookup result panel (member code recovery) */
.basic-auth-result { margin-top: var(--space-4); padding: var(--space-4); border: 1px dashed var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary-tint); text-align: center; }
.basic-auth-result-label { color: var(--auth-muted); font-size: var(--font-sm); }
.basic-auth-result-value { margin-top: var(--space-1); font-weight: 700; }
.basic-auth-code { margin: var(--space-1) 0 0; color: var(--color-primary-dark); font-size: var(--font-xl); font-weight: 800; letter-spacing: 0.1em; }

@media (min-width: 640px) {
  .basic-auth-page { display: grid; place-items: center; padding: var(--space-6); }
  .basic-auth-card {
    padding: var(--space-6);
    background: var(--auth-card);
    border: 1px solid var(--auth-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
}