/* ValueOddsAPI accounts: log in, sign-up additions, the customer dashboard (/account/) and /admin/.
   Built on the light design tokens (light.css on the new pages, theme.css on the sign-up pages), so every
   class here is prefixed acc- and works on both. Dropdowns, popovers and fold-outs reuse ui.css (.vo-pop,
   .vo-dd, <details>) and its motion contract: open 220ms cubic-bezier(.2,0,0,1), close 140ms. */
:root {
  --acc-ease: cubic-bezier(0.2, 0, 0, 1);
  --acc-fast: 140ms;
  --acc-normal: 220ms;
  --acc-ring: 0 0 0 3px rgb(10 127 88 / 0.18);
  --acc-ring-error: 0 0 0 3px rgb(194 48 48 / 0.16);
  --acc-shadow-card: 0 1px 2px rgb(11 12 14 / 0.04), 0 18px 44px -22px rgb(11 12 14 / 0.22);
  --acc-shadow-pop: 0 8px 28px rgb(32 35 43 / 0.10);
  --acc-row-hover: rgb(32 35 43 / 0.045);
  --acc-warn: #8a5a00;
  --acc-warn-tint: #fdf3d8;
  --acc-negative-tint: #fbeaea;
  --acc-r-sm: var(--radius-sm, 10px);
  --acc-r-md: var(--radius-md, 12px);
  --acc-r-lg: var(--radius-lg, 16px);
  --acc-r-xl: var(--radius-xl, 20px);
}

/* The sign-up pages use Tailwind's preflight, where [hidden] is not !important: keep hidden parts hidden. */
[class*="acc-"][hidden] { display: none !important; }

.acc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.acc-icon { width: 18px; height: 18px; flex: none; }
.acc-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ================================================================ Auth layout */
.acc-auth { max-width: 1200px; margin: 0 auto; padding: 32px 16px 16px; display: grid; gap: 32px; align-items: start; color: var(--ink); }
.acc-auth-main { display: flex; justify-content: center; min-width: 0; }
@media (min-width: 640px) { .acc-auth { padding: 48px 24px 24px; } }
@media (min-width: 1024px) {
  .acc-auth { min-height: calc(100vh - 96px); }
  .acc-auth.has-showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
  .acc-auth.has-showcase .acc-auth-main { align-items: center; }
}

/* ================================================================ Card */
.acc-card {
  width: 100%; max-width: 400px; min-width: 0; padding: 28px 22px 24px;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--acc-r-xl);
  box-shadow: var(--acc-shadow-card);
}
@media (min-width: 420px) { .acc-card { padding: 36px 32px 30px; } }
.acc-wordmark { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; font: 700 17px/1 var(--font-sans); color: var(--ink); text-decoration: none; border-radius: 8px; }
.acc-wordmark:hover { color: var(--ink); }
.acc-wordmark img { width: 28px; height: 28px; }
.acc-wordmark b { color: var(--mint-ink); }
.acc-views { position: relative; }
.acc-view { display: flex; flex-direction: column; gap: 20px; }
.acc-view:focus { outline: none; }
.acc-title { margin: 0; font: 700 24px/30px var(--font-sans); letter-spacing: -0.5px; color: var(--ink); }
.acc-title:focus { outline: none; }
.acc-title:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 4px; border-radius: 4px; }
.acc-sub { margin: -12px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.acc-sub strong, .acc-copy strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.acc-copy { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.acc-small { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-subtle); }
.acc-foot { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); text-align: center; }
.acc-foot a, .acc-link { color: var(--mint-ink); font-weight: 600; text-decoration: none; border-radius: 4px; }
.acc-foot a:hover, .acc-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* State block (sent / done / error) */
.acc-state-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--mint-tint); color: var(--mint-ink);
}
.acc-state-icon svg { width: 24px; height: 24px; }
.acc-state-icon.is-error { background: var(--acc-negative-tint); color: var(--negative); }
.acc-state-icon.is-neutral { background: var(--surface-sunken); color: var(--ink-muted); }
.acc-state-icon.is-pending svg { animation: accSpin 1s linear infinite; }

/* ================================================================ Forms */
.acc-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.acc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acc-field > label, .acc-label { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.acc-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.acc-label-row a { font: 500 13px/20px var(--font-sans); color: var(--mint-ink); text-decoration: none; padding: 2px 0; }
.acc-label-row a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.acc-input {
  display: block; width: 100%; min-height: 48px; padding: 0 14px; margin: 0;
  border: 1px solid var(--border-strong); border-radius: var(--acc-r-md); background: var(--surface-card);
  color: var(--ink); font: 400 16px/24px var(--font-sans);
  transition: border-color var(--acc-fast) var(--acc-ease), box-shadow var(--acc-fast) var(--acc-ease);
}
textarea.acc-input { min-height: 96px; padding: 12px 14px; resize: vertical; }
.acc-input::placeholder { color: var(--ink-subtle); }
.acc-input:hover { border-color: var(--ink-muted); }
.acc-input:focus { outline: none; border-color: var(--mint-ink); box-shadow: var(--acc-ring); }
.acc-input[aria-invalid="true"] { border-color: var(--negative); }
.acc-input[aria-invalid="true"]:focus { box-shadow: var(--acc-ring-error); }
.acc-input:disabled { background: var(--surface-sunken); color: var(--ink-muted); cursor: not-allowed; }
.acc-input.is-mono { font-family: var(--font-mono); letter-spacing: 0.5px; }
.acc-field-error { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 18px; color: var(--negative); }
.acc-field-error svg { width: 14px; height: 14px; margin-top: 2px; flex: none; }
.acc-hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-subtle); }

