/* =====================================================
   INNO-XMART 手机端响应式适配 V3
   适用：手机端 <= 768px
   PC端保持原样
   ===================================================== */


/* =====================================================
   手机端主体
   ===================================================== */

@media screen and (max-width: 768px) {

    /* =========================
       1. 全局基础适配
       ========================= */

    html,
    body,
    #app {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
    }

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

    img,
    video,
    canvas,
    svg,
    model-viewer {
        max-width: 100% !important;
    }


    /* ==================================================
       2. 顶部导航
       Logo居中
       菜单居中
       教程/token计划/登录一排
       ================================================== */

    .nav-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        flex-wrap: nowrap !important;

        margin: 0 !important;

        padding: 12px 12px 16px !important;

        gap: 0 !important;
    }


    /* ---------- Logo ---------- */

    .nav-left {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex: none !important;

        margin: 0 0 10px 0 !important;

        padding: 0 !important;
    }


    .nav-left img {
        display: block !important;

        width: auto !important;
        height: auto !important;

        max-width: 220px !important;

        margin: 0 auto !important;
    }


    /* ---------- 四个主菜单 ---------- */

    .nav-menu,
    .nav-items {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 16px !important;

        margin: 0 !important;

        padding: 0 4px !important;

        white-space: nowrap !important;

        overflow-x: visible !important;
        overflow-y: visible !important;
    }


    .nav-item {
        flex: 0 0 auto !important;

        margin: 0 !important;

        padding: 0 !important;

        font-size: 14px !important;
        line-height: 1.4 !important;

        white-space: nowrap !important;
    }


    /* ---------- 教程 / token计划 / 登录 ---------- */

    .nav-right {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 14px !important;

        margin: 14px 0 0 0 !important;

        padding: 0 !important;
    }


    .nav-right button,
    .nav-right a,
    .nav-right .nav-btn,
    .nav-right .nav-button {
        flex: 0 0 auto !important;

        width: auto !important;

        min-width: 0 !important;
        min-height: 0 !important;

        padding: 10px 16px !important;

        font-size: 15px !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
    }



    /* ==================================================
       3. 首页 Hero
       解决原来的 min-width:1200px
       ================================================== */

    .hero-section,
    .hero-section[data-v-57348d2e] {
        width: 100% !important;
        max-width: 100vw !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 35px 14px 30px !important;

        min-height: auto !important;

        position: relative !important;

        align-items: stretch !important;

        gap: 20px !important;

        overflow: hidden !important;
    }



    /* ==================================================
       4. Hero 总布局
       ================================================== */

    .hero-layout-container,
    .hero-layout-container[data-v-57348d2e] {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        display: block !important;

        margin: 0 !important;

        padding: 0 !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;
    }


    .hero-layout-container[data-v-57348d2e] > * {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;
    }



    /* ==================================================
       5. 首页主要内容
       ================================================== */

    .main-layout,
    .hero-center-content,
    .main-content {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 12px !important;
        padding-right: 12px !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;
    }


    .hero-center-content {
        text-align: left !important;
    }



    /* ==================================================
       6. 首页标题
       ================================================== */

    .main-title {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 22px 0 !important;

        padding: 0 !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;

        white-space: normal !important;

        word-break: normal !important;

        font-size: 34px !important;

        line-height: 1.22 !important;
    }



    /* ==================================================
       7. 副标题 / 描述
       ================================================== */

    .main-desc,
    .hero-subtitle {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;

        white-space: normal !important;

        font-size: 16px !important;

        line-height: 1.65 !important;
    }


    .hero-section li,
    .hero-section p {
        line-height: 1.55 !important;
    }



    /* ==================================================
       8. 机器人 / 首页主视觉
       ================================================== */

    .main-image-container,
    .main-image-wrapper {
        width: 92% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        margin-left: auto !important;

        /* 稍微向右移动 */
        margin-right: -18% !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;

        top: auto !important;
        bottom: auto !important;

        transform: none !important;

        overflow: visible !important;
    }


    .main-image {
        display: block !important;

        width: 88% !important;
        max-width: 430px !important;

        height: auto !important;

        margin-left: auto !important;

        /* 稍微向右移动 */
        margin-right: -10% !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;

        top: auto !important;
        bottom: auto !important;

        transform: none !important;
    }



    /* ==================================================
       9. AI功能按钮
       文生图 / AI扩图 / AI消除等
       ================================================== */

    .ai-tools-grid-surround {
        width: 100% !important;
        max-width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 12px !important;

        margin: 15px auto 0 !important;

        padding: 0 !important;

        top: auto !important;
    }



    /* ==================================================
       10. Hero按钮
       ================================================== */

    .hero-section button,
    .hero-section a {
        max-width: 100% !important;
    }



    /* ==================================================
       11. 通用表单
       防止手机输入框溢出
       ================================================== */

    input,
    textarea,
    select {
        max-width: 100% !important;

        font-size: 16px !important;
    }


    textarea {
        resize: vertical;
    }



    /* ==================================================
       12. 通用容器
       ================================================== */

    .content-wrapper,
    .trend-content-wrapper,
    .brand-showcase-inner,
    .brand-content-wrapper,
    .recommendations-wrapper,
    .showcase-container,
    .header-container {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }



    /* ==================================================
       13. 弹窗
       ================================================== */

    .modal,
    .dialog {
        max-width: calc(100vw - 24px) !important;
    }

}



/* =====================================================
   普通小屏手机
   <= 480px
   ===================================================== */

@media screen and (max-width: 480px) {

    .hero-section,
    .hero-section[data-v-57348d2e] {
        padding: 25px 12px 25px !important;
    }


    .main-title {
        font-size: 32px !important;

        line-height: 1.22 !important;
    }


    .main-desc,
    .hero-subtitle {
        font-size: 15px !important;
    }


    .main-image {
        width: 82% !important;
    }

}



