:root {
    --mobile-gap: 16px;
    --tablet-gap: 20px;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
canvas,
video,
iframe {
    max-width: 100%;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

.table-wrapper,
.market-table-wrap,
.table-card,
.wallet-table,
.trades-table-wrap {
    max-width: 100%;
}

@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        body {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }

        .nav,
        .top-bar,
        .hamburger,
        .main-content,
        .mobile-menu,
        .auth-modal-content,
        .exchange-modal-content,
        .pair-modal-content {
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }
    }
}

@media (max-width: 1200px) {
    .hero-split,
    .ai-layout,
    .about-grid,
    .workshop-layout,
    .idea-grid,
    .agents-content,
    .liquidity-content,
    .overview-row,
    .institutional-hero-grid,
    .institutional-strip-grid,
    .institutional-panel-grid,
    .period-report-grid,
    .analytics-panel-grid {
        grid-template-columns: 1fr !important;
    }

    .stats-grid,
    .features-grid,
    .token-grid,
    .growth-stats,
    .hiw-grid,
    .how-grid,
    .tiers-grid,
    .summary-stats,
    .footer-columns,
    .filters-grid,
    .mini-stat-grid,
    .crm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1024px) {
    .container,
    .hero-content,
    .nav-inner,
    .announcement-inner,
    .top-bar,
    .pair-bar {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .terminal {
        height: auto !important;
    }

    .user-card,
    .wallet-header,
    .crm-card-top,
    .cta-buttons,
    .hero-actions,
    .wallet-balance-hero,
    .wallet-balance-actions,
    .footer-bottom,
    .footer-inner {
        flex-wrap: wrap;
    }

    .user-card {
        align-items: flex-start !important;
    }
}

@media (max-width: 900px) {
    .terminal {
        display: grid;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto;
        gap: 1px;
        min-height: 0;
    }

    .chart-panel,
    .right-panel,
    .bottom-panel,
    #orderbookPanel,
    .panel:first-child {
        grid-column: 1 !important;
        grid-row: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    .chart-toolbar,
    .pair-bar,
    .top-bar,
    .wallet-balance-hero,
    .wallet-balance-actions,
    .bot-info-row,
    .auth-meta-row,
    .access-helper-row,
    .bot-status-header {
        flex-wrap: wrap;
        gap: 12px !important;
        height: auto !important;
    }

    .top-bar {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .pair-stats,
    .hero-trust-row {
        width: 100%;
        justify-content: flex-start;
    }

    .trade-form,
    .wallet-balance-actions,
    .cta-buttons,
    .hero-actions,
    .hero-cta-group,
    .hero-actions .btn,
    .cta-buttons .btn,
    .wallet-balance-actions .btn,
    .wallet-balance-actions button {
        width: 100%;
    }

    .pair-modal-content,
    .auth-modal-content,
    .exchange-modal-content,
    .panel,
    .cta-card,
    .summary-wrapper,
    .arch-diagram {
        width: min(100%, calc(100vw - 24px)) !important;
        max-width: 100% !important;
        margin-left: auto;
        margin-right: auto;
    }

    .market-table-wrap,
    .table-wrapper,
    .table-card,
    .wallet-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .market-table,
    .trades-table,
    .costs-table,
    .wallet-table table,
    .table-card table,
    table {
        min-width: 640px;
    }
}

@media (max-width: 768px) {
    h1,
    .hero-title {
        font-size: clamp(2rem, 9vw, 3rem) !important;
        line-height: 1.12 !important;
    }

    h2,
    .section-title,
    .cta-title {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
        line-height: 1.15 !important;
    }

    .container,
    .hero-content,
    .nav-inner,
    .announcement-inner,
    .main-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .section,
    .section-cta,
    .section-modules {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    .hero,
    .cta-card {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    .hero-subtitle,
    .section-subtitle,
    .cta-desc,
    .ai-desc,
    .platform-card-desc {
        font-size: 0.95rem !important;
    }

    .stats-grid,
    .features-grid,
    .token-grid,
    .growth-stats,
    .hiw-grid,
    .how-grid,
    .tiers-grid,
    .summary-stats,
    .footer-columns,
    .filters-grid,
    .mini-stat-grid,
    .crm-grid,
    .modules-grid,
    .why-grid {
        grid-template-columns: 1fr !important;
    }

    .footer-top,
    .footer-columns,
    .footer-bottom,
    .footer-inner,
    .hero-actions,
    .hero-cta-group,
    .cta-buttons,
    .hero-trust-row {
        gap: 12px !important;
    }

    .hero-actions,
    .hero-cta-group,
    .cta-buttons,
    .footer-bottom,
    .footer-bottom-links,
    .hero-trust-row,
    .wallet-balance-actions,
    .wallet-header,
    .exchange-switch-row,
    .selected-network-row,
    .bot-info-row,
    .user-card,
    .crm-card-top {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .user-info {
        margin-left: 0 !important;
    }

    .top-bar-nav,
    .top-bar-actions,
    .nav-actions,
    .nav-links,
    .announcement-bar {
        display: none !important;
    }

    .nav-burger,
    .hamburger {
        display: flex !important;
    }

    .top-bar-logo,
    .pair-selector,
    .wallet-balance-left,
    .wallet-balance-actions {
        width: 100%;
    }

    .hero-glow,
    .hero-image-glow,
    .hero-mesh-blob,
    .hero-gradient {
        max-width: 100%;
        opacity: 0.45 !important;
    }

    .chart-container,
    .chart-wrapper,
    #tradingChart,
    #mini-chart,
    canvas {
        min-height: 200px !important;
        height: 200px !important;
    }

    .sidebar {
        width: min(88vw, 320px) !important;
    }

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

    .overview-bot-select-row,
    .bot-toggle-container,
    .wallet-balance-hero,
    .wallet-balance-actions,
    .exchange-grid {
        gap: 12px !important;
    }

    .exchange-grid {
        grid-template-columns: 1fr !important;
    }

    .mobile-menu-links {
        width: min(100%, 420px);
        padding: 0 20px;
    }

    .mobile-menu-link {
        width: 100%;
        text-align: center;
    }

    .btn,
    .btn-sm,
    .btn-xl,
    .nav-link,
    .top-bar-btn,
    .wallet-action-btn,
    .exchange-card,
    .panel-tab,
    .chart-tf-btn {
        min-height: 44px;
    }
}

@media (max-width: 560px) {
    .hero-platform-card,
    .module-card,
    .why-card,
    .stat-card,
    .wallet-card,
    .crm-card,
    .auth-modal-content,
    .exchange-modal-content,
    .pair-modal-content,
    .summary-wrapper,
    .cta-card,
    .step-card,
    .trade-form,
    .bot-status-card,
    .mini-chart-card {
        padding: 16px !important;
    }

    .pair-price-main,
    .platform-card-title,
    .wallet-balance-amount,
    .stat-value {
        word-break: break-word;
    }

    .footer-columns {
        grid-template-columns: 1fr !important;
    }
}

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

    .container,
    .hero-content,
    .nav-inner,
    .announcement-inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero,
    .section,
    .section-cta,
    .section-modules {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .hero-title-line {
        font-size: clamp(1.9rem, 11vw, 3rem) !important;
    }

    .hero-subtitle,
    .section-subtitle,
    .cta-desc,
    .ai-desc,
    .platform-card-desc,
    p {
        overflow-wrap: anywhere;
    }

    .market-table,
    .trades-table,
    .costs-table,
    .wallet-table table,
    .table-card table,
    table {
        min-width: 560px;
    }

    .panel-header,
    .chart-toolbar,
    .trade-widget-header,
    .trade-widget-form,
    .access-benefits,
    .trade-widget-footer {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media (max-width: 380px) {
    .hero-title,
    .hero-title-line,
    h1 {
        font-size: clamp(1.65rem, 10vw, 2.2rem) !important;
    }

    .nav-logo-text,
    .logo-name {
        font-size: 0.78rem !important;
    }

    .pair-name,
    .pair-price-main,
    .wallet-balance-amount,
    .stat-value {
        font-size: clamp(1.1rem, 7vw, 1.6rem) !important;
    }

    .mobile-menu-link {
        font-size: 1.25rem !important;
    }
}