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

.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); }

.account-profile-form,.team-workspace{display:grid;gap:22px;max-width:1280px}.account-profile-form>header,.team-workspace>header{display:flex;align-items:center;justify-content:space-between;gap:20px}.account-profile-form h2,.team-workspace h2{margin:0 0 5px;font:28px/1.15 Georgia,serif}.account-profile-form header p,.team-workspace header p{margin:0;color:var(--muted)}.account-profile-form section,.team-workspace{border:1px solid var(--line);background:#fff;padding:24px}.account-profile-form section h3{margin:0 0 18px;font-size:18px}.account-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 20px}.account-form-grid label,.team-invite-form label{display:grid;gap:7px;color:var(--muted);font-size:12px;font-weight:650}.account-form-grid input,.account-form-grid textarea,.team-invite-form input,.team-invite-form select{width:100%;box-sizing:border-box;border:1px solid var(--line);background:#fff;color:var(--ink);padding:11px 13px;min-height:43px;font:inherit}.account-form-grid input:disabled{background:var(--wash);color:var(--muted)}.account-form-grid textarea{min-height:82px;resize:vertical}.account-form-grid .form-wide{grid-column:1/-1}.account-profile-warning{display:grid;gap:5px;padding:16px 18px;border-left:4px solid #8a7139;background:#faf6eb;color:#68562f}.account-profile-form>footer{display:flex;justify-content:flex-end}.team-invite-form{display:grid;grid-template-columns:minmax(260px,1fr) 220px auto;align-items:end;gap:12px}.team-note{margin:0;color:var(--muted);font-size:12px}.team-members{display:grid;border-top:1px solid var(--line)}.team-members article{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}.team-member-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--green);font-weight:700}.team-members article div{display:grid;gap:3px}.team-members small{color:var(--muted);text-transform:capitalize}.team-members b{font-size:12px}.account-menu-links{display:grid;border-bottom:1px solid var(--line)}.topbar .account-menu .account-menu-links button{display:grid;gap:4px;padding:14px 20px;border:0;background:#fff;text-align:left}.account-menu-links button:hover{background:var(--wash)}.account-menu-links span{color:var(--muted);font-size:11px}

@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; }
  .account-form-grid,.team-invite-form{grid-template-columns:1fr}.account-form-grid .form-wide{grid-column:auto}
}