body.public-page,
body.startup-page {
  --public-ink: #17372d;
  --public-muted: #526b60;
  --public-line: #c9d8ce;
  --public-soft: #e8efe9;
  --public-accent: #22644e;
  --public-accent-soft: #e5efdb;
  color: var(--public-ink);
  background: radial-gradient(ellipse at 50% 0%, #2b5146, transparent 65%), #102523;
}
body.public-page .account-access-stage {
  background: transparent;
  gap: 1.5rem;
  align-content: center;
}
body.public-page .app-access-brand { color: #edf3ef; }
body.public-page .app-access-brand small { color: #b7cbbf; }
body.public-page .public-brand-mark { box-shadow: none; }
body.public-page .auth-card {
  width: min(100%, 35rem);
  border-color: #dce6de;
  border-radius: 1.5rem;
  background: #f5f8f3;
  box-shadow: 0 24px 75px #00151040;
}
.auth-card .public-field, .public-dialog .public-field { align-content: start; }
.auth-card .public-field input, .auth-card .public-field select,
.public-dialog .public-field input {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  height: 48px;
  min-height: 48px;
  border-color: #bdcfc2;
  color: #17372d;
  background: #fff;
  font-size: 16px;
  line-height: 1.25;
  color-scheme: light;
}
.auth-card input[type="date"] { display: block; appearance: none; -webkit-appearance: none; }
.auth-card input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.auth-card input[type="date"]::-webkit-datetime-edit { padding: 0; }
body.public-page .public-button.primary, body.startup-page .public-button.primary {
  border: 1px solid #cce7af;
  border-radius: 999px;
  background: #cce7af;
  color: #102523;
  box-shadow: none;
}
body.public-page .public-button.primary:hover { background: #bed99f; }
body.public-page .public-button.secondary { border-color: #b9cdbf; color: #254b38; background: transparent; }
.auth-card .auth-tab.active { color: #17372d; background: #fff; }
.auth-provider-icon { display: inline-grid; width: 1.15rem; height: 1.15rem; margin-right: .5rem; place-items: center; }
.auth-provider-icon-google::before { content: "G"; color: #4285f4; font: 800 1.05rem/1 Arial, sans-serif; }
.auth-provider-icon-microsoft::before { content: "⊞"; color: #f35325; font-size: 1.2rem; line-height: 1; }
.auth-trust-device { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; padding: .75rem .85rem; border: 1px solid var(--public-line); border-radius: .75rem; background: color-mix(in srgb, var(--public-accent-soft) 60%, #fff 40%); cursor: pointer; }
.auth-trust-device input { width: 1.15rem; height: 1.15rem; margin-top: .12rem; accent-color: var(--public-accent-strong); }
.auth-trust-device span { display: grid; gap: .15rem; }
.auth-trust-device strong { font-size: .84rem; }
.auth-trust-device small { color: var(--public-muted); font-size: .72rem; line-height: 1.4; }
.account-optional { border-block: 1px solid #cfdbd1; }
.account-optional summary { padding-block: .85rem; cursor: pointer; font-size: .85rem; font-weight: 650; min-height: 44px; }
.account-optional summary small { margin-left: .5rem; font-weight: 400; color: #526b60; }
.account-optional > p, .account-next-step { font-size: .78rem; line-height: 1.5; color: #526b60; margin: 0 0 .75rem; }
.account-optional .public-form-grid { padding-bottom: 1rem; }
.account-next-step { margin: 0; }
.account-optional .public-consent { background: #e9f0e3; }
body.startup-page .startup-shell { color: #edf3ef; }
body.startup-page .startup-shell p, body.startup-page .startup-shell small { color: #bed2c4; }
#onboardingScreen {
  --bg: #102523;
  --surface: #f5f8f3;
  --surface-2: #eaf0e8;
  --surface-soft: #eaf0e8;
  --input-bg: #fff;
  --ink: #17372d;
  --muted: #526b60;
  --line: #c9d8ce;
  --line-strong: #b3c8b9;
  --accent: #22644e;
  --accent-strong: #173e30;
  --accent-soft: #e5efdb;
  --accent-panel: #22644e0d;
  --accent-border: #22644e40;
  --accent-ring: #22644e25;
  color: var(--ink);
  color-scheme: light;
  background: radial-gradient(ellipse at 50% 0%, #2b5146, transparent 65%), var(--bg);
}
#onboardingForm { border-radius: 1.25rem; }
#onboardingForm .field { align-content: start; }
#onboardingForm .field input, #onboardingForm .field select { height: 44px; min-height: 44px; }
#onboardingForm .wizard-actions .button:not(.secondary) { --button-ink: #102523; background: #cce7af; color: #102523; border-color: #bed99f; }
