@media (max-width: 768px) {
    .cards-grid { grid-template-columns: 1fr; }
    .card-detail .traits { grid-template-columns: 1fr; }
    .profile-container .info-grid { grid-template-columns: 1fr; }
    .profile-container .two-col-grid { grid-template-columns: 1fr; }
    .charts-row { flex-direction: column; }
    .chart-col > p { height: auto; }
    #app { padding: 16px; }
    .card-detail, .profile-container { padding: 20px; }
    #exportPdfBtn { display: none; }
}
@media (max-width: 500px) {
    .num-card { padding: 14px; }
    .num-card .circle { width: 52px; height: 52px; font-size: 20px; }
}
@media (max-width: 400px) {
    .landing-form-header h2 { font-size: 17px; }
    .landing-form-header p { font-size: 12px; }
    .landing-btn { padding: 14px; font-size: 15px; }
    .landing-row .field input,
    .landing-row .field select { padding: 10px 12px; font-size: 14px; }
}