:root {
  --nma-r: var(--sf-r, 16px);
  --nma-r-sm: var(--sf-r-sm, 11px);
  --nma-r-xs: 9px;
  --nma-line: var(--sf-line, var(--line));
  --nma-hair: color-mix(in oklab, var(--line) 58%, transparent);
  --nma-soft: color-mix(in oklab, var(--surface2) 52%, transparent);
  --nma-tint: color-mix(in oklab, var(--green) 9%, transparent);
  --nma-ease: cubic-bezier(.2, .8, .3, 1);
  --nma-fs: calc(12.5px * var(--fz-nav, 1));
  --nma-fs-sm: calc(11px * var(--fz-nav, 1));
  --nma-fs-b: calc(13px * var(--fz-nav, 1));
}

.sf-head .sf-act-user { gap: 8px }
.sf-head .sf-act-user .av {
  width: 26px; height: 26px; border-radius: 9px;
  display: grid; place-items: center; flex: none; overflow: hidden;
  background: color-mix(in oklab, var(--green) 14%, var(--surface2));
  color: var(--green);
  font-family: inherit; font-weight: 800;
  font-size: calc(11.5px * var(--fz-nav, 1));
  border: 1px solid color-mix(in oklab, var(--green) 22%, transparent);
  box-shadow: none;
  transition: border-color .2s var(--nma-ease);
}
.sf-head .sf-act-user .av.has-img { background: var(--surface2); color: transparent; border-color: var(--nma-hair) }
.sf-head .sf-act-user .av img,
.nmacct .av img,
.sfdrawer .av img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}

.sf-acct-menu.nmacct {
  width: 274px; min-width: 274px; padding: 0;
  max-height: min(78vh, 540px); overflow-y: auto; overflow-x: hidden;
  border: 1px solid var(--nma-line);
  border-radius: var(--nma-r);
  background: var(--surface);
  box-shadow: none;
  font-family: inherit;
  font-size: var(--nma-fs);
  transform-origin: top var(--sf-origin, right);
}
.sf-acct-menu.nmacct * { font-family: inherit }
.sf-acct-menu.nmacct a { border-radius: 0; padding: 0; font: inherit; color: inherit }
.sf-acct-menu.nmacct a:hover { background: none }

.nmacct-grip { display: none }

.nmacct-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--nma-hair);
  background: var(--nma-soft);
}
.nmacct-av { flex: none; display: block }
.nmacct-av .av {
  width: 38px; height: 38px; border-radius: var(--nma-r-sm); overflow: hidden;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--green) 12%, var(--surface));
  color: var(--green);
  font-weight: 800;
  font-size: calc(15px * var(--fz-base, 1));
  border: 1px solid color-mix(in oklab, var(--green) 20%, transparent);
  box-shadow: none;
}
.nmacct-av .av.has-img { background: var(--surface); border-color: var(--nma-hair) }
.nmacct-av .av svg, .nmacct-av .av .nv-i { width: 19px; height: 19px; color: var(--green) }
.nmacct-id { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px }
.nmacct-id b {
  display: block; font-weight: 800; color: var(--ink);
  font-size: var(--nma-fs-b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nmacct-id small {
  display: block; color: var(--muted);
  font-size: var(--nma-fs-sm); line-height: 1.7;
  font-variant-numeric: tabular-nums;
}
.nmacct-tier {
  display: inline-flex; align-items: center; gap: 4px; width: fit-content;
  margin-top: 2px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--gold) 36%, transparent);
  background: color-mix(in oklab, var(--gold) 10%, transparent);
  color: color-mix(in oklab, var(--gold) 64%, var(--ink));
  font-weight: 700; font-size: calc(10px * var(--fz-nav, 1));
}
.nmacct-tier svg, .nmacct-tier .nv-i { width: 12px; height: 12px; color: var(--gold) }
.nmacct-x {
  display: none; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--nma-r-xs); cursor: pointer;
  border: 1px solid var(--nma-hair);
  background: var(--surface);
  color: var(--muted);
  box-shadow: none;
}
.nmacct-x svg { width: 16px; height: 16px }

