@media (max-width: 1024px) {
    .auth-layout,
    .content-grid-2,
    .content-grid-3,
    .approval-detail-layout,
    .certificate-view-layout,
    .signup-layout,
    .form-grid,
    .form-grid-3,
    .form-grid-4,
    .form-grid-5 {
        grid-template-columns: 1fr;
    }

    .content-grid-main {
        grid-template-columns: 1fr;
    }

    .hero-card,
    .login-card {
        min-height: auto;
    }

    .hero-badges {
        grid-template-columns: 1fr;
    }

    .sidebar,
    .right-tools {
        border: none;
        border-top: 1px solid var(--color-border);
    }

    .service-logo {
        height: 24px;
    }

    .form-row {
        flex-direction: column;
        gap: 12px;
    }

    .form-col,
    .form-col-2,
    .form-col-3,
    .form-col-full {
        flex: 1 1 100%;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .app-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 20px;
    }

    .brand-group {
        width: 100%;
    }

    .brand-title,
    .page-title,
    .result-title {
        font-size: 20px;
    }

    .page-wrap {
        padding: 24px 16px 40px;
    }

    .card-body,
    .sidebar,
    .right-tools,
    .content-stage,
    .popup-header,
    .popup-body,
    .popup-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .form-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-row,
    .section-tools,
    .table-actions,
    .popup-footer,
    .sub-link-row {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .sub-link-row {
        gap: 10px;
    }

    .table thead th,
    .table tbody td {
        padding: 12px;
        font-size: 13px;
    }

    .popup-backdrop {
        padding: 12px;
    }
}