.gpa-container { max-width: 1000px; margin: 40px auto; font-family: 'Outfit', sans-serif; padding: 0 15px; }

/* Calculator Card */
.gpa-card { 
    background: #ffffff; border-radius: 20px; padding: 30px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); display: flex; gap: 30px; margin-bottom: 50px;
}
.semester-box { flex: 2; }
.course-row { display: flex; gap: 10px; margin-bottom: 12px; background: #f8fafc; padding: 10px; border-radius: 12px; align-items: center; }
.course-row input, .course-row select { padding: 8px; border: 1px solid #e2e8f0; border-radius: 8px; flex: 1; }
.course-name { flex: 3 !important; }

.result-section { flex: 1; display: flex; align-items: center; justify-content: center; background: #0f172a; border-radius: 20px; color: white; }
.result-circle h2 { font-size: 48px; margin: 0; color: #38bdf8; }

/* 6-POINT CONTENT GUIDE (As per image_2bd940.png) */
.gpa-info-wrapper { text-align: left; }
.info-main-title { font-size: 26px; font-weight: 800; color: #1e293b; margin-bottom: 30px; border-bottom: 2px solid #f1f5f9; padding-bottom: 10px; }

.info-card-item { 
    background: #ffffff; border-radius: 15px; padding: 25px; margin-bottom: 20px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.02); border: 1px solid #f1f5f9; 
}
.info-card-h3 { 
    font-size: 18px; font-weight: 700; color: #1e293b; margin-bottom: 15px; 
    border-left: 5px solid #006644; padding-left: 15px; margin-top: 0; 
}
.info-card-body { font-size: 15px; color: #1b1b1b; line-height: 1.6; padding-left: 20px; text-align: justify; }

.formula-box { background: #f8fafc; padding: 12px; border-radius: 10px; display: inline-block; font-weight: 800; color: #e53e3e; margin: 15px 0; border: 1px dashed #cbd5e0; }

.info-visual-container { margin-top: 20px; padding: 15px; background: #fff; border: 1px dashed #cbd5e0; border-radius: 12px; text-align: center; }
.info-visual-container img { max-width: 100%; border-radius: 8px; }
.image-caption { font-size: 13px; color: #94a3b8; margin-top: 10px; }

.border-accent { border-bottom: 4px solid #006644; }
.info-disclaimer { font-size: 12px; color: #c43232; margin-top: 40px; background: #fff1f2; padding: 15px; border-radius: 10px; border: 1px solid #fecaca; text-align: justify; }

@media (max-width: 800px) { .gpa-card { flex-direction: column; } .result-section { order: -1; padding: 40px; } }