/* Utility Classes for Reusability */

/* Flexbox Utilities */
.flex { display: flex }
.flex-center { display: flex; align-items: center; justify-content: center }
.flex-between { display: flex; align-items: center; justify-content: space-between }
.flex-col { display: flex; flex-direction: column }
.items-center { align-items: center }
.justify-center { justify-content: center }
.gap-4 { gap: 4px }
.gap-8 { gap: 8px }
.gap-12 { gap: 12px }
.gap-16 { gap: 16px }

/* Text Utilities */
.text-center { text-align: center }
.font-bold { font-weight: 700 }
.font-600 { font-weight: 600 }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* Layout Utilities */
.relative { position: relative }
.absolute { position: absolute }
.w-full { width: 100% }
.h-full { height: 100% }

/* Border Utilities */
.rounded { border-radius: 4px }
.rounded-lg { border-radius: 8px }
.rounded-xl { border-radius: 12px }
.rounded-full { border-radius: 50% }

/* Common Button */
.btn-base {
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all .2s;
    padding: 8px 16px;
    border-radius: 20px
}

/* Profile Components */
.profile-img {
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover
}

.stat-item { text-align: center }
.stat-value { font-weight: 600; font-size: 14px }
.stat-label { font-size: 11px; opacity: 0.7 }

/* Collapsible */
.collapsible-header {
    background: var(--card);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer
}

.collapsible-arrow {
    font-size: 10px;
    transition: transform 0.2s
}