/* Mise · account area styles. Prefix every rule with .v-account. Owned by the Account agent. */

/* ==========================================================================
   Shared bits
   ========================================================================== */
.v-account .acct-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.v-account .acct-aside { font-size: 13px; font-weight: 600; }
.v-account .acct-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v-account .field .error .link { display: inline; font-weight: 600; }
.v-account .error > span { min-width: 0; }
.v-account .error .icon { align-self: flex-start; margin-top: 1px; }

.v-account .input[readonly] { background: var(--surface-3); color: var(--ink-2); border-color: var(--line); cursor: default; }
.v-account .input[readonly]:hover { border-color: var(--line); }

/* password: show/hide + rules + strength */
.v-account .acct-input-wrap { position: relative; }
.v-account .acct-input-wrap .input { padding-right: 48px; }
.v-account .acct-showpw {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 36px; height: 34px; display: grid; place-items: center;
  border-radius: 6px; color: var(--muted); transition: color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.v-account .acct-showpw:hover { color: var(--ink); background: var(--surface-3); }
.v-account .acct-pwmeta { display: grid; gap: 8px; margin-top: 2px; }
.v-account .acct-pwmeta[data-quiet] { display: none; }
.v-account .acct-meter { display: flex; align-items: center; gap: 12px; }
.v-account .acct-meter__bars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.v-account .acct-meter__bars i { height: 4px; border-radius: 2px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--d-base) var(--ease-out); }
.v-account .acct-meter__word { font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 92px; text-align: right; }
.v-account .acct-meter[data-score="1"] .acct-meter__bars i:nth-child(-n+1) { background: var(--danger); box-shadow: none; }
.v-account .acct-meter[data-score="2"] .acct-meter__bars i:nth-child(-n+2) { background: var(--warn); box-shadow: none; }
.v-account .acct-meter[data-score="3"] .acct-meter__bars i:nth-child(-n+3) { background: var(--primary); box-shadow: none; }
.v-account .acct-meter[data-score="4"] .acct-meter__bars i { background: var(--success); box-shadow: none; }
.v-account .acct-meter[data-score="1"] .acct-meter__word { color: var(--danger); }
.v-account .acct-meter[data-score="2"] .acct-meter__word { color: var(--warn-ink); }
.v-account .acct-meter[data-score="3"] .acct-meter__word { color: var(--primary); }
.v-account .acct-meter[data-score="4"] .acct-meter__word { color: var(--success); }
.v-account .acct-rules { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.v-account .acct-rules li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); transition: color var(--d-base) var(--ease-out); }
.v-account .acct-rules li.is-met { color: var(--ink-2); }

/* inline expanding forms */
.v-account .acct-inline { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); box-shadow: var(--inset-top); text-align: left; }
.v-account .acct-inline[hidden] { display: none; }
.v-account .acct-inline__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.v-account .acct-inline--card { margin-top: 14px; }

/* busy spinner */
.v-account .acct-spin, .layer .acct-spin {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; flex: none;
  animation: acct-spin 700ms linear infinite;
}
@keyframes acct-spin { to { transform: rotate(360deg); } }
.v-account .btn.is-busy { opacity: .85; }
.v-account .btn.is-waiting { color: var(--muted); opacity: 1; }
.v-account .btn.is-waiting .num { font-size: 13px; }

/* ==========================================================================
   Auth pages
   ========================================================================== */
