/* ArchStudio shared: nav account menu (account-menu.js). Self-contained tokens so it renders the same in the
   marketing pages (light glass) and the studio topbar (light and dark theme via :root[data-theme]). */
.acm{--acm-ink:#0c1424;--acm-ink2:#394357;--acm-mut:#525d72;--acm-bg:rgba(255,255,255,.94);--acm-line:rgba(12,20,36,.1);
  --acm-hover:rgba(12,20,36,.06);--acm-btn:rgba(255,255,255,.62);--acm-btn-h:rgba(255,255,255,.9);--acm-ring:#fff;
  --acm-accent:#f28a17;--acm-accent-ink:#8a4a06;--acm-danger:#b4233a;--acm-shadow:0 24px 60px -16px rgba(12,20,36,.35),0 4px 14px -4px rgba(12,20,36,.15);
  position:relative;flex:none;font-family:var(--font,'Plus Jakarta Sans',system-ui,sans-serif);color:var(--acm-ink);line-height:1.35}
:root[data-theme="dark"] .acm{--acm-ink:#eef2f8;--acm-ink2:#c4ccda;--acm-mut:#98a3b6;--acm-bg:rgba(20,26,36,.96);--acm-line:rgba(255,255,255,.12);
  --acm-hover:rgba(255,255,255,.08);--acm-btn:rgba(255,255,255,.06);--acm-btn-h:rgba(255,255,255,.13);--acm-ring:rgba(255,255,255,.18);
  --acm-accent-ink:#ffc27a;--acm-danger:#ff8a9b;--acm-shadow:0 24px 60px -12px rgba(0,0,0,.7)}
.acm *{box-sizing:border-box}
.acm a,.acm button{font:inherit;color:inherit;text-decoration:none}

/* trigger */
.acm-trigger,.acm-signin{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 12px 0 5px;border:0;border-radius:999px;cursor:pointer;
  font-size:14px;font-weight:650;color:var(--acm-ink);background:var(--acm-btn);box-shadow:inset 0 0 0 1px var(--acm-ring),0 6px 18px -8px rgba(12,20,36,.25);
  transition:background .2s,transform .2s}
.acm-trigger:hover,.acm-signin:hover{background:var(--acm-btn-h)}
.acm-trigger:focus-visible,.acm-signin:focus-visible,.acm-panel a:focus-visible,.acm-panel button:focus-visible{outline:2.5px solid var(--acm-accent);outline-offset:2px}
.acm-signin{padding:0 16px}
.acm-trigger .acm-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acm-trigger svg.acm-chev{width:14px;height:14px;flex:none;color:var(--acm-mut);transition:transform .2s}
.acm.is-open .acm-chev{transform:rotate(180deg)}
.acm-av{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;overflow:hidden;font-weight:800;font-size:13px;
  color:#fff;background:linear-gradient(135deg,#ffb347,#f28a17 60%,#e2690c);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.acm-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.acm-av.lg{width:46px;height:46px;font-size:18px}
.acm-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#22b07d;box-shadow:0 0 0 2px var(--acm-bg)}

/* panel */
.acm-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:90;width:300px;max-width:calc(100vw - 24px);padding:8px;border-radius:20px;
  background:var(--acm-bg);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  box-shadow:inset 0 0 0 1px var(--acm-line),var(--acm-shadow);transform-origin:top right;animation:acm-in .16s ease-out}
.acm-panel[hidden]{display:none}
@keyframes acm-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.acm-who{display:flex;align-items:center;gap:12px;padding:10px 10px 12px}
.acm-who div{min-width:0}
.acm-who strong,.acm-who span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acm-who strong{font-size:15px;font-weight:700}
.acm-who span{font-size:12.5px;color:var(--acm-mut)}
.acm-plan{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 6px;padding:10px 12px;border-radius:14px;background:var(--acm-hover)}
.acm-plan b{display:block;font-size:13.5px}
.acm-plan small{display:block;font-size:12px;color:var(--acm-mut)}
.acm-plan a{flex:none;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(180deg,#ffa53d,#f28a17)}
.acm-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:transparent;cursor:pointer;text-align:left;
  font-size:14px;font-weight:600;color:var(--acm-ink2)}
.acm-item svg{width:18px;height:18px;flex:none;color:var(--acm-mut)}
.acm-item:hover,.acm-item:focus-visible{background:var(--acm-hover);color:var(--acm-ink)}
.acm-item.danger,.acm-item.danger svg{color:var(--acm-danger)}
.acm-sep{height:1px;margin:6px 8px;background:var(--acm-line);border:0}
.acm-foot{display:flex;gap:14px;padding:6px 12px 4px;font-size:12px;color:var(--acm-mut)}
.acm-foot a:hover{color:var(--acm-ink);text-decoration:underline}
.acm-mode{margin:2px 2px 6px;padding:8px 12px;border-radius:12px;font-size:12px;color:var(--acm-accent-ink);background:rgba(242,138,23,.12)}

/* studio topbar: raise the bar above panels while the menu is open, drop the name to keep the bar compact */
.hud.topbar:has(.acm.is-open){z-index:60}
.topbar .acm-trigger{height:36px;padding:0 8px 0 3px;border-radius:12px}
.topbar .acm-av{width:28px;height:28px;border-radius:10px}
.topbar .acm-signin{height:36px;border-radius:12px;font-size:13px}
.topbar .acm-name{display:none}
@media (max-width:760px){.acm-name{display:none}.acm-trigger{padding:0 9px 0 5px}}
@media (prefers-reduced-motion:reduce){.acm-panel{animation:none}}
/* nav bars (marketing pages): keep the menu visible on phones, pushed to the right of the brand */
@media (max-width:860px){.nav .bar>.acm{margin-left:auto}.nav .bar>.acm+.menu{margin-left:0}}