.app-icon,
.dock-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
}

.icon-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  border-radius: 28%;
  background: var(--bing, linear-gradient(160deg, #4b5563, #111827));
  box-shadow: 0 9px 20px -6px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.16s ease;
  will-change: transform;
}

.icon-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.24) 0%,
    rgba(255, 255, 255, 0.05) 34%,
    transparent 58%
  );
  pointer-events: none;
}

.icon-tile svg {
  width: 66%;
  height: 66%;
  position: relative;
  z-index: 1;
}

.update-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 3;
  display: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ff453a;
  border: 2px solid rgba(10, 12, 20, 0.72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.has-update .update-dot {
  display: block;
  animation: update-pulse 2.4s ease-in-out infinite;
}

@keyframes update-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 69, 58, 0.18);
  }
}

.app-icon:active .icon-tile,
.dock-icon:active .icon-tile {
  transform: scale(0.88);
  filter: brightness(0.86);
}

.app-icon:focus-visible .icon-tile,
.dock-icon:focus-visible .icon-tile {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.icon-label {
  max-width: 100%;
  overflow: hidden;
  padding: 0 2px;
  font-size: calc(var(--label-size, 11.5px) * var(--text-scale, 1));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.1px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.dock-icon .icon-tile {
  width: var(--dock-tile, 56px);
  height: var(--dock-tile, 56px);
  border-radius: 27%;
}

.app-icon {
  -webkit-touch-callout: none;
}

@media (max-width: 380px) {
  .dock-icon .icon-tile {
    width: 50px;
    height: 50px;
  }
}

@media (min-width: 1024px) and (min-height: 640px) {
  .app-icon {
    gap: 8px;
  }
}