.container-body.bio-desc {
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 16px 20px;
        background-color: color-mix(in srgb, var(--title-color, #2c2a35) 55%, transparent);
        border: 2px inset color-mix(in srgb, var(--title-color, #ff4fa3) 80%, transparent);
      }

      .container-body.bio-desc h2 {
          font-size: 1.3em;
          font-weight: 600;
          margin: 0 0 16px 0;
          letter-spacing: 1px;
      }

     .rRedTitle { color: rgba(255, 89, 94); }
     .rOrangeTitle { color: rgba(255, 146, 76); }
     .rYellowTitle { color: rgba(255, 202, 58); }
     .rGreenTitle { color: rgba(138, 201, 38); }
     .rBlueTitle { color: rgba(25, 130, 196); }
     .rIndigoTitle { color: rgba(106, 76, 147); }

     
     .rRedText { color: #ffacae; }
     .rOrangeText { color: #ffc8a5; }
     .rYellowText { color: #ffe49c; }
     .rGreenText { color: #c6e98d; }
     .rBlueText { color: #7fc3ef; }
     .rIndigoText { color: #b4a0ce; }


      .section {
        border-radius: 18px;
        padding: 24px 18px 18px 18px;
        min-height: 220px;
        margin-top: 40px;
        background-color: color-mix(in srgb, var(--title-color, #2c2a35) 55%, transparent);
        border: 2px inset color-mix(in srgb, var(--title-color, #ff4fa3) 80%, transparent);
      }
      
      .banner-text {
        font-size: 16px;
        font-weight: normal;
        margin-top: 0px;
      }

    .banner-text.pronouns {
        color: #ffe066;
    }

    .banner-text.timezone {
        color: silver;
    }

.section p,
.section li {
  line-height: 1.55;
}



.section.quote {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0 12px;
}


     /* Mobile-only header layout fix */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .badges {
    width: 100%;
    margin-top: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .user-info {
    align-items: center;
  }
}


.container-body.hover {
  will-change: transform;
  transition: transform 0.2s ease;
}

.container-body.hover:hover {
  transform: scale(1.03);
}

      .badge {
        font-size: 14px;
        font-family: 'Maple Mono', monospace;
      }


      .name-badge {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 500;
        font-family: 'Lexend', monospace;
        background: rgba(0,0,0,0.3);
        border: 2px solid #ffffff; 
      }


      .section.names {
        padding: 0px 10px 10px 0px;
        min-height: 0px;
        margin-top: 20px;
      }




      .name-badge.label {color: #ffffff; border: 1px none }
      .name-badge.love {color: #ff4fa3; border-color: #ff4fa3; }
      .name-badge.like {color: #4cd137; border-color: #4cd137; }
      .name-badge.dislike {color: #e63946; border-color: #e63946; }
      .name-badge.close {color: #ff6f00; border-color: #ff6f00; }
      .name-badge.dating {color: #a98eda; border-color: #a98eda; }
      .name-badge.dashed { border-style: dashed; }



      a.coloured {
        text-decoration: none; /* remove underline */
        color: inherit;        /* keep colors consistent */
      }



      .date-pill {
          display: inline-block;
          background-color: var(--title-color);
          color: white;
          padding: 4px 10px;
          border-radius: 999px;
          font-weight: bold;
          margin-right: 8px;
      }


      .flag-icon {
          height: 28px;
          width: auto;
          border-radius: 25%;
          vertical-align: middle;
          margin-right: 8px;
          object-fit: cover;
      }

      .links-list a {
          font-weight: normal;
      }


      .date-pill {
          display: inline-block;
          color: white;
          padding: 4px 10px;
          border-radius: 999px;
          font-weight: bold;
          margin-right: 8px;
          min-width: 80px;
          font-family: "Maple Mono", monospace;
      }


        .animated-link {
        display: inline-block;
        transition: transform 0.2s ease;
        font-size: 1.05em;
        font-weight: normal;
        font-family: 'lexend', sans-serif;
        }

        .animated-link:hover {
        transform: translateX(4px);
        }

        .link-row {
        display: flex;
        align-items: center;
        gap: 10px;
  margin-bottom: 12px; 
        }

        /* Force icons to same width */
        .link-row i {
        width: 1.4em;
        text-align: center;
        flex-shrink: 0;
        }