.nfc-auth {
  --nfc-bg: #efefef;
  --nfc-card: #ffffff;
  --nfc-text: #18181b;
  --nfc-muted: #71717a;
  --nfc-subtle: #a1a1aa;
  --nfc-border: #e4e4e7;
  --nfc-accent: #06896c;
  --nfc-accent-text: #ffffff;
  --nfc-danger: #b42318;
  --nfc-success: #067647;
  --nfc-shadow: 0 24px 70px rgba(36, 31, 23, .14);
  box-sizing: border-box;
  min-height: 100vh;
  padding: 32px 20px;
  background: var(--nfc-bg);
  color: var(--nfc-text);
  font-family: inherit;
}

.nfc-auth[data-theme="dark"] {
  --nfc-bg: #171715;
  --nfc-card: #242321;
  --nfc-text: #f3f0ea;
  --nfc-muted: #bbb6ae;
  --nfc-border: #46423d;
  --nfc-accent: #a4ddca;
  --nfc-accent-text: #102d27;
  --nfc-danger: #ffb4ab;
  --nfc-success: #8ce9bd;
  --nfc-shadow: 0 24px 70px rgba(0, 0, 0, .36);
}

.nfc-auth *, .nfc-auth *::before, .nfc-auth *::after { box-sizing: border-box; }
.nfc-auth[data-claim-state="pending"] { overflow: hidden; }
.nfc-auth[data-claim-state="pending"] .nfc-auth__card,
.nfc-auth[data-claim-state="pending"] .nfc-auth__theme { visibility: hidden; opacity: 0; pointer-events: none; }
.nfc-auth__claim-overlay { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 22px; background: color-mix(in srgb, var(--nfc-bg) 88%, #111827 12%); color: var(--nfc-text); }
.nfc-auth__claim-overlay[hidden] { display: none; }
.nfc-auth__claim-card { width: min(100%, 430px); padding: 28px 24px 24px; border: 1px solid var(--nfc-border); border-radius: 28px; background: var(--nfc-card); box-shadow: 0 28px 80px rgba(15, 23, 42, .24); text-align: center; }
.nfc-auth__claim-visual { display: grid; place-items: center; height: 178px; margin: -8px auto 4px; overflow: hidden; }
.nfc-auth__claim-visual img { display: block; width: 172px; height: auto; }
.nfc-auth__claim-eyebrow { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--nfc-accent) 13%, transparent); color: var(--nfc-accent); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.nfc-auth__claim-card h2 { margin: 16px 0 9px; color: var(--nfc-text); font-size: clamp(26px, 7vw, 34px); line-height: 1.06; }
.nfc-auth__claim-card p { max-width: 330px; margin: 0 auto; color: var(--nfc-muted); font-size: 15px; line-height: 1.5; }
.nfc-auth__claim-continue { width: 100%; min-height: 52px; margin-top: 24px; border: 0; border-radius: 14px; background: var(--nfc-accent); color: var(--nfc-accent-text); cursor: pointer; font: inherit; font-weight: 750; transition: transform 160ms ease, filter 160ms ease; }
.nfc-auth__claim-continue:hover { filter: brightness(.96); transform: translateY(-1px); }
.nfc-auth__claim-continue:focus-visible { outline: 3px solid color-mix(in srgb, var(--nfc-accent) 30%, transparent); outline-offset: 3px; }
.nfc-auth__theme { display: flex; justify-content: flex-end; gap: 4px; max-width: 480px; margin: 0 auto 18px; }
.nfc-auth__theme-button { appearance: none; border: 0; background: transparent; color: var(--nfc-muted); cursor: pointer; border-radius: 999px; padding: 7px 10px; font: inherit; font-size: 12px; }
.nfc-auth__theme-button[aria-pressed="true"] { background: var(--nfc-card); color: var(--nfc-text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.nfc-auth__card { width: 100%; max-width: 480px; margin: 0 auto; padding: 34px; border: 1px solid var(--nfc-border); border-radius: 24px; background: var(--nfc-card); box-shadow: var(--nfc-shadow); }
.nfc-auth__header { text-align: center; margin-bottom: 26px; }
.nfc-auth__brand { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.nfc-auth__brand img { display: block; width: 136px; height: auto; aspect-ratio: 1736 / 232; object-fit: contain; }
.nfc-auth[data-theme="dark"] .nfc-auth__brand img { filter: invert(1); }
.nfc-auth__header h1 { margin: 0; color: var(--nfc-text); font-size: clamp(30px, 7vw, 42px); line-height: 1.05; }
.nfc-auth__header p { margin: 10px 0 0; color: var(--nfc-muted); font-size: 15px; line-height: 1.5; }
.nfc-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 26px; border-radius: 12px; background: color-mix(in srgb, var(--nfc-border) 55%, transparent); }
.nfc-auth__tab { border-radius: 9px; color: var(--nfc-muted); padding: 10px 8px; text-align: center; font-size: 14px; font-weight: 600; text-decoration: none; }
.nfc-auth__tab.is-active { background: var(--nfc-card); color: var(--nfc-text); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.nfc-auth .um { max-width: none !important; opacity: 1 !important; }
.nfc-auth .um-form form { margin: 0; }
.nfc-auth .um-row, .nfc-auth .um-col-1 { margin: 0 !important; }
.nfc-auth .um-field { margin: 0 0 14px !important; padding: 0 !important; }
.nfc-auth .nfc-auth__field--floating .um-field-label { display: none !important; }
.nfc-auth .um-field-area { position: relative; }
.nfc-auth input.um-form-field { width: 100% !important; height: 60px !important; border: 1px solid var(--nfc-border) !important; border-radius: 16px !important; background: transparent !important; color: var(--nfc-text) !important; padding: 23px 16px 8px !important; font: inherit !important; font-size: 17px !important; line-height: 1.2 !important; box-shadow: none !important; }
.nfc-auth input.um-form-field:focus { outline: 3px solid color-mix(in srgb, var(--nfc-accent) 18%, transparent) !important; border-color: var(--nfc-accent) !important; }
.nfc-auth__floating-label { position: absolute; z-index: 1; top: 50%; left: 16px; max-width: calc(100% - 32px); overflow: hidden; color: var(--nfc-subtle); font-size: 16px; font-weight: 400; line-height: 1; pointer-events: none; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-50%); transform-origin: left top; transition: color 160ms ease, font-size 160ms ease, top 160ms ease, transform 160ms ease; }
.nfc-auth input.um-form-field:focus + .nfc-auth__floating-label, .nfc-auth input.um-form-field:not(:placeholder-shown) + .nfc-auth__floating-label { top: 9px; color: var(--nfc-accent); font-size: 11px; transform: none; }
.nfc-auth .nfc-auth__field--link .um-field-area { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 4px; padding: 14px 16px 12px; border: 1px solid var(--nfc-border); border-radius: 16px; background: color-mix(in srgb, var(--nfc-border) 22%, transparent); cursor: text; transition: border-color 160ms ease, outline-color 160ms ease; }
.nfc-auth .nfc-auth__field--link .um-field-area:focus-within { outline: 3px solid color-mix(in srgb, var(--nfc-accent) 18%, transparent); border-color: var(--nfc-accent); }
.nfc-auth .nfc-auth__field--link .nfc-auth__floating-label { position: static; grid-column: 1 / -1; max-width: none; overflow: visible; color: var(--nfc-muted); font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; transform: none; }
.nfc-auth .nfc-auth__field--link .nfc-auth__username-prefix { min-width: 0; color: var(--nfc-muted); font-size: 14px; line-height: 1.2; white-space: nowrap; }
.nfc-auth .nfc-auth__field--link .nfc-auth__username-input { grid-column: 2; width: 100% !important; min-width: 0; height: auto !important; min-height: 24px; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--nfc-text) !important; padding: 0 !important; font: inherit !important; font-size: 17px !important; line-height: 1.2 !important; box-shadow: none !important; }
.nfc-auth .nfc-auth__field--link .nfc-auth__username-input:focus { outline: none !important; border-color: transparent !important; box-shadow: none !important; }
.nfc-auth .nfc-auth__field--link .nfc-auth__username-input::placeholder { color: var(--nfc-subtle); opacity: 1; }
.nfc-auth .nfc-is-valid input.um-form-field { border-color: var(--nfc-success) !important; }
.nfc-auth .nfc-is-invalid input.um-form-field { border-color: var(--nfc-danger) !important; }
.nfc-auth .nfc-is-checking input.um-form-field { border-color: var(--nfc-accent) !important; }
.nfc-auth .nfc-auth__field--link.nfc-is-valid .um-field-area { border-color: var(--nfc-success); }
.nfc-auth .nfc-auth__field--link.nfc-is-invalid .um-field-area { border-color: var(--nfc-danger); }
.nfc-auth .nfc-auth__field--link.nfc-is-checking .um-field-area { border-color: var(--nfc-accent); }
.nfc-auth .nfc-is-valid .nfc-auth__floating-label { color: var(--nfc-success); }
.nfc-auth .nfc-is-invalid .nfc-auth__floating-label { color: var(--nfc-danger); }
.nfc-auth__message { display: none; margin: 4px 0 0 !important; color: var(--nfc-muted); font-size: 12px; line-height: 1.4; }
.nfc-auth__message:not(:empty) { display: block; }
.nfc-auth__username-preview { margin: 8px 0 0 !important; color: var(--nfc-muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.nfc-auth__username-preview[hidden] { display: none; }
.nfc-auth .nfc-is-valid .nfc-auth__message { color: var(--nfc-success); }
.nfc-auth .nfc-is-invalid .nfc-auth__message { color: var(--nfc-danger); }
.nfc-auth__password-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; margin: 9px 0 0; padding: 0; color: var(--nfc-muted); font-size: 12px; list-style: none; }
.nfc-auth__password-checklist li::before { content: "○"; margin-right: 5px; }
.nfc-auth__password-checklist li.is-met { color: var(--nfc-success); }
.nfc-auth__password-checklist li.is-met::before { content: "✓"; }
.nfc-auth .um-col-alt { display: block !important; margin: 22px 0 0 !important; }
.nfc-auth .um-left.um-half, .nfc-auth .um-right.um-half { float: none !important; width: 100% !important; }
.nfc-auth .um-right.um-half, .nfc-auth .um-col-alt-b { text-align: center !important; margin-top: 14px !important; }
.nfc-auth .um-field-checkbox { display: inline-flex !important; align-items: center; gap: 8px; color: var(--nfc-muted) !important; font-size: 13px; }
.nfc-auth .um-field-checkbox input { appearance: auto !important; position: static !important; width: 16px !important; height: 16px !important; margin: 0 !important; opacity: 1 !important; accent-color: var(--nfc-accent); }
.nfc-auth .um-field-checkbox-state { display: none !important; }
.nfc-auth input.um-button, .nfc-auth button.um-button { width: 100% !important; min-height: 48px; border: 0 !important; border-radius: 10px !important; background: var(--nfc-accent) !important; color: var(--nfc-accent-text) !important; font: inherit !important; font-weight: 700 !important; text-shadow: none !important; }
.nfc-auth input.um-button:disabled, .nfc-auth button.um-button:disabled { cursor: not-allowed; opacity: .45; }
.nfc-auth a.um-button.um-alt, .nfc-auth .um-link-alt { display: inline-block; color: var(--nfc-accent) !important; background: none !important; font-weight: 600; text-decoration: none; }
.nfc-auth .um-field-error, .nfc-auth .um-error, .nfc-auth .um-notice.err { border-radius: 8px !important; color: var(--nfc-danger) !important; background: color-mix(in srgb, var(--nfc-danger) 10%, transparent) !important; font-size: 13px !important; }
.nfc-auth__divider { display: flex; align-items: center; gap: 12px; margin: 25px 0 16px; color: var(--nfc-muted); font-size: 12px; text-transform: uppercase; }
.nfc-auth__divider::before, .nfc-auth__divider::after { content: ""; height: 1px; flex: 1; background: var(--nfc-border); }
.nfc-auth__google { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--nfc-border); border-radius: 10px; background: transparent; color: var(--nfc-text); font: inherit; font-weight: 600; text-decoration: none; transition: border-color 160ms ease, background 160ms ease; }
.nfc-auth__google svg { width: 19px; height: 19px; }
.nfc-auth__google:hover { border-color: color-mix(in srgb, var(--nfc-accent) 42%, var(--nfc-border)); background: color-mix(in srgb, var(--nfc-accent) 5%, transparent); }
.nfc-auth__google:focus-visible { outline: 3px solid color-mix(in srgb, var(--nfc-accent) 24%, transparent); outline-offset: 2px; }
.nfc-auth__admin-notice { padding: 1rem; border: 1px solid #d63638; color: #d63638; }
@media (max-width: 520px) { .nfc-auth { padding: 18px 12px; } .nfc-auth__card { padding: 25px 20px; border-radius: 18px; } .nfc-auth__password-checklist { grid-template-columns: 1fr; } .nfc-auth__claim-overlay { padding: 14px; } .nfc-auth__claim-card { padding: 22px 18px 18px; border-radius: 24px; } .nfc-auth__claim-visual { height: 152px; } .nfc-auth__claim-visual img { width: 148px; } }

/* Progressive enhancement for the Login/Register links. Browsers without the
 * cross-document View Transitions API keep their normal navigation behavior. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: 140ms ease-out both nfc-auth-exit; }
::view-transition-new(root) { animation: 210ms ease-in both nfc-auth-enter; }

@keyframes nfc-auth-exit {
  to { opacity: 0; transform: translateY(-4px); }
}

@keyframes nfc-auth-enter {
  from { opacity: 0; transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}