/* Profile page styles (shared EN/ES) — extracted from the old inline <style>. */
.profile-page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-bottom: var(--space-20);
}

/* ─── BANNER ─── */
.profile-banner {
  width: 100%;
  height: 220px;
  background: var(--bg-elevated);
  position: relative;
  overflow: hidden;
}

.profile-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-banner-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}

/* ─── PROFILE HEADER ─── */
.profile-header {
  padding: 0 var(--container-padding);
  position: relative;
}

.profile-identity {
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
  margin-top: -50px;
  margin-bottom: var(--space-5);
}

.profile-avatar-wrap { flex-shrink: 0; }

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid var(--bg);
  object-fit: cover;
  display: block;
  background: var(--bg-elevated);
}

.profile-avatar-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid var(--bg);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  color: var(--text-muted);
}

.profile-info {
  padding-bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-handle-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.profile-handle {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  letter-spacing: -1.5px;
  color: var(--text);
  margin: 0;
}

/* Badge chip styling lives in assets/CSS/main.css (shared with leaderboard). */
.profile-badges-all {
  display: none;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ─── CONTRIBUTION STATS ─── */
.profile-stats {
  display: none;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.profile-stat strong { color: var(--text); font-weight: 600; }

.profile-stat-main {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(255, 95, 0, 0.35);
}
.profile-stat-main strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-lg);
}

.profile-stat-rank {
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 2px 11px;
  box-shadow: 0 0 10px rgba(255, 95, 0, 0.25), inset 0 0 8px rgba(255, 95, 0, 0.12);
}
.profile-stat-rank strong { color: var(--accent); font-weight: 700; }

.profile-stat-sep { color: var(--text-ghost); }

/* ─── BIO ─── */
.profile-bio {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 560px;
  margin: 0;
}

.profile-actions {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.profile-edit-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  color: var(--text-ghost);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.profile-edit-link:hover { color: var(--text-muted); }

/* ─── FOLLOW ─── */
.profile-stat-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.profile-stat-btn:hover strong { color: var(--accent); }

.profile-follow-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.profile-follow-btn:hover { opacity: 0.85; }

.profile-follow-btn.is-following {
  color: var(--text);
  background: transparent;
  border-color: var(--border-bold);
}

.profile-follow-btn.is-following:hover {
  color: #ff6b6b;
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.08);
  opacity: 1;
}

.profile-follow-panel {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
}

.profile-follow-panel-list { display: flex; flex-direction: column; gap: var(--space-1); }

.profile-follow-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.profile-follow-row:hover { background: var(--bg-raised); }

.profile-follow-avatar,
.profile-follow-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.profile-follow-avatar-placeholder {
  background: var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.profile-follow-handle {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text);
}

/* ─── REVIEWS SECTION ─── */
.profile-content {
  padding: 0 var(--container-padding);
  margin-top: var(--space-10);
}

.profile-section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: -0.5px;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.profile-reviews-list { display: flex; flex-direction: column; }

/* ─── REVIEW CARD ─── */
.profile-review-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.profile-review-card:hover .profile-review-item-name { color: var(--accent); }

.profile-review-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-elevated);
  display: block;
  flex-shrink: 0;
}

.profile-review-thumb-placeholder {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(
    45deg,
    var(--bg-elevated),
    var(--bg-elevated) 3px,
    var(--bg-raised) 3px,
    var(--bg-raised) 6px
  );
  flex-shrink: 0;
}

.profile-review-body { display: flex; flex-direction: column; gap: var(--space-1); }

.profile-review-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.profile-review-item-name {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text);
  transition: color var(--transition-fast);
}

.profile-review-stars {
  font-size: var(--text-sm);
  color: var(--accent);
  letter-spacing: 1px;
}

.profile-review-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-ghost);
  margin-left: auto;
}

.profile-review-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.profile-empty {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-faint);
  padding: var(--space-12) 0;
  letter-spacing: 0.5px;
}

.profile-not-found {
  padding: var(--space-20) var(--container-padding);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-faint);
  letter-spacing: 0.5px;
}

@media (max-width: 600px) {
  .profile-banner { height: 140px; }
  .profile-handle { font-size: var(--text-xl); }
  .profile-identity { margin-top: -40px; }
  .profile-avatar,
  .profile-avatar-placeholder { width: 80px; height: 80px; }
}