.identity-reminder {
  position: fixed;
  z-index: var(--z-toast);
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(var(--tabbar-height) + 18px + env(safe-area-inset-bottom));
  left: max(16px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  margin: auto;
  padding: 13px 11px 13px 13px;
  color: #fffaf0;
  background: linear-gradient(135deg, rgba(40, 35, 25, .98), rgba(14, 13, 11, .98));
  border: 1px solid rgba(217, 182, 111, .4);
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .05);
  animation: identity-rise .45s var(--ease-out) both;
}

.identity-reminder-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #16120a;
  font: 700 22px Georgia, serif;
  background: linear-gradient(145deg, #f1d99e, #ae7834);
  border-radius: 50%;
}

.identity-reminder strong,
.identity-reminder span { display: block; }
.identity-reminder strong { font-size: 13px; line-height: 1.35; }
.identity-reminder span { margin-top: 3px; color: rgba(255, 250, 240, .58); font-size: 11px; line-height: 1.35; }
.identity-reminder > button:not(.identity-reminder-close) {
  min-height: 38px;
  padding: 0 15px;
  color: #17120a;
  font-weight: 750;
  background: #d9b66f;
  border: 0;
  border-radius: 999px;
}
.identity-reminder-close { padding: 0; color: rgba(255,255,255,.45); font-size: 24px; background: none; border: 0; }