.v-account.acct-auth { display: grid; gap: 22px; }
.v-account .acct-band { display: none; }
.v-account .acct-head { display: grid; gap: 8px; }
.v-account .acct-title { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.12; letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }
.v-account .acct-lede { color: var(--muted); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.v-account .acct-lede b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.v-account .acct-form { display: grid; gap: 18px; }
.v-account .acct-form > .btn--lg { margin-top: 4px; }
.v-account .acct-alert-slot:empty { display: none; }
.v-account .acct-alert { align-items: flex-start; font-size: 14px; line-height: 1.5; }
.v-account .acct-alert > .icon { margin-top: 2px; }
.v-account .acct-alert strong { font-weight: 600; color: var(--ink); }
.v-account .acct-alert .link { display: inline; }
.v-account .acct-alert__more { display: block; margin-top: 4px; color: var(--ink-2); font-weight: 500; }
.v-account .acct-note .link { flex: none; font-size: 14px; }
.v-account .acct-keep { font-size: 14.5px; }
.v-account .acct-keep .hint { display: block; margin-top: 2px; }
.v-account .acct-alt { text-align: center; font-size: 14px; color: var(--muted); }
.v-account .acct-alt--stack { display: grid; gap: 10px; justify-items: center; }
.v-account .acct-alt--stack .acct-inline { width: 100%; }
.v-account .acct-invite-toggle .icon { color: var(--primary); }
.v-account .acct-fine { text-align: center; font-size: 12.5px; color: var(--muted); }

/* signup extras */
.v-account .acct-joining {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start; max-width: 100%; padding: 5px 14px 5px 5px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; color: var(--ink-2); box-shadow: var(--shadow-card);
}
.v-account .acct-joining b { color: var(--ink); font-weight: 600; }
.v-account .acct-more { border-top: 1px solid var(--line); padding-top: 14px; }
.v-account .acct-more summary { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; border-radius: 4px; }
.v-account .acct-more summary::-webkit-details-marker { display: none; }
.v-account .acct-more summary:hover { color: var(--ink); }
.v-account .acct-more summary .icon { color: var(--muted); transition: transform var(--d-base) var(--ease-out); }
.v-account .acct-more[open] summary .icon { transform: rotate(90deg); }
.v-account .acct-more[open] summary { margin-bottom: 12px; }
.v-account .acct-consents { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.v-account .acct-consents .check { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.v-account .acct-consents .check .link { display: inline; }
.v-account .acct-check--quiet { color: var(--muted) !important; }
.v-account .check input { accent-color: var(--primary); }

/* sign-in: example accounts */
.v-account .acct-example { display: grid; gap: 10px; padding-top: 18px; border-top: 1px dashed var(--line-strong); }
.v-account .acct-example__k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.v-account .acct-example__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v-account .acct-example__btn {
  display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface); text-align: left;
  transition: border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.v-account .acct-example__btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.v-account .acct-example__btn b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.v-account .acct-example__btn span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* centred status pages (verify, sent, expired, done) */
.v-account.acct-centre .acct-head { text-align: center; justify-items: center; }
.v-account.acct-centre .acct-lede { max-width: 38ch; }
.v-account .acct-badge { position: relative; justify-self: center; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: var(--muted); }
.v-account .acct-badge::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--surface-3); }
.v-account .acct-badge > * { grid-area: 1 / 1; position: relative; }
.v-account .acct-badge__icon { display: grid; place-items: center; }
.v-account .acct-badge--primary { color: var(--primary); }
.v-account .acct-badge--primary::before { background: var(--primary-soft); }
.v-account .acct-badge--ok { color: var(--primary); }
.v-account .acct-badge--ok::before { background: var(--primary-soft); }
.v-account .acct-badge--warn { color: var(--warn); }
.v-account .acct-badge--warn::before { background: var(--warn-soft); }
.v-account .acct-badge .ring { color: inherit; }
.v-account .acct-actions { display: grid; gap: 10px; }
.v-account .acct-actions__row { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
.v-account .acct-done-line { justify-self: center; margin-bottom: 6px; font-size: 13.5px; color: var(--ink-2); }
.v-account .acct-mailapps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v-account .acct-mailapps .icon { color: var(--muted); }
.v-account .acct-resend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; }
.v-account .acct-change { display: grid; gap: 12px; justify-items: center; }
.v-account .acct-change .acct-inline { width: 100%; }
.v-account .acct-change .link { display: inline; }
.v-account .acct-email { overflow-wrap: anywhere; }
.v-account .acct-clicked {
  display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-card);
  font-size: 13.5px; color: var(--muted);
}
.v-account .acct-clicked p { flex: 1; min-width: 0; }
.v-account .acct-clicked > .icon { color: var(--primary); }