/* Password with show/hide */
.acc-input-wrap { position: relative; display: block; }
.acc-input-wrap .acc-input { padding-right: 52px; }
.acc-reveal {
  position: absolute; top: 2px; right: 2px; bottom: 2px; width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-muted); cursor: pointer;
  transition: color var(--acc-fast) var(--acc-ease), background-color var(--acc-fast) var(--acc-ease);
}
.acc-reveal:hover { color: var(--ink); background: var(--surface-sunken); }
.acc-reveal:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: -2px; }
.acc-reveal svg { width: 18px; height: 18px; }
.acc-reveal .i-hide, .acc-reveal[aria-pressed="true"] .i-show { display: none; }
.acc-reveal[aria-pressed="true"] .i-hide { display: block; }
.acc-caps { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; color: var(--acc-warn); }
.acc-caps svg { width: 14px; height: 14px; }

/* Strength hint */
.acc-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 2px; }
.acc-meter i { display: block; height: 4px; border-radius: 9999px; background: var(--surface-sunken); transition: background-color var(--acc-normal) var(--acc-ease); }
.acc-meter[data-score="1"] i:nth-child(-n+1) { background: var(--negative); }
.acc-meter[data-score="2"] i:nth-child(-n+2) { background: #c98a12; }
.acc-meter[data-score="3"] i:nth-child(-n+3) { background: var(--mint-ink); }
.acc-meter[data-score="4"] i { background: var(--mint-ink); }
.acc-strength { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-subtle); }
.acc-strength b { font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.acc-strength[data-score="1"] b, .acc-strength[data-score="0"].is-set b { color: var(--negative); }
.acc-strength[data-score="2"] b { color: var(--acc-warn); }
.acc-strength[data-score="3"] b, .acc-strength[data-score="4"] b { color: var(--mint-ink); }

/* Checkbox row */
.acc-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; line-height: 20px; color: var(--ink); cursor: pointer; }
.acc-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--mint-ink); cursor: pointer; flex: none; }

/* ================================================================ Buttons */
.acc-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--acc-r-md);
  font: 600 15px/20px var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--acc-fast) var(--acc-ease), border-color var(--acc-fast) var(--acc-ease),
              color var(--acc-fast) var(--acc-ease), box-shadow var(--acc-normal) var(--acc-ease), transform 200ms ease-out, opacity var(--acc-fast);
}
.acc-btn svg { width: 18px; height: 18px; flex: none; }
.acc-btn-sm { min-height: 44px; padding: 0 14px; font-size: 14px; }
.acc-btn-block { width: 100%; }
.acc-btn-primary { background: var(--mint); color: var(--on-mint, #0b0c0e); }
.acc-btn-primary:hover { color: var(--on-mint, #0b0c0e); box-shadow: 0 10px 30px -8px rgb(71 250 190 / 0.55); transform: translateY(-1px); }
.acc-btn-secondary { background: var(--surface-card); color: var(--ink); border-color: var(--border-strong); }
.acc-btn-secondary:hover { color: var(--ink); background: var(--surface-sunken); }
.acc-btn-quiet { background: transparent; color: var(--ink-muted); }
.acc-btn-quiet:hover { color: var(--ink); background: var(--surface-sunken); }
.acc-btn-danger { background: var(--negative); color: #fff; }
.acc-btn-danger:hover { color: #fff; background: #a82626; }
.acc-btn-danger-outline { background: var(--surface-card); color: var(--negative); border-color: rgb(194 48 48 / 0.45); }
.acc-btn-danger-outline:hover { color: var(--negative); background: var(--acc-negative-tint); }
.acc-btn:active { transform: translateY(0); }
.acc-btn:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 2px; }
.acc-btn:disabled, .acc-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.acc-btn[aria-busy="true"] { cursor: progress; }
.acc-btn[aria-busy="true"]:disabled { opacity: 0.8; }
.acc-btn[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: accSpin 0.7s linear infinite; flex: none; }
.acc-btn[aria-busy="true"] > svg { display: none; }
.acc-btn.is-done { background: var(--mint-tint); color: var(--mint-ink); border-color: transparent; }
.acc-row-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.acc-row-actions > .acc-btn { flex: 1 1 auto; }
.acc-textbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--mint-ink); font: 600 14px/20px var(--font-sans); cursor: pointer; border-radius: 8px; text-decoration: none; }
.acc-textbtn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.acc-textbtn:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 2px; }
.acc-textbtn:disabled { color: var(--ink-subtle); cursor: default; text-decoration: none; }
.acc-textbtn svg { width: 16px; height: 16px; }
.acc-back { align-self: flex-start; margin: -8px 0 -4px -4px; color: var(--ink-muted); font-weight: 500; }
.acc-back:hover { color: var(--ink); text-decoration: none; }

.acc-or { display: flex; align-items: center; gap: 12px; font: 500 12px/16px var(--font-mono); letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-subtle); }
.acc-or::before, .acc-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ================================================================ Alerts, toast */
.acc-alert {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--acc-r-md);
  background: var(--acc-negative-tint); color: #8f1f1f; font-size: 14px; line-height: 20px;
  animation: accRise var(--acc-normal) var(--acc-ease);
}
.acc-alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.acc-alert[data-tone="info"] { background: var(--surface-sunken); color: var(--ink); }
.acc-alert[data-tone="success"] { background: var(--mint-tint); color: var(--mint-ink); }
.acc-alert[data-tone="warn"] { background: var(--acc-warn-tint); color: var(--acc-warn); }
.acc-alert:empty { display: none; }
.acc-status { margin: 0; min-height: 20px; font-size: 14px; line-height: 20px; color: var(--mint-ink); display: flex; gap: 6px; align-items: center; }
.acc-status:empty { min-height: 0; }
.acc-status svg { width: 16px; height: 16px; }
.acc-status[data-tone="error"] { color: var(--negative); }

