/**
 * mobile-responsive.css - 众泰云 移动端响应式适配
 *
 * 本文件为 PC 端模板提供移动端响应式覆盖样式，
 * 使 PC 模板在移动设备上也能良好展示。
 *
 * 断点策略：
 *   <= 1024px : 平板竖屏（侧边栏折叠）
 *   <= 768px  : 平板横屏 / 大手机（导航折叠为汉堡菜单）
 *   <= 480px  : 手机（单列布局，全宽卡片）
 *
 * 依赖：tokens.css, base.css, components.css, layout.css
 * PHP 7.4 兼容，纯 CSS，无嵌套语法
 */

/* ================================================================
   0. 全端默认隐藏（桌面/移动通用）
   - .topnav__search / .topnav__mobile-menu 仅由 JS 或移动端媒体查询控制显隐。
   - 此前移动菜单规则仅在 max-width:1024px 媒体查询内定义，桌面端无基础样式，
     导致移动菜单在桌面宽度下以静态块渲染、堆叠在页面中（首页错乱 P0 根因）。
   - .d-none 工具类定义于 utility-system.css，但该文件未在 layout 加载，
     故搜索条此前实际未隐藏；此处用显式规则兜底。
   ================================================================ */
.topnav__search {
    display: none;
}
.topnav__mobile-menu {
    display: none;
}
/* 汉堡按钮桌面端默认隐藏，仅移动端媒体查询内显示 */
.topnav__hamburger {
    display: none;
}

/* ================================================================
   1. 全局移动端重置
   ================================================================ */

@media (max-width: 480px) {
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
        overflow-x: hidden;
        font-size: 15px;
    }

    body {
        max-width: 100vw;
        overflow-x: hidden;
        overscroll-behavior-y: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* 移除移动端点击高亮 */
    a,
    button,
    input,
    textarea,
    select,
    [role="button"] {
        -webkit-tap-highlight-color: transparent;
    }

    /* 表单元素统一字体 */
    input,
    button,
    textarea,
    select {
        font-family: inherit;
    }

    /* 图片自适应 */
    img,
    video,
    canvas,
    svg {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
}

/* ================================================================
   2. 安全区域适配（iPhone X+ 刘海/底部横条）
   ================================================================ */

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

@media (max-width: 480px) {
    body {
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }

    .safe-area-top {
        padding-top: var(--safe-top);
    }

    .safe-area-bottom {
        padding-bottom: var(--safe-bottom);
    }

    .safe-area-x {
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }

    .safe-bottom-spacer {
        height: var(--safe-bottom);
        min-height: 16px;
    }
}

/* ================================================================
   3. 侧边栏折叠为汉堡菜单
   ================================================================ */

@media (max-width: 1024px) {
    /* 侧边栏默认隐藏 */
    .sidebar,
    .app-sidebar,
    .layout-sidebar,
    [class*="sidebar"] {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        max-width: 80vw;
        height: 100%;
        z-index: var(--z-modal);
        transition: left var(--duration-slow) var(--ease-out);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--color-bg);
        box-shadow: var(--shadow-xl);
    }

    /* 侧边栏展开状态 */
    .sidebar.open,
    .app-sidebar.open,
    .layout-sidebar.open,
    [class*="sidebar"].open {
        left: 0;
    }

    /* 侧边栏遮罩 */
    .sidebar-overlay,
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: calc(var(--z-modal) - 1);
        opacity: 0;
        transition: opacity var(--duration-slow);
    }

    .sidebar-overlay.active,
    .sidebar-backdrop.active {
        display: block;
        opacity: 1;
    }

    /* 主内容区全宽 */
    .main-content,
    .layout-main,
    .content-area,
    [class*="main-content"] {
        margin-left: 0 !important;
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 两列布局变单列 */
    .two-col,
    .sidebar-layout,
    .pc-layout,
    .layout-with-sidebar {
        flex-direction: column !important;
    }
}

@media (max-width: 480px) {
    /* 侧边栏完全隐藏 */
    .sidebar,
    .app-sidebar,
    .layout-sidebar,
    [class*="sidebar"]:not(.mobile-bottom-nav) {
        display: none !important;
    }

    .sidebar.open,
    .app-sidebar.open {
        display: block !important;
    }
}

/* ================================================================
   4. 导航栏适配 - 固定顶部 + 汉堡菜单
   ================================================================ */

