/* 我的IP主页形象：标签在画面外上方，人物画面保持无遮挡。 */
:root {
  --ip-avatar-cycle-card-width: 86px;
  --ip-avatar-cycle-ring-width: 2px;
  --ip-avatar-cycle-badge-offset: 6px;
  --ip-avatar-cycle-badge-pad-block: 3px;
  --ip-avatar-cycle-badge-pad-inline: 4px;
  --ip-avatar-cycle-badge-radius: 999px;
  --ip-avatar-cycle-badge-font-size: 9px;
  --ip-avatar-cycle-label-row-gap: 2px;
  --ip-avatar-cycle-shell-gap: 5px;
  --ip-avatar-cycle-transition: 120ms cubic-bezier(.23, 1, .32, 1);
  --ip-avatar-cycle-busy-opacity: .68;
}

.ip-avatar-shell {
  width: var(--ip-avatar-cycle-card-width);
  display: flex;
  flex-direction: column;
  gap: var(--ip-avatar-cycle-shell-gap);
  align-self: start;
}

.ip-avatar-label-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ip-avatar-cycle-label-row-gap);
}

.pc-avatar[data-ip-avatar-cycle] {
  border: var(--ip-avatar-cycle-ring-width) solid var(--selection-color, var(--success));
  box-shadow: 0 0 0 var(--ip-avatar-cycle-ring-width) var(--selection-ring);
  cursor: pointer;
  transition: border-color var(--ip-avatar-cycle-transition), box-shadow var(--ip-avatar-cycle-transition), opacity var(--ip-avatar-cycle-transition);
}

.pc-avatar[data-ip-avatar-cycle]::after {
  content: '↻ 切换';
  position: absolute;
  z-index: 3;
  bottom: var(--ip-avatar-cycle-badge-offset);
  left: var(--ip-avatar-cycle-badge-offset);
  padding: var(--ip-avatar-cycle-badge-pad-block) var(--ip-avatar-cycle-badge-pad-inline);
  border: 1px solid var(--selection-color, var(--success));
  border-radius: var(--ip-avatar-cycle-badge-radius);
  background: var(--bg-overlay, var(--bg-primary));
  color: var(--selection-color, var(--success));
  font-size: var(--ip-avatar-cycle-badge-font-size);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.ip-avatar-origin,
.ip-avatar-gender {
  min-width: 0;
  padding: var(--ip-avatar-cycle-badge-pad-block) var(--ip-avatar-cycle-badge-pad-inline);
  border-radius: var(--ip-avatar-cycle-badge-radius);
  background: var(--bg-overlay, var(--bg-primary));
  font-size: var(--ip-avatar-cycle-badge-font-size);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.ip-avatar-origin {
  border: 1px solid var(--selection-color, var(--success));
  color: var(--selection-color, var(--success));
}

.ip-avatar-shell:has(.pc-avatar[data-ip-avatar-source='platform']) .ip-avatar-origin {
  border-color: var(--accent-start);
  color: var(--accent-start);
}

.ip-avatar-gender {
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.pc-avatar.ip-avatar-switching {
  cursor: wait;
  opacity: var(--ip-avatar-cycle-busy-opacity);
}

.pc-avatar.ip-avatar-switching::after {
  content: '保存中';
}

.ip-avatar-preset {
  grid-column: 1 / -1;
  border-color: var(--selection-color, var(--success));
  box-shadow: 0 0 0 var(--ip-avatar-cycle-ring-width) var(--selection-ring);
  background: var(--selection-surface);
}

.ip-avatar-preset .sw {
  color: var(--selection-color, var(--success));
}

.ip-avatar-preset:has(select:disabled) {
  border-color: var(--border-color);
  box-shadow: none;
  background: var(--bg-secondary);
}

@media (max-width: 680px) {
  :root {
    --ip-avatar-cycle-card-width: 76px;
    --ip-avatar-cycle-badge-pad-inline: 3px;
  }
}