.dash-header-icon{
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  width:32px; height:32px;
  background:transparent;
  border:none;
  padding:0;

  color:var(--ink);
  cursor:pointer;
  text-decoration:none;
}
.dash-header-icon svg{ width:32px; height:32px; display:block; }

.dash-avatar{
  width:28px; height:28px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:var(--line-strong);
}
.dash-avatar-img{ width:100%; height:100%; object-fit:cover; display:block; }
.dash-avatar-initial{
  font-family:var(--font-display); font-size:12.5px; font-weight:600;
  color:var(--ink); line-height:1; user-select:none;
}

.dash-apps-toggle, .dash-user-toggle{
  width:36px;
  height:36px;
  padding:0;
  border:none;
  border-radius:50%;
  background:transparent;
}
.dash-apps-toggle:hover, .dash-user-toggle:hover{ background:var(--nav-active); }
.dash-user-menu{ position:relative; display:flex; }

.dash-user-menu.is-open .dash-user-toggle{
  background:var(--nav-active);
}

.dash-apps-menu{ position:relative; display:flex; }

.dash-apps-menu.is-open .dash-apps-toggle{
  background:var(--nav-active);
}
.dash-apps-menu-list{ min-width:190px; z-index:var(--z-dropdown); }

.dash-apps-menu-item{
  display:flex; align-items:center; gap:8px;
  color:var(--ink);
}
.dash-apps-menu-item:hover{ color:var(--ink); }
.dash-apps-menu-item .dash-icon{ width:24px; height:24px; }
.dash-apps-menu-item .dash-icon svg{ width:24px; height:24px; display:block; }
.dash-apps-menu-item-name{ font-size:13px; font-weight:400; }

.dash-apps-menu-title{
  padding:6px 8px 4px;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  text-align:left;
}
.dash-apps-toggle:focus-visible, .dash-user-toggle:focus-visible{
  outline:2px solid var(--line-strong);
  outline-offset:1px;
}
.dash-user-menu-list{ min-width:260px; z-index:var(--z-dropdown); }

.dash-user-menu-info{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:8px;
  margin:0;
  border-radius:var(--radius-xs);
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.dash-user-menu-info:hover{ background:var(--nav-active); }

.dash-user-menu-info-text{ flex:1; min-width:0; }
.dash-user-menu-info-text strong{
  display:block; font-family:var(--font-display); font-size:13px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.dash-user-menu-info-text span{
  display:block; font-size:13px; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.dash-user-menu-info-chevron{
  width:10px; height:10px; flex-shrink:0;
  background-color:var(--ink-soft);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.account-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.account-row:last-of-type{ border-bottom:none; }

.account-row[hidden]{ display:none; }
.dash-user-menu-plan{
  margin:0 8px;
  padding:4px 0 8px;
}

.dash-user-menu-plan .account-row{
  padding:4px 0;
  border-bottom:none;
  gap:10px;
}
.dash-user-menu-plan .account-row > span:first-child{
  font-size:13px; color:var(--ink-soft);
}
.dash-user-menu-plan .account-row strong{
  font-size:13px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dash-user-menu-upgrade{
  width:calc(100% - 16px);
  margin:8px 8px;
}

.dash-user-menu-plan .dash-user-menu-upgrade{
  width:100%;
  margin:4px 0 0;
}

.dash-user-menu-storage{
  margin:0 8px;
  padding:8px 0;
}

.dash-user-menu-storage .account-row{
  padding:0 0 8px;
  border-bottom:none;
  gap:10px;
}
.dash-user-menu-storage .account-row > span:first-child{
  font-size:13px; color:var(--ink-soft);
}
.dash-user-menu-storage .account-row strong{
  font-size:13px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.storage-usage-bar{
  height:8px;
  border-radius:var(--radius-pill);
  background:var(--bg-sunken);
  border:1px solid var(--line);
  overflow:hidden;
}
.storage-usage-bar-fill{
  height:100%;
  width:0%;
  background:var(--accent);
  border-radius:var(--radius-pill);
  transition:width .25s ease, background .15s ease;
}
.storage-usage-bar-fill.is-full{ background:var(--danger); }

.dash-user-menu-theme{
  margin:0 8px;
  padding:8px 0 0;
}
.dash-user-menu-theme-label{ font-size:13px; color:var(--ink-soft); margin-bottom:6px; }
.dash-theme-options{ display:flex; flex-direction:column; gap:0px; }
.dash-theme-option{
  display:flex;
  align-items:center;
  gap:10px;

  width:calc(100% + 16px);
  margin:0 -8px;
  border:none;
  background:none;
  cursor:pointer;
  padding:6px 8px;
  border-radius:var(--radius-xs);
  font-family:var(--font-body);
  font-size:13px;
  color:var(--ink-soft);
  text-align:left;
}
.dash-theme-option:hover{ background:var(--nav-active); color:var(--ink); }
.dash-theme-option:focus-visible{ outline:2px solid var(--line-strong); outline-offset:1px; }
.dash-theme-option[aria-checked="true"]{ color:var(--ink); }
.dash-theme-dot{
  position:relative;
  width:8px;
  height:8px;
  flex-shrink:0;
}
.dash-theme-option[aria-checked="true"] .dash-theme-dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;

  background:currentColor;
}
