/* ======================================================
   PROFILBOX – IDENTISCH ZUR WELCOME-BOX
====================================================== */

.profile-box {
  align-items: center;
  justify-content: flex-start;
  text-align: center;

  padding: 18px 18px 20px;
  gap: 12px;
}

/* ======================================================
   NEON RAHMEN – EXAKT WIE WELCOME-BOX
====================================================== */

.profile-box::before,
.profile-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.profile-box::before {
  border: 2px solid transparent;
  background:
    linear-gradient(
      90deg,
      var(--primary),
      var(--accent),
      var(--primary-light)
    ) border-box;

  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  animation: neo-border 6s linear infinite;
}

.profile-box::after {
  inset: 6px;
  border-radius: calc(var(--box-radius) - 6px);
  background: radial-gradient(
    circle at top,
    rgba(0,255,136,.18),
    transparent 70%
  );
  opacity: .6;
}

/* ======================================================
   HEADER
====================================================== */

.profile-box .box-header {
  padding: 12px 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-light);
  text-shadow: 0 0 6px rgba(201,241,255,.45);
}

/* ======================================================
   CONTENT
====================================================== */

.profile-box .box-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: .95rem;
}

/* ======================================================
   AVATAR
====================================================== */

.profile-avatar-container {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  padding: 3px;
  margin-inline: auto;

  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 24px rgba(0,255,136,.45);
}

.profile-avatar-container img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
}

/* ======================================================
   TEXT
====================================================== */

.profile-greeting {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 6px rgba(0,255,136,.6);
  margin: 0;
}

.profile-info {
  font-size: .95rem;
  color: var(--foreground);
}

/* ======================================================
   LINKS
====================================================== */

.profile-links ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-links a {
  color: var(--primary-light);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;

  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.04);

  transition: background var(--transition), color var(--transition);
}

.profile-links a:hover {
  background: rgba(0,255,136,.15);
  color: var(--accent);
}