.acc-toast-region { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 90; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.acc-toast {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 10px 16px; border-radius: 9999px;
  background: var(--surface-inverse, #0b0c0e); color: #fff; font: 500 14px/20px var(--font-sans); box-shadow: var(--acc-shadow-pop);
  transform-origin: center bottom;
}
.acc-toast svg { width: 16px; height: 16px; color: var(--mint); }
.acc-toast.is-error svg { color: #ff8f8f; }

/* ================================================================ Inbox (sent) panel */
.acc-inbox { display: flex; flex-direction: column; gap: 20px; }
.acc-inbox-mail { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--acc-r-md); background: var(--surface-sunken); font: 500 14px/20px var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.acc-inbox-mail svg { width: 16px; height: 16px; flex: none; color: var(--ink-muted); }
.acc-inbox-open { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.acc-inbox-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.acc-inbox-tools .acc-status { flex-basis: 100%; }
.acc-countdown { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Panel on the sign-up page (light Tailwind page) */
.acc-panel-standalone {
  padding: 28px 22px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--acc-r-xl); box-shadow: var(--acc-shadow-card);
}
@media (min-width: 560px) { .acc-panel-standalone { padding: 36px; } }
.acc-panel-standalone:focus { outline: none; }
.acc-panel-standalone h2 { margin: 0; font: 700 26px/32px var(--font-sans); letter-spacing: -0.5px; color: var(--ink); }
.acc-signup-login { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.acc-signup-login a { color: var(--mint-ink); font-weight: 600; text-decoration: none; }
.acc-signup-login a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.acc-pw-block { display: flex; flex-direction: column; gap: 8px; }
.acc-pw-block .acc-input-wrap input { padding-right: 52px; }

/* ================================================================ One-time code (6 boxes over one input) */
.acc-otp { position: relative; }
.acc-otp-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.acc-otp-boxes span {
  display: flex; align-items: center; justify-content: center; height: 56px; min-width: 0;
  border: 1px solid var(--border-strong); border-radius: var(--acc-r-md); background: var(--surface-card);
  font: 600 22px/1 var(--font-mono); color: var(--ink);
  transition: border-color var(--acc-fast) var(--acc-ease), box-shadow var(--acc-fast) var(--acc-ease), background-color var(--acc-fast) var(--acc-ease);
}
.acc-otp-boxes span:nth-child(3) { margin-right: 6px; }
.acc-otp-boxes span.is-filled { background: var(--surface-page); }
.acc-otp.is-focus .acc-otp-boxes span.is-active { border-color: var(--mint-ink); box-shadow: var(--acc-ring); }
.acc-otp.is-focus .acc-otp-boxes span.is-active:empty::after { content: ""; width: 2px; height: 24px; border-radius: 1px; background: var(--ink); animation: accBlink 1.1s steps(1) infinite; }
.acc-otp.is-error .acc-otp-boxes span { border-color: var(--negative); }
.acc-otp.is-error .acc-otp-boxes { animation: accShake 320ms var(--acc-ease); }
.acc-otp-input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: none;
  background: transparent; color: transparent; caret-color: transparent; -webkit-text-fill-color: transparent;
  font: 16px/1 var(--font-mono); letter-spacing: 2em; cursor: text;
}
.acc-otp-input::selection { background: transparent; }
.acc-otp-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px transparent inset; }
@media (max-width: 359px) { .acc-otp-boxes { gap: 5px; } .acc-otp-boxes span { height: 50px; font-size: 19px; } }

/* ================================================================ Showcase (login, right) */
.acc-showcase { display: none; }
@media (min-width: 1024px) {
  .acc-showcase {
    position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 600px;
    padding: 48px 40px; border-radius: var(--acc-r-xl); background: var(--surface-inverse, #0b0c0e); color: var(--on-inverse, #fff);
  }
  .acc-showcase::before {
    content: ""; position: absolute; inset: -20% -10% auto auto; width: 70%; height: 70%; pointer-events: none;
    background: radial-gradient(closest-side, rgb(71 250 190 / 0.16), transparent 70%);
  }
}
.acc-show-inner { position: relative; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 20px; }
.acc-show-inner .eyebrow { color: var(--mint-on-inverse, #83f6c8); }
.acc-show-title { margin: 0; font: 700 28px/34px var(--font-sans); letter-spacing: -0.6px; color: var(--on-inverse, #fff); }
.acc-show-copy { margin: -8px 0 4px; font-size: 15px; line-height: 22px; color: var(--on-inverse-muted, #b5bdb9); }
.acc-odds-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--acc-r-lg); background: var(--surface-page); color: var(--ink); box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.6); }
.acc-odds-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.acc-odds-head strong { display: block; font: 650 16px/22px var(--font-sans); }
.acc-odds-head span:not(.acc-badge) { display: block; font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
.acc-odds-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.acc-odds-steps li { position: relative; padding-top: 10px; font: 500 11px/14px var(--font-sans); color: var(--ink-subtle); transition: color var(--acc-normal) var(--acc-ease); }
.acc-odds-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 9999px; background: var(--border); transition: background-color var(--acc-normal) var(--acc-ease); }
.acc-odds-steps li.is-done::before { background: rgb(10 127 88 / 0.35); }
.acc-odds-steps li.is-current { color: var(--ink); }
.acc-odds-steps li.is-current::before { background: var(--mint-ink); }
.acc-odds-rows { display: flex; flex-direction: column; gap: 8px; }
.acc-odds-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 16px; padding: 14px 16px; border-radius: var(--acc-r-md); background: var(--surface-card); border: 1px solid var(--border); }
.acc-odds-row b { font: 500 14px/20px var(--font-sans); }
.acc-odds-val { font: 600 20px/24px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; min-width: 92px; transition: color var(--acc-normal) var(--acc-ease); }
.acc-odds-val.is-fair { color: var(--mint-ink); }
.acc-odds-bar { grid-column: 1 / -1; height: 4px; border-radius: 9999px; background: var(--surface-sunken); overflow: hidden; }
.acc-odds-bar i { display: block; height: 100%; width: 50%; border-radius: inherit; background: var(--border-strong); transition: width 600ms var(--acc-ease), background-color var(--acc-normal) var(--acc-ease); }
.acc-odds-bar i.is-fair { background: var(--mint-ink); }
.acc-odds-caption { margin: 0; min-height: 20px; font: 500 13px/20px var(--font-mono); color: var(--ink-muted); }
.acc-show-code pre { font-size: 12px; line-height: 19px; }
.acc-show-code .is-hl { color: #fff; background: rgb(71 250 190 / 0.12); border-radius: 4px; box-shadow: 0 0 0 3px rgb(71 250 190 / 0.12); transition: background-color var(--acc-normal) var(--acc-ease); }
.acc-show-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--on-inverse-muted, #b5bdb9); }

/* ================================================================ Badge */
.acc-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 8px; background: var(--surface-sunken); color: var(--ink-muted); font: 600 11px/16px var(--font-mono); letter-spacing: 0.6px; text-transform: uppercase; white-space: nowrap; flex: none; }
.acc-badge::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: currentColor; }
.acc-badge.is-plain::before { display: none; }
.acc-badge.is-mint { background: var(--mint-tint); color: var(--mint-ink); }
.acc-badge.is-warn { background: var(--acc-warn-tint); color: var(--acc-warn); }
.acc-badge.is-error { background: var(--acc-negative-tint); color: var(--negative); }
.acc-badge.is-info { background: var(--info-tint, #eaf0fd); color: var(--info, #2257d6); }

/* ================================================================ Dashboard shell */
.acc-app { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; color: var(--ink); }
@media (min-width: 900px) { .acc-app { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding: 32px 24px 64px; align-items: start; } }
.acc-side { display: none; }
@media (min-width: 900px) {
  .acc-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; height: calc(100vh - 120px); min-height: 440px; }
  .acc-topbar { display: none !important; }
}
.acc-nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.acc-nav-label { margin: 0 0 6px; padding: 0 12px; font: 600 11px/16px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-subtle); }
.acc-nav a, .acc-sheet a, .acc-sheet button {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent;
  color: var(--ink-muted); font: 500 14px/20px var(--font-sans); text-decoration: none; text-align: left; cursor: pointer; width: 100%;
  transition: color var(--acc-fast) var(--acc-ease), background-color var(--acc-fast) var(--acc-ease);
}
.acc-nav a svg, .acc-sheet a svg, .acc-sheet button svg { width: 18px; height: 18px; flex: none; }
.acc-nav a:hover, .acc-sheet a:hover, .acc-sheet button:hover { color: var(--ink); background: var(--acc-row-hover); }
.acc-nav a[aria-current="page"], .acc-sheet a[aria-current="page"] { color: var(--ink); background: var(--surface-card); font-weight: 600; box-shadow: 0 0 0 1px var(--border), var(--shadow-sm, 0 1px 2px rgb(11 12 14 / 0.05)); }
.acc-nav a[aria-current="page"] svg, .acc-sheet a[aria-current="page"] svg { color: var(--mint-ink); }
.acc-nav a:focus-visible, .acc-sheet a:focus-visible, .acc-sheet button:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: -2px; }
.acc-nav-sep { height: 1px; margin: 10px 12px; background: var(--border); border: 0; }

/* Account menu (sidebar bottom) */
.acc-me { position: relative; }
.acc-me-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--acc-r-md);
  background: var(--surface-card); color: var(--ink); text-align: left; cursor: pointer; font: inherit;
  transition: border-color var(--acc-fast) var(--acc-ease), background-color var(--acc-fast) var(--acc-ease);
}
.acc-me-btn:hover, .acc-me-btn[aria-expanded="true"] { border-color: var(--border-strong); }
.acc-me-btn:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 2px; }
.acc-me-btn > svg { width: 16px; height: 16px; color: var(--ink-muted); flex: none; }
.acc-me-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.acc-me-text strong, .acc-me-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-me-text strong { font: 600 13px/18px var(--font-sans); }
.acc-me-text span { font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
.acc-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--mint-tint); color: var(--mint-ink); font: 700 12px/1 var(--font-mono); letter-spacing: 0.5px; }

