/* Header account dropdown.
 * Markup: `aknb_account_dropdown` action (mu-plugins/aknb-account-ux.php), rendered inside .cc-acct by header.php.
 * Toggle: initAccountMenu() in app.js. Token-driven (--cc-*), so light, dark and RTL need no twins. All selectors carry the
 * `html body` prefix so the site's blanket dark-mode text rules and the header icon-button sizing rules never reach the panel. */
html body .cc-acct { position: relative; display: inline-flex; }
html body .aknb-acct-dropdown { position: absolute; inset-block-start: calc(100% + 12px); inset-inline-end: 0; z-index: 60; inline-size: min(340px, calc(100vw - 24px)); max-block-size: calc(100vh - 110px); max-block-size: calc(100dvh - 110px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border: 1px solid var(--cc-border); border-radius: var(--cc-r-xl); background: var(--cc-bg); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .55), 0 0 0 1px color-mix(in srgb, var(--cc-cobalt) 8%, transparent); text-align: start; transform-origin: top right; animation: cc-acct-in .2s var(--ease-standard) both; }
html[dir="rtl"] body .aknb-acct-dropdown { transform-origin: top left; }
html body .aknb-acct-dropdown[hidden] { display: none; }
html body .aknb-acct-dropdown::before { content: ''; position: absolute; inset: 0 0 auto 0; block-size: 2px; background: var(--cc-cobalt-grad); }
@keyframes cc-acct-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } }

/* Head: signed-in identity, or the guest welcome */
html body .cc-acct-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 22px 18px 16px; background: radial-gradient(120% 170% at 0% 0%, color-mix(in srgb, var(--cc-cobalt) 20%, transparent), transparent 62%); }
html body .cc-acct-avatar { flex: none; display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--cc-cobalt-grad); color: #fff; font: 700 19px/1 var(--font-display); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 0 0 3px color-mix(in srgb, var(--cc-cobalt) 28%, transparent); }
html body .cc-acct-who { display: grid; gap: 3px; min-inline-size: 0; }
html body .cc-acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.2 var(--font-display); color: var(--cc-ink); }
html body .cc-acct-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1.3 var(--font-mono); color: var(--cc-ink-3); }
html body .cc-acct-head--guest { flex-direction: column; align-items: stretch; gap: 6px; }
html body .cc-acct-welcome { font: 700 20px/1.2 var(--font-display); color: var(--cc-ink); }
html body .cc-acct-sub { font: 400 13px/1.5 var(--font-body); color: var(--cc-ink-3); }
html body .cc-acct-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-block-start: 12px; }
html body .cc-acct-btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 40px; padding-inline: 10px; border-radius: var(--cc-r-md); color: color-mix(in srgb, var(--cc-cobalt) 78%, var(--cc-ink)); font: 700 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cc-cobalt) 55%, transparent); transition: transform .18s var(--ease-standard), box-shadow .18s var(--ease-standard), background-color .18s ease; }
html body .cc-acct-btn:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--cc-cobalt) 12%, transparent); }
html body .cc-acct-btn--primary { background: var(--cc-cobalt-grad); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 8px 18px -8px rgb(47 123 255 / .75); }
html body .cc-acct-btn--primary:hover { background: var(--cc-cobalt-grad); box-shadow: inset 0 1px 0 rgb(255 255 255 / .34), 0 12px 22px -8px rgb(47 123 255 / .85); }

/* Orders / wallet tiles */
html body .cc-acct-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 14px; }
html body .cc-acct-stat { display: grid; gap: 4px; padding: 11px 13px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); text-decoration: none; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
html body .cc-acct-stat:hover { border-color: var(--cc-cobalt); background: color-mix(in srgb, var(--cc-cobalt) 9%, var(--cc-surface)); transform: translateY(-1px); }
html body .cc-acct-stat__label { font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cc-ink-3); }
html body .cc-acct-stat__value { font: 700 15px/1.2 var(--font-mono); color: var(--cc-ink); }

