﻿@media (max-width: 900px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        background: #030409 !important;
    }

    .dashboard-shell,
    .backend-shell,
    .dashboard-layout,
    .backend-layout,
    .dashboard-page,
    .admin-shell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .dashboard-sidebar,
    .backend-sidebar,
    .sidebar,
    .side-menu {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 18px 18px 16px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        overflow: hidden !important;
    }

    .dashboard-sidebar .logo,
    .backend-sidebar .logo,
    .sidebar-logo,
    .dashboard-logo {
        margin-bottom: 18px !important;
    }

    .sidebar-nav,
    .dashboard-nav,
    .backend-nav {
        display: grid !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    .sidebar-nav a,
    .dashboard-nav a,
    .backend-nav a,
    .side-menu a {
        min-height: 48px !important;
        padding: 12px 14px !important;
        border-radius: 16px !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    .sidebar-help,
    .help-box,
    .dashboard-help {
        margin-top: 16px !important;
        padding: 16px !important;
        border-radius: 20px !important;
    }

    .sidebar-help p,
    .help-box p,
    .dashboard-help p {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .dashboard-main,
    .backend-main,
    .dashboard-content,
    .backend-content,
    .admin-main,
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 18px 80px !important;
        overflow-x: hidden !important;
    }

    .dashboard-topbar,
    .backend-topbar,
    .page-topbar,
    .topbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .dashboard-topbar h1,
    .backend-topbar h1,
    .page-title,
    .dashboard-main h1,
    .backend-main h1,
    .dashboard-content h1,
    .backend-content h1 {
        font-size: 32px !important;
        line-height: 1.08 !important;
        letter-spacing: -1px !important;
        margin: 0 0 8px !important;
    }

    .dashboard-topbar p,
    .backend-topbar p,
    .dashboard-main p,
    .backend-main p,
    .dashboard-content p,
    .backend-content p {
        font-size: 16px !important;
        line-height: 1.45 !important;
    }

    .stats-grid,
    .metric-grid,
    .dashboard-cards,
    .summary-grid,
    .cards-grid,
    .product-grid,
    .settings-grid,
    .install-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .stat-card,
    .metric-card,
    .dashboard-card,
    .summary-card,
    .panel-card,
    .product-card,
    .settings-card,
    .install-card,
    .license-card,
    .download-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 20px !important;
        border-radius: 22px !important;
        box-sizing: border-box !important;
    }

    .stat-card h2,
    .metric-card h2,
    .dashboard-card h2,
    .summary-card h2,
    .panel-card h2,
    .product-card h2,
    .settings-card h2,
    .install-card h2,
    .license-card h2,
    .download-card h2 {
        font-size: 26px !important;
        line-height: 1.12 !important;
        margin-bottom: 10px !important;
    }

    .stat-card h3,
    .metric-card h3,
    .dashboard-card h3,
    .summary-card h3,
    .panel-card h3,
    .product-card h3,
    .settings-card h3,
    .install-card h3,
    .license-card h3,
    .download-card h3 {
        font-size: 22px !important;
        line-height: 1.15 !important;
    }

    .card-icon,
    .metric-icon,
    .product-icon,
    .status-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        font-size: 24px !important;
        border-radius: 16px !important;
    }

    .profile-row,
    .account-row,
    .license-row,
    .download-row,
    .info-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: start !important;
    }

    .btn,
    .ea-btn,
    .dashboard-btn,
    .backend-btn,
    .copy-btn,
    button,
    a.button {
        max-width: 100% !important;
        min-height: 46px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
    }

    input,
    select,
    textarea {
        max-width: 100% !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    .desktop-only {
        display: none !important;
    }
}
