.account-bar {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:18px 0;
  color:var(--muted,#5f6672);
  font-size:13px}
.header-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap}
.header-top .account-bar {
  margin:0 0 0 auto;
  justify-content:flex-end;
  max-width:100%;
  flex:1 1 300px}
.header-top .account-bar>span {
  overflow-wrap:anywhere;
  text-align:right}
.header-top .account-bar button,.header-top .account-bar a {
  flex-shrink:0}
@media(max-width:640px) {
  .header-top {
  gap:12px}
.header-top .brand {
  gap:10px}
.header-top .brand .logo-img {
  width:40px;
  height:40px}
.header-top .brand h1 {
  font-size:21px}
.header-top .brand .kicker {
  font-size:9px}
.header-top .account-bar {
  flex:1 1 60px;
  gap:6px;
  font-size:12px}
.header-top .account-bar>span {
  display:none}
.header-top .account-bar button,.header-top .account-bar a {
  padding:8px 10px}
}
.account-bar button,.account-bar a,.account-dialog button {
  border:1px solid var(--border,#e7e9ee);
  background:var(--surface,#fff);
  color:var(--text,#16181d);
  border-radius:9px;
  padding:9px 14px;
  font:inherit;
  text-decoration:none;
  cursor:pointer}
.account-dialog {
  width:min(420px,calc(100% - 32px));
  box-sizing:border-box;
  padding:26px;
  border:1px solid var(--border,#e7e9ee);
  border-radius:18px;
  background:var(--surface,#fff);
  color:var(--text,#16181d)}
.account-dialog::backdrop {
  background:#10182888;
  backdrop-filter:blur(4px)}
.account-dialog h2 {
  margin:0 0 20px}
.account-dialog label {
  display:grid;
  gap:7px;
  margin:14px 0;
  font-size:14px}
.account-dialog input {
  box-sizing:border-box;
  width:100%;
  padding:12px;
  border:1px solid var(--border,#e7e9ee);
  border-radius:9px;
  background:var(--bg,#f4f5f8);
  color:inherit;
  font:inherit}
.account-actions {
  display:flex;
  gap:10px;
  margin-top:20px}
.account-dialog .primary {
  background:#2f6bff;
  color:white;
  border-color:#2f6bff}
.account-error {
  color:#c53030;
  min-height:20px;
  font-size:14px}
.account-note {
  font-size:12px;
  line-height:1.7;
  color:var(--muted,#5f6672)}


.account-settings {
  position: relative;
  flex-shrink: 0}
.account-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px}
.account-settings-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: currentColor}
.account-settings-icon svg {
  display: block}
.account-settings-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 184px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border: 1px solid var(--border, #e7e9ee);
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16)}
.account-settings-panel[hidden] {
  display: none}
.account-bar .account-settings-panel .account-settings-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--text, #16181d);
  text-align: left;
  text-decoration: none;
  cursor: pointer}
.account-bar .account-settings-panel .account-settings-item:hover,
.account-bar .account-settings-panel .account-settings-item:focus-visible {
  background: var(--surface-2, #f7f8fa);
  color: var(--text, #16181d);
  outline: 2px solid var(--accent, #2f6bff);
  outline-offset: -2px}
.account-bar .account-settings-panel .account-settings-item:disabled {
  opacity: 0.55;
  cursor: default}
.account-settings-note {
  margin: 6px 4px 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2, #f7f8fa);
  color: var(--down, #ef4444);
  font-size: 12px;
  line-height: 1.5}
@media (max-width: 640px) {
  .account-settings-toggle {
    min-height: 40px}
  .account-settings-panel {
    min-width: 172px}
}