/* ============================================================
   RuleMaker 官网 — 移动端适配补丁
   2026-10-19：手机端自检后的修复。只在 ≤768px 生效，不碰桌面样式。
   ============================================================ */

/* ---------- ≤768px：顶栏 / 页脚 / 二维码浮块 ---------- */
@media (max-width: 768px) {
    /* body 是 column flex，.container 作为 flex 项默认 min-width:auto，
       会被内容的最大宽度顶大；这一条让页面宽度始终等于视口 */
    body > .container { min-width: 0; width: 100%; }

    /* 顶栏：给汉堡按钮足够点击面积，同时保证 360px 宽不溢出 */
    .header .container { padding-left: 16px; padding-right: 16px; }
    .header-actions { gap: 6px; }
    .header-actions .btn { padding: 7px 12px; font-size: 13px; min-height: 38px; }
    .menu-toggle {
        min-width: 40px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        padding: 10px 8px;
    }

    /* 页脚底栏：允许换行，避免“竖排单字 / 数字中间断行” */
    .footer-bottom {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 10px;
        text-align: center;
        line-height: 1.8;
    }
    .footer-bottom > * { white-space: nowrap; }

    /* 造物学院“售后咨询”二维码：不再固定悬浮遮挡正文，改为正文末尾的块 */
    #afterSalesWidget {
        position: static !important;
        right: auto !important;
        bottom: auto !important;
        margin: 28px auto 0;
        width: max-content;
        max-width: 100%;
    }

    /* 设备卡操作条：先允许换行（窄屏再改等分网格） */
    .dc-actions { flex-wrap: wrap; }

    /* 客服 / 隐私 / 协议：收掉过大的顶部留白 */
    .support-body, .policy-body { padding: 28px 20px 40px; }
}

/* ---------- ≤600px：窄屏主布局 ---------- */
@media (max-width: 600px) {
    /* 首页轮播：触屏用滑动/圆点，箭头会压住海报文字 */
    .carousel-arrow { display: none; }
    .carousel-dots { bottom: 10px; gap: 6px; }
    .carousel-dot { width: 16px; height: 16px; }

    /* 我的设备：操作条放进一行，但用 flex-wrap（grid 的最小宽度会把整页撑宽） */
    .dc-actions {
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px;
    }
    .dc-actions .dc-btn {
        flex: 1 1 auto;
        min-width: 48px;
        padding: 8px 2px;
        justify-content: center;
        font-size: 12px;
        gap: 3px;
    }
    .dc-actions .dc-btn svg { width: 12px; height: 12px; }
    .dc-more { flex: 0 0 auto; margin-left: 0; }
    .device-card { padding: 14px; }
    .dc-temps { gap: 6px; }
    /* 温度胶囊实际是“一个 .dc-temp 里塞三组温度”，内部不换行会顶宽整页；
       分组后只允许在“喷嘴/热床/腔”之间换行，不拆开单组 */
    .dc-temp.device-temp { flex-wrap: wrap; width: 100%; }
    .dc-temp-grp { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
    .dc-temp.device-temp > span[style*="width:1px"] { display: none; }
    .dc-temp { padding: 4px 9px; font-size: 12px; }

    /* 设备页里的三个 .section 是嵌套块，避免上下各 48px 的大空白 */
    .container > .section { padding: 24px 0; }

    /* 个人中心：模型管理工具栏换行 + 模型卡单列 */
    #myModelsSection > div:first-child > div:last-child { flex-wrap: wrap; }
    #assetSearch { flex: 1 1 120px; width: auto !important; min-width: 0; }
    #modelList { grid-template-columns: 1fr !important; }
    .profile-card { padding: 18px 14px; }

    /* AI 创作：4 列模式卡改 2 列；3D 建模入口改上下排 */
    .creation-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .mode-card { padding: 20px 10px; }
    .mode-card .icon { font-size: 30px; }
    .modeler-entry {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        padding: 20px !important;
    }
    .modeler-entry > a { justify-content: center; }

    /* 产品网格：340px 固定下限会撑宽 360px 窄屏 */
    .products-list { grid-template-columns: 1fr !important; }

    /* 模型社区：搜索框、分类各占一行，不再出现“孤零零一个放大镜” */
    #searchInput { flex: 1 1 100%; width: 100% !important; }
    #catFilter { flex: 1 1 100%; }
    .models-grid { grid-template-columns: 1fr; gap: 14px; }
    .model-card .info { padding: 14px 16px; }
    .model-card .info .meta span { padding: 6px 0; }
    .model-card [onclick*="toggleCardMenu"] { padding: 8px 6px !important; }

    /* 学院左右翻页按钮 */
    .row-nav button { width: 40px; height: 40px; }

    /* 表单：16px 防 iOS 聚焦自动放大 */
    .form-input,
    input.form-input,
    textarea.form-input,
    select.form-input { font-size: 16px; }
    #searchInput,
    #faqSearch,
    #assetSearch { font-size: 16px !important; }
    .auth-page { min-height: 0; padding: 32px 16px 40px; }
    .auth-card { padding: 28px 20px; }
    .auth-card input[type="checkbox"],
    .form-input[type="checkbox"] { width: 18px; height: 18px; }
    .auth-footer a { display: inline-block; padding: 4px 0; }
}

/* ---------- ≤480px：再收一档 ---------- */
@media (max-width: 480px) {
    .creation-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dc-actions .dc-btn { font-size: 11.5px; }
    .mode-card h3 { font-size: 15px; }
}