/* Custom Header */
.custom-header {
    background: var(--primary-gradient);
    /* Use gradient */
    color: white;
    padding: 20px 24px 80px 24px;
    /* More bottom padding for content overlap */
    border-bottom-left-radius: 40px;
    /* Smoother curve */
    border-bottom-right-radius: 40px;
    position: relative;
    z-index: 10;
    box-shadow: 0 10px 30px -10px rgba(5, 150, 105, 0.4);
    /* Green tinted shadow */
}

/* Avatar Container */
.header-user-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    /* Subtle transparency */
    padding: 3px;
    /* Gap between border and image */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: transform 0.2s ease;
}

.header-user-avatar:active {
    transform: scale(0.95);
}

.header-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: white;
    /* Fallback */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}