:root { --primary: #1a3c6d; }
        body { background: #f8fafc; font-family: 'Segoe UI', system-ui, Roboto, sans-serif; }
        .max-container { max-width: 480px; margin: 0 auto 80px auto; padding: 15px; }
        .card { border-radius: 20px; box-shadow: 0 10px 30px -10px rgba(26, 60, 109, 0.15); border: none; overflow: hidden; }
        .btn-primary { background-color: var(--primary); border-color: var(--primary); }
        .btn-primary:hover { background-color: #132d52; }
        .editProfileBtn { background-color: #6c757d; color: #ffffff; }
        .viewProfileBtn { background-color: #6c757d; color: #ffffff; }
        .logoutBtn { background-color: #dc3545; color: #ffffff; }
        .deleteProfileBtn { background-color: #dc3545; color: #ffffff; }
        .refreshBtn { background-color: #0d6efd; color: #ffffff; }
        .form-control, .form-select { border-radius: 12px; padding: 12px 16px; font-size: 1rem; }
        .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 0.25rem rgba(26, 60, 109, 0.15); }
        .upload-zone { border: 2.5px dashed #cbd5e1; border-radius: 16px; padding: 24px 16px; text-align: center; background: #f8fafc; transition: all 0.3s ease; }
        .upload-zone:hover { border-color: var(--primary); background: #f0f7ff; }
        .profile-img-new { width: 180px; height: 180px; object-fit: cover; object-position: top; border-radius: 20px; border: 6px solid white; box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
        .section-title { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin: 28px 0 14px; text-transform: uppercase; letter-spacing: 0.6px; }
        .spinner { width: 48px; height: 48px; border: 5px solid #e2e8f0; border-bottom-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .meta-text { font-size: 0.95rem; color: #64748b; }
        
        /* HEADER & APP BAR */
        header {
            background: #fff; padding: 10px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 12px;
        }
        .header-icon { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; border: 1px solid #eee; }
        .logo { font-size: 16px; font-weight: 700; color: var(--primary); letter-spacing: 0.5px; }
        header a { margin-left: auto; color: var(--primary); text-decoration: none; background-color: #689de7; padding: 4px 8px; border-radius: 4px; color: white; }

        /* DOB Triple Input Styling */
        .dob-group { display: flex; gap: 8px; }
        .dob-group input { text-align: center; padding: 12px 5px !important; }
        .dob-day, .dob-month { flex: 1; }
        .dob-year { flex: 2; }
        input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .fixedAtBottom { position: fixed; bottom: 0; left: 0; width: 100%; background: #f8fafc; padding: 10px 15px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); }
        .fixedAtBottom .mt-4, .fixedAtBottom .row>* { margin-top: 0 !important; }
        #cancelReloadBtn { display: none; }