.main-content {
    padding: clamp(16px, 2.5vw, 30px) !important;
}

.header,
.header-top {
    gap: 16px;
}

.header-actions,
.actions {
    flex-wrap: wrap;
}

.header-actions {
    max-width: 100%;
}

.page-title {
    line-height: 1.2;
}

.btn {
    min-height: 44px;
}

.form-container,
.section,
.card,
.table-container,
.stats-card,
.stat-card,
.step-card,
.result-card,
.chart-card,
.container,
.login-container {
    max-width: 100%;
}

.form-grid {
    gap: 18px;
}

.dashboard-cards,
.stats-container,
.features {
    gap: clamp(16px, 2vw, 30px) !important;
}

.cover-hero,
.features,
.container,
.login-container {
    padding-left: clamp(20px, 4vw, 50px) !important;
    padding-right: clamp(20px, 4vw, 50px) !important;
}

.preview-table,
.ranking-table,
table {
    max-width: 100%;
}

.table-container,
.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody {
    width: 100%;
}

.table-container,
.dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 992px) {
    .header,
    .header-top {
        align-items: flex-start !important;
    }

    .header-actions {
        width: 100%;
    }
}

@media (max-width: 768px) {
    body {
        padding: 0;
    }

    .main-content {
        padding: 16px !important;
    }

    .header,
    .header-top {
        gap: 12px !important;
    }

    .header-actions,
    .actions {
        width: 100%;
        gap: 10px !important;
    }

    .header-actions .btn,
    .actions .btn {
        justify-content: center;
    }

    .page-title {
        font-size: 24px !important;
    }

    .form-container,
    .section,
    .card,
    .container {
        padding: 18px !important;
    }

    .login-container {
        padding: 32px 22px !important;
    }

    .cover-hero {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .features {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    .dashboard-cards,
    .stats-container,
    .form-grid {
        gap: 14px !important;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 14px !important;
    }

    .page-title {
        font-size: 22px !important;
    }

    .form-container,
    .section,
    .card,
    .container {
        padding: 16px !important;
    }

    .cover-title {
        line-height: 1.15;
    }
}