/* =====================================================
   超小屏手机
   <= 390px
   ===================================================== */

@media screen and (max-width: 390px) {

    /* Logo */
    .nav-left img {
        max-width: 190px !important;
    }


    /* 四个菜单 */
    .nav-menu,
    .nav-items {
        gap: 11px !important;

        padding-left: 2px !important;
        padding-right: 2px !important;
    }


    .nav-item {
        font-size: 12px !important;
    }


    /* 三个按钮 */
    .nav-right {
        gap: 9px !important;
    }


    .nav-right button,
    .nav-right a,
    .nav-right .nav-btn,
    .nav-right .nav-button {
        padding: 9px 12px !important;

        font-size: 14px !important;
    }


    /* 标题 */
    .main-title {
        font-size: 30px !important;
    }

}

/* =====================================================
   INNO 首页英文视觉标题手机端修复
   调整对象：
   INNO / ART / INTELLIGENT
   不影响顶部 Inno-XMART 导航Logo
   ===================================================== */

@media screen and (max-width: 768px) {

    /* INNO / ART 所在区域 */
    .logo-area[data-v-57348d2e] {
        width: 100% !important;
        max-width: 100% !important;

        position: relative !important;

        left: 0 !important;
        right: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 22px !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        transform: none !important;

        text-align: center !important;

        overflow: visible !important;
    }


    /* logo-area里面的内容统一居中 */
    .logo-area[data-v-57348d2e] > * {
        margin-left: auto !important;
        margin-right: auto !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;
    }


    /* INTELLIGENT英文大字 */
    .ai-text[data-v-57348d2e] {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 16px !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        text-align: center !important;

        font-size: clamp(34px, 9.5vw, 48px) !important;

        line-height: 1.15 !important;

        letter-spacing: 2px !important;

        white-space: normal !important;

        transform: none !important;
    }


    /* INTELLIGENT后面的点，如有 */
    .ai-text .dots[data-v-57348d2e] {
        display: inline !important;

        font-size: 0.8em !important;

        letter-spacing: 3px !important;
    }

}


/* 小屏手机进一步缩小 */
@media screen and (max-width: 390px) {

    .ai-text[data-v-57348d2e] {
        font-size: 32px !important;
        letter-spacing: 1px !important;
    }

}

/* =====================================================
   INNO-XMART 手机端最终顶部修正
   1. 顶部Logo恢复之前的小尺寸靠左布局
   2. 三个按钮与 INNO 英文视觉标题拉开距离
   3. 不修改下面Hero正文、机器人、CTA
   ===================================================== */

@media screen and (max-width: 768px) {

    /* ==================================================
       一、顶部导航恢复之前的布局
       ================================================== */

    .nav-container {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;

        align-items: center !important;
        justify-content: flex-start !important;

        padding: 12px 12px 14px !important;
        margin: 0 !important;

        gap: 0 !important;
    }


    /* ---------- 顶部 Inno-XMART Logo ---------- */

    .nav-left {
        width: auto !important;
        max-width: none !important;

        flex: 0 0 auto !important;

        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .nav-left img,
    .nav-left .logo-image {
        display: block !important;

        width: 135px !important;
        max-width: 135px !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
    }


    /* ==================================================
       二、版权服务 / 共创 / 公司资讯 / 设计服务
       和Logo保持在第一排
       ================================================== */

    .nav-menu,
    .nav-items {
        width: auto !important;
        max-width: none !important;

        flex: 1 1 0 !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: space-around !important;

        gap: 6px !important;

        margin: 0 !important;
        padding: 0 0 0 8px !important;

        white-space: nowrap !important;

        overflow: visible !important;
    }


    .nav-item {
        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 13px !important;
        line-height: 1.3 !important;

        white-space: nowrap !important;
    }


    /* ==================================================
       三、教程 / token计划 / 登录
       单独放第二排
       ================================================== */

    .nav-right {
        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 100% !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 18px !important;

        margin: 18px 0 0 0 !important;
        padding: 0 0 18px 0 !important;
    }


    .nav-right button,
    .nav-right a,
    .nav-right .nav-btn,
    .nav-right .nav-button {
        flex: 0 0 auto !important;

        width: auto !important;

        padding: 10px 17px !important;

        font-size: 15px !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
    }


    /* ==================================================
       四、把 INNO / ART / INTELLIGENT 往下移
       避免三个按钮压住英文
       ================================================== */

    .logo-area[data-v-57348d2e] {
        width: 100% !important;
        max-width: 100% !important;

        left: 0 !important;

        margin-top: 34px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 22px !important;

        text-align: center !important;

        transform: none !important;
    }


    /* INTELLIGENT保持居中 */
    .ai-text[data-v-57348d2e] {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;

        font-size: clamp(34px, 9.5vw, 48px) !important;

        line-height: 1.15 !important;

        transform: none !important;
    }

}


/* =====================================================
   390px及以下手机
   ===================================================== */

@media screen and (max-width: 390px) {

    .nav-left img,
    .nav-left .logo-image {
        width: 120px !important;
        max-width: 120px !important;
    }


    .nav-menu,
    .nav-items {
        gap: 4px !important;
        padding-left: 6px !important;
    }


    .nav-item {
        font-size: 12px !important;
    }


    .nav-right {
        gap: 11px !important;
    }


    .nav-right button,
    .nav-right a,
    .nav-right .nav-btn,
    .nav-right .nav-button {
        padding: 9px 13px !important;
        font-size: 14px !important;
    }


    .logo-area[data-v-57348d2e] {
        margin-top: 30px !important;
    }


    .ai-text[data-v-57348d2e] {
        font-size: 32px !important;
    }

}