.identity-modal-shell {
  position: fixed;
  z-index: calc(var(--z-toast) + 10);
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.identity-modal {
  position: relative;
  width: min(100%, 440px);
  max-height: 100%;
  overflow: auto;
  padding: 30px 24px 24px;
  color: #fffaf0;
  background:
    radial-gradient(circle at 50% 0, rgba(217, 182, 111, .17), transparent 38%),
    linear-gradient(160deg, #1c1913, #0d0c0a 62%);
  border: 1px solid rgba(217, 182, 111, .28);
  border-radius: 20px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .72);
  animation: identity-modal-in .35s var(--ease-out) both;
}

.identity-close {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 40px;
  height: 40px;
  color: rgba(255,255,255,.62);
  font-size: 27px;
  line-height: 1;
  background: rgba(255,255,255,.05);
  border: 0;
  border-radius: 50%;
}

.identity-kicker { margin: 0 0 8px; color: #d9b66f; font: 650 11px/1.2 var(--font-family); letter-spacing: .18em; text-transform: uppercase; }
.identity-modal h2 { margin: 0; font: 600 30px/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
.identity-lede { margin: 11px 34px 20px 0; color: rgba(255,250,240,.62); font-size: 13px; line-height: 1.55; }

.identity-pass {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 17px;
  background: rgba(255,250,240,.95);
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgba(83, 58, 21, .14);
}
.identity-qr-wrap { aspect-ratio: 1; padding: 7px; background: #fffaf0; border: 1px solid rgba(64,45,17,.16); border-radius: 9px; }
.identity-qr-wrap img { display: block; width: 100%; height: 100%; }
.identity-qr-loading { width: 100%; height: 100%; background: linear-gradient(110deg,#eee5d3 30%,#fffaf0 45%,#eee5d3 60%); background-size: 240% 100%; animation: identity-shimmer 1.1s infinite; }
.identity-credentials { min-width: 0; color: #17130b; }
.identity-credentials span { display: block; margin: 10px 0 5px; color: #74654c; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.identity-credentials span:first-child { margin-top: 0; }
.identity-credentials strong { display: block; overflow-wrap: anywhere; font: 750 16px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.identity-credentials strong:last-child { color: #895f24; font-size: 14px; }

.identity-warning { display: flex; gap: 10px; margin: 14px 0 18px; color: rgba(255,250,240,.61); font-size: 12px; line-height: 1.45; }
.identity-warning > span { display: grid; flex: 0 0 20px; height: 20px; place-items: center; color: #17120a; font-weight: 800; background: #d9b66f; border-radius: 50%; }
.identity-warning p { margin: 1px 0 0; }
.identity-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; }
.identity-primary,
.identity-secondary { min-height: 46px; padding: 0 16px; font-weight: 750; border-radius: 999px; }
.identity-primary { color: #17120a; background: linear-gradient(145deg, #f0d491, #c69448); border: 0; box-shadow: 0 9px 25px rgba(174,120,52,.19); }
.identity-secondary { color: #fffaf0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.identity-primary:disabled { cursor: wait; opacity: .5; }
.identity-text-button { display: block; margin: 17px auto 0; padding: 6px; color: rgba(255,250,240,.48); font-size: 12px; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.identity-empty { padding: 20px; text-align: center; background: rgba(255,255,255,.04); border-radius: 14px; }
.identity-empty p { margin: 0 0 18px; color: rgba(255,250,240,.65); font-size: 13px; line-height: 1.55; }
.identity-error { margin: 12px 0; color: #ff8d80; font-size: 12px; }

.identity-profile-card {
  margin: 16px 16px 8px;
  padding: 17px;
  color: #fffaf0;
  background: linear-gradient(145deg, rgba(217,182,111,.13), rgba(255,255,255,.035) 50%), #141310;
  border: 1px solid rgba(217,182,111,.22);
  border-radius: 15px;
}
.identity-profile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.identity-profile-kicker { margin: 0 0 5px; color: #d9b66f; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.identity-profile-title { margin: 0; font: 600 20px/1.2 Georgia, serif; }
.identity-profile-copy { margin: 8px 0 15px; color: rgba(255,250,240,.54); font-size: 12px; line-height: 1.5; }
.identity-profile-code { padding: 7px 10px; color: #e6c987; font: 700 13px ui-monospace, monospace; background: rgba(0,0,0,.25); border-radius: 7px; white-space: nowrap; }
.identity-profile-actions { display: flex; gap: 9px; }
.identity-profile-actions button,
.identity-profile-actions a { display: inline-grid; min-height: 40px; padding: 0 15px; place-items: center; color: #17120a; font-size: 12px; font-weight: 750; background: #d9b66f; border: 0; border-radius: 999px; }
.identity-profile-actions a { color: rgba(255,250,240,.72); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }

.recover-page { min-height: 100vh; display: grid; place-items: center; padding: max(28px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom)); color: #fffaf0; background: radial-gradient(circle at 50% 0, rgba(217,182,111,.18), transparent 32%), #090908; }
.recover-panel { width: min(100%, 430px); padding: 30px 24px; background: rgba(24,22,18,.92); border: 1px solid rgba(217,182,111,.25); border-radius: 20px; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.recover-brand { margin-bottom: 34px; color: #d9b66f; font: 700 14px Georgia,serif; letter-spacing: .22em; }
.recover-panel h1 { margin: 0; font: 600 34px/1.08 Georgia,serif; }
.recover-panel > p { margin: 12px 0 24px; color: rgba(255,250,240,.58); font-size: 13px; line-height: 1.55; }
.recover-field { display: block; margin-bottom: 14px; color: rgba(255,250,240,.58); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.recover-field input { width: 100%; min-height: 50px; box-sizing: border-box; margin-top: 7px; padding: 0 14px; color: #fffaf0; font: 650 15px ui-monospace,monospace; letter-spacing: .04em; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; outline: none; }
.recover-field input:focus { border-color: #d9b66f; box-shadow: 0 0 0 3px rgba(217,182,111,.12); }
.recover-field:nth-of-type(2) input { font-size: 13px; letter-spacing: 0; }
.recover-submit { width: 100%; min-height: 49px; margin-top: 6px; color: #17120a; font-weight: 800; background: linear-gradient(145deg,#efd490,#bf8a3d); border: 0; border-radius: 999px; }
.recover-submit:disabled { opacity: .55; }
.recover-back { display: block; margin-top: 20px; color: rgba(255,250,240,.5); font-size: 12px; text-align: center; }

@keyframes identity-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes identity-modal-in { from { opacity: 0; transform: translateY(12px) scale(.975); } }
@keyframes identity-shimmer { to { background-position: -140% 0; } }

@media (min-width: 768px) {
  .identity-reminder { right: 22px; bottom: 22px; left: auto; width: 500px; }
}

@media (max-width: 420px) {
  .identity-pass { grid-template-columns: 112px minmax(0,1fr); gap: 12px; padding: 13px; }
  .identity-credentials strong { font-size: 14px; }
  .identity-credentials strong:last-child { font-size: 12px; }
  .identity-actions { grid-template-columns: 1fr; }
  .identity-reminder { grid-template-columns: 36px minmax(0,1fr) auto 18px; gap: 9px; }
  .identity-reminder-mark { width: 36px; height: 36px; }
}