.nmacct-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--nma-hair);
  border-bottom: 1px solid var(--nma-hair);
}
.nmacct-stat {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px; row-gap: 0;
  align-items: center; text-align: start;
  padding: 9px 11px !important; background: var(--surface);
  transition: background .16s var(--nma-ease);
}
.nmacct-stat .ic {
  grid-row: 1 / 3; display: grid; place-items: center;
  width: 20px; color: var(--muted);
}
.nmacct-stat .ic svg, .nmacct-stat .ic .nv-i { width: 17px; height: 17px }
.nmacct-stat b {
  grid-column: 2; font-weight: 800; color: var(--ink);
  font-size: var(--nma-fs);
  font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: plaintext;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.nmacct-stat small {
  grid-column: 2; color: var(--muted);
  font-size: calc(10.5px * var(--fz-nav, 1));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nmacct-stat:hover { background: var(--nma-tint) }
.nmacct-stat.is-wallet .ic { color: var(--gold) }
.nmacct-stat.is-points .ic { color: var(--green) }

.nmacct-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1px; padding: 6px;
}
.nmacct-grid a {
  display: flex !important; align-items: center; gap: 10px;
  padding: 8px 9px !important; min-width: 0;
  border-radius: var(--nma-r-xs) !important;
  border: 0; background: none;
  color: var(--ink) !important;
  font-weight: 700; font-size: var(--nma-fs);
  transition: background .14s var(--nma-ease), color .14s var(--nma-ease);
}
.nmacct-grid a .ic {
  display: grid; place-items: center; flex: none;
  width: 20px; height: 20px; border-radius: 0;
  background: none; color: var(--muted);
}
.nmacct-grid a .ic svg, .nmacct-grid a .ic .nv-i { width: 17px; height: 17px; opacity: 1 }
.nmacct-grid a .tx { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.nmacct-grid a:hover { background: var(--nma-tint) !important; color: var(--green) !important }
.nmacct-grid a:hover .ic { color: var(--green) }
.nmacct-grid a.wide { grid-column: 1 / -1 }
.nmacct-grid a.is-shop .ic { color: color-mix(in oklab, var(--green) 78%, var(--ink)) }
.nmacct-grid a.is-admin { color: var(--green) !important; font-weight: 800 }
.nmacct-grid a.is-admin .ic { color: var(--green) }
.nmacct-grid a .n,
.nmacct-grid a .nc-n {
  margin-inline-start: auto; flex: none;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
  font-weight: 700; font-size: calc(9.5px * var(--fz-badge, 1));
  box-shadow: none; border: 0; position: static; inset: auto;
}
.nmacct-grid a .n.is-zero { display: none }

.nmacct-sep { height: 1px; background: var(--nma-hair); margin: 5px 3px }

.nmacct-foot {
  display: flex; align-items: center; gap: 6px;
  padding: 6px; border-top: 1px solid var(--nma-hair);
  background: none;
}
.nmacct-foot .nmacct-out {
  display: flex !important; align-items: center; justify-content: flex-start; gap: 10px;
  flex: 1 1 auto; padding: 8px 9px !important;
  border-radius: var(--nma-r-xs) !important;
  border: 0; background: none;
  color: var(--red) !important;
  font-weight: 700; font-size: var(--nma-fs);
  box-shadow: none;
  transition: background .14s var(--nma-ease);
}
.nmacct-foot .nmacct-out:hover { background: color-mix(in oklab, var(--red) 10%, transparent) !important }
.nmacct-foot .nmacct-out svg { width: 17px; height: 17px }

.nmacct-guest { padding: 12px; text-align: start; border-bottom: 1px solid var(--nma-hair) }
.nmacct-guest .nmacct-gav { display: none }
.nmacct-guest b { display: block; font-weight: 800; color: var(--ink); font-size: var(--nma-fs-b) }
.nmacct-guest p {
  margin: 0 0 10px; color: var(--muted); line-height: 1.8;
  font-size: var(--nma-fs-sm);
}
.nmacct-guest .nmacct-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px }
.nmacct-guest .sfbtn {
  width: 100%; justify-content: center;
  height: auto; min-height: 0;
  padding: 8px 10px !important;
  border: 1px solid transparent;
  border-radius: var(--nma-r-sm) !important;
  font-weight: 700;
  font-size: calc(11.5px * var(--fz-btn, 1)) !important;
  box-shadow: none !important;
  transform: none !important;
}
.nmacct-guest .sfbtn:not(.ghost) {
  background: var(--pl-primary, var(--v9-accent, var(--green)));
  background-image: linear-gradient(135deg, var(--pl-primary, var(--v9-accent, var(--green))), var(--v9-accent2, var(--green2)));
  color: var(--v9-on, var(--pl-on-primary, #fff));
  border-color: transparent;
}
.nmacct-guest .sfbtn:not(.ghost) span,
.nmacct-guest .sfbtn:not(.ghost) svg { color: inherit }
.nmacct-guest .sfbtn:not(.ghost):hover {
  background-image: linear-gradient(135deg, var(--pl-primary-hover, var(--v9-accent2, var(--green2))), var(--pl-primary, var(--v9-accent, var(--green))));
}
.nmacct-guest .sfbtn.ghost {
  background: var(--surface); color: var(--ink);
  border-color: var(--nma-line);
}
.nmacct-guest .sfbtn.ghost:hover { color: var(--green); border-color: var(--green) }

.sf-acct-menu.nmacct::-webkit-scrollbar { width: 5px }
.sf-acct-menu.nmacct::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--ink) 18%, transparent); border-radius: 9px;
}

