/* Compact optional accounts. All styles are scoped to the account component. */
.nr-account-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 11px 0;
  color: #f4efe8;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.nr-account-bar__icon { display: grid; place-items: center; color: #83e0d0; flex: none; }
.nr-account-bar__icon svg { width: 22px; height: 22px; }
.nr-account-bar__copy { min-width: 0; display: grid; gap: 3px; }
.nr-account-bar__status { font-size: 14px; line-height: 1.45; font-weight: 650; }
.nr-account-bar__identity { color: #b2becc; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.nr-account-bar__action {
  min-height: 44px;
  flex: none;
  margin-left: auto;
  border: 1px solid #83e0d045;
  border-radius: 10px;
  padding: 9px 13px;
  background: #83e0d009;
  color: #a0eadf;
  box-shadow: none;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.nr-account-bar[data-status="offline"] .nr-account-bar__icon { color: #bdc7d5; }
.nr-account-bar[data-status="error"] .nr-account-bar__icon { color: #f28d88; }
.nr-account-bar__action:hover { background: #83e0d014; border-color: #83e0d080; }
.nr-account-dialog {
  box-sizing: border-box;
  width: min(440px, calc(100% - 32px));
  max-width: 440px;
  max-height: min(90vh, 820px);
  max-height: min(90dvh, 820px);
  margin: auto;
  padding: 0;
  border: 1px solid #63788b75;
  border-radius: 24px;
  background: #121c29;
  color: #f4efe8;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 32px 100px #02050b99, inset 0 1px 0 #ffffff08;
  overflow: auto;
  overscroll-behavior: contain;
  color-scheme: dark;
}
.nr-account-dialog::backdrop { background: #040914bd; backdrop-filter: blur(4px); }
.nr-account-dialog[open] { animation: nr-account-enter .16s ease-out both; }
.nr-account-dialog.is-fallback-open { display: block; position: fixed; inset: 0; z-index: 1000; outline: 100vmax solid #040914bd; }
.nr-account-dialog__surface { background: radial-gradient(ellipse at 10% 0%, #83e0d00c, transparent 55%); }
.nr-account-dialog__heading { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 23px 8px; background: #121c29; }
.nr-account-dialog__emblem { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; color: #83e0d0; background: #83e0d00d; border: 1px solid #83e0d022; }
.nr-account-dialog__emblem svg { width: 26px; height: 26px; }
.nr-account-dialog .nr-account-close { display: grid; place-items: center; width: 44px; min-height: 44px; flex: none; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #b2becc; cursor: pointer; box-shadow: none; }
.nr-account-close svg { width: 21px; height: 21px; }
.nr-account-dialog .nr-account-close:hover { color: #f4efe8; border-color: #6f7f9360; background: #ffffff05; }
.nr-account-dialog__body { padding: 22px 26px 25px; }
.nr-account-eyebrow { display: block; color: #b2becc; font-size: 12px; font-weight: 650; letter-spacing: .1em; line-height: 1.5; }
.nr-account-dialog h2 { margin: 11px 0 12px; color: #f4efe8; font-size: clamp(25px, 6vw, 31px); font-weight: 620; line-height: 1.17; letter-spacing: -.035em; }
.nr-account-dialog h2:focus { outline: none; }
.nr-account-intro { margin: 0 0 22px; font-size: 14px; line-height: 1.65; color: #bdc8d5; overflow-wrap: anywhere; }
.nr-account-notice { margin: 0 0 18px; padding: 11px 13px; background: #ffffff04; border: 1px solid #65778d60; border-radius: 11px; color: #d2dae3; font-size: 13px; line-height: 1.55; }
.nr-account-dialog button, .nr-account-dialog input { box-sizing: border-box; font: inherit; }
.nr-account-dialog label { display: block; margin: 0 0 9px; color: #f4efe8; font-size: 14px; line-height: 1.45; font-weight: 600; }
.nr-account-dialog .nr-account-google, .nr-account-dialog .nr-account-primary { display: flex; align-items: center; justify-content: center; position: relative; gap: 11px; min-height: 48px; width: 100%; padding: 12px 17px; border: 1px solid #7282997a; border-radius: 11px; background: #f4efe805; color: #f4efe8; font-size: 14px; line-height: 1.4; font-weight: 620; cursor: pointer; box-shadow: none; }
.nr-account-google__mark { font-family: Arial, sans-serif; font-size: 21px; font-weight: 700; color: #f4efe8; }
.nr-account-dialog .nr-account-google:hover:not(:disabled) { background: #f4efe80d; border-color: #b8c6d5; }
.nr-account-dialog .nr-account-primary { border-color: #83e0d0; background: #83e0d0; color: #0b2425; }
.nr-account-dialog .nr-account-primary:hover:not(:disabled) { background: #a0eadf; border-color: #a0eadf; }
.nr-account-dialog button:disabled { opacity: .48; cursor: default; }
.nr-account-provider-note { margin: 7px 0 0; color: #b2becc; font-size: 12px; line-height: 1.5; text-align: center; }
.nr-account-divider { display: flex; align-items: center; gap: 13px; margin: 22px 0; color: #aebccb; font-size: 12px; line-height: 1.5; }
.nr-account-divider::before, .nr-account-divider::after { content: ""; flex: 1; height: 1px; background: #65778d45; }
.nr-account-input-wrap { display: flex; align-items: center; position: relative; }
.nr-account-input-wrap>span { position: absolute; left: 13px; display: flex; color: #aebccb; pointer-events: none; }
.nr-account-input-wrap svg { width: 20px; height: 20px; }
.nr-account-dialog input { width: 100%; min-height: 50px; padding: 12px 14px 12px 43px; border: 1px solid #6b7b9070; border-radius: 11px; background: #0c1420; color: #f4efe8; font-size: 16px; line-height: 1.4; outline-offset: 3px; box-shadow: inset 0 1px 3px #02050b20; }
.nr-account-dialog input[aria-invalid="true"] { border-color: #f28d88; }
.nr-account-dialog input:disabled { color: #bdc8d5; opacity: .7; }
.nr-account-help { margin: 9px 0 19px; color: #b2becc; font-size: 13px; line-height: 1.55; }
.nr-account-dialog .nr-account-code-input { min-height: 68px; padding: 11px 12px; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 27px; line-height: 1.4; letter-spacing: .28em; }
.nr-account-code-actions { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; margin-top: 10px; }
.nr-account-dialog .nr-account-resend, .nr-account-dialog .nr-account-change-email, .nr-account-dialog .nr-account-guest, .nr-account-dialog .nr-account-signout { min-height: 44px; padding: 9px 0; border: 0; background: transparent; color: #a0eadf; border-radius: 6px; font-size: 14px; line-height: 1.5; text-align: left; cursor: pointer; box-shadow: none; }
.nr-account-dialog .nr-account-change-email { color: #d2dae3; text-align: right; }
.nr-account-dialog .nr-account-resend:hover:not(:disabled), .nr-account-dialog .nr-account-change-email:hover:not(:disabled), .nr-account-dialog .nr-account-guest:hover { text-decoration: underline; text-underline-offset: 4px; }
.nr-account-expiry { margin: 1px 0 0; font-size: 12px; line-height: 1.55; color: #b2becc; }
.nr-account-error { margin: 16px 0 0; padding: 11px 13px; border-radius: 10px; border: 1px solid #f28d883a; background: #f28d8808; color: #ffb5ae; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.nr-account-privacy { margin: 22px 0 6px; padding-top: 18px; border-top: 1px solid #65778d40; font-size: 13px; line-height: 1.65; color: #b2becc; }
.nr-account-dialog .nr-account-guest { display: block; width: 100%; text-align: center; color: #d2dae3; font-size: 13px; }
.nr-account-identity { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #65778d45; background: #ffffff03; border-radius: 13px; }
.nr-account-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: #83e0d0; background: #83e0d00c; border: 1px solid #83e0d025; font-size: 17px; font-weight: 600; }
.nr-account-identity>div { min-width: 0; display: grid; gap: 4px; }
.nr-account-user-name { font-size: 14px; line-height: 1.5; color: #f4efe8; overflow-wrap: anywhere; }
.nr-account-user-email { font-size: 13px; line-height: 1.5; color: #b2becc; overflow-wrap: anywhere; }
.nr-account-save-state { padding: 18px 0 20px; }
.nr-account-save-state strong { color: #a0eadf; font-size: 13px; line-height: 1.5; }
.nr-account-save-state p { margin: 6px 0 0; color: #b2becc; font-size: 13px; line-height: 1.6; }
.nr-account-dialog .nr-account-signout { display: flex; align-items: center; justify-content: center; width: 100%; gap: 8px; margin-top: 8px; color: #d2dae3; }
.nr-account-spinner { display: none; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.is-loading .nr-account-spinner { display: inline-block; animation: nr-account-spin .8s linear infinite; }
.nr-account-dialog button:focus-visible, .nr-account-dialog input:focus-visible, .nr-account-bar button:focus-visible { outline: 2px solid #83e0d0; outline-offset: 4px; }
.nr-account-dialog [hidden] { display: none !important; }
.nr-account-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes nr-account-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nr-account-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .nr-account-bar { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 7px 10px; }
  .nr-account-bar__icon { align-self: start; padding-top: 2px; }
  .nr-account-bar__action { grid-column: 2; width: 100%; margin: 0; padding: 9px 10px; }
}
@media (max-width: 420px) {
  .nr-account-dialog__body { padding: 20px 20px 21px; }
  .nr-account-dialog__heading { padding: 16px 17px 8px; }
  .nr-account-code-actions { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .nr-account-dialog[open], .is-loading .nr-account-spinner { animation: none; }
}
@media (forced-colors: active) {
  .nr-account-dialog, .nr-account-bar__action, .nr-account-dialog button, .nr-account-dialog input, .nr-account-identity { border: 1px solid ButtonText; }
  .nr-account-dialog::backdrop { background: Canvas; opacity: .7; }
  .nr-account-bar__icon, .nr-account-dialog__emblem, .nr-account-save-state strong, .nr-account-avatar { color: CanvasText; }
}