/* invite */
.v-account .acct-inviter { display: flex; align-items: center; gap: 12px; }
.v-account .acct-inviter__venue { display: grid; line-height: 1.35; }
.v-account .acct-inviter__venue b { font-weight: 600; color: var(--ink); }
.v-account .acct-inviter__venue span { font-size: 13px; color: var(--muted); }
.v-account .acct-means { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card), var(--inset-top); }
.v-account .acct-means__k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.v-account .acct-means ul { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.v-account .acct-means li { display: flex; gap: 12px; align-items: flex-start; }
.v-account .acct-means li > span:last-child { display: grid; gap: 2px; min-width: 0; }
.v-account .acct-means b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.v-account .acct-means li > span:last-child > span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.v-account .acct-means__icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }

/* ==========================================================================
   Welcome (focus layout)
   ========================================================================== */
.v-account.acct-welcome { width: 100%; max-width: 760px; margin: 0 auto; padding: 48px 24px 64px; display: grid; gap: 28px; }
.v-account.acct-welcome .acct-head { gap: 10px; }
.v-account.acct-welcome .acct-title { font-size: 34px; }
.v-account.acct-welcome .eyebrow { color: var(--primary); }
.v-account.acct-fslot { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.v-account .acct-fslot__k { font-size: 13.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.v-account .acct-roles { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.v-account .acct-role > span, .v-account .acct-board .radio-card > span { display: grid; gap: 2px; min-width: 0; }
.v-account .acct-role b, .v-account .acct-board b { font-size: 15px; font-weight: 600; color: var(--ink); }
.v-account .acct-role > span > span, .v-account .acct-board .radio-card > span > span { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.v-account .radio-card input { accent-color: var(--primary); }
.v-account .acct-welcome-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.v-account .acct-board { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.v-account .acct-board legend { padding: 0; margin-bottom: 8px; }
.v-account .acct-board .radio-card { padding: 14px; }
.v-account .acct-prev { padding: 16px; display: grid; gap: 14px; position: sticky; top: 80px; }
.v-account .acct-prev__k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.v-account .acct-prev__board { display: grid; gap: 6px; }
.v-account .acct-prev__board[hidden] { display: none; }
.v-account .acct-prev__h { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.v-account .acct-prev ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v-account .acct-prev__row { display: grid; grid-template-columns: 30px 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-ctl); font-size: 13.5px; color: var(--ink-2); }
.v-account .acct-prev__row.is-you { background: var(--copper-soft); box-shadow: inset 2px 0 0 var(--copper); }
.v-account .acct-prev__row.is-you .acct-prev__name { color: var(--copper-ink); font-weight: 600; }
.v-account .acct-prev__rank { color: var(--muted); font-size: 13px; text-align: right; }
.v-account .acct-prev__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-account .acct-prev__pts { font-size: 13px; }
.v-account .acct-prev__off { display: flex; align-items: center; gap: 6px; }
.v-account .acct-prev__off[hidden] { display: none; }
.v-account .acct-first { display: grid; grid-template-columns: 240px minmax(0, 1fr); overflow: hidden; color: inherit; min-height: 180px; }
.v-account .acct-first__img { height: 100%; min-height: 180px; border-radius: 0; }
.v-account .acct-first__body { display: grid; align-content: center; gap: 8px; padding: 22px 24px; }
.v-account .acct-first__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.v-account .acct-first__title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); }
.v-account .acct-first:hover .acct-first__title { color: var(--primary); }
.v-account .acct-wfoot { border-top: 1px solid var(--line); }
.v-account .acct-wfoot__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; }
.v-account .acct-wfoot__end { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* ==========================================================================
   Settings
   ========================================================================== */
.v-account .acct-set { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 36px; align-items: start; }
.v-account .acct-snav { position: sticky; top: calc(var(--topbar-h) + 16px); min-width: 0; }
.v-account .acct-snav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v-account .acct-snav__link {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 500; color: var(--ink-2);
  transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.v-account .acct-snav__link .icon { color: var(--muted); }
.v-account .acct-snav__link:hover { background: var(--surface-3); color: var(--ink); }
.v-account .acct-snav__link[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line), var(--shadow-card); }
.v-account .acct-snav__link[aria-current="page"] .icon { color: var(--primary); }
.v-account .acct-set__body { display: grid; gap: 20px; max-width: 760px; min-width: 0; }
.v-account .acct-card { overflow: hidden; }
.v-account .acct-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 0; }
.v-account .acct-card__head > div { min-width: 0; }
.v-account .acct-card__head > .btn, .v-account .acct-card__head > .pill { flex: none; }
.v-account .acct-card__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; color: var(--ink); }
.v-account .acct-card__desc { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 60ch; }
.v-account .acct-card__body { padding: 16px 22px 20px; }
.v-account .acct-card__foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface-2); }
.v-account .acct-card__foot > :first-child:not(.btn) { margin-right: auto; }
.v-account .acct-card--danger { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.v-account .acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 0; }
.v-account .acct-row + .acct-row { border-top: 1px solid var(--line); }
.v-account .acct-card__body > .acct-row:first-child, .v-account .acct-card__body > form > .acct-row:first-child, .v-account .acct-card__body > div > .acct-row:first-child { padding-top: 2px; }
.v-account .acct-card__body > .acct-row:last-child, .v-account .acct-card__body > form > .acct-row:last-child, .v-account .acct-card__body > div > .acct-row:last-child { padding-bottom: 0; }
.v-account .acct-row__txt { min-width: 0; flex: 1; }
.v-account .acct-row__k { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.v-account .acct-row__d { margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 56ch; }
.v-account .acct-row__ctl { flex: none; display: flex; align-items: center; }
.v-account .acct-btnrow { display: flex; flex-wrap: wrap; gap: 6px; }
.v-account .acct-danger-txt { color: var(--danger); }
.v-account .acct-danger-txt:hover { color: var(--danger); background: var(--danger-soft); }
.v-account .acct-btn-danger { --btn-fg: var(--danger); --btn-bd: color-mix(in srgb, var(--danger) 40%, var(--line-strong)); --btn-bg: transparent; }
.v-account .acct-btn-danger:hover { --btn-bg: var(--danger-soft); border-color: var(--danger); }
.v-account .acct-stform { display: grid; gap: 16px; }
.v-account .acct-who { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.v-account .acct-who__name { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.v-account .acct-email-v { overflow-wrap: anywhere; }
.v-account .acct-pending { margin-top: 14px; align-items: flex-start; }
.v-account .acct-pending > .icon { margin-top: 2px; }
.v-account .acct-pending b { overflow-wrap: anywhere; }
.v-account .acct-pending__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.v-account .acct-kv { grid-template-columns: 140px minmax(0, 1fr); }
.v-account .acct-kv dd { display: flex; align-items: center; gap: 6px; min-width: 0; }
.v-account .acct-lock { color: var(--muted); }
.v-account .acct-welcome-grid--settings { grid-template-columns: minmax(0, 1fr) 260px; }
.v-account .acct-welcome-grid--settings .acct-prev { position: static; }

/* sessions */
.v-account .acct-sessions { list-style: none; margin: 0; padding: 0; }
.v-account .acct-session { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.v-account .acct-session + .acct-session { border-top: 1px solid var(--line); }
.v-account .acct-session:first-child { padding-top: 2px; }
.v-account .acct-session:last-child { padding-bottom: 0; }
.v-account .acct-session__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--surface-3); color: var(--ink-2); }
.v-account .acct-session__txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.v-account .acct-session__txt b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.v-account .acct-session__txt .muted { flex-basis: 100%; }

/* email preferences */
.v-account .acct-sendto { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--muted); }
.v-account .acct-sendto b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.v-account .acct-svc { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.v-account .acct-svc li { display: flex; gap: 12px; align-items: flex-start; }
.v-account .acct-svc li > span { display: grid; gap: 1px; min-width: 0; }
.v-account .acct-svc b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.v-account .acct-svc__tick { width: 22px; height: 22px; padding: 3px; flex: none; border-radius: 50%; background: var(--primary-soft); color: var(--primary); stroke-width: 2; margin-top: 1px; }
.v-account .acct-switch input:disabled + .switch__track { opacity: .55; }
.v-account .acct-switch__txt { display: none; font-size: 13px; color: var(--ink-2); font-weight: 500; }

/* notifications grid */
.v-account .acct-ntable__head, .v-account .acct-ntable__row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px; align-items: center; gap: 12px; }
.v-account .acct-ntable__head { padding-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.v-account .acct-ntable__head span:not(:first-child) { text-align: center; }
.v-account .acct-ntable__row { padding: 14px 0; border-top: 1px solid var(--line); }
.v-account .acct-ntable__row:last-child { padding-bottom: 0; }
.v-account .acct-ntable__txt { display: grid; gap: 1px; min-width: 0; }
.v-account .acct-ntable__txt b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.v-account .acct-ntable__cell { display: flex; justify-content: center; }
.v-account .acct-card__head .autosave { flex: none; font-size: 13px; }

/* ==========================================================================
   Modals (2FA, recovery codes, delete) — the panel carries .v-account
   ========================================================================== */
.v-account.layer__panel.acct-2fa { width: min(600px, 100%); }
.v-account .acct-mstep { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.v-account .acct-scan { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 22px; align-items: center; }
.v-account .acct-qr { width: 184px; height: 184px; border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--line); display: block; }
.v-account .acct-qr__bg { fill: var(--on-image); }
.v-account .acct-qr__fg { fill: var(--ink-panel); }
.v-account .acct-scan__txt { display: grid; gap: 10px; min-width: 0; }
.v-account .acct-steps-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.v-account .acct-key { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.v-account .acct-key code { font-size: 15px; letter-spacing: .08em; padding: 6px 10px; border-radius: 6px; background: var(--surface-3); color: var(--ink); }
.v-account .acct-mfoot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 22px -22px -20px; padding: 14px 22px 18px; border-top: 1px solid var(--line); }
.v-account .acct-otp .input { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: .24em; font-variant-numeric: tabular-nums; max-width: 220px; }
.v-account form[data-form="otp"] { display: grid; gap: 14px; }
.v-account .acct-codes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v-account .acct-codes li { padding: 8px 12px; border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--line); font-size: 15px; letter-spacing: .06em; text-align: center; color: var(--ink); }
.v-account .acct-codetools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.v-account .acct-saved { margin-top: 16px; font-size: 14.5px; }
.v-account .acct-del { display: grid; gap: 12px; color: var(--ink-2); }
.v-account .acct-del__list { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--muted); font-size: 14px; }
.v-account .acct-del__keep { align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.v-account .acct-del__keep > .icon { margin-top: 2px; }
.v-account .acct-del__keep b { color: var(--ink); }
.v-account .acct-del__field { margin-top: 4px; }
.v-account .acct-del__field .input { font-family: var(--font-display); letter-spacing: .08em; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .v-account .acct-set { grid-template-columns: 196px minmax(0, 1fr); gap: 28px; }
  .v-account .acct-welcome-grid--settings { grid-template-columns: minmax(0, 1fr); }
  .v-account .acct-welcome-grid--settings .acct-prev { max-width: 420px; }
}
@media (max-width: 860px) {
  /* auth: a slim image band above the form */
  .v-account .acct-band { display: block; position: relative; height: 112px; border-radius: 14px; overflow: hidden; background: var(--ink-panel); }
  .v-account .acct-band .media { position: absolute; inset: 0; border-radius: 0; }
  .v-account .acct-band::after { content: ''; position: absolute; inset: 0; background: var(--image-fade); pointer-events: none; }
  .v-account .acct-band__line { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 1; color: var(--on-image); font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
  .v-account.acct-auth { gap: 20px; }
  .v-account .acct-title { font-size: 27px; }

  /* the primary stays in thumb reach: a sticky footer pinned to the bottom of the screen */
  .v-account.acct-welcome { display: flex; flex-direction: column; min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); padding: 28px 16px 0; gap: 22px; }
  .v-account .acct-wfoot {
    position: sticky; bottom: 0; z-index: 20; margin: auto -16px 0;
    background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .v-account .acct-wfoot__in { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .v-account.acct-welcome .acct-title { font-size: 27px; }
  .v-account .acct-welcome-grid { grid-template-columns: minmax(0, 1fr); }
  .v-account .acct-prev { position: static; }
  .v-account .acct-first { grid-template-columns: minmax(0, 1fr); }
  .v-account .acct-first__img { height: 150px; min-height: 0; }
  .v-account .acct-first__body { padding: 18px; }
  .v-account .acct-fslot__k { display: none; }

  .v-account .acct-set { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .v-account .acct-snav { position: relative; top: 0; margin: 0 -16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
  .v-account .acct-snav::-webkit-scrollbar { display: none; }
  .v-account .acct-snav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .v-account .acct-snav { scroll-snap-type: x proximity; scroll-padding-inline: 16px; }
  .v-account .acct-snav ul { display: flex; gap: 2px; padding: 0 16px 0 12px; width: max-content; }
  .v-account .acct-snav li { scroll-snap-align: start; }
  .v-account .acct-snav__link { padding: 10px 10px 12px; border-radius: 0; white-space: nowrap; font-size: 14px; }
  .v-account .acct-snav__link .icon { display: none; }
  .v-account .acct-snav__link:hover { background: transparent; }
  .v-account .acct-snav__link[aria-current="page"] { background: transparent; box-shadow: none; }
  .v-account .acct-snav__link[aria-current="page"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--primary); }
  .v-account .acct-set__body { gap: 16px; }
  .v-account .acct-card__head { padding: 18px 16px 0; flex-wrap: wrap; }
  .v-account .acct-card__body { padding: 14px 16px 18px; }
  .v-account .acct-card__foot { padding: 12px 16px; }
  .v-account .acct-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .v-account .acct-kv dd + dt { margin-top: 10px; }

  .v-account .acct-ntable__head { display: none; }
  .v-account .acct-ntable__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
  .v-account .acct-ntable__txt { flex: 1 1 100%; }
  .v-account .acct-ntable__row:first-of-type { border-top: 0; padding-top: 2px; }
  .v-account .acct-ntable__cell { justify-content: flex-start; }
  .v-account .acct-switch__txt { display: inline; }

  .v-account .acct-scan { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; }
  .v-account .acct-scan__txt { justify-self: stretch; }
  .v-account .acct-qr { width: 168px; height: 168px; }
  .v-account .acct-mfoot .btn { flex: 1; }
}
@media (max-width: 560px) {
  .v-account .acct-roles { grid-template-columns: minmax(0, 1fr); }
  .v-account .acct-row { flex-wrap: wrap; }
  .v-account .acct-row__txt { flex: 1 1 200px; }
  .v-account .acct-row:has(.btn) .acct-row__txt { flex-basis: 100%; }
  .v-account .acct-wfoot__end { flex: 1; flex-wrap: nowrap; }
  .v-account .acct-wfoot__end .btn--quiet { display: none; }
  .v-account .acct-wfoot__end .btn--primary { flex: 1; }
  .v-account .acct-example__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v-account .acct-clicked { flex-wrap: wrap; }
}
.v-account .acct-nowrap { white-space: nowrap; }