/* Link list */
html body .cc-acct-list { display: grid; gap: 2px; padding: 8px; border-block-start: 1px solid var(--cc-border); }
html body .cc-acct-item { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: var(--cc-r-md); color: var(--cc-ink); font: 600 13px/1.2 var(--font-body); text-decoration: none; transition: background-color .15s ease; }
html body .cc-acct-item__ico { flex: none; display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: var(--cc-r-md); background: var(--cc-surface-2); color: var(--cc-ink-3); transition: background-color .15s ease, color .15s ease; }
html body .cc-acct-item__label { flex: 1; min-inline-size: 0; }
html body .cc-acct-item__go { display: grid; place-items: center; color: var(--cc-ink-3); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
html[dir="rtl"] body .cc-acct-item__go { transform: scaleX(-1) translateX(-4px); }
html body .cc-acct-item:hover { background: color-mix(in srgb, var(--cc-cobalt) 9%, transparent); }
html body .cc-acct-item:hover .cc-acct-item__ico { background: var(--cc-cobalt); color: #fff; }
html body .cc-acct-item:hover .cc-acct-item__go { opacity: 1; transform: none; }
html[dir="rtl"] body .cc-acct-item:hover .cc-acct-item__go { transform: scaleX(-1); }
html body .cc-acct-badge { padding: 4px 8px; border-radius: var(--cc-r-full); background: color-mix(in srgb, var(--cc-cobalt) 18%, transparent); color: color-mix(in srgb, var(--cc-cobalt) 78%, var(--cc-ink)); font: 700 9px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
html body .cc-acct-item--ops .cc-acct-item__ico { background: var(--cc-cobalt-grad); color: #fff; }
html body .cc-acct-list--foot { padding-block-start: 6px; }
html body .cc-acct-item--out { color: var(--cc-danger); }
html body .cc-acct-item--out .cc-acct-item__ico { background: color-mix(in srgb, var(--cc-danger) 14%, transparent); color: var(--cc-danger); }
html body .cc-acct-item--out:hover { background: color-mix(in srgb, var(--cc-danger) 10%, transparent); }
html body .cc-acct-item--out:hover .cc-acct-item__ico { background: var(--cc-danger); color: #fff; }
html body .cc-acct-item:focus-visible, html body .cc-acct-stat:focus-visible, html body .cc-acct-btn:focus-visible { border-radius: var(--cc-r-md); }
@media (prefers-reduced-motion: reduce) { html body .aknb-acct-dropdown { animation: none; } html body .cc-acct-item__go, html body .cc-acct-btn, html body .cc-acct-stat { transition: none; } }
/* Owner tools group: the AKNB Ops row opens the pages under it on hover or keyboard focus; touch screens (no hover) show it open. */
html body .cc-acct-group { display: grid; }
html body .cc-acct-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s var(--ease-standard); }
html body .cc-acct-sub__in { min-block-size: 0; overflow: hidden; display: grid; gap: 1px; margin-inline-start: 25px; padding-inline-start: 8px; border-inline-start: 1px solid var(--cc-border); }
html body .cc-acct-group:hover > .cc-acct-sub, html body .cc-acct-group:focus-within > .cc-acct-sub { grid-template-rows: 1fr; }
@media (hover: none) { html body .cc-acct-sub { grid-template-rows: 1fr; } }
html body .cc-acct-sub__link { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--cc-r-md); color: var(--cc-ink-2); font: 600 12.5px/1.25 var(--font-body); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
html body .cc-acct-sub__ico { flex: none; display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: var(--cc-r-sm); background: var(--cc-surface-2); color: var(--cc-ink-3); transition: background-color .15s ease, color .15s ease; }
html body .cc-acct-sub__ico svg { inline-size: 14px; block-size: 14px; }
html body .cc-acct-sub__link:hover, html body .cc-acct-sub__link:focus-visible { background: color-mix(in srgb, var(--cc-cobalt) 9%, transparent); color: var(--cc-ink); }
html body .cc-acct-sub__link:hover .cc-acct-sub__ico { background: var(--cc-cobalt); color: #fff; }
@media (prefers-reduced-motion: reduce) { html body .cc-acct-sub { transition: none; } }