:root {
    --primary: #4361ee;
    --primary-dark: #3a56d4;
    --primary-light: #eef2ff;
    --secondary: #7209b7;
    --accent: #f72585;
    --accent-gradient: linear-gradient(135deg, #f72585, #ff6b6b);
    --light: #f8f9fa;
    --dark: #212529;
    --darker: #121826;
    --gray: #6c757d;
    --light-gray: #e9ecef;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --gradient-primary: linear-gradient(135deg, #4361ee, #3a0ca3);
    --gradient-secondary: linear-gradient(135deg, #7209b7, #b5179e);
    --gradient-success: linear-gradient(135deg, #10b981, #059669);
    --gradient-warning: linear-gradient(135deg, #f59e0b, #d97706);
    --gradient-danger: linear-gradient(135deg, #ef4444, #c53030);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 25px 50px rgba(67, 97, 238, 0.15);
    --transition: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    --border-radius: 12px;
    --border-radius-lg: 20px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Spinner component */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Message box alerts */
.message-box {
    padding: 20px;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
    display: none;
    animation: fadeIn 0.3s ease;
}

.message-box.success {
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    display: block;
}

.message-box.error {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #7f1d1d;
    display: block;
}

.message-box i {
    margin-right: 10px;
    font-size: 18px;
}

/* Reusable Alert component */
.alert {
    padding: 15px 20px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    display: none;
}

.alert.show {
    display: flex;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert.success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.alert.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.alert.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.alert.info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--info);
}