.nmacct-scrim {
  position: fixed; inset: 0; z-index: 150;
  background: color-mix(in oklab, var(--ink) 46%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity .26s var(--nma-ease), visibility .26s;
}
body.nmacct-open .nmacct-scrim { opacity: 1; visibility: visible }

@media (min-width: 901px) {
  .nmacct-scrim { display: none }
}

@media (max-width: 900px) {
  .sf-acct-menu.nmacct {
    display: block;
    position: fixed; inset-inline: 0; bottom: 0; top: auto;
    z-index: 160;
    width: auto; min-width: 0; max-width: none;
    max-height: 86vh; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--nma-r) var(--nma-r) 0 0;
    border-inline: 0; border-bottom: 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    opacity: 1; visibility: hidden;
    transform: translateY(103%);
    transform-origin: bottom center;
    box-shadow: none;
    transition: transform .32s var(--nma-ease), visibility .32s var(--nma-ease);
  }
  .sf-acct.open .sf-acct-menu.nmacct,
  .sf-acct-menu.nmacct.is-open { visibility: visible; transform: translateY(0) }

  .nmacct-grip {
    display: block; width: 40px; height: 4px; margin: 8px auto 2px;
    border-radius: 99px; background: color-mix(in oklab, var(--ink) 18%, transparent);
  }
  .nmacct-x { display: grid }
  .nmacct-head { padding: 12px 14px; border-radius: 0 }
  .nmacct-av .av { width: 42px; height: 42px; font-size: calc(16px * var(--fz-base, 1)) }
  .nmacct-id b { font-size: calc(13.5px * var(--fz-nav, 1)) }
  .nmacct-stat { padding: 11px 13px !important }
  .nmacct-grid { padding: 7px 8px }
  .nmacct-grid a { padding: 10px 10px !important }
  .nmacct-foot { padding: 7px 8px calc(9px + env(safe-area-inset-bottom, 0px)) }
  .nmacct-guest { padding: 13px 14px }
}

@media (max-width: 360px) {
  .nmacct-guest .nmacct-btns { grid-template-columns: minmax(0, 1fr) }
  .nmacct-stat small { font-size: calc(10px * var(--fz-nav, 1)) }
}

@media (prefers-reduced-motion: reduce) {
  .sf-acct-menu.nmacct, .nmacct-scrim, .nmacct-grid a, .nmacct-stat { transition: none }
}

html[data-theme="dark"] .sf-acct-menu.nmacct {
  background: color-mix(in oklab, var(--surface) 96%, var(--bg));
  border-color: color-mix(in oklab, var(--line) 78%, transparent);
}
html[data-theme="dark"] .nmacct-head {
  background: color-mix(in oklab, var(--surface2) 62%, var(--bg));
}
html[data-theme="dark"] .nmacct-stat { background: color-mix(in oklab, var(--surface) 96%, var(--bg)) }
html[data-theme="dark"] .nmacct-stat:hover { background: var(--nma-tint) }

.sfdrawer-me {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; margin-bottom: 8px;
  border-radius: var(--nma-r-sm);
  border: 1px solid var(--nma-hair);
  background: var(--nma-soft);
  color: var(--ink);
  box-shadow: none;
}
.sfdrawer-me .av {
  width: 38px; height: 38px; border-radius: var(--nma-r-sm); flex: none; overflow: hidden;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--green) 13%, var(--surface));
  color: var(--green);
  font-weight: 800;
  font-size: calc(15px * var(--fz-base, 1));
}
.sfdrawer-me .tx { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px }
.sfdrawer-me .tx b {
  font-weight: 800; font-size: var(--nma-fs-b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sfdrawer-me .tx small { color: var(--muted); font-size: var(--nma-fs-sm) }
.sfdrawer-me > svg { width: 16px; height: 16px; flex: none; opacity: .45 }
html[dir="rtl"] .sfdrawer-me > svg { transform: scaleX(1) }

.sf-acct-menu.nmacct.is-portal {
  position: fixed; inset-inline: 0; bottom: 0; top: auto;
  z-index: 160; width: auto; min-width: 0; max-width: none;
}
@media (min-width: 901px) {
  .sf-acct-menu.nmacct.is-portal {
    position: fixed; inset-inline: auto 0; bottom: auto; top: 0;
    opacity: 0; visibility: hidden; pointer-events: none;
  }
}