:root {
    --primary-color: #FF6B6B;
    --secondary-color: #4ECDC4;
    --accent-color: #FFE66D;
    --bg-color: #F7F9FC;
    --text-color: #2D3436;
    --card-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
body { font-family: 'Sarabun', sans-serif; background-color: var(--bg-color); color: var(--text-color); min-height: 100vh; }
.fade-in { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.bounce-hover:hover { transform: translateY(-5px); transition: all 0.3s; }
.card { border: none; border-radius: 20px; box-shadow: var(--card-shadow); transition: all 0.3s; overflow: hidden; }
.navbar-custom { background: linear-gradient(135deg, var(--primary-color), #ff8e8e); border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); padding: 15px 0; margin-bottom: 30px; }
.navbar-custom .navbar-brand, .navbar-custom .nav-link { color: white !important; font-weight: 600; }
.btn-custom { background-color: var(--primary-color); color: white; border-radius: 50px; padding: 12px 30px; font-weight: 600; border: none; width: 100%; }
.btn-custom:hover { background-color: #ff5252; color: white; }
.profile-header { background: linear-gradient(135deg, var(--secondary-color), #45b7af); color: white; padding: 20px; border-radius: 20px; margin-bottom: 30px; }
.avatar-circle { width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--secondary-color); margin: 0 auto 15px; }
.assessment-card { cursor: pointer; text-align: center; padding: 30px 20px; border-radius: 20px; height: 100%; position: relative; text-decoration: none; display: block;}
.assessment-card:hover { text-decoration: none; }
.assessment-card .icon { font-size: 50px; margin-bottom: 15px; }
.assessment-card.sdq { background-color: #ffeaa7; color: #d63031; }
.assessment-card.eq { background-color: #fab1a0; color: #d63031; }
.assessment-card.mi { background-color: #81ecec; color: #0984e3; }
.assessment-card.ls { background-color: #a29bfe; color: #6c5ce7; }
.status-badge { position: absolute; top: 15px; right: 15px; padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; background: white; }
.question-box { background: white; padding: 20px; border-radius: 15px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.radio-custom { margin-right: 10px; transform: scale(1.5); accent-color: var(--primary-color); }
.choice-label { font-size: 1.1rem; cursor: pointer; display: block; padding: 10px; border-radius: 10px; transition: 0.2s; }
.choice-label:hover { background-color: #f1f2f6; }
.chart-container { position: relative; height: 300px; width: 100%; margin-bottom: 30px; }
@media print { body { background: white; } .no-print, .navbar-custom { display: none !important; } .card { box-shadow: none; border: 1px solid #ddd; } .container { max-width: 100%; padding: 0; } }