/* Security & devices — the account page, used by Send and Mail. */

.as-page {
  width: 100%;
  max-width: min(820px, 100%);
  margin: 0 auto;
  padding: 2px 0 56px;
  color: var(--sd-ink, var(--ink, #13213a));
  box-sizing: border-box;
}
.as-page * { box-sizing: border-box; }

.as-kicker {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-blue-ink, #1e5fd6);
}
.as-page h1 {
  margin: 6px 0 8px;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.as-lead {
  margin: 0 0 28px;
  color: var(--sd-mut, var(--ink-soft, #5b6b82));
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 62ch;
}

.as-card {
  margin: 0 0 16px;
  padding: 20px 22px 22px;
  border: 1px solid var(--sd-line, var(--line, #e3e9f2));
  border-radius: 16px;
  background: var(--sd-card, var(--paper, #fff));
}
.as-card h2,
.as-h {
  margin: 0 0 6px;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.as-h {
  display: flex;
  align-items: center;
  gap: 10px;
}
.as-h svg {
  flex: 0 0 auto;
  display: block;
  color: currentColor;
}

.as-pw-art {
  display: flex;
  justify-content: center;
  margin: 4px 0 14px;
  color: var(--sd-ink, var(--ink, #13213a));
}
.as-pw-art svg {
  display: block;
}
.as-card > p {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sd-mut, var(--ink-soft, #5b6b82));
  max-width: 62ch;
}

.as-banner {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.45;
}
.as-banner.bad { background: #fef2f2; color: #9f1239; }
.as-banner.ok { background: #ecfdf3; color: #166534; }
.as-banner.wait { background: #eff6ff; color: #1e40af; }

.as-qr {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  align-items: flex-start;
  margin: 0 0 16px;
}
.as-qr-code {
  flex: none;
  width: 196px;
  height: 196px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--sd-line, #e3e9f2);
}
.as-qr-code svg { display: block; width: 100%; height: 100%; fill: #111; }
.as-qr-meta { flex: 1 1 220px; min-width: 0; }
.as-qr-meta p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--sd-mut, #5b6b82); }
.as-secret {
  display: block;
  font: 650 15px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  word-break: break-all;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sd-sunk, #f4f7fb);
  margin: 0 0 8px;
}
.as-qr-meta small { color: var(--sd-mut, #5b6b82); font-size: 12.5px; }

.as-field { display: grid; gap: 6px; margin: 0 0 12px; font-size: 12.5px; font-weight: 650; }
.as-field input {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--sd-line, #d9e2ef);
  border-radius: 10px;
  background: var(--sd-sunk, #fbfcff);
  font: 650 14px inherit;
  color: inherit;
}
.as-field input:focus {
  outline: 0;
  border-color: #3e84f4;
  box-shadow: 0 0 0 3px rgba(36, 118, 243, 0.13);
  background: var(--paper, #fff);
}

.as-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.as-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--sd-line, #d9e2ef);
  border-radius: 10px;
  background: var(--paper, #fff);
  color: inherit;
  font: 650 13.5px inherit;
  cursor: pointer;
}
.as-btn:hover { border-color: #94b7ed; }
.as-btn.primary { background: #2476f3; border-color: #2476f3; color: #fff; }
.as-btn.danger { color: #b32020; border-color: #f0c9c9; }
.as-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.as-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin: 0 0 16px;
  font: 650 14px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.as-codes span {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--sd-sunk, #f4f7fb);
}
.as-codes i { color: var(--sd-mut, #8b98a9); font-style: normal; font-size: 11px; }

.as-device {
  border: 1px solid var(--sd-line, #e3e9f2);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 10px;
}
.as-device-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.as-device-head svg { flex: none; margin-top: 2px; color: var(--sd-blue, #367ef5); }
.as-device-head > div { flex: 1; min-width: 0; }
.as-device-head b { display: block; font-size: 14.5px; }
.as-device-head small { color: var(--sd-mut, #5b6b82); font-size: 12.5px; }
.as-here {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #15803d;
}
.as-sessions { margin: 10px 0 0 32px; display: grid; gap: 8px; }
.as-session {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
}
.as-session small { display: block; color: var(--sd-mut, #5b6b82); font-size: 12px; }
.as-note { font-size: 12.5px; color: var(--sd-mut, #5b6b82); line-height: 1.5; margin: 8px 0 0; }

html[data-theme="dark"] .as-card,
html[data-theme="dark"] .as-device { background: var(--paper, #0d192b); border-color: var(--line, #23344d); }
html[data-theme="dark"] .as-secret,
html[data-theme="dark"] .as-codes span { background: #0f1726; }
html[data-theme="dark"] .as-qr-code { background: #fff; }
html[data-theme="dark"] .as-banner.bad { background: #3f1219; color: #fecdd3; }
html[data-theme="dark"] .as-banner.ok { background: #052e16; color: #bbf7d0; }
html[data-theme="dark"] .as-field input { background: #0f1726; border-color: #26314d; color: #e6ecfb; }

.settings-inner:has(#account-security-root) .settings-head { display: none; }