/**
 * Main Styles
 * GoalFlow MVP
 */

/* Additional Utility Classes */
.text-center {
    text-align: center;
}

.text-muted {
    color: var(--text-muted);
}

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

/* Level Badge */
.level-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: var(--accent-gradient);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* XP Display */
.xp-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.xp-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.xp-fill {
    height: 100%;
    background: var(--accent-gradient);
    transition: width 0.5s ease;
}