@media (max-width: 480px) {
    /* 隐藏桌面导航链接 */
    .desktop-nav,
    .nav-links,
    .topnav-links,
    .topnav__nav,
    .nav-menu {
        display: none !important;
    }

    /* 隐藏桌面端用户按钮 */
    .topnav__user-btn,
    .nav-user-info {
        display: none !important;
    }

    /* 隐藏桌面端登录/注册按钮 */
    .topnav__actions .btn,
    .nav-actions .btn {
        display: none !important;
    }

    /* 显示汉堡菜单按钮 */
    .mobile-menu-btn,
    .topnav-hamburger,
    .topnav__hamburger,
    [class*="hamburger"] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: var(--radius-md);
        border: none;
        background: none;
        cursor: pointer;
        color: var(--color-text-primary);
        flex-shrink: 0;
    }

    /* 导航栏内边距调整 */
    .topnav__inner,
    .nav-inner {
        padding: 0 var(--space-4) !important;
        gap: var(--space-3) !important;
    }

    /* 移动端菜单面板 */
    .mobile-menu-panel,
    .topnav__mobile-menu {
        display: block;
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-bg);
        z-index: var(--z-modal);
        padding: var(--space-4);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateY(-100%);
        opacity: 0;
        transition: transform var(--duration-slow) var(--ease-out),
                    opacity var(--duration-slow);
        pointer-events: none;
    }

    .mobile-menu-panel.open,
    .topnav__mobile-menu.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* 移动端菜单链接 */
    .mobile-menu-panel a,
    .topnav__mobile-link {
        display: block;
        padding: var(--space-4);
        font-size: var(--text-base);
        font-weight: var(--font-medium);
        color: var(--color-text-primary);
        text-decoration: none;
        border-radius: var(--radius-lg);
        transition: background-color var(--duration-fast);
    }

    .mobile-menu-panel a:hover,
    .mobile-menu-panel a.active,
    .topnav__mobile-link:hover,
    .topnav__mobile-link.active {
        background-color: var(--color-bg-secondary);
        color: var(--color-accent);
    }

    /* 移动端菜单底部操作区 */
    .mobile-menu-actions,
    .topnav__mobile-actions {
        margin-top: var(--space-6);
        padding-top: var(--space-6);
        border-top: 1px solid var(--color-border-light);
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .mobile-menu-actions .btn,
    .topnav__mobile-actions .btn {
        display: flex !important;
        width: 100%;
        justify-content: center;
    }
}

/* ================================================================
   5. 卡片网格 - 从多列变为单列
   ================================================================ */

@media (max-width: 1024px) {
    /* 四列变两列 */
    .grid-4,
    [class*="grid-cols-4"],
    .services-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 三列变两列 */
    .grid-3,
    [class*="grid-cols-3"],
    .partners-grid,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    /* 所有网格变单列 */
    .grid-2,
    .grid-3,
    .grid-4,
    [class*="grid-cols-2"],
    [class*="grid-cols-3"],
    [class*="grid-cols-4"],
    .services-grid,
    .features-grid,
    .partners-grid,
    .stats-grid,
    .cards-grid {
        grid-template-columns: 1fr !important;
    }

    /* Flex 行变列 */
    .flex-row,
    [class*="flex-row"] {
        flex-direction: column !important;
    }

    /* 卡片间距调整 */
    .card,
    [class*="card"]:not(.mobile-card) {
        border-radius: var(--radius-lg) !important;
        margin-bottom: var(--space-3);
    }

    /* 区块间距缩小 */
    .section,
    [class*="section"] {
        padding-top: var(--space-10) !important;
        padding-bottom: var(--space-10) !important;
    }

    .hero,
    [class*="hero"] {
        padding-top: var(--space-16) !important;
        padding-bottom: var(--space-10) !important;
    }
}

@media (max-width: 480px) {
    /* 手机端卡片全宽无边距 */
    .card,
    [class*="card"]:not(.mobile-card) {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-left: calc(-1 * var(--space-4));
        margin-right: calc(-1 * var(--space-4));
    }
}

/* ================================================================
   6. 表格适配 - 横向滚动或卡片化
   ================================================================ */

@media (max-width: 480px) {
    /* 表格容器横向滚动 */
    .table-responsive,
    .table-wrapper,
    [class*="table-container"] {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border-radius: var(--radius-md);
        margin-bottom: var(--space-4);
    }

    .table-responsive table,
    .table-wrapper table {
        display: table;
        min-width: 600px;
        width: 100%;
    }

    /* 表格字体缩小 */
    .table-responsive table th,
    .table-responsive table td,
    .table-wrapper table th,
    .table-wrapper table td {
        padding: var(--space-2) var(--space-3) !important;
        font-size: var(--text-sm);
        white-space: nowrap;
    }

    /* 表格卡片化模式（添加 class="table-card" 触发） */
    .table-card table,
    .table-card thead,
    .table-card tbody,
    .table-card th,
    .table-card td,
    .table-card tr {
        display: block;
    }

    .table-card thead {
        display: none;
    }

    .table-card tr {
        margin-bottom: var(--space-3);
        padding: var(--space-3);
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-lg);
        background: var(--color-bg);
    }

    .table-card td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-2) 0 !important;
        border-bottom: 1px solid var(--color-border-light);
        font-size: var(--text-sm);
        min-width: 0;
    }

    .table-card td:last-child {
        border-bottom: none;
    }

    .table-card td::before {
        content: attr(data-label);
        font-weight: var(--font-medium);
        color: var(--color-text-secondary);
        margin-right: var(--space-3);
        flex-shrink: 0;
    }
}

/* ================================================================
   7. 对话页面适配 - 全屏对话、底部输入框固定
   ================================================================ */

