/* Profile Page */
.profile-header-card {
  display: flex; gap: var(--space-4); padding: var(--space-4); align-items: center; flex-wrap: wrap;
}
.profile-avatar-container {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex-shrink: 0;
}
.profile-avatar-lg {
  width: 80px; height: 80px; border-radius: var(--radius-lg); flex-shrink: 0;
  background: linear-gradient(135deg, var(--clr-accent), #cc7700);
  display: flex; align-items: center; justify-content: center; position: relative;
  overflow: hidden;
}
.profile-avatar-lg svg { width: 40px; height: 40px; color: #000; }
.profile-avatar-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.profile-avatar-online {
  position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--clr-success); border: 2px solid var(--clr-bg-panel);
}
.profile-avatar-upload-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; font-size: var(--text-xs); color: var(--clr-accent);
  background: var(--clr-accent-dim); border: 1px solid color-mix(in srgb, var(--clr-accent) 30%, transparent);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all var(--transition-fast);
  &:hover { border-color: var(--clr-accent); background: color-mix(in srgb, var(--clr-accent) 20%, transparent); }
}
.profile-details { flex: 1; min-width: 200px; }
.profile-nickname-lg { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-1); }
.profile-badges { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-2); }
.profile-online-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  background: color-mix(in srgb, var(--clr-success) 15%, transparent); color: var(--clr-success);
  font-size: var(--text-xs); border-radius: var(--radius-sm);
}
.profile-edit-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.profile-bio-section { margin-top: var(--space-4); }
.profile-bio-text { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: var(--leading-relaxed); white-space: pre-line; }
.profile-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.profile-stat-item { padding: var(--space-3); background: var(--clr-bg-input); border: 1px solid var(--clr-border); border-radius: var(--radius-md); }
.profile-stat-label { font-size: var(--text-xs); color: var(--clr-text-dim); margin-bottom: 2px; }
.profile-stat-value { font-size: var(--text-sm); color: var(--clr-text); }
.profile-account-info { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--clr-text-dim); }
.profile-login-prompt { text-align: center; padding: var(--space-12) var(--space-4); color: var(--clr-text-muted); }