/* Central FAFO account experience layered over the Apple-style shell. */
.login-security-card { width:min(520px,calc(100vw - 28px)); }
.login-form { display:grid; gap:14px; width:100%; margin-top:2px; }
.login-form label { gap:7px; }
.login-form input { min-height:50px; font-size:16px; }
.login-submit { min-height:50px; margin-top:2px; }
.launch-caption { max-width:min(88vw,520px); text-align:center; font-size:10px; letter-spacing:.24em; white-space:nowrap; }
.user-badge { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--panel) 78%,transparent); color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.02em; backdrop-filter:blur(18px) saturate(150%); }
.role-hidden { display:none !important; }
.backend-problem-card { align-items:center; }
.backend-retry-panel { display:flex; align-items:center; justify-content:flex-end; }
.backend-retry-panel .primary { min-width:150px; }
.read-only-label { align-self:center; padding:7px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.12em; }
.device-card.read-only { cursor:default; }
.device-card.read-only:hover { transform:none; }
.device-footer-spacer { flex:1; }
.account-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.account-card { display:grid; gap:13px; padding:18px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--panel) 92%,transparent); }
.account-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.account-card h4 { margin:7px 0 0; font-size:17px; letter-spacing:-.02em; }
.role-pill { display:inline-flex; padding:5px 7px; border-radius:999px; font-size:9px; font-weight:900; letter-spacing:.12em; border:1px solid var(--line); color:var(--muted); }
.role-pill.admin { color:var(--text); }
.role-pill.guest { color:var(--muted); }
.credential-status { max-width:135px; text-align:right; color:var(--muted); font-size:10px; line-height:1.35; }
.credential-status.warning { color:#d67d00; }
.optional-label { color:var(--muted); font-size:10px; font-weight:600; }
.account-security-note { padding-top:2px; }
.settings-inline-actions { display:flex; gap:10px; flex-wrap:wrap; }
.guest-mode .hero-copy .eyebrow::after { content:" · GUEST VIEW"; }
.guest-mode .section-heading p { max-width:520px; }
.security-footnote strong { color:var(--text); }

/* Persistent opening mark: animate in, then remain exactly on the FAFO identity screen until interaction. */
.launch-screen {
  background:#f5f5f7 !important;
  color:#050507 !important;
  cursor:default;
  transition:opacity .62s cubic-bezier(.22,1,.36,1), transform .72s cubic-bezier(.22,1,.36,1), filter .62s cubic-bezier(.22,1,.36,1) !important;
}
.launch-screen::before {
  width:min(72vw,820px) !important;
  background:radial-gradient(circle,rgba(94,156,255,.14),rgba(162,199,255,.06) 38%,transparent 68%) !important;
  filter:blur(34px) !important;
}
.launch-screen .launch-mark { color:#050507; }
.launch-screen .launch-line { background:rgba(28,28,30,.12); }
.launch-screen .launch-caption { color:#74747a; font-weight:760; }
.launch-screen--settled .launch-line i { animation:none !important; opacity:0; }
body.launch-hold .launch-screen.launch-screen--exit {
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  pointer-events:auto !important;
}
body.launch-hold .security-gate {
  opacity:0;
  transform:scale(.975);
  filter:blur(10px);
  pointer-events:none;
}
body.login-revealed .launch-screen.launch-screen--exit {
  opacity:0 !important;
  transform:scale(1.035) !important;
  filter:blur(10px) !important;
  pointer-events:none !important;
}
body.login-revealed .security-gate {
  opacity:1;
  transform:scale(1);
  filter:none;
}

/* iPhone-inspired account + numeric passcode experience. */
.security-gate {
  background:radial-gradient(circle at 50% 20%,rgba(86,151,255,.10),transparent 35%),#f5f5f7 !important;
  color:#1d1d1f;
  transition:opacity .48s cubic-bezier(.22,1,.36,1), visibility .36s ease, transform .62s cubic-bezier(.22,1,.36,1), filter .5s ease !important;
}
.login-security-card.keypad-mode {
  width:min(390px,calc(100vw - 32px));
  padding:20px 18px 28px;
  color:#1d1d1f;
}
.keypad-mode .security-monogram,
.keypad-mode > .security-copy,
.keypad-mode > .security-footnote { display:none; }
.keypad-login-form { gap:0; margin:0; }
.keypad-heading { text-align:center; margin:30px 0 21px; }
.keypad-heading .eyebrow { color:#8e8e93; font-size:9px; letter-spacing:.2em; }
.keypad-heading h1 { margin:9px 0 6px; color:#111113; font-size:30px; line-height:1; letter-spacing:-.045em; font-weight:700; }
.keypad-heading p { margin:0; color:#8e8e93; font-size:13px; font-weight:550; }

.account-role-switch {
  position:relative;
  width:100%;
  height:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:4px;
  border:1px solid rgba(0,0,0,.07);
  border-radius:999px;
  background:rgba(118,118,128,.11);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.03),0 1px 0 rgba(255,255,255,.8);
  overflow:hidden;
}
.account-role-thumb {
  position:absolute;
  top:4px;
  left:4px;
  width:calc(50% - 4px);
  height:38px;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  box-shadow:0 3px 11px rgba(0,0,0,.10),0 .5px 1px rgba(0,0,0,.12);
  transition:transform .38s cubic-bezier(.2,.85,.25,1),box-shadow .25s ease;
}
.account-role-switch[data-role="guest"] .account-role-thumb { transform:translateX(100%); }
.account-role-option {
  position:relative;
  z-index:1;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#6e6e73;
  font-size:13px;
  font-weight:680;
  letter-spacing:-.01em;
  transition:color .22s ease,transform .16s ease;
}
.account-role-option[aria-pressed="true"] { color:#111113; }
.account-role-option:active { transform:scale(.97); }

.keypad-dots {
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  margin:0 auto 25px;
}
.keypad-dots i {
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(60,60,67,.22);
  transform:scale(.86);
  transition:background .16s ease,transform .18s cubic-bezier(.34,1.56,.64,1);
}
.keypad-dots i.is-filled { background:#1d1d1f; transform:scale(1); }

.keypad-secret-input {
  position:fixed !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.iphone-keypad {
  width:min(310px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px 22px;
  justify-items:center;
  align-items:center;
}
.keypad-key {
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(118,118,128,.12);
  color:#111113;
  font-size:31px;
  line-height:1;
  font-weight:430;
  letter-spacing:-.03em;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.72);
  transition:transform .12s ease,background .12s ease;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}
.keypad-key:hover { background:rgba(118,118,128,.17); }
.keypad-key:active { transform:scale(.92); background:rgba(118,118,128,.25); }
.keypad-delete { background:transparent; font-size:24px; color:#4b4b50; box-shadow:none; }
.keypad-delete:hover { background:rgba(118,118,128,.09); }
.keypad-spacer { width:76px; height:76px; }
.keypad-mode .security-error { margin:18px 0 -7px; min-height:18px; color:#ff3b30; }
.keypad-mode .biometric-button {
  width:auto;
  min-width:132px;
  min-height:40px;
  margin:18px auto 0;
  padding:0 15px;
  border:1px solid rgba(0,0,0,.07);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  color:#1d1d1f;
  box-shadow:0 5px 20px rgba(0,0,0,.05);
  font-size:12px;
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
}
.keypad-mode .face-id-icon { color:#0071e3; }
.security-card--shake.keypad-mode { animation:security-shake .38s ease; }

@media (prefers-color-scheme: dark) {
  .credential-status.warning { color:#ffb340; }
}

@media(max-width:760px) {
  .account-grid { grid-template-columns:1fr; }
  .user-badge { display:none; }
  .backend-problem-card { grid-template-columns:1fr; }
  .backend-retry-panel { justify-content:stretch; }
  .backend-retry-panel .primary { width:100%; }
  .launch-caption { white-space:normal; line-height:1.45; }
}

@media(max-width:430px) {
  .login-security-card.keypad-mode { padding:14px 10px 20px; }
  .account-role-switch { height:46px; }
  .account-role-thumb { height:36px; }
  .keypad-heading { margin:25px 0 18px; }
  .keypad-heading h1 { font-size:28px; }
  .iphone-keypad { width:min(286px,100%); gap:11px 18px; }
  .keypad-key,.keypad-spacer { width:72px; height:72px; }
}

@media (prefers-reduced-motion: reduce) {
  .account-role-thumb,.keypad-key,.launch-screen,.security-gate { transition-duration:.01ms !important; }
}