.topbar {
  position: relative;
  z-index: 30;
}

.account-menu-wrap { position: relative; }

.topbar .account {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 240px;
  overflow: visible;
  border: 0;
  padding: 5px 4px 5px 5px;
}

.account-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--soft);
  color: var(--green);
  font-size: 12px;
  font-weight: 750;
  overflow: hidden;
}
.account-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }

.account #account-name {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.account-chevron { font-size: 16px; transition: transform .15s; }
.account[aria-expanded="true"] .account-chevron { transform: rotate(180deg); }

.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 12px 34px rgba(23,32,24,.14);
}

.account-menu[hidden] { display: none; }
.account-menu header { display: flex; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid var(--line); }
.account-menu header div { display: grid; gap: 4px; min-width: 0; }
.account-menu header strong,.account-menu header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu header div span { color: var(--muted); font-size: 12px; }
.account-workspace { display: grid; gap: 5px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.account-workspace small,.account-workspace span { color: var(--muted); font-size: 11px; }
.account-workspace strong { font-size: 13px; }
.account-role-menu{padding:16px 20px;border-bottom:1px solid var(--line)}
.account-role-menu>strong{display:block;font-size:13px}
.account-role-menu>p{margin:4px 0 12px;color:var(--muted);font-size:11px}
.account-role-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.account-role-options label{position:relative;min-width:0;cursor:pointer}
.account-role-options input{position:absolute;opacity:0;width:1px;height:1px}
.account-role-options span{display:block;border:1px solid var(--line);padding:10px 4px;text-align:center;font-size:12px;font-weight:650}
.account-role-options input:checked+span{border-color:var(--green);background:var(--soft);color:var(--green)}
.account-role-options input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
.account-role-menu .broker-providers{margin:12px 0 0;font-size:11px;font-weight:600}
.account-role-menu .broker-providers small{font-weight:400;color:var(--muted)}
.account-role-menu textarea{width:100%;min-height:58px;margin-top:3px;padding:8px;border:1px solid var(--line);font:inherit;resize:vertical}
.topbar nav .account-role-menu button{display:block;margin:12px 0 0 auto;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:8px 12px;font-size:11px;font-weight:650}
.topbar nav .account-role-menu button:disabled{opacity:.5;cursor:wait}
.topbar nav .account-menu>button{display:block}
.account-credit { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.account-credit small { color: var(--muted); font-size: 12px; }
.account-credit strong { color: var(--green); font-size: 20px; }
.topbar .account-menu > button { width: 100%; border: 0; padding: 17px 20px; text-align: right; font-weight: 650; }
.topbar .account-menu > button:hover { background: var(--wash); }

@media (max-width: 1250px) {
  .topbar nav { gap: 6px; }
  .topbar nav > button { padding-inline: 10px; }
}

@media (max-width: 900px) {
  .account #account-name { display: none; }
  .account-menu { position: fixed; top: 76px; right: 12px; left: 12px; width: auto; }
}