/* 手机与平板的布局补充；原有样式和电脑端视觉保留。 */
.mobile-sidebar-toggle { display: none; }
.sidebar-menu-wrap { height: 100%; }

@media (max-width: 1000px) {
    :root { --mobile-header-height: 112px; }
    body:not(.edit-page-body) .header { height: var(--mobile-header-height); }
    body:not(.edit-page-body) .header-inner,
    body.help-page .header-inner {
        position: relative;
        display: block;
        width: 100%;
        height: var(--mobile-header-height);
        padding: 12px 16px 0;
    }
    body:not(.edit-page-body) .logo { width: fit-content; height: 32px; }
    body:not(.edit-page-body) .logo-text { font-size: 18px; white-space: nowrap; }
    body:not(.edit-page-body) .logo-img { height: 28px; }
    body:not(.edit-page-body) .nav-right {
        width: 100%;
        height: 56px;
        margin-top: 8px;
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    body:not(.edit-page-body) .nav-link {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 10px 8px;
        font-size: 13px;
    }
    body:not(.edit-page-body) .admin-nav-link { width: auto; min-width: 64px; }
    body:not(.edit-page-body) .user-info { display: none; }
    body:not(.edit-page-body) .user-static-info {
        position: absolute;
        top: 12px;
        right: 16px;
        height: 32px;
        margin: 0;
        padding: 0 8px;
    }
    body:not(.edit-page-body) .user-phone { display: none; }
    .header .user-info-popup {
        position: fixed;
        top: var(--mobile-header-height);
        right: 16px;
        left: auto;
        width: min(340px, calc(100vw - 32px));
        max-height: calc(100vh - var(--mobile-header-height) - 24px); max-height: calc(100dvh - var(--mobile-header-height) - 24px);
        overflow-y: auto;
        transform: none;
    }
    .header .user-static-info:hover .user-info-popup:not(.mobile-open) { opacity: 0; visibility: hidden; }
    .header .user-static-info .user-info-popup.mobile-open { opacity: 1; visibility: visible; }
    .page-container { width: calc(100% - 32px); margin-top: var(--mobile-header-height); }

    /* 后台菜单收起后不占用正文宽度。 */
    body:has(.main-wrapper) { display: block; height: auto; min-height: 100vh; }
    .main-wrapper { margin-top: var(--mobile-header-height); flex-direction: column; height: auto; }
    .main-wrapper > .sidebar-shell { width: 100%; height: auto; padding: 16px 16px 0; }
    .sidebar-menu-wrap { height: auto; }
    .mobile-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 44px;
        padding: 0 16px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        color: #333;
        font: inherit;
        cursor: pointer;
    }
    .sidebar-shell .sidebar { display: none; width: 100%; height: auto; padding: 12px 0; }
    .sidebar-shell .sidebar.mobile-menu-open { display: block; max-height: 55vh; max-height: 55dvh; overflow-y: auto; }
    .main-wrapper > .main-content { width: 100%; height: auto; min-width: 0; padding: 16px; overflow: visible; }
    .main-content > div:has(> .sidebar1),
    .main-content > div:has(> .member-sidebar) { flex-direction: column; height: auto !important; gap: 16px; }
    .main-content .sidebar1,
    .member-sidebar { width: 100%; height: auto; max-height: 240px; margin: 0; overflow-y: auto; }
    .main-content .sidebar1 { padding: 16px; }
    .main-content .qrcode-page { width: 100%; height: auto; margin-left: 0; padding: 16px; }
    .qrcode-page .top-bar,
    .qrcode-page .top-bar > .flex-row { flex-wrap: wrap; gap: 12px; }
    .qrcode-page .top-bar > .flex-row { width: 100%; }
    .qrcode-page .top-bar .mr20 { margin-right: 0; }
    .qrcode-page .search-wrap { flex: 1; min-width: 180px; margin-right: 0; }
    .qrcode-page .search { width: 100%; }
    .qrcode-page .table { height: auto; max-height: none; overflow: visible; }
    .qrcode-page .row { flex-wrap: wrap; gap: 8px; padding: 16px 0; }
    .qrcode-page .info { min-width: 0; flex-basis: calc(100% - 100px); }
    .qrcode-page .name { flex-wrap: wrap; overflow-wrap: anywhere; }
    .qrcode-page .dir-name-col,
    .qrcode-page .time { width: auto; margin: 0; font-size: 12px; }
    .qrcode-page .action { width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 16px; }
    .qrcode-page .action-btn { margin: 0; padding: 8px 0; }
    .dir-item .dir-more { opacity: 1; }
    .pagination, .key-pager, .ka-pager { flex-wrap: wrap; gap: 8px; justify-content: center; }

    /* 首页输入、预览和说明内容依次排列。 */
    .conten-cor { flex-direction: column; gap: 16px; margin-bottom: 24px; }
    .qrcode-main { width: 100%; min-width: 0; flex: none; }
    .qrcode-subnav { gap: 8px; padding: 16px 0; }
    .subnav-item { min-height: 36px; padding: 0 14px; }
    .preview-wrap { width: 100%; max-width: 400px; margin: 0 auto; }
    .preview-wrap .preview-card { width: 100%; }
    .preview-wrap .preview-card.qrcode { height: 220px; }
    .content-input { font-size: 16px; }
    .content-panel.url { padding: 24px 16px; }
    .url-subnav { gap: 16px; flex-wrap: wrap; }
    .url-input, .media-title-input { width: 100%; max-width: 100%; font-size: 16px; }
    .mod-act { gap: 8px; flex-wrap: wrap; padding: 0 12px 16px; }
    .mod-btn { width: auto; min-width: 90px; padding: 0 10px; }
    .btn-box { margin: 20px 0; }
    .generate-btn { width: 100%; min-height: 44px; }
    .home-default-content { width: calc(100% + 32px); margin-left: -16px; }
    .home-section, .home-type-intro, .home-tutorial-section { padding: 36px 16px; }
    .home-section h2, .home-type-intro > h2 { font-size: 22px; }
    .home-showcase-tabs { justify-content: flex-start; gap: 8px; overflow-x: auto; }
    .home-showcase-tabs button { flex-shrink: 0; }
    .home-showcase-window { aspect-ratio: auto; padding-top: 40px; }
    .home-showcase-body { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
    .home-showcase-preview img { width: 100%; max-width: 100%; height: auto; }
    .home-showcase-copy { padding: 8px 0; }
    .home-showcase-copy p { margin-bottom: 20px; }
    .home-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
    .home-feature-card { aspect-ratio: auto; padding: 20px; }
    .home-feature-card > div { margin-top: 24px; }
    .home-industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-tutorial-grid { grid-template-columns: 1fr; }
    .home-footer { grid-template-columns: 1fr; gap: 28px; padding: 32px 16px 20px; }
    .home-footer-brand { padding: 0; border: 0; }
    .home-social-primary { flex-wrap: wrap; gap: 16px; justify-content: flex-start; }
    .home-footer-bottom { flex-direction: column; gap: 12px; line-height: 1.8; }
    .link-scence-box { width: 100%; padding: 0 16px; }
    .form-create-btns, .form-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .form-template-section { padding: 20px 16px; }
    .form-template-card { height: auto; min-height: 96px; padding: 12px; gap: 8px; }
    .form-template-card-icon { width: 32px; height: 32px; }

    /* 工作台与各管理页面。 */
    .top-stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .stat-card { padding: 20px 16px; gap: 12px; min-width: 0; }
    .card-icon { flex-shrink: 0; }
    .chart-wrap { flex-direction: column; gap: 16px; }
    .chart-left, .chart-right { width: 100%; min-width: 0; }
    .chart-container { margin-top: 0; height: 300px; }
    .time-tab { padding: 8px 16px; }
    .admin-grid-top, .statistics-page .grid-cols-2 { grid-template-columns: 1fr; }
    .admin-info-row, .version-row, .member-title { flex-wrap: wrap; gap: 8px; }
    .info-value { overflow-wrap: anywhere; }
    .form-card { height: auto; padding: 16px; }
    .form-card-header, .form-header-actions { flex-wrap: wrap; gap: 12px; }
    .form-header-actions { width: 100%; }
    .form-search-box { flex: 1; min-width: 160px; }
    .form-search-input { width: 100%; font-size: 16px; }
    .form-table-scroll { width: 100%; max-height: 65vh; max-height: 65dvh; flex: none; overflow: auto; }
    .form-table-scroll .table-container { min-width: 850px; }
    .member-main { width: 100%; padding: 16px; }
    .member-table-header, .search-bar { flex-wrap: wrap; gap: 12px; }
    .member-table-wrapper, .invoice-table-wrap, .compare-table-wrap { max-width: 100%; overflow-x: auto; }
    .member-table, .invoice-table, .compare-table { min-width: 760px; }
    .key-card { max-width: 100%; overflow-x: auto; }
    .key-card-header, .key-header-right, .ka-toolbar, .ka-plan-info, .space-header, .space-toolbar { flex-wrap: wrap; gap: 12px; }
    .key-table, .ka-table { min-width: 760px; }
    .ka-progress-track { max-width: 100%; }
    .space-usage { max-width: 100%; }
    .space-list.is-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .brand-page { flex-direction: column; overflow: visible; }
    .brand-preview-side { width: 100%; padding: 16px; }
    .brand-phone-preview { width: min(320px, 100%); margin: 0 auto; }
    .brand-setting-side, .brand-settings-wrap, .brand-settings { width: 100%; min-width: 0; overflow: visible; }
    .brand-settings { padding: 20px 16px; }
    .brand-style-list { flex-wrap: wrap; }
    .brand-style-card { flex-basis: 100%; }
    .brand-style-name { flex-wrap: wrap; }
    .status-toolbar { flex-wrap: wrap; gap: 12px; }
    .status-search { min-width: 0; flex: 1; }
    .status-search-input { width: 100%; }
    .status-table-wrapper { max-width: 100%; overflow-x: auto; }
    .status-table { min-width: 760px; }
    .status-modal-box > .status-modal-body { padding: 16px; }
    .status-form-row { flex-direction: column; gap: 8px; }
    .status-form-label { width: auto; line-height: 24px; }
    .status-name-input, .status-items-wrapper { width: 100%; }
    .status-item-row { flex-wrap: wrap; gap: 12px; }
    .status-item-editor { width: 100%; }
    .status-item-input, .status-form-input { font-size: 16px; }
    .status-item-actions { margin-left: auto; }
    .file-box, .recovery-modal-box { width: 100%; max-width: 100%; }
    .clear-page { max-width: 100%; margin-top: var(--mobile-header-height); padding: 24px 16px; }

    /* 模板分类改为可横向滑动的菜单，预览按钮支持触屏。 */
    body:has(.template-sidebar)::before { display: none; }
    .page-container:has(.template-sidebar) { grid-template-columns: 1fr; gap: 16px; padding-top: 16px; }
    .template-sidebar { position: static; display: flex; gap: 8px; padding: 10px; max-height: none; overflow-x: auto; }
    .template-sidebar button { width: auto; flex-shrink: 0; min-height: 40px; }
    .template-menu-caption { display: none; }
    .template-main .toolbar { position: static; flex-wrap: wrap; gap: 12px; padding: 0; }
    .template-main .toolbar-right, .template-main .search-box { width: 100%; }
    .template-main .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .template-section { scroll-margin-top: 128px; }
    .template-card-hover { opacity: 1; visibility: visible; background: transparent; align-items: flex-end; padding-bottom: 12px; }
    .vip-wrap { margin-top: var(--mobile-header-height); padding: 24px 16px; }
    .vip-card { width: calc(50% - 8px); min-width: 0; }
    .vip-feature-popover { position: fixed; left: 16px !important; right: 16px; bottom: 24px; top: auto !important; width: auto; min-width: 0 !important; max-width: none !important; transform: none !important; }
    .vip-feature-popover::before, .vip-feature-popover::after { display: none; }

    /* 帮助中心的文章和目录改为上下布局。 */
    body.help-page { height: auto; overflow: visible; }
    .help-shell { flex-direction: column; height: auto; padding-top: var(--mobile-header-height); }
    .help-sidebar { width: 100%; padding: 20px 16px; max-height: 240px; overflow-y: auto; }
    .help-main { width: 100%; overflow: visible; scrollbar-gutter: auto; }
    .hero-inner, .faq-wrap, .search-results { width: 100%; padding-left: 16px; padding-right: 16px; }
    .help-main .search-box { width: 100%; }
    .entry-grid { grid-template-columns: 1fr; }
    .faq-tabs { display: flex; overflow-x: auto; }
    .faq-tab { flex-shrink: 0; padding: 0 16px; }
    .faq-grid { grid-template-columns: 1fr; }
    .help-hero-background { overflow: hidden; }
    .help-article-view .article-container { padding: 24px 16px; }

    /* 弹窗按可用视口约束，长内容在弹窗内滚动。 */
    .login-container, .pay-container, .modal-box, .admin-modal-box,
    .bank-modal-box, .form-data-dialog, .form-setting-dialog, .form-rule-dialog,
    .member-picker-dialog, .key-gen-modal-box, .bf-save-template-box,
    .invoice-modal, .brand-link-modal, .image-preview-modal,
    .print-modal-container, .dl-modal-box, .resource-modal-container {
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
        min-width: 0;
    }
    .modal-box, .key-gen-modal-body { width: 100%; }
    .login-container { height: auto; overflow-y: auto; }
    .login-left { display: none; }
    .login-right { width: 100%; padding: 48px 20px 24px; }
    .login-tab-content, .phone-login-form, .forgot-form { width: 100%; }
    .login-input { max-width: 100%; font-size: 16px; }
    .pay-container { flex-direction: column; overflow-y: auto; }
    .pay-left, .pay-right, .pay-left-container, .pay-right-container { width: 100%; min-width: 0; }
    .pay-duration-row, .pay-method-tabs, .pay-bank-form { flex-wrap: wrap; }
    .preview-modal .modal-box { flex-direction: column; align-items: center; gap: 12px; overflow-y: auto; padding: 12px 0; }
    .preview-phone { width: min(340px, calc(100vw - 48px)); height: min(620px, calc(100vh - 110px)); height: min(620px, calc(100dvh - 110px)); aspect-ratio: auto; flex-shrink: 0; }
    .preview-qrcode-card { width: 100%; max-width: 340px; }
    .preview-modal .btn-close-preview { position: fixed; top: 12px; right: 12px; z-index: 3; width: auto; margin: 0; padding: 8px 12px; }
    .form-designer { width: calc(100vw - 24px); height: calc(100vh - 24px); height: calc(100dvh - 24px); }
    .form-create-modal { width: calc(100vw - 24px); height: calc(100vh - 24px); height: calc(100dvh - 24px); }
    .form-create-modal-header { flex-shrink: 0; padding: 16px 48px 16px 16px; }
    .form-create-modal-body { flex-direction: column; min-height: 0; }
    .form-create-sidebar { display: flex; flex: none; gap: 8px; padding: 8px 12px; overflow-x: auto; }
    .form-create-cat-item { flex-shrink: 0; padding: 0 12px; }
    .form-create-content { min-height: 0; min-width: 0; }
    .form-create-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-create-action-btn { min-width: 0; padding: 12px; font-size: 14px; }
    .form-create-action-icon { width: 28px; height: 28px; }
    .form-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .form-create-tpl-preview { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
    .form-designer-body { flex-direction: column; min-height: 0; overflow-y: auto; padding: 12px; gap: 12px; }
    .form-designer-panel, .form-designer-canvas { width: 100%; flex: none; overflow: visible; }
    .form-designer-panel { max-height: 240px; overflow-y: auto; }
    .form-designer-canvas { height: auto; min-height: 320px; }
    .form-designer-props-column { width: 100%; flex: none; }
    .form-designer-props { overflow: visible; }
    .form-designer-prop-row input[type="text"] { min-width: 0; font-size: 16px; }
    .form-designer-group-items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0 12px; }
    .form-designer-header { padding-right: 48px; }
    .form-designer-footer { flex-wrap: wrap; gap: 8px; }
    .bf-modal-box { width: calc(100vw - 24px); height: calc(100vh - 24px); height: calc(100dvh - 24px); flex-direction: column; overflow-y: auto; }
    .bf-modal-left { width: 100%; flex: none; }
    .bf-tab-content { overflow: visible; }
    .bf-modal-right { width: 100%; padding: 16px; }
    .bf-preview-qrcode { width: min(260px, 100%); }
    .bf-tabs, .bf-sub-tabs { overflow-x: auto; }
    .bf-tab, .bf-sub-tab { flex-shrink: 0; }
    .bf-template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .form-data-body, .form-setting-body { min-width: 0; overflow: auto; }
    .form-data-body { padding: 12px; }
    .form-data-record-head, .form-data-record-row { min-width: 850px; }
    .form-data-qr-head, .form-data-qr-row { min-width: 760px; }
    .form-qr-image-modal-box > img { max-width: calc(100vw - 32px); height: auto; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
    .form-qr-image-modal-close { top: 8px; right: 8px; }
    .form-data-top, .form-data-title-row, .form-data-filter-row { flex-wrap: wrap; gap: 12px; }
    .form-data-tabs { overflow-x: auto; }
    .form-data-tab { flex-shrink: 0; }
    .print-modal-body, .dl-modal-body { overflow: auto; }
    .print-modal-footer, .dl-modal-footer { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 600px) {
    .home-feature-grid, .home-industry-grid, .home-tutorial-grid { grid-template-columns: 1fr; }
    .home-tutorial-card { grid-template-columns: 1fr; }
    .home-social-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-feature-card > div { gap: 12px; }
    .top-stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card { padding: 16px 12px; gap: 8px; }
    .card-icon { width: 32px; height: 32px; }
    .card-num { font-size: 20px; }
    .card-text { font-size: 12px; }
    .chart-left, .right-card, .admin-card { padding: 16px; }
    .template-main .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .vip-card { width: 100%; }
    .space-list.is-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .main-content .grid-cols-2 { grid-template-columns: 1fr; }
    .clear-card { padding: 24px 16px; }
    .clear-tables { column-count: 1; overflow-wrap: anywhere; }
    .main-content .flex:has(> .time-btn) { flex-wrap: wrap; gap: 8px; }
    .brand-form-row { flex-wrap: wrap; gap: 8px; }
    .brand-form-label { width: 100%; }
    .brand-input { max-width: 100%; }
    .form-setting-dialog { height: calc(100vh - 32px); height: calc(100dvh - 32px); }
    .form-setting-tabs { gap: 20px; padding: 0 16px; overflow-x: auto; flex-shrink: 0; }
    .form-setting-tab { flex-shrink: 0; }
    .form-setting-body { padding: 0 16px; }
    .form-setting-group { flex-direction: column; gap: 8px; }
    .form-setting-label, .form-setting-group-body { width: 100%; }
    .form-setting-row { flex-wrap: wrap; gap: 8px; }
    .form-setting-check { margin-left: 0; }
    .form-setting-radio-dot, .form-setting-check-box { flex-shrink: 0; }
    .form-setting-content { min-width: 0; }
    .form-setting-phone-tooltip { left: 16px !important; right: 16px; top: auto !important; bottom: 24px; width: auto !important; }
    .form-setting-phone-tooltip::before { display: none; }
    .form-rule-body { padding: 16px; max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); overflow-y: auto; }
    .form-rule-row { flex-direction: column; gap: 8px; }
    .form-rule-condition, .form-rule-recipients { width: 100%; }
    .form-rule-status-columns { grid-template-columns: 1fr; height: auto; }
}