.acc-menu {
  position: absolute; z-index: 60; left: 0; right: 0; bottom: calc(100% + 8px); padding: 4px;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--acc-r-md); box-shadow: var(--acc-shadow-pop);
}
/* ui.css loads after this file, so the origin overrides need the extra class. */
.acc-menu.vo-pop { --vo-pop-y: bottom; }
.acc-pop.vo-pop { --vo-pop-x: right; }
.acc-pop.vo-pop[data-side="above"] { --vo-pop-y: bottom; }
.acc-toast.vo-pop { --vo-pop-x: center; --vo-pop-y: bottom; }
.acc-sheet.vo-pop { --vo-pop-x: center; }
.acc-menu-head { margin: 0; padding: 10px 12px 8px; font-size: 12px; line-height: 16px; color: var(--ink-subtle); overflow-wrap: anywhere; }
.acc-menu-head b { display: block; font-weight: 600; color: var(--ink); font-size: 13px; line-height: 18px; }
.acc-menu a, .acc-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font: 500 14px/20px var(--font-sans); text-decoration: none; text-align: left; cursor: pointer;
  transition: background-color var(--acc-fast) var(--acc-ease);
}
.acc-menu a:hover, .acc-menu button:hover, .acc-menu a:focus-visible, .acc-menu button:focus-visible { background: var(--acc-row-hover); color: var(--ink); outline: none; }
.acc-menu svg { width: 16px; height: 16px; color: var(--ink-muted); }
.acc-menu hr { margin: 4px 0; border: 0; height: 1px; background: var(--border); }

