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

    body {
        padding-bottom: 92px !important;
    }

    * {
        box-sizing: border-box !important;
    }

    .eabot-mobile-hidden-sidebar,
    aside,
    .sidebar,
    .side-menu,
    .dashboard-sidebar,
    .backend-sidebar {
        display: none !important;
    }

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

    .dashboard-main,
    .backend-main,
    .dashboard-content,
    .backend-content,
    .main-content,
    main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 84px 16px 110px !important;
        overflow-x: hidden !important;
    }

    .eabot-mobile-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99998;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 18px;
        background: rgba(5, 7, 12, .94);
        border-bottom: 1px solid rgba(255,255,255,.08);
        backdrop-filter: blur(18px);
    }

    .eabot-mobile-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #f8f3e8;
        font-weight: 950;
        letter-spacing: 4px;
        font-size: 21px;
    }

    .eabot-mobile-brand img {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .eabot-mobile-chip {
        color: #080808;
        background: linear-gradient(135deg, #fff06a, #ffd21f 45%, #d69d00);
        font-weight: 900;
        padding: 10px 13px;
        border-radius: 999px;
        font-size: 13px;
    }

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

    h2 {
        font-size: 23px !important;
        line-height: 1.12 !important;
    }

    h3 {
        font-size: 20px !important;
        line-height: 1.15 !important;
    }

    p,
    li,
    label {
        font-size: 15px !important;
        line-height: 1.42 !important;
    }

    .topbar,
    .dashboard-topbar,
    .backend-topbar,
    .page-head,
    .page-header {
        display: block !important;
        margin-bottom: 18px !important;
    }

    .stats-grid,
    .metric-grid,
    .summary-grid,
    .dashboard-cards,
    .cards-grid,
    .product-grid,
    .settings-grid,
    .install-grid,
    .license-grid,
    .downloads-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .card,
    .dashboard-card,
    .backend-card,
    .panel-card,
    .metric-card,
    .summary-card,
    .product-card,
    .license-card,
    .download-card,
    .settings-card,
    .install-card,
    .news-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 18px !important;
        border-radius: 22px !important;
        margin: 0 0 12px !important;
        overflow: hidden !important;
        background:
            radial-gradient(circle at 20% 0%, rgba(255,210,31,.08), transparent 34%),
            rgba(255,255,255,.045) !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        box-shadow: 0 18px 50px rgba(0,0,0,.25) !important;
    }

    .product-card h1,
    .product-card h2,
    .product-card h3,
    .dashboard-card h1,
    .dashboard-card h2,
    .dashboard-card h3 {
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

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

    .card-icon,
    .metric-icon,
    .product-icon,
    .status-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        border-radius: 14px !important;
        font-size: 21px !important;
    }

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

    input,
    select,
    textarea,
    code {
        max-width: 100% !important;
        font-size: 15px !important;
    }

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

    .eabot-mobile-dock {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 99999;
        height: 66px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
        padding: 8px;
        border-radius: 24px;
        background: rgba(8,10,16,.94);
        border: 1px solid rgba(255,255,255,.11);
        box-shadow: 0 18px 60px rgba(0,0,0,.58);
        backdrop-filter: blur(18px);
    }

    .eabot-mobile-dock a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: rgba(248,243,232,.70);
        text-decoration: none;
        font-size: 17px;
        border-radius: 17px;
        min-width: 0;
    }

    .eabot-mobile-dock a span {
        font-size: 10px;
        font-weight: 850;
        line-height: 1;
        white-space: nowrap;
    }

    .eabot-mobile-dock a.active,
    .eabot-mobile-dock a:active {
        color: #ffd21f;
        background: rgba(255,210,31,.12);
    }
}

@media (min-width: 901px) {
    .eabot-mobile-topbar,
    .eabot-mobile-dock {
        display: none !important;
    }
}