@media (max-width: 480px) {
    /* 对话应用全屏 */
    #ai-chat-app,
    .chat-app,
    [class*="chat-app"] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-topbar);
        display: flex;
        flex-direction: column;
    }

    /* 对话侧边栏变为抽屉 */
    #ai-sidebar,
    .chat-sidebar,
    .ai-sidebar {
        position: fixed;
        top: 0;
        left: -300px;
        width: 280px;
        max-width: 85vw;
        height: 100%;
        z-index: calc(var(--z-modal) + 10);
        transition: left var(--duration-slow) var(--ease-out);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--color-bg);
        box-shadow: var(--shadow-xl);
    }

    #ai-sidebar.open,
    .chat-sidebar.open,
    .ai-sidebar.open {
        left: 0;
    }

    /* 侧边栏遮罩 */
    #ai-sidebar-overlay,
    .chat-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: calc(var(--z-modal) + 9);
    }

    #ai-sidebar-overlay.active,
    .chat-sidebar-overlay.active {
        display: block;
    }

    /* 对话头部 */
    #ai-chat-header,
    .chat-header,
    [class*="chat-header"] {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border-light);
        padding: var(--space-3) var(--space-4);
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
    }

    /* 对话消息区域 */
    #ai-chat-body,
    .chat-body,
    .chat-messages,
    [class*="chat-body"],
    [class*="chat-messages"] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: var(--space-4);
        overscroll-behavior-y: contain;
    }

    /* 消息气泡全宽 */
    .ai-msg,
    .chat-msg,
    .message {
        max-width: 100% !important;
        padding: var(--space-3) var(--space-4) !important;
        margin-bottom: var(--space-3);
        border-radius: var(--radius-lg) !important;
        word-break: break-word;
    }

    .ai-msg-user,
    .chat-msg--user,
    .message--user {
        margin-left: var(--space-10);
        background: var(--color-accent);
        color: var(--color-on-accent);
        border-bottom-right-radius: var(--radius-sm) !important;
    }

    .ai-msg-assistant,
    .chat-msg--assistant,
    .message--assistant {
        margin-right: var(--space-10);
        background: var(--color-bg-secondary);
        border-bottom-left-radius: var(--radius-sm) !important;
    }

    /* 消息头像 */
    .ai-msg-avatar,
    .chat-msg__avatar {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

    /* 消息内容字体 */
    .ai-msg-text,
    .chat-msg__text,
    .message__content {
        font-size: var(--text-base) !important;
        line-height: var(--leading-relaxed);
    }

    /* 消息内容中的代码块 */
    .ai-msg-text pre,
    .chat-msg__text pre,
    .message__content pre {
        font-size: var(--text-sm) !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-md);
        padding: var(--space-3);
        margin: var(--space-2) 0;
    }

    .ai-msg-text code,
    .chat-msg__text code,
    .message__content code {
        font-size: var(--text-sm);
        word-break: break-all;
    }

    /* 对话输入区域固定底部 */
    #ai-chat-input-area,
    .chat-input-area,
    [class*="chat-input"] {
        position: sticky;
        bottom: 0;
        background: var(--color-bg);
        border-top: 1px solid var(--color-border-light);
        padding: var(--space-3) var(--space-4);
        padding-bottom: calc(var(--space-3) + var(--safe-bottom));
        flex-shrink: 0;
    }

    /* 输入框 */
    #ai-chat-input,
    .chat-input,
    [class*="chat-input"] textarea,
    [class*="chat-input"] input[type="text"] {
        width: 100%;
        min-height: 44px;
        max-height: 120px;
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        font-size: var(--text-base);
        resize: none;
        outline: none;
        background: var(--color-bg-secondary);
        color: var(--color-text-primary);
        -webkit-appearance: none;
    }

    #ai-chat-input:focus,
    .chat-input:focus {
        border-color: var(--color-accent);
        background: var(--color-bg);
    }

    /* 输入区域按钮行 */
    .ai-input-wrapper,
    .chat-input-wrapper {
        display: flex;
        align-items: flex-end;
        gap: var(--space-2);
    }

    /* 发送/停止/附件按钮 */
    #ai-send-btn,
    #ai-stop-btn,
    #ai-attach-btn,
    .chat-send-btn,
    .chat-stop-btn,
    .chat-attach-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: var(--radius-md);
        border: none;
        background: none;
        cursor: pointer;
        color: var(--color-text-secondary);
        flex-shrink: 0;
        transition: background-color var(--duration-fast), color var(--duration-fast);
    }

    #ai-send-btn:active,
    .chat-send-btn:active {
        background-color: var(--color-accent-light);
        color: var(--color-accent);
    }

    /* 欢迎屏幕适配 */
    #ai-welcome,
    .chat-welcome {
        padding: var(--space-8) var(--space-4);
        text-align: center;
    }

    .ai-welcome-title,
    .chat-welcome__title {
        font-size: var(--text-xl) !important;
    }

    .ai-welcome-desc,
    .chat-welcome__desc {
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
    }

    /* 快捷提示卡片 */
    .ai-welcome-prompts,
    .chat-welcome__prompts {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin-top: var(--space-6);
    }

    .ai-prompt-card,
    .chat-prompt-card {
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-bg);
        font-size: var(--text-sm);
        color: var(--color-text-primary);
        cursor: pointer;
        text-align: left;
        transition: background-color var(--duration-fast);
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .ai-prompt-card:active,
    .chat-prompt-card:active {
        background-color: var(--color-bg-secondary);
    }

    /* 滚动到底部按钮 */
    #ai-scroll-bottom,
    .chat-scroll-bottom {
        position: fixed;
        bottom: 120px;
        right: var(--space-4);
        width: 40px;
        height: 40px;
        border-radius: var(--radius-full);
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: var(--z-sticky);
        color: var(--color-text-secondary);
    }

    /* 模型选择器 */
    #ai-model-select,
    .chat-model-select {
        font-size: var(--text-sm);
        padding: var(--space-2);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-bg);
        color: var(--color-text-primary);
        max-width: 120px;
    }

    /* 用量条 */
    #ai-usage-bar,
    .chat-usage-bar {
        font-size: var(--text-xs);
        color: var(--color-text-tertiary);
        text-align: center;
        padding-top: var(--space-2);
    }

    /* 离线指示器 */
    #ai-offline-indicator,
    .chat-offline-indicator {
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        right: 0;
        padding: var(--space-2) var(--space-4);
        background: var(--color-warning);
        color: var(--color-white);
        font-size: var(--text-sm);
        text-align: center;
        z-index: var(--z-topbar);
    }
}

/* ================================================================
   8. 表单适配 - 输入框全宽、按钮全宽
   ================================================================ */

@media (max-width: 480px) {
    /* 表单行变列 */
    .form-row,
    .form-group-row,
    [class*="form-row"] {
        flex-direction: column !important;
        gap: var(--space-3) !important;
    }

    /* 表单元素全宽 */
    .form-row > *,
    .form-group-row > * {
        width: 100% !important;
    }

    /* 输入框样式 */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    textarea,
    select {
        width: 100% !important;
        font-size: 16px !important; /* 防止 iOS 自动缩放 */
        padding: var(--space-3) var(--space-4) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-md) !important;
        background: var(--color-bg) !important;
        color: var(--color-text-primary) !important;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        min-height: 48px;
        box-sizing: border-box;
    }

    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--color-accent) !important;
        box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
    }

    /* Textarea 特殊处理 */
    textarea {
        min-height: 120px;
        resize: vertical;
    }

    /* Select 下拉箭头 */
    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px !important;
    }

    /* 按钮全宽 */
    .btn-group,
    [class*="btn-group"] {
        flex-direction: column !important;
        width: 100%;
    }

    .btn-group .btn,
    .btn-group a.btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    /* 表单标签 */
    label,
    .form-label,
    [class*="form-label"] {
        display: block;
        margin-bottom: var(--space-2);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--color-text-primary);
    }

    /* 表单帮助文本 */
    .form-hint,
    .form-help,
    [class*="form-hint"] {
        font-size: var(--text-xs);
        color: var(--color-text-tertiary);
        margin-top: var(--space-1);
    }

    /* 表单错误提示 */
    .form-error,
    .error-msg,
    [class*="form-error"] {
        font-size: var(--text-xs);
        color: var(--color-error);
        margin-top: var(--space-1);
    }

    /* Checkbox / Radio 增大触控区 */
    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
        margin: 0;
    }

    /* 文件上传按钮 */
    .file-upload,
    .upload-btn,
    [class*="file-upload"] {
        width: 100%;
        padding: var(--space-4);
        border: 2px dashed var(--color-border);
        border-radius: var(--radius-lg);
        text-align: center;
        cursor: pointer;
        min-height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
    }
}

/* ================================================================
   9. 字体大小调整
   ================================================================ */

@media (max-width: 480px) {
    h1 { font-size: var(--text-2xl) !important; }
    h2 { font-size: var(--text-xl) !important; }
    h3 { font-size: var(--text-lg) !important; }
    h4 { font-size: var(--text-base) !important; }
    h5 { font-size: var(--text-sm) !important; }
    h6 { font-size: var(--text-sm) !important; }

    p, li, td, th {
        font-size: var(--text-sm);
    }

    /* 小号文本 */
    .text-xs,
    .small,
    small {
        font-size: 11px !important;
    }

    /* 大号文本 */
    .text-lg,
    .lead {
        font-size: var(--text-base) !important;
    }

    .text-xl {
        font-size: var(--text-lg) !important;
    }

    .text-2xl {
        font-size: var(--text-xl) !important;
    }
}

@media (max-width: 480px) {
    h1 { font-size: var(--text-xl) !important; }
    h2 { font-size: var(--text-lg) !important; }
    h3 { font-size: var(--text-base) !important; }
}

/* ================================================================
   10. 触摸优化 - 按钮最小44px高度、适当间距
   ================================================================ */

@media (hover: none) and (pointer: coarse) {
    /* 增大触控目标 */
    a,
    button,
    [role="button"],
    .btn,
    [class*="btn"],
    .tab-item,
    .nav-item,
    .dropdown__item,
    .menu-item,
    .list-item {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 链接和文本按钮保持文本对齐 */
    a,
    .dropdown__item,
    .menu-item,
    .list-item {
        display: flex;
    }

    /* 增大间距防止误触 */
    .nav-item + .nav-item,
    .menu-item + .menu-item,
    .tab-item + .tab-item {
        margin-left: var(--space-1);
    }

    /* 移除悬停效果（触摸设备无悬停） */
    :hover {
        transition: none;
    }

    /* 点击反馈 */
    .btn:active,
    a:active,
    button:active {
        opacity: 0.7;
        transition: opacity var(--duration-fast);
    }
}

/* ================================================================
   11. 容器自适应
   ================================================================ */

@media (max-width: 480px) {
    .container,
    .page-container,
    .tiance-container,
    .content-wrapper,
    [class*="container"]:not([class*="table"]):not([class*="card"]) {
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ================================================================
   12. 模态框适配 - 底部弹出式
   ================================================================ */

@media (max-width: 480px) {
    .modal-content,
    .modal-body,
    .dialog-content,
    [class*="modal-content"],
    [class*="dialog-content"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: var(--space-6) var(--space-4) calc(var(--space-6) + var(--safe-bottom)) !important;
    }

    .modal-overlay,
    .dialog-overlay,
    [class*="modal-overlay"] {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    /* 模态框拖拽手柄 */
    .modal-content::before,
    .dialog-content::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--color-border);
        border-radius: var(--radius-full);
        margin: 0 auto var(--space-4);
    }
}

/* ================================================================
   13. 页脚适配
   ================================================================ */

@media (max-width: 480px) {
    footer,
    .footer,
    .site-footer,
    [class*="footer"] {
        padding: var(--space-8) var(--space-4) !important;
        padding-bottom: calc(var(--space-8) + var(--safe-bottom)) !important;
    }

    footer .grid,
    .site-footer .grid,
    .footer__grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-6) !important;
    }

    footer h4,
    .footer h4,
    .site-footer h4 {
        font-size: var(--text-base) !important;
    }

    /* 隐藏页脚中的次要信息 */
    .footer-secondary,
    .footer-bottom-links {
        font-size: var(--text-xs);
    }
}

/* ================================================================
   14. 底部Tab导航适配
   ================================================================ */

@media (max-width: 480px) {
    /* 底部导航存在时主内容留出空间 */
    .has-bottom-nav,
    .app-layout {
        padding-bottom: calc(60px + var(--safe-bottom)) !important;
    }

    /* 底部导航栏 */
    .mobile-bottom-nav,
    .mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-sticky);
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: calc(60px + var(--safe-bottom));
        padding-bottom: var(--safe-bottom);
        background-color: var(--color-bg);
        border-top: 1px solid var(--color-border-light);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
    }

    .mobile-nav-item,
    .mobile-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 60px;
        text-decoration: none;
        color: var(--color-text-tertiary);
        font-size: 10px;
        line-height: 1.2;
        transition: color var(--duration-fast);
        min-height: 44px;
    }

    .mobile-nav-item:active,
    .mobile-bottom-nav a:active {
        opacity: 0.7;
    }

    .mobile-nav-item.active,
    .mobile-bottom-nav a.active {
        color: var(--color-accent);
    }

    .mobile-nav-item svg,
    .mobile-bottom-nav a svg {
        width: 22px;
        height: 22px;
        margin-bottom: 2px;
    }
}

/* ================================================================
   15. 用户中心页面适配
   ================================================================ */

@media (max-width: 480px) {
    /* 用户信息卡片 */
    .user-profile-card,
    .profile-header {
        margin: var(--space-4);
        padding: var(--space-6) var(--space-4);
        border-radius: var(--radius-xl);
        text-align: center;
    }

    /* 功能菜单列表 */
    .user-menu,
    .profile-menu,
    [class*="user-menu"] {
        margin: var(--space-4);
        border-radius: var(--radius-xl);
        overflow: hidden;
        background: var(--color-bg);
        border: 1px solid var(--color-border-light);
    }

    .user-menu a,
    .profile-menu a,
    .menu-item,
    [class*="menu-item"] {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4);
        font-size: var(--text-base);
        color: var(--color-text-primary);
        text-decoration: none;
        border-bottom: 1px solid var(--color-border-light);
        min-height: 52px;
        transition: background-color var(--duration-fast);
    }

    .user-menu a:last-child,
    .profile-menu a:last-child {
        border-bottom: none;
    }

    .user-menu a:active,
    .profile-menu a:active {
        background-color: var(--color-bg-secondary);
    }

    /* 统计卡片网格 */
    .stat-card,
    .stats-grid .card {
        padding: var(--space-4);
        text-align: center;
    }

    .stat-card-value {
        font-size: var(--text-xl);
        font-weight: var(--font-bold);
        color: var(--color-accent);
    }

    .stat-card-label {
        font-size: var(--text-xs);
        color: var(--color-text-tertiary);
        margin-top: var(--space-1);
    }
}

/* ================================================================
   16. 骨架屏和加载状态
   ================================================================ */

@media (max-width: 480px) {
    .ai-skeleton-list,
    .skeleton-list {
        padding: 0;
    }

    .ai-skeleton-item,
    .skeleton-item {
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--color-border-light);
    }

    .ai-skeleton-line,
    .skeleton-line {
        height: 14px;
        background: var(--color-bg-tertiary);
        border-radius: var(--radius-sm);
        margin-bottom: var(--space-2);
    }

    .ai-skeleton-short,
    .skeleton-short {
        width: 40%;
        height: 12px;
        background: var(--color-bg-tertiary);
        border-radius: var(--radius-sm);
    }
}

/* ================================================================
   17. 搜索栏适配
   ================================================================ */

@media (max-width: 480px) {
    .topnav__search,
    .nav-search {
        border-top: 1px solid var(--color-border-light);
        background: var(--color-bg);
        padding: var(--space-3) var(--space-4);
    }

    .topnav__search-inner,
    .nav-search-inner {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background: var(--color-bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        min-height: 44px;
    }

    .topnav__search-inner input,
    .nav-search-inner input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: var(--text-base);
        outline: none;
        color: var(--color-text-primary);
    }
}

/* ================================================================
   18. 分页适配
   ================================================================ */

@media (max-width: 480px) {
    .pagination,
    .pager {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        justify-content: center;
        padding: var(--space-4);
    }

    .pagination a,
    .pagination span,
    .pager a,
    .pager span {
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        text-decoration: none;
        color: var(--color-text-primary);
    }

    .pagination a.active,
    .pagination span.active,
    .pager a.active {
        background: var(--color-accent);
        color: var(--color-on-accent);
        border-color: var(--color-accent);
    }
}

/* ================================================================
   19. Badge / 标签适配
   ================================================================ */

@media (max-width: 480px) {
    .badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    .badge-lg {
        font-size: var(--text-xs) !important;
        padding: var(--space-1) var(--space-2) !important;
    }
}

/* ================================================================
   20. 空状态适配
   ================================================================ */

@media (max-width: 480px) {
    .empty-state,
    .no-data,
    [class*="empty-state"] {
        padding: var(--space-12) var(--space-4);
        text-align: center;
    }

    .empty-state svg,
    .empty-state img {
        width: 80px;
        height: 80px;
        margin: 0 auto var(--space-4);
        opacity: 0.5;
    }

    .empty-state h3,
    .empty-state p {
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
    }
}

/* ================================================================
   21. Tab 导航适配
   ================================================================ */

@media (max-width: 480px) {
    .tabs,
    .tab-nav,
    [class*="tabs"] {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-bottom: 1px solid var(--color-border-light);
        padding: 0 var(--space-4);
        gap: 0;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-item,
    .tab-link,
    .tabs a {
        flex-shrink: 0;
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--color-text-secondary);
        text-decoration: none;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
        transition: color var(--duration-fast), border-color var(--duration-fast);
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .tab-item.active,
    .tab-link.active,
    .tabs a.active {
        color: var(--color-accent);
        border-bottom-color: var(--color-accent);
    }
}

/* ================================================================
   22. Toast / 提示适配
   ================================================================ */

@media (max-width: 480px) {
    .toast,
    .notification,
    .alert {
        margin: var(--space-3) var(--space-4);
        border-radius: var(--radius-lg);
        font-size: var(--text-sm);
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: var(--space-3) var(--space-4);
    }

    /* 顶部 Toast */
    .toast--top,
    .notification--top {
        top: var(--topbar-height);
        left: var(--space-4);
        right: var(--space-4);
        max-width: none;
    }
}

/* ================================================================
   23. Dropdown / 下拉菜单适配
   ================================================================ */

@media (max-width: 480px) {
    .dropdown__menu,
    .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        min-width: 100% !important;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        padding: var(--space-4);
        padding-bottom: calc(var(--space-4) + var(--safe-bottom));
    }

    .dropdown__item,
    .dropdown-menu a {
        padding: var(--space-4);
        font-size: var(--text-base);
        min-height: 52px;
        border-radius: var(--radius-md);
    }
}

/* ================================================================
   24. 打印样式
   ================================================================ */

@media print {
    .desktop-nav,
    .mobile-nav,
    .topnav,
    .site-footer,
    .mobile-bottom-nav,
    .topnav__hamburger,
    .btn,
    .sidebar,
    .mobile-menu-panel {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}

/* ================================================================
   25. 暗色模式响应式增强
   ================================================================ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --safe-top: env(safe-area-inset-top, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    @media (max-width: 480px) {
        .mobile-bottom-nav,
        .mobile-nav {
            background-color: var(--color-bg);
            border-top-color: var(--color-border);
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
        }

        .mobile-menu-panel,
        .topnav__mobile-menu {
            background-color: var(--color-bg);
        }

        #ai-chat-input-area,
        .chat-input-area {
            background-color: var(--color-bg);
            border-top-color: var(--color-border);
        }

        .ai-msg-assistant,
        .chat-msg--assistant {
            background: var(--color-bg-tertiary);
        }
    }
}

/* ================================================================
   26. 无障碍：减少动画
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================================
   27. 横屏提示（小屏设备）
   ================================================================ */

@media (max-width: 480px) and (orientation: landscape) {
    .landscape-notice {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.9);
        color: #fff;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: var(--space-8);
    }

    .landscape-notice svg {
        width: 48px;
        height: 48px;
        margin-bottom: var(--space-4);
        animation: rotate-phone var(--duration-1500) ease-in-out infinite;
    }

    @keyframes rotate-phone {
        0%, 100% { transform: rotate(0deg); }
        50% { transform: rotate(-90deg); }
    }
}

/* ================================================================
   28. PWA 相关
   ================================================================ */

@media (max-width: 480px) {
    /* standalone 模式下隐藏浏览器 UI 相关元素 */
    @media (display-mode: standalone) {
        .topnav {
            padding-top: var(--safe-top);
        }

        .mobile-bottom-nav {
            padding-bottom: var(--safe-bottom);
        }

        body {
            padding-top: var(--safe-top);
        }
    }
}

/* ================================================================
   29. 375px 小屏手机断点（iPhone SE / 6 / 7 / 8）
   375px 是最小常用手机断点，需确保基础布局不被破坏。
   与 480px 规则协同，375px 规则在 480px 基础上进一步收紧。
   ================================================================ */

@media (max-width: 375px) {
    /* ── 全局字体进一步缩小 ─────────────────────────────── */
    html {
        font-size: 13px;
    }

    body {
        padding-left: 0;
        padding-right: 0;
    }

    h1 { font-size: var(--text-lg) !important; }
    h2 { font-size: var(--text-base) !important; }
    h3 { font-size: var(--text-sm) !important; }
    h4 { font-size: var(--text-xs) !important; }

    /* ── 容器内边距收窄 ─────────────────────────────────── */
    .container,
    .page-container,
    .tiance-container,
    .content-wrapper,
    [class*="container"]:not([class*="table"]):not([class*="card"]) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .tiance-p-space4 {
        padding: 10px;
    }

    .tiance-main,
    .tiance-main-gray {
        padding: 10px;
    }

    /* ── 卡片无边距，最大化利用屏幕宽度 ────────────────── */
    .card,
    [class*="card"]:not(.mobile-card):not(.ai-msg):not(.chat-msg) {
        padding: 10px !important;
        border-radius: 6px !important;
        margin-bottom: 8px;
    }

    .mobile-card {
        padding: 10px;
        border-radius: 6px;
    }

    /* ── 网格间距收窄 ───────────────────────────────────── */
    .grid-2, .grid-3, .grid-4,
    [class*="grid-cols-2"],
    [class*="grid-cols-3"],
    [class*="grid-cols-4"] {
        gap: 8px;
    }

    .bus-m-grid-2,
    .adm-m-grid-2 {
        gap: 6px;
    }

    .bus-m-grid-3,
    .adm-m-grid-3 {
        gap: 6px;
    }

    /* ── 表单元素进一步收窄 ─────────────────────────────── */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    textarea,
    select {
        padding: 8px 10px !important;
        font-size: 14px !important;
        min-height: 40px;
    }

    textarea {
        min-height: 100px;
    }

    label,
    .form-label,
    [class*="form-label"] {
        margin-bottom: 4px;
        font-size: 12px;
    }

    .form-row,
    .form-group-row,
    [class*="form-row"] {
        gap: 8px !important;
    }

    /* ── 按钮最小尺寸调整 ───────────────────────────────── */
    .btn,
    .bus-m-btn,
    .adm-m-btn,
    .mobile-btn {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 13px;
    }

    .btn-sm,
    .bus-m-btn--sm,
    .adm-m-btn--sm {
        min-height: 32px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .btn-group {
        gap: 6px;
    }

    /* ── 统计卡片数字缩小 ───────────────────────────────── */
    .stat-card-value {
        font-size: var(--text-lg) !important;
    }

    .stat-card-label {
        font-size: 10px;
    }

    .bus-m-stat__value,
    .adm-m-stat__value {
        font-size: var(--text-lg);
    }

    .bus-m-big-number,
    .adm-m-big-number {
        font-size: 24px;
    }

    /* ── 列表项收窄 ─────────────────────────────────────── */
    .bus-m-list-item,
    .adm-m-list-item {
        padding: 8px 10px;
        gap: 8px;
        min-height: 40px;
    }

    .bus-m-list-item__icon,
    .adm-m-list-item__icon {
        width: 32px;
        height: 32px;
    }

    .bus-m-list-item__title,
    .adm-m-list-item__title {
        font-size: 12px;
    }

    .mobile-list__item {
        padding: 8px 10px;
    }

    /* ── 对话页面适配 ──────────────────────────────────── */
    #ai-chat-header,
    .chat-header,
    [class*="chat-header"] {
        padding: 8px 10px;
        min-height: 48px;
    }

    #ai-chat-body,
    .chat-body,
    .chat-messages,
    [class*="chat-body"],
    [class*="chat-messages"] {
        padding: 10px;
    }

    .ai-msg,
    .chat-msg,
    .message {
        padding: 8px 10px !important;
        margin-bottom: 8px;
    }

    .ai-msg-user,
    .chat-msg--user,
    .message--user {
        margin-left: 40px;
    }

    .ai-msg-assistant,
    .chat-msg--assistant,
    .message--assistant {
        margin-right: 40px;
    }

    .ai-msg-avatar,
    .chat-msg__avatar {
        width: 28px;
        height: 28px;
    }

    /* ── 输入区域收窄 ───────────────────────────────────── */
    #ai-chat-input-area,
    .chat-input-area,
    [class*="chat-input"] {
        padding: 8px 10px;
        padding-bottom: calc(8px + var(--safe-bottom));
    }

    #ai-chat-input,
    .chat-input,
    [class*="chat-input"] textarea,
    [class*="chat-input"] input[type="text"] {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 14px;
    }

    #ai-send-btn,
    #ai-stop-btn,
    #ai-attach-btn,
    .chat-send-btn,
    .chat-stop-btn,
    .chat-attach-btn {
        width: 38px;
        height: 38px;
    }

    /* ── 页眉收窄 ──────────────────────────────────────── */
    .tiance-section-header {
        padding: 0 10px 12px;
        font-size: 14px;
    }

    .bus-m-header__title,
    .adm-m-header__title {
        font-size: var(--text-lg);
    }

    .bus-m-header__desc,
    .adm-m-header__desc {
        font-size: 12px;
    }

    /* ── 章节标题缩小 ──────────────────────────────────── */
    .bus-m-section__title,
    .adm-m-section__title {
        font-size: var(--text-base);
        margin-bottom: 10px;
    }

    .bus-m-section,
    .adm-m-section {
        margin-bottom: 16px;
    }

    /* ── 空状态收窄 ────────────────────────────────────── */
    .empty-state,
    .no-data,
    [class*="empty-state"],
    .bus-m-empty,
    .adm-m-empty {
        padding: 32px 10px;
    }

    .empty-state svg,
    .empty-state img {
        width: 60px;
        height: 60px;
    }

    .tiance-empty-center {
        padding: 24px 10px;
    }

    .tiance-empty-large {
        padding: 40px 10px;
    }

    /* ── 模态框 ─────────────────────────────────────────── */
    .modal-content,
    .modal-body,
    .dialog-content,
    [class*="modal-content"],
    [class*="dialog-content"] {
        padding: 16px 10px calc(16px + var(--safe-bottom)) !important;
    }

    .modal-content::before,
    .dialog-content::before {
        width: 28px;
        height: 3px;
        margin: 0 auto 10px;
    }

    /* ── 底部导航栏高度 ────────────────────────────────── */
    .mobile-bottom-nav,
    .mobile-nav {
        height: calc(50px + var(--safe-bottom));
    }

    .mobile-nav-item,
    .mobile-bottom-nav a {
        height: 50px;
    }

    .has-bottom-nav,
    .app-layout {
        padding-bottom: calc(50px + var(--safe-bottom) + 8px) !important;
    }

    .mobile-nav-item svg,
    .mobile-bottom-nav a svg {
        width: 18px;
        height: 18px;
    }

    /* ── 快速入口网格 ──────────────────────────────────── */
    .bus-m-quick-item,
    .adm-m-quick-item {
        padding: 8px;
        gap: 4px;
        font-size: 10px;
        min-height: 38px;
    }

    .bus-m-quick-item__icon,
    .adm-m-quick-item__icon {
        width: 32px;
        height: 32px;
    }

    /* ── 分页 ──────────────────────────────────────────── */
    .pagination,
    .pager {
        gap: 4px;
        padding: 8px;
    }

    .pagination a,
    .pagination span,
    .pager a,
    .pager span {
        min-width: 32px;
        min-height: 32px;
        font-size: 12px;
    }

    /* ── Tab 导航 ──────────────────────────────────────── */
    .tabs,
    .tab-nav,
    [class*="tabs"] {
        padding: 0 8px;
    }

    .tab-item,
    .tab-link,
    .tabs a {
        padding: 8px 10px;
        font-size: 12px;
        min-height: 38px;
    }

    /* ── Toast / Alert ─────────────────────────────────── */
    .toast,
    .notification,
    .alert {
        margin: 8px 10px;
        padding: 8px 10px;
        font-size: 12px;
        min-height: 40px;
    }

    /* ── 用户菜单 ──────────────────────────────────────── */
    .user-menu a,
    .profile-menu a,
    .menu-item,
    [class*="menu-item"] {
        padding: 10px;
        font-size: 14px;
        min-height: 44px;
    }

    /* ── 骨架屏 ────────────────────────────────────────── */
    .ai-skeleton-item,
    .skeleton-item {
        padding: 8px 10px;
    }

    .ai-skeleton-line,
    .skeleton-line {
        height: 12px;
        margin-bottom: 4px;
    }

    .ai-skeleton-short,
    .skeleton-short {
        height: 10px;
        width: 35%;
    }

    /* ── 搜索栏 ────────────────────────────────────────── */
    .topnav__search-inner,
    .nav-search-inner {
        padding: 6px 10px;
        gap: 8px;
        min-height: 40px;
    }

    .topnav__search-inner input,
    .nav-search-inner input {
        font-size: 14px;
    }

    /* ── 页脚 ──────────────────────────────────────────── */
    footer,
    .footer,
    .site-footer,
    [class*="footer"] {
        padding: 24px 10px !important;
        padding-bottom: calc(24px + var(--safe-bottom)) !important;
    }

    footer h4,
    .footer h4,
    .site-footer h4 {
        font-size: 13px !important;
    }

    /* ── 暗色模式 375px 增强 ───────────────────────────── */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            .mobile-bottom-nav,
            .mobile-nav {
                height: calc(50px + var(--safe-bottom));
            }
        }
    }
}