/* Mobile top bar + sheet */
.acc-topbar { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.acc-topbar-btn {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--acc-r-md); background: var(--surface-card); color: var(--ink);
  font: 600 15px/20px var(--font-sans); cursor: pointer; text-align: left; box-shadow: var(--shadow-sm, 0 1px 2px rgb(11 12 14 / 0.05));
}
.acc-topbar-btn > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-topbar-btn svg { width: 18px; height: 18px; flex: none; color: var(--ink-muted); }
.acc-topbar-btn .acc-chev { transition: transform var(--acc-normal) var(--acc-ease); }
.acc-topbar-btn[aria-expanded="true"] .acc-chev { transform: rotate(180deg); }
.acc-topbar-btn:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 2px; }
.acc-sheet {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 8px); padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--acc-r-lg); box-shadow: var(--acc-shadow-pop);
}
.acc-sheet .acc-menu-head { padding: 8px 12px; }

/* ================================================================ Dashboard content */
.acc-main { min-width: 0; }
.acc-main:focus { outline: none; }
.acc-section { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.acc-section:focus { outline: none; }
.acc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.acc-head > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 640px; }
.acc-h1 { margin: 0; font: 700 30px/36px var(--font-sans); letter-spacing: -0.8px; color: var(--ink); }
.acc-h1:focus { outline: none; }
.acc-lead { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.acc-cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .acc-cards.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acc-span-2 { grid-column: 1 / -1; } }

.acc-panel { min-width: 0; padding: 22px 18px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--acc-r-lg); box-shadow: var(--shadow-sm, 0 1px 2px rgb(11 12 14 / 0.05)); display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 560px) { .acc-panel { padding: 24px; } }
.acc-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.acc-panel-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acc-h2 { margin: 0; font: 650 17px/24px var(--font-sans); letter-spacing: -0.2px; color: var(--ink); }
.acc-panel-copy { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.acc-panel.is-danger { border-color: rgb(194 48 48 / 0.3); }
.acc-ref { font: 500 12px/16px var(--font-mono); color: var(--ink-subtle); overflow-wrap: anywhere; }

/* Status timeline */
.acc-timeline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.acc-tl-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 14px; padding-bottom: 20px; }
.acc-tl-step:last-child { padding-bottom: 0; }
.acc-tl-step::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--border); }
.acc-tl-step:last-child::before { display: none; }
.acc-tl-step.is-done::before { background: var(--mint-ink); }
.acc-tl-dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px; border: 2px solid var(--border-strong); background: var(--surface-card); color: #fff; }
.acc-tl-dot svg { width: 14px; height: 14px; stroke-width: 3; }
.acc-tl-step.is-done .acc-tl-dot { background: var(--mint-ink); border-color: var(--mint-ink); }
.acc-tl-step.is-current .acc-tl-dot { border-color: var(--mint-ink); background: var(--mint-tint); }
.acc-tl-step.is-current .acc-tl-dot::after { content: ""; width: 10px; height: 10px; border-radius: 9999px; background: var(--mint-ink); }
.acc-tl-step.is-current .acc-tl-dot::before { content: ""; position: absolute; inset: -6px; border-radius: 9999px; border: 2px solid rgb(10 127 88 / 0.25); animation: accHalo 2.4s var(--acc-ease) infinite; }
.acc-tl-step.is-current.is-final .acc-tl-dot { background: var(--mint-ink); }
.acc-tl-step.is-current.is-final .acc-tl-dot::after, .acc-tl-step.is-current.is-final .acc-tl-dot::before { display: none; }
.acc-tl-step.is-declined .acc-tl-dot { border-color: var(--negative); background: var(--negative); }
.acc-tl-step.is-declined .acc-tl-dot::after, .acc-tl-step.is-declined .acc-tl-dot::before { display: none; }
.acc-tl-body { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; min-width: 0; }
.acc-tl-body b { font: 600 14px/22px var(--font-sans); color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-tl-step.is-upcoming .acc-tl-body b { color: var(--ink-muted); font-weight: 500; }
.acc-tl-body span { font-size: 13px; line-height: 18px; color: var(--ink-subtle); }
@media (min-width: 720px) {
  .acc-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .acc-tl-step { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 0; align-content: start; }
  .acc-tl-step::before { left: 36px; right: -12px; top: 13px; bottom: auto; width: auto; height: 2px; }
  .acc-tl-body { padding-top: 0; }
  .acc-timeline.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.acc-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--acc-r-md); background: var(--surface-sunken); font-size: 14px; line-height: 20px; color: var(--ink); }
.acc-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ink-muted); }
.acc-note b { display: block; font-weight: 600; margin-bottom: 2px; }
.acc-note p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* Plan card + key facts */
.acc-plan-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.acc-plan-name strong { font: 700 26px/32px var(--font-sans); letter-spacing: -0.6px; }
.acc-plan-name span { font: 500 14px/20px var(--font-mono); color: var(--ink-muted); }
.acc-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.acc-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.acc-facts dt { color: var(--ink-muted); }
.acc-facts dd { margin: 0; color: var(--ink); font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.acc-facts.is-wide > div { flex-direction: column; gap: 4px; }
.acc-facts.is-wide dd { text-align: left; }
@media (min-width: 640px) { .acc-facts.is-wide > div { flex-direction: row; } .acc-facts.is-wide dt { flex: 0 0 200px; } }
.acc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 8px; background: var(--surface-sunken); font: 500 13px/18px var(--font-sans); color: var(--ink); }

.acc-next { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: next; }
.acc-next li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 20px; color: var(--ink-muted); counter-increment: next; }
.acc-next li::before { content: counter(next); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: var(--surface-sunken); color: var(--ink); font: 600 12px/1 var(--font-mono); }
.acc-next b { display: block; color: var(--ink); font-weight: 600; }
.acc-next a { font-weight: 600; }

/* Empty states */
.acc-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 20px; text-align: center; }
.acc-empty .acc-state-icon { margin-bottom: 4px; }
.acc-empty h2, .acc-empty h3 { margin: 0; font: 650 17px/24px var(--font-sans); color: var(--ink); }
.acc-empty p { margin: 0; max-width: 420px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.acc-empty .acc-row-actions { justify-content: center; margin-top: 4px; }
.acc-usage-art { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: end; gap: 4px; width: 100%; max-width: 520px; height: 96px; margin: 4px auto 8px; padding: 0 0 8px; border-bottom: 1px dashed var(--border-strong); }
.acc-usage-art i { display: block; border-radius: 3px 3px 1px 1px; background: var(--surface-sunken); }

/* API keys */
.acc-keys { border: 1px solid var(--border); border-radius: var(--acc-r-md); }
.acc-keys-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.acc-key { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 14px 16px; border-top: 1px solid var(--border); }
.acc-key:first-child { border-top: 0; }
.acc-key-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acc-key-main b { font: 600 14px/20px var(--font-sans); overflow-wrap: anywhere; }
.acc-key-main code { align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: var(--surface-sunken); font: 500 13px/20px var(--font-mono); color: var(--ink); }
.acc-key-meta b { font-weight: 500; }
.acc-key-meta { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 13px; line-height: 18px; color: var(--ink-subtle); }
.acc-key.is-leaving { animation: accLeave var(--acc-normal) var(--acc-ease) forwards; }
.acc-key.is-new { animation: accRise var(--acc-normal) var(--acc-ease); }
.acc-keys-head { display: none; }
@media (min-width: 760px) {
  .acc-keys-head, .acc-key { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 0.8fr) 92px; }
  .acc-keys-head { display: grid; gap: 16px; padding: 10px 16px; background: var(--surface-page); border-bottom: 1px solid var(--border); border-radius: var(--acc-r-md) var(--acc-r-md) 0 0; font: 600 11px/16px var(--font-mono); letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-subtle); }
  .acc-key-main, .acc-key-meta { display: contents; }
  .acc-key-main code { align-self: center; justify-self: start; }
  .acc-key-meta span { font-size: 13px; color: var(--ink-muted); }
  .acc-key-meta span b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.acc-key-actions { position: relative; justify-self: end; grid-row: 1 / span 2; grid-column: 2; }
@media (min-width: 760px) { .acc-key-actions { grid-row: auto; grid-column: auto; } }
.acc-inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.acc-inline-form .acc-field { flex: 1 1 220px; }
.acc-locked { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--acc-r-md); background: var(--surface-sunken); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.acc-locked svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ink-muted); }
.acc-locked b { color: var(--ink); font-weight: 600; }

.acc-newkey { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--mint-ink); border-radius: var(--acc-r-lg); background: var(--mint-tint); box-shadow: 0 20px 60px -30px rgb(71 250 190 / 0.6); animation: accRise var(--acc-normal) var(--acc-ease); }
.acc-newkey-head { display: flex; align-items: center; gap: 10px; font: 650 15px/22px var(--font-sans); color: var(--ink); }
.acc-newkey-head svg { width: 20px; height: 20px; color: var(--mint-ink); }
.acc-secret { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.acc-secret code { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding: 10px 14px; border-radius: var(--acc-r-md); border: 1px solid var(--border); background: var(--surface-card); font: 500 14px/22px var(--font-mono); color: var(--ink); overflow-wrap: anywhere; word-break: break-all; user-select: all; }
.acc-secret .acc-btn { flex: none; }
.acc-warn-line { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 18px; color: var(--acc-warn); }
.acc-warn-line svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* Popover (confirm) – motion from .vo-pop */
.acc-pop {
  position: absolute; z-index: 60; right: 0; top: calc(100% + 6px); width: min(300px, calc(100vw - 48px)); padding: 16px;
  display: flex; flex-direction: column; gap: 12px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--acc-r-md);
  box-shadow: var(--acc-shadow-pop); text-align: left;
}
.acc-pop[data-side="above"] { top: auto; bottom: calc(100% + 6px); }
.acc-pop p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); white-space: normal; }
.acc-pop p b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.acc-pop .acc-row-actions { justify-content: flex-end; }
.acc-pop .acc-row-actions .acc-btn { flex: 0 0 auto; }

/* Tabs + code (Quickstart) */
.acc-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-sunken); }
.acc-tab { min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-muted); font: 500 14px/20px var(--font-sans); cursor: pointer; transition: color var(--acc-fast) var(--acc-ease), background-color var(--acc-fast) var(--acc-ease), box-shadow var(--acc-fast) var(--acc-ease); }
.acc-tab:hover { color: var(--ink); }
.acc-tab[aria-selected="true"] { background: var(--surface-card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(11 12 14 / 0.08), 0 0 0 1px var(--border); }
.acc-tab:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 1px; }
@media (pointer: coarse) { .acc-tab { min-height: 44px; } }
.acc-code { margin: 0; background: var(--surface-inverse, #0b0c0e); border-radius: var(--acc-r-lg); color: var(--on-inverse, #fff); overflow: hidden; }
.acc-code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 4px 6px 4px 16px; border-bottom: 1px solid rgb(255 255 255 / 0.1); font: 500 13px/20px var(--font-mono); color: var(--on-inverse-muted, #b5bdb9); }
.acc-code pre { margin: 0; padding: 16px; overflow-x: auto; font: 400 13px/21px var(--font-mono); color: var(--on-inverse-muted, #b5bdb9); tab-size: 2; }
.acc-code pre:focus-visible { outline: 2px solid var(--mint-on-inverse, #83f6c8); outline-offset: -2px; }
.acc-code .t-s { color: var(--mint-on-inverse, #83f6c8); }
.acc-code .t-k { color: #fff; }
.acc-code .t-c { color: #7c8681; }
.acc-copy-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--on-inverse-muted, #b5bdb9); font: 500 13px/20px var(--font-sans); cursor: pointer; transition: color var(--acc-fast), background-color var(--acc-fast); }
.acc-copy-btn:hover { color: #fff; background: rgb(255 255 255 / 0.08); }
.acc-copy-btn:focus-visible { outline: 2px solid var(--mint-on-inverse, #83f6c8); outline-offset: -2px; }
.acc-copy-btn svg { width: 16px; height: 16px; }
.acc-copy-btn.is-done { color: var(--mint-on-inverse, #83f6c8); }
.acc-steps-list { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: qs; }
.acc-steps-list > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; counter-increment: qs; }
.acc-steps-list > li::before { content: counter(qs); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: var(--mint-tint); color: var(--mint-ink); font: 600 12px/1 var(--font-mono); }
.acc-steps-list > li > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 3px; }
.acc-steps-list b { font: 600 15px/22px var(--font-sans); }
.acc-steps-list p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Settings rows */
.acc-setting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.acc-setting > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.acc-setting b { font: 600 15px/22px var(--font-sans); overflow-wrap: anywhere; }
.acc-form-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .acc-form-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acc-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.acc-fold { border-top: 1px solid var(--border); }
.acc-fold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 4px 0;
  list-style: none; cursor: pointer; font: 600 15px/22px var(--font-sans); color: var(--ink); border-radius: 8px;
}
.acc-fold > summary::-webkit-details-marker { display: none; }
.acc-fold > summary > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-fold > summary small { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.acc-fold > summary svg { width: 18px; height: 18px; color: var(--ink-muted); flex: none; transition: transform var(--acc-normal) var(--acc-ease); }
.acc-fold[open]:not([data-vo-closing]) > summary svg { transform: rotate(180deg); }
.acc-fold > summary:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 2px; }
.acc-fold-body { padding: 4px 0 20px; display: flex; flex-direction: column; gap: 16px; }
.acc-fold.is-danger > summary { color: var(--negative); }

/* Two-factor */
.acc-mfa-setup { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 640px) { .acc-mfa-setup { grid-template-columns: 196px minmax(0, 1fr); } }
.acc-qr { display: flex; align-items: center; justify-content: center; width: 196px; height: 196px; padding: 12px; border: 1px solid var(--border); border-radius: var(--acc-r-lg); background: #fff; }
.acc-qr svg { width: 100%; height: 100%; display: block; }
.acc-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 16px; list-style: none; border-radius: var(--acc-r-md); background: var(--surface-sunken); }
.acc-codes li { font: 500 15px/24px var(--font-mono); letter-spacing: 0.5px; text-align: center; padding: 4px 0; border-radius: 6px; background: var(--surface-card); }
@media (max-width: 359px) { .acc-codes li { font-size: 13px; } }

/* Sessions */
.acc-sessions { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.acc-session { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.acc-session:first-child { border-top: 0; padding-top: 0; }
.acc-session-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-sunken); color: var(--ink-muted); }
.acc-session-icon svg { width: 20px; height: 20px; }
.acc-session-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-session-main b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 600 14px/20px var(--font-sans); }
.acc-session-main span { font-size: 13px; line-height: 18px; color: var(--ink-subtle); overflow-wrap: anywhere; }
.acc-session.is-leaving { animation: accLeave var(--acc-normal) var(--acc-ease) forwards; }

/* ================================================================ Skeleton */
.acc-skel { display: block; border-radius: 10px; background: linear-gradient(90deg, var(--surface-sunken) 0%, #f5f8f6 40%, var(--surface-sunken) 80%); background-size: 300% 100%; animation: accShimmer 1.4s ease-in-out infinite; }
.acc-skel-line { height: 14px; }
.acc-skel-title { height: 32px; width: min(320px, 70%); }
.acc-skel-card { height: 168px; border-radius: var(--acc-r-lg); }
.acc-skel-wrap { display: flex; flex-direction: column; gap: 16px; }
.acc-skel-row { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .acc-skel-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acc-w40 { width: 40%; } .acc-w60 { width: 60%; } .acc-w80 { width: 80%; }

/* ================================================================ Admin */
.acc-admin { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 20px; color: var(--ink); }
@media (min-width: 640px) { .acc-admin { padding: 32px 24px 64px; } }
.acc-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.acc-filters .acc-field { flex: 0 1 220px; }
.acc-filters .acc-field.is-grow { flex: 1 1 260px; }
.acc-filters .vo-dd-trigger, .acc-drawer .vo-dd-trigger { min-height: 48px; }
.acc-reqs-wrap { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--acc-r-lg); overflow: hidden; box-shadow: var(--shadow-sm, 0 1px 2px rgb(11 12 14 / 0.05)); }
.acc-reqs { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.acc-reqs-head { display: none; }
.acc-req { border-top: 1px solid var(--border); }
.acc-req:first-child { border-top: 0; }
.acc-req button {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; width: 100%; min-height: 64px; padding: 14px 16px;
  border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--acc-fast) var(--acc-ease);
}
.acc-req button:hover { background: var(--acc-row-hover); }
.acc-req button[aria-expanded="true"] { background: var(--mint-tint); }
.acc-req button:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: -2px; }
.acc-req-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-req-who b { font: 600 14px/20px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-req-who span { font-size: 13px; line-height: 18px; color: var(--ink-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-req-cell { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.acc-req-cell.is-hide-sm { display: none; }
@media (min-width: 860px) {
  .acc-reqs-head, .acc-req button { grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 0.9fr) 120px; }
  .acc-reqs-head { display: grid; gap: 16px; padding: 10px 16px; background: var(--surface-page); border-bottom: 1px solid var(--border); font: 600 11px/16px var(--font-mono); letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-subtle); }
  .acc-req-cell.is-hide-sm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.acc-drawer-backdrop { position: fixed; inset: 0; z-index: 80; background: rgb(11 12 14 / 0.28); animation: accFade var(--acc-normal) var(--acc-ease); }
.acc-drawer-backdrop[data-state="closing"] { animation: accFadeOut var(--acc-fast) var(--acc-ease) forwards; }
.acc-drawer {
  position: fixed; z-index: 81; top: 8px; right: 8px; bottom: 8px; width: min(520px, calc(100vw - 16px));
  display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--acc-r-xl);
  box-shadow: 0 24px 64px -16px rgb(11 12 14 / 0.3); overflow: hidden;
  animation: accSlideIn var(--acc-normal) var(--acc-ease);
}
.acc-drawer[data-state="closing"] { animation: accSlideOut var(--acc-fast) var(--acc-ease) forwards; }
.acc-drawer:focus { outline: none; }
.acc-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 16px; border-bottom: 1px solid var(--border); }
.acc-drawer-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acc-drawer-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.acc-drawer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border); background: var(--surface-page); }
.acc-drawer-foot .acc-status { flex: 1 1 auto; }
.acc-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink-muted); cursor: pointer; }
.acc-iconbtn:hover { color: var(--ink); background: var(--surface-sunken); }
.acc-iconbtn:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: -2px; }
.acc-iconbtn svg { width: 20px; height: 20px; }
.acc-pre { margin: 0; padding: 12px 14px; border-radius: var(--acc-r-md); background: var(--surface-sunken); font: 400 14px/21px var(--font-sans); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
html.acc-lock, html.acc-lock body { overflow: hidden; }

/* ================================================================ Motion */
@keyframes accSpin { to { transform: rotate(360deg); } }
@keyframes accBlink { 50% { opacity: 0; } }
@keyframes accShake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes accRise { from { opacity: 0; transform: translateY(4px); } }
@keyframes accLeave { to { opacity: 0; transform: translateX(8px); } }
@keyframes accHalo { 0% { opacity: 0.9; transform: scale(0.85); } 70%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes accShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes accFade { from { opacity: 0; } }
@keyframes accFadeOut { to { opacity: 0; } }
@keyframes accSlideIn { from { opacity: 0; transform: translateX(24px); } }
@keyframes accSlideOut { to { opacity: 0; transform: translateX(16px); } }

@media (prefers-reduced-motion: reduce) {
  .acc-btn, .acc-input, .acc-otp-boxes span, .acc-meter i, .acc-odds-bar i, .acc-odds-steps li, .acc-fold > summary svg, .acc-topbar-btn .acc-chev { transition: none; }
  .acc-btn:hover { transform: none; }
  .acc-btn[aria-busy="true"]::before { animation-duration: 2.4s; }
  .acc-alert, .acc-newkey, .acc-key.is-new, .acc-otp.is-error .acc-otp-boxes, .acc-drawer, .acc-drawer-backdrop { animation: none; }
  .acc-drawer[data-state="closing"], .acc-drawer-backdrop[data-state="closing"], .acc-key.is-leaving, .acc-session.is-leaving { animation: none; opacity: 0; }
  .acc-tl-step.is-current .acc-tl-dot::before { animation: none; opacity: 0.5; }
  .acc-otp.is-focus .acc-otp-boxes span.is-active:empty::after { animation: none; }
  .acc-skel { animation: none; }
  .acc-state-icon.is-pending svg { animation-duration: 3s; }
}

/* Panels focused after a step change stay clear of the sticky header. */
.acc-inbox, .acc-panel-standalone, #success { scroll-margin-top: 104px; }