.auth-shell {
  --auth-panel: var(--panel, #fffefa);
  --auth-paper: var(--paper, #f6f7f4);
  --auth-ink: var(--list-graphite, var(--detail-graphite, var(--graphite, #111316)));
  --auth-text: var(--list-ink, var(--detail-ink, var(--ink, #1b2026)));
  --auth-muted: var(--list-muted, var(--detail-muted, var(--muted, #65707a)));
  --auth-faint: var(--list-faint, var(--detail-faint, var(--faint, #9aa3ad)));
  --auth-line: var(--list-line, var(--detail-line, var(--line, rgba(17, 19, 22, 0.105))));
  --auth-line-strong: var(--list-line-strong, var(--detail-line-strong, var(--line-strong, rgba(17, 19, 22, 0.18))));
  --auth-cyan: var(--cyan, var(--detail-cyan, #74deeb));
  --auth-cyan-soft: rgba(116, 222, 235, 0.16);
  --auth-positive: var(--pos, var(--list-pos, #168765));
  --auth-negative: var(--neg, var(--list-neg, #c85261));
  --auth-sans: var(--list-sans, var(--detail-sans, Inter, "Helvetica Neue", "Segoe UI", Arial, sans-serif));
  position: relative;
  z-index: 30;
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  color: var(--auth-text);
  font-family: var(--auth-sans);
  font-size: 12px;
}

#privy-dialog button {
  min-width: 0;
  min-height: 0;
  box-shadow: none;
  letter-spacing: 0;
  transform: none;
}

#privy-dialog button:has(> svg[data-slot="icon"]) {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
}

#privy-dialog button:hover,
#privy-dialog button:active {
  transform: none;
}

.auth-shell-view {
  position: relative;
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
}

.auth-shell[data-auth-mounted="true"] > .auth-fallback-trigger {
  display: none;
}

.auth-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  padding: 0 14px 0 12px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--auth-cyan);
  color: var(--auth-ink);
  box-shadow: none;
  cursor: pointer;
  font-family: var(--auth-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  transition:
    border-color var(--mf-duration-standard) var(--mf-ease-standard),
    background var(--mf-duration-standard) var(--mf-ease-standard),
    box-shadow var(--mf-duration-standard) var(--mf-ease-standard),
    transform var(--mf-duration-standard) var(--mf-ease-standard),
    padding var(--mf-duration-standard) var(--mf-ease-standard);
}

.auth-trigger::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-top: 1px solid rgba(17, 19, 22, 0.28);
  border-right: 1px solid rgba(17, 19, 22, 0.28);
  opacity: 0;
  transition: opacity var(--mf-duration-standard) var(--mf-ease-standard);
}

.auth-trigger:hover:not(:disabled),
.auth-shell-view.is-open .auth-trigger {
  background: color-mix(in srgb, var(--auth-cyan) 85%, #111316 8%);
  box-shadow: 0 8px 18px rgba(31, 35, 40, 0.14);
}

.auth-trigger:hover:not(:disabled):not(.is-signed-in) {
  padding-left: 16px;
}

.auth-trigger:hover:not(:disabled)::after,
.auth-shell-view.is-open .auth-trigger::after {
  opacity: 1;
}

.auth-trigger.is-signed-in {
  justify-content: flex-start;
  gap: 10px;
  height: 42px;
  min-height: 42px;
  /* max-width tracks the padding: widening the pill without widening the cap would spend the extra room on
     padding and truncate the name that much sooner. */
  max-width: min(284px, calc(100vw - 28px));
  padding: 0 17px 0 11px;
  border-color: var(--auth-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 254, 250, 0.72)),
    var(--auth-panel);
  color: var(--auth-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  text-align: left;
}

.auth-trigger.is-signed-in:hover:not(:disabled) {
  border-color: rgba(17, 19, 22, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 254, 250, 0.84)),
    var(--auth-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(31, 35, 40, 0.07);
}

.auth-trigger.is-signed-in::after {
  width: 20px;
  height: 20px;
  border-top-color: rgba(116, 222, 235, 0.74);
  border-right-color: rgba(116, 222, 235, 0.74);
}

.auth-trigger:active:not(:disabled) {
  transform: translateY(1px);
}

.auth-trigger:focus-visible,
.auth-menu-action:focus-visible,
.auth-provider-action:focus-visible {
  outline: 2px solid rgba(14, 139, 168, 0.46);
  outline-offset: 3px;
}

.auth-trigger:disabled {
  opacity: 0.58;
  cursor: default;
}

.auth-trigger-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
}

.auth-trigger.is-signed-in .auth-trigger-mark {
  filter: drop-shadow(0 0 0 rgba(22, 135, 101, 0));
}

.auth-trigger-mark img,
.auth-trigger-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.auth-trigger-mark svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-trigger-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 22, 0.1);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(116, 222, 235, 0.38), rgba(255, 254, 250, 0.78)),
    #eefcff;
  color: var(--auth-ink);
  font-family: var(--auth-sans);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  text-transform: uppercase;
}

.auth-trigger-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-trigger-summary {
  display: grid;
  /* No gap: both rows carry line-height 1.3, whose leading already separates them. An explicit gap on top
     of that leading is what made the name and the address read as two stacked blocks rather than one label. */
  gap: 0;
  min-width: 0;
}

.auth-trigger-name,
.auth-trigger-wallet {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-trigger-name {
  max-width: 174px;
  color: var(--auth-ink);
  font-family: var(--auth-sans);
  font-size: 12.5px;
  font-weight: 690;
  /* 1.3, not 1 — descenders (g/y/p/j/q) get clipped by this element's own overflow:hidden (needed for the
     ellipsis truncation) when the line box is sized exactly to the font-size with no room below the baseline. */
  line-height: 1.3;
}

.auth-trigger-wallet {
  max-width: 174px;
  color: var(--auth-muted);
  font-family: var(--auth-sans);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0;
  line-height: 1.3;
}

.auth-trigger-text {
  display: inline-block;
  max-width: 116px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: block;
  width: min(328px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid var(--auth-line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, #ffffff, #fffefa),
    var(--auth-panel);
  color: var(--auth-text);
  box-shadow:
    0 18px 42px rgba(31, 35, 40, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transform-origin: top right;
}

.auth-menu::before {
  content: "";
  display: none;
}

.auth-menu[hidden] {
  display: none;
}

.auth-menu-inner {
  display: grid;
  gap: 9px;
  padding: 13px;
}

.auth-menu-items {
  display: grid;
  gap: 9px;
}

.auth-menu-head {
  display: grid;
  gap: 0;
  padding: 0 1px 1px;
}

.auth-menu-title {
  margin: 0;
  color: var(--auth-ink);
  font-family: var(--auth-sans);
  font-size: 14px;
  font-weight: 680;
  letter-spacing: 0;
  line-height: 1.2;
  text-wrap: balance;
}

.auth-menu-note,
.auth-privacy-note {
  margin: 0;
  color: var(--auth-muted);
  font-size: 12px;
  line-height: 1.4;
  text-wrap: pretty;
}

.auth-provider-list {
  display: grid;
  gap: 7px;
}

.auth-provider-action,
.auth-menu-action {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 8px 9px;
  border: 1px solid var(--auth-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--auth-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
  cursor: pointer;
  font-family: var(--auth-sans);
  letter-spacing: 0;
  text-decoration: none;
  text-align: left;
  transition:
    border-color var(--mf-duration-standard) var(--mf-ease-standard),
    background var(--mf-duration-standard) var(--mf-ease-standard),
    box-shadow var(--mf-duration-standard) var(--mf-ease-standard),
    transform var(--mf-duration-standard) var(--mf-ease-standard);
}

.auth-menu-action {
  grid-template-columns: minmax(0, 1fr);
  min-height: 42px;
  padding: 0 12px;
}

.auth-provider-action:hover:not(:disabled),
.auth-menu-action:hover:not(:disabled) {
  border-color: var(--auth-line-strong);
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(31, 35, 40, 0.07);
  transform: translateY(-1px);
}

.auth-provider-action:active:not(:disabled),
.auth-menu-action:active:not(:disabled) {
  transform: translateY(1px);
}

.auth-provider-action:disabled,
.auth-menu-action:disabled {
  opacity: 0.56;
  cursor: default;
}

.auth-provider-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--auth-line);
  border-radius: 8px;
  background: rgba(255, 254, 250, 0.9);
  color: var(--auth-ink);
  font-family: var(--auth-sans);
  font-size: 15px;
  font-weight: 720;
  line-height: 1;
}

.auth-provider-mark img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.auth-action-copy {
  display: grid;
  gap: 0;
  min-width: 0;
}

.auth-provider-metamask .auth-provider-mark {
  border-color: rgba(230, 118, 27, 0.2);
  background: rgba(246, 133, 27, 0.08);
}

.auth-action-title {
  overflow: hidden;
  color: var(--auth-ink);
  font-family: var(--auth-sans);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-action-meta {
  min-width: 0;
  overflow: hidden;
  color: var(--auth-muted);
  font-family: var(--auth-sans);
  font-size: 11.5px;
  font-weight: 560;
  letter-spacing: 0;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-privacy-note {
  padding: 10px 11px;
  border: 1px solid rgba(17, 19, 22, 0.08);
  border-radius: 8px;
  background: rgba(17, 19, 22, 0.018);
  font-size: 11.5px;
}

.auth-profile-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas:
    "icon source"
    "icon value"
    "icon wallet";
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(116, 222, 235, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(116, 222, 235, 0.12), rgba(116, 222, 235, 0.04)),
    rgba(255, 255, 255, 0.62);
}

.auth-profile-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 22, 0.1);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(116, 222, 235, 0.38), rgba(255, 254, 250, 0.78)),
    #eefcff;
  color: var(--auth-ink);
  font-family: var(--auth-sans);
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
  text-transform: uppercase;
}

.auth-profile-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.auth-profile-source {
  grid-area: source;
}

.auth-profile-wallet {
  grid-area: wallet;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.auth-profile-wallet-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* min-width/min-height are not redundant: styles.css carries a global `button { min-width: 132px; height:
   54px }` CTA base, and a min-* always clamps a smaller width regardless of selector specificity — every
   button in this sheet has to opt out of it explicitly. Negative block margins keep the 24px tap target
   from pushing the address row taller than the two rows above it. */
.auth-profile-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  margin: -4px 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--auth-muted);
  box-shadow: none;
  cursor: pointer;
  transition:
    color var(--mf-duration-standard) var(--mf-ease-standard),
    border-color var(--mf-duration-standard) var(--mf-ease-standard),
    background var(--mf-duration-standard) var(--mf-ease-standard);
}

.auth-profile-copy svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* `button:hover` (0,1,1) outranks the base rule above (0,1,0), so the global's lift and drop shadow have to
   be cancelled from a :hover/:active rule of our own rather than from the base. */
.auth-profile-copy:hover,
.auth-profile-copy:active {
  transform: none;
  box-shadow: none;
}

.auth-profile-copy:hover {
  border-color: rgba(17, 19, 22, 0.12);
  background: rgba(255, 255, 255, 0.72);
  color: var(--auth-ink);
}

.auth-profile-copy:focus-visible {
  outline: 2px solid var(--auth-cyan);
  outline-offset: 1px;
}

.auth-profile-copy.is-copied {
  border-color: transparent;
  background: none;
  color: var(--auth-positive);
}

.auth-profile-copy.is-failed {
  color: var(--auth-negative);
}

.auth-profile-source,
.auth-profile-wallet {
  color: var(--auth-muted);
  font-family: var(--auth-sans);
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0;
  line-height: 1.15;
}

.auth-profile-value {
  grid-area: value;
  min-width: 0;
  overflow: hidden;
  color: var(--auth-ink);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-error {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(200, 82, 97, 0.22);
  border-radius: 8px;
  background: rgba(200, 82, 97, 0.055);
  color: var(--auth-negative);
  font-size: 11.5px;
  font-weight: 560;
  line-height: 1.4;
}

.auth-inline-error {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: min(260px, calc(100vw - 28px));
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(200, 82, 97, 0.18);
  border-radius: 8px;
  background: #fffefa;
  color: var(--auth-negative);
  box-shadow: 0 10px 22px rgba(31, 35, 40, 0.08);
  font-size: 11.5px;
  line-height: 1.35;
}

@media (prefers-reduced-motion: no-preference) {
  .auth-menu:not([hidden]) {
    animation: auth-menu-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes auth-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 620px) {
  .auth-menu {
    right: 0;
    width: min(342px, calc(100vw - 20px));
  }
}

@media (max-width: 520px) {
  .auth-trigger {
    height: 32px;
    min-height: 32px;
    padding: 0 10px 0 9px;
    font-size: 11.5px;
  }

  .auth-trigger-mark {
    width: 17px;
    height: 17px;
  }

  .auth-trigger.is-signed-in {
    gap: 8px;
    height: 36px;
    min-height: 36px;
    max-width: min(202px, 56vw);
    padding: 0 14px 0 9px;
  }

  .auth-trigger-avatar {
    width: 25px;
    height: 25px;
    border-radius: 8px;
  }

  .auth-trigger-name,
  .auth-trigger-wallet {
    max-width: 112px;
  }

  .auth-trigger-text {
    max-width: 74px;
  }
}

/* Touch synthesizes a :hover on tap that sticks until the next tap elsewhere; drop the lift so a tapped
   account/provider row doesn't stay raised. Colour and border hover states are harmless and stay.
   See the matching block at the end of styles.css. */
@media (hover: none) {
  .auth-trigger:hover,
  .auth-provider-action:hover:not(:disabled),
  .auth-menu-action:hover:not(:disabled) {
    transform: none;
  }
}