/* ========================================
   移动端适配样式 — 独立文件
   所有样式限定在 @media (max-width: 768px) 内
   不会影响 PC 端（>768px）的任何布局
   ======================================== */

/* ==========================================
   1. 全局基础重置
   ========================================== */
@media (max-width: 768px) {
    body {
        font-size: 15px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-tap-highlight-color: transparent;
    }

    /* 防止 iOS 输入框自动缩放：输入框字号 ≥16px */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* 滚动条在移动端隐藏 */
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

/* ==========================================
   2. 整体布局 — 纵向堆叠
   ========================================== */
@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100vw !important;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 72px; /* 底部 Tab 栏占位 */
    }
}

/* ==========================================
   3. 侧边栏 → 抽屉式 Overlay
   ========================================== */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        height: 100vh !important;
        width: 36vw !important;       /* 约手机1/3宽度 */
        max-width: 180px !important;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 展开状态 */
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.55);
    }

    /* 抽屉内恢复文字显示 */
    body.sidebar-auto-hide .sidebar {
        width: 36vw !important;
        max-width: 180px !important;
        transform: translateX(-100%);
        position: fixed !important;
        left: 0;
        top: 0;
        height: 100vh !important;
        overflow-y: auto;
    }

    body.sidebar-auto-hide .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.55);
    }

    body.sidebar-collapsed .sidebar {
        width: 36vw !important;
        max-width: 180px !important;
        transform: translateX(-100%);
        position: fixed !important;
        left: 0;
        top: 0;
        height: 100vh !important;
    }

    body.sidebar-collapsed .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* 恢复抽屉内的文字和间距 */
    body.sidebar-auto-hide .logo-text,
    body.sidebar-auto-hide .nav-group-title,
    body.sidebar-auto-hide .nav-item span,
    body.sidebar-auto-hide .user-info,
    body.sidebar-auto-hide .user-auth-actions {
        opacity: 1 !important;
        visibility: visible !important;
        max-width: none !important;
        transform: none !important;
    }

    body.sidebar-collapsed .logo-text,
    body.sidebar-collapsed .nav-group-title,
    body.sidebar-collapsed .nav-item span,
    body.sidebar-collapsed .user-info,
    body.sidebar-collapsed .user-auth-actions {
        opacity: 1 !important;
        visibility: visible !important;
        max-width: none !important;
        transform: none !important;
    }

    body.sidebar-auto-hide .nav-menu,
    body.sidebar-collapsed .nav-menu {
        padding: 12px 16px !important;
    }

    body.sidebar-auto-hide .nav-item,
    body.sidebar-collapsed .nav-item {
        justify-content: flex-start !important;
        padding: 10px 12px !important;
        gap: 12px !important;
    }

    body.sidebar-auto-hide .sidebar-footer,
    body.sidebar-collapsed .sidebar-footer {
        padding: var(--space-md) !important;
    }

    body.sidebar-auto-hide .sidebar-pricing-entry,
    body.sidebar-collapsed .sidebar-pricing-entry {
        width: auto !important;
        min-height: auto !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border-color: var(--border-base) !important;
        background: rgba(255, 255, 255, 0.03) !important;
        box-shadow: none !important;
    }

    body.sidebar-auto-hide .sidebar-pricing-hot,
    body.sidebar-auto-hide .sidebar-pricing-copy,
    body.sidebar-collapsed .sidebar-pricing-hot,
    body.sidebar-collapsed .sidebar-pricing-copy {
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.sidebar-auto-hide .sidebar-pricing-icon-wrap,
    body.sidebar-collapsed .sidebar-pricing-icon-wrap {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.14) !important;
    }

    body.sidebar-auto-hide .user-profile,
    body.sidebar-collapsed .user-profile {
        justify-content: flex-start !important;
        padding: 8px !important;
        gap: 10px !important;
    }

    body.sidebar-auto-hide .sidebar-pricing-entry,
    body.sidebar-collapsed .sidebar-pricing-entry {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }
}

/* ==========================================
   4. 遮罩层
   ========================================== */
.sidebar-overlay {
    display: none;
}

@media (max-width: 768px) {
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 195;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }

    .sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ==========================================
   5. Header 简化
   ========================================== */
@media (max-width: 768px) {
    .header {
        padding: 0 12px;
        height: 52px;
        flex-shrink: 0;
        min-height: 52px;
    }

    .header-left {
        gap: 8px;
    }

    /* 汉堡菜单按钮 */
    .mobile-menu-btn {
        display: flex !important;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: #fff;
        cursor: pointer;
        border-radius: 8px;
        flex-shrink: 0;
        padding: 0;
    }

    .mobile-menu-btn svg {
        color: #fff;
    }

    .mobile-menu-btn:active {
        background: var(--bg-input);
    }

    /* 隐藏桌面端元素 */
    .header .search-bar {
        display: none !important;
    }

    .header .notification-btn {
        display: none !important;
    }

    .header-key-actions {
        display: none !important;
    }

    .header-key-btn {
        display: none !important;
    }

    #redeemExchangeTopBtn {
        display: none !important;
    }

    .page-title {
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
    }

    #userProfileMenu .user-info {
        display: flex; /* 保持可见，否则退出登录按钮会被隐藏 */
    }
    #userProfileMenu .user-entry-row {
        font-size: 12px;
    }
    #userProfileMenu .user-name {
        font-size: 12px;
    }
    #userLogoutBtn {
        font-size: 11px;
        padding: 2px 6px;
    }

    #userProfileMenu .avatar {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .header-user-profile {
        padding: 4px;
        gap: 0;
    }

    .header-right {
        gap: 4px;
    }

    /* 返回按钮移动端适配 */
    .header-back {
        display: flex !important;
        width: 36px;
        height: 36px;
    }
}

/* 桌面端隐藏汉堡按钮（必须在 @media 之前，否则 !important 会覆盖移动端样式） */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none !important;
    }
}

/* ==========================================
   6. 底部 Tab 导航栏
   ========================================== */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 62px;
        background: #121214;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        z-index: 150;
        justify-content: space-evenly;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45);
    }

    .mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: #71717a;
        font-size: 11px;
        font-weight: 500;
        padding: 4px 6px;
        border-radius: 10px;
        transition: color 0.2s, background 0.2s;
        min-width: 52px;
        min-height: 48px;
        text-decoration: none;
        flex: 0 1 auto;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }

    .mobile-tab i {
        font-size: 22px;
        transition: transform 0.2s;
    }

    .mobile-tab span {
        white-space: nowrap;
    }

    .mobile-tab.active {
        color: #4c85f0;
        background: rgba(43, 109, 229, 0.15);
    }

    .mobile-tab.active i {
        transform: scale(1.1);
    }

    .mobile-tab:active {
        background: rgba(255, 255, 255, 0.08);
    }
}

/* ==========================================
   7. Sections 内容区 + 卡片缩小（保持PC端布局结构）
   ========================================== */
@media (max-width: 768px) {
    /* 基础 section — 缩小 padding */
    .section {
        padding: 12px 8px !important;
    }

    .section-header {
        gap: 6px;
        margin-bottom: 12px;
    }

    .section-header h2 {
        font-size: 17px;
    }

    .section-header p {
        font-size: 12px;
    }

    /* ---- 通用卡片收紧 ---- */
    .card,
    .dashboard-card,
    .dashboard-account-card,
    .dashboard-credits-card,
    .featured-video-showcase,
    .featured-video-section,
    .pricing-card,
    .pricing-intro,
    .pricing-hero,
    .legal-doc-card,
    .replica-box,
    .chat-studio-card,
    .shortdrama-wizard-card {
        padding: 12px 10px !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }

    /* ---- 首页 Dashboard / 积分管理 卡片缩小（字不能太小）---- */
    .dashboard-card {
        min-height: auto !important;
        padding: 10px 8px !important;
    }

    /* 卡片标题 */
    .dashboard-card h3,
    .card-header h3 {
        font-size: 15px !important;
        margin-bottom: 6px !important;
    }

    /* 数值 — 保持可读 */
    .dashboard-account-value,
    .dashboard-credits-value {
        font-size: 17px !important;
    }

    /* 账户指标：保持PC端排列，只缩小间距 */
    .dashboard-account-metrics {
        gap: 10px !important;
    }

    .dashboard-account-metric {
        padding: 8px 6px !important;
        min-height: auto !important;
    }

    .dashboard-account-label {
        font-size: 12px !important;
    }

    /* 积分管理 — 两排，每排三个，组件缩小 */
    .dashboard-credits-summary {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 0 12px 8px !important;
    }

    .dashboard-credits-item {
        padding: 6px 4px !important;
        min-height: auto !important;
        gap: 4px !important;
    }

    .dashboard-credits-label {
        font-size: 11px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dashboard-credits-value {
        font-size: 15px !important;
    }

    .dashboard-credits-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }

    /* 积分管理搜索栏 */
    .dashboard-credits-search {
        padding: 12px 10px !important;
        gap: 8px !important;
        flex-wrap: wrap;
    }

    #creditsSearchInput {
        font-size: 13px !important;
        min-width: 0 !important;
        flex: 1;
    }

    /* ---- 网格间距统一缩小 ---- */
    #home .dashboard-grid,
    .dashboard-grid,
    .dashboard-grid-primary-four,
    .dashboard-board-grid,
    .templates-grid,
    .features-grid {
        gap: 10px !important;
    }

    /* ---- Hero 区缩小 ---- */
    .dashboard-hero {
        min-height: auto !important;
        margin-bottom: 14px !important;
    }

    .hero-content h1 {
        font-size: 20px !important;
    }

    .hero-content p {
        font-size: 12px !important;
        margin-bottom: 14px !important;
    }

    /* 轮播缩小 */
    .feature-carousel {
        min-height: 200px !important;
    }

    /* ---- 管理后台数值缩小 ---- */
    .admin-stats-grid {
        gap: 8px !important;
    }

    /* ---- 定价页缩小 ---- */
    .pricing-price {
        font-size: 24px !important;
    }

    .pricing-intro h2 {
        font-size: 20px !important;
    }

    .pricing-hero {
        padding: 14px 12px !important;
    }

    .pricing-grid {
        gap: 12px !important;
    }

    /* ---- 法律页缩小 ---- */
    .legal-page-hero h2 {
        font-size: 18px !important;
    }

    .legal-doc-block h3 {
        font-size: 15px !important;
    }

    .legal-page-wrapper,
    .legal-section-page {
        padding: 10px 8px !important;
    }

    /* ---- 大容器 ---- */
    .content-wrapper,
    .pricing-page-wrapper,
    .legal-page-wrapper,
    .shortdrama-page-shell {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Chat 和 Video section 保持 0 padding */
    #chat.section,
    #video.section {
        padding: 0 !important;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

/* 480px 极小屏：间距进一步缩小 */
@media (max-width: 480px) {
    .section {
        padding: 10px 6px !important;
    }
    .section-header h2 {
        font-size: 16px;
    }
}

/* ==========================================
   8. 模态框 / 弹窗
   ========================================== */
@media (max-width: 768px) {
    .modal-content {
        width: 92vw;
        max-width: none;
        margin: 16px;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 16px;
    }

    .modal-header {
        padding: 16px;
    }

    .modal-header h3 {
        font-size: 16px;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-footer {
        padding: 16px;
        flex-direction: column;
        gap: 8px;
    }

    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .image-preview-content {
        max-width: 95vw;
        max-height: 80vh;
    }

    .image-preview-content img {
        max-height: 80vh;
    }
}

/* ==========================================
   9. 按钮 & 表单控件
   ========================================== */
@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
        font-size: 14px;
    }

    .btn-icon {
        width: 44px;
        height: 44px;
    }

    .btn-sm {
        min-height: 36px;
        padding: 6px 12px;
        font-size: 13px;
    }

    .form-control,
    .form-select {
        width: 100%;
        font-size: 16px !important;
        padding: 10px 14px;
        min-height: 44px;
    }

    textarea.form-control {
        min-height: 100px;
    }

    /* 标签选择类按钮换行 */
    .tag-group,
    .chip-group {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ==========================================
   10. 网格 / 分栏容器 — 保持排列，缩小间距
   ========================================== */
@media (max-width: 768px) {

    /* 视频复刻：保持左右排列，缩小间距和内边距 */
    .replica-container {
        gap: 12px !important;
    }
    .replica-box {
        padding: 14px 10px !important;
    }
    .replica-divider {
        font-size: 18px !important;
    }
    .replica-title {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
    .upload-wrapper {
        min-height: 120px !important;
    }

    /* 视频参数面板 */
    .video-param-grid {
        gap: 8px !important;
    }
}

/* ==========================================
   11. 首页轮播 & Featured
   ========================================== */
@media (max-width: 768px) {
    .featured-video-slider-container {
        padding: 0 40px !important;
    }

    .btn-nav {
        width: 36px !important;
        height: 36px !important;
    }

    .btn-nav svg {
        width: 36px !important;
        height: 36px !important;
    }

    .btn-nav-prev {
        left: 0 !important;
    }

    .btn-nav-next {
        right: 0 !important;
    }

    .featured-video-grid.horizontal,
    .featured-video-grid.vertical {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px;
    }
}

/* 中屏手机：视频展示3列 */
@media (min-width: 481px) and (max-width: 768px) {
    .featured-video-grid.horizontal,
    .featured-video-grid.vertical {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
    }

    .featured-video-section {
        padding: 8px;
        border-radius: 14px;
    }

    .featured-video-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .featured-video-section-header h4 {
        font-size: 16px;
    }

    .featured-video-card {
        border-radius: 12px;
    }

    /* 首页 dashboard hero */
    .dashboard-hero {
        padding: 12px 0;
    }

    .home-carousel-viewer {
        border-radius: 14px;
        overflow: hidden;
    }
    .home-carousel-stage {
        height: 220px !important;
    }
    .guide-container {
        display: grid !important;
        grid-template-columns: 80px 1fr !important;
        gap: 12px !important;
        align-items: start;
    }
    .guide-nav {
        display: flex;
        gap: 2px !important;
        flex-direction: column;
        grid-column: 1;
    }
    .guide-sections {
        grid-column: 2;
    }
    .guide-link {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
}

/* ==========================================
   12. 聊天模块
   ========================================== */
@media (max-width: 768px) {
    /* 卡片/容器全宽 */
    #chat .content-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .chat-studio-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 8px !important;
        padding: 4px 0 !important;
        margin: 0 !important;
    }

    .chat-scroll-area {
        padding: 4px 4px 0 !important;
    }

    /* 消息区 — 覆盖桌面 1400px 固定宽度 */
    #chatMessages.chat-messages {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 12px 8px 8px !important;
    }

    .chat-message-content {
        font-size: 13px !important;
        line-height: 1.5 !important;
        max-width: 88% !important;
        padding: 9px 11px !important;
    }

    .chat-suggestion-btn {
        font-size: 12px !important;
        padding: 7px 11px !important;
    }

    /* 输入区域 */
    .chat-input-fixed {
        padding: 4px 8px 8px !important;
    }

    .chat-composer-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 输入胶囊 — 全宽，圆角 */
    #chatMediaDrop {
        border-radius: 22px !important;
        padding: 8px 12px 6px !important;
        width: 100% !important;
    }

    /* 输入框 — 不设死高度，让 rows="2" 自然生效 */
    #chatPromptInput {
        font-size: 15px !important;
        padding: 4px 0 !important;
        width: 100% !important;
    }

    /* 工具栏一行（覆盖900px的column） */
    .chat-toolbar {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
    }

    .chat-toolbar-left {
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .chat-toolbar-right {
        flex-direction: row !important;
        align-items: center !important;
    }

    .chat-icon-btn {
        width: 28px !important;
        height: 28px !important;
    }

    .chat-model-btn {
        font-size: 11px !important;
        height: 26px !important;
    }

    #chatSendBtn.chat-send-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
        border-radius: 50% !important;
    }

    .chat-media-preview-group {
        flex-direction: column !important;
        gap: 4px !important;
    }

    .chat-media-preview {
        max-width: 100% !important;
    }
}

/* ==========================================
   13. 视频模块 + 输入框可见性修复
   ========================================== */
@media (max-width: 768px) {
    /* --- 底部输入栏上移，避开底部 Tab（最关键）--- */
    #video .video-v2-bottom-bar {
        bottom: 60px !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 8px 8px !important;
        z-index: 115 !important;
    }

    /* 主内容区留出空间给底部栏 + Tab */
    #video .video-v2-main {
        padding: 12px 8px 140px !important;
        margin-bottom: 0 !important;
    }

    /* 去掉动态扩展 margin（桌面 hover 效果） */
    #video:has(#videoComposerBlock:hover) .video-v2-main,
    #video:has(#videoComposerBlock:focus-within) .video-v2-main,
    #video:has(#videoComposerBlock.has-text) .video-v2-main {
        margin-bottom: 0 !important;
        padding-bottom: 260px !important;
    }

    /* 输入容器 */
    #video #videoMediaDrop.video-v2-chat-input-container {
        border-radius: 16px !important;
        padding: 8px 10px !important;
    }

    /* 输入框本身 — 确保始终可看到 */
    #video #videoPromptInput.video-v2-chat-input {
        min-height: 36px !important;
        max-height: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
        color: #c0c7d0 !important;
    }

    /* 展开状态 */
    #video #videoComposerBlock:hover #videoPromptInput.video-v2-chat-input,
    #video #videoComposerBlock:focus-within #videoPromptInput.video-v2-chat-input,
    #video #videoComposerBlock.has-text #videoPromptInput.video-v2-chat-input,
    body.video-workspace-mode #video #videoComposerBlock:hover #videoPromptInput.video-v2-chat-input,
    body.video-workspace-mode #video #videoComposerBlock:focus-within #videoPromptInput.video-v2-chat-input,
    body.video-workspace-mode #video #videoComposerBlock.has-text #videoPromptInput.video-v2-chat-input {
        min-height: 80px !important;
        max-height: 200px !important;
        line-height: 1.5 !important;
        padding: 8px 40px 8px 8px !important;
        color: #fff !important;
    }

    /* 展开状态容器也调整 */
    #video #videoComposerBlock:hover #videoMediaDrop.video-v2-chat-input-container,
    #video #videoComposerBlock:focus-within #videoMediaDrop.video-v2-chat-input-container,
    #video #videoComposerBlock.has-text #videoMediaDrop.video-v2-chat-input-container,
    body.video-workspace-mode #video #videoComposerBlock:hover #videoMediaDrop.video-v2-chat-input-container,
    body.video-workspace-mode #video #videoComposerBlock:focus-within #videoMediaDrop.video-v2-chat-input-container,
    body.video-workspace-mode #video #videoComposerBlock.has-text #videoMediaDrop.video-v2-chat-input-container {
        border-radius: 14px !important;
        padding: 10px !important;
    }

    /* 控制行 */
    #video .video-v2-controls-row {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 6px !important;
    }

    #video .video-v2-controls-actions {
        justify-content: flex-start;
    }

    /* 视频任务查询面板 */
    #video .video-task-query-panel {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 4px;
    }

    /* 聊天消息区 */
    #video .chat-scroll-area {
        padding: 8px 4px 0 !important;
    }

    #video .chat-composer-wrap {
        padding: 6px 4px 0 !important;
    }

    /* 历史面板 */
    .video-history-panel {
        width: 100%;
        margin: 8px 0 12px;
    }

    /* workspace mode header 保持隐藏 */
    body.video-workspace-mode .header-right .search-bar,
    body.video-workspace-mode .header-key-actions,
    body.video-workspace-mode .notification-btn {
        display: none !important;
    }

    /* 视频结果 */
    #video .chat-result-video-wrap {
        width: 100% !important;
    }

    #video .chat-result-video {
        max-height: 40vh !important;
    }
}

/* ==========================================
   14. 定价页
   ========================================== */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .pricing-intro {
        padding: 16px;
    }

    .pricing-intro h2 {
        font-size: 20px;
    }

    .pricing-card {
        padding: 20px 16px;
    }

    .pricing-price {
        font-size: 30px;
    }
}

/* ==========================================
   15. 管理后台
   ========================================== */
@media (max-width: 768px) {
    /* 表格加横向滚动 */
    .admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table {
        min-width: 600px;
    }

    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .admin-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   16. 短剧工坊
   ========================================== */
@media (max-width: 768px) {
    .shortdrama-page-shell {
        max-width: 100%;
    }

    .shortdrama-wizard-card {
        padding: 12px 8px !important;
        border-radius: 10px !important;
    }

    .shortdrama-stepbar {
        gap: 4px !important;
    }

    .shortdrama-step-item {
        padding: 6px 3px !important;
        border-radius: 8px !important;
        font-size: 10px !important;
    }

    /* 长剧/独立电影流程图：手机端隐藏 */
    .ld-step2-flow {
        display: none !important;
    }

    .shortdrama-step-item i {
        font-size: 13px !important;
    }

    .shortdrama-stage-badge {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }

    .shortdrama-stage-desc {
        font-size: 12px !important;
    }
}

/* ==========================================
   17. 内容作弊器
   ========================================== */
@media (max-width: 768px) {
    .cheat-modules-grid {
        grid-template-columns: 1fr !important;
    }

    .cheat-workflow-cards {
        flex-direction: column !important;
    }

    .cheat-workflow-card {
        min-width: auto !important;
    }

    .cheat-status-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cheat-file-tree {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================
   18. 电商工作室 补充
   ========================================== */
@media (max-width: 768px) {
    .est-steps-tabs {
        flex-direction: column;
        gap: 6px;
    }

    .est-step-tab {
        padding: 12px 16px;
        border-radius: 10px;
    }

    .est-step1-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ==========================================
   19. 独立电影
   ========================================== */
@media (max-width: 768px) {
    .film-layout,
    .film-two-col {
        flex-direction: column;
        gap: 16px;
    }

    .film-card {
        padding: 16px;
        border-radius: 14px;
    }
}

/* ==========================================
   20. 资产库 / IP库 / AI 作图
   ========================================== */
@media (max-width: 768px) {
    .assets-grid,
    .gallery-grid,
    .ip-library-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .assets-grid,
    .gallery-grid,
    .ip-library-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   21. Toast / 提示消息
   ========================================== */
@media (max-width: 768px) {
    .toast {
        left: 12px;
        right: 12px;
        bottom: 80px;
        width: auto;
        max-width: none;
        border-radius: 12px;
        font-size: 13px;
        padding: 12px 16px;
    }
}

/* ==========================================
   22. 小屏手机微调 (≤480px)
   ========================================== */
@media (max-width: 480px) {
    .section {
        padding: 12px 8px;
    }

    .header {
        padding: 0 8px;
    }

    .page-title {
        font-size: 15px;
        max-width: 120px;
    }

    .modal-content {
        width: 96vw;
        margin: 10px;
    }

    .sidebar {
        width: 40vw !important;
        max-width: 160px !important;
    }

    body.sidebar-auto-hide .sidebar,
    body.sidebar-collapsed .sidebar {
        width: 40vw !important;
        max-width: 160px !important;
    }

    .mobile-bottom-nav {
        height: 56px;
    }

    .mobile-tab {
        font-size: 10px;
        min-width: 40px;
        padding: 4px 4px;
    }

    .mobile-tab i {
        font-size: 18px;
    }

    .main-content {
        padding-bottom: 64px;
    }
}

/* ==========================================
   23. 平板横屏 (768px-1024px) 温和调整
   ========================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --sidebar-width: 200px;
    }

    .sidebar {
        width: 200px;
    }

    .section {
        padding: 20px;
    }

    .featured-video-grid.horizontal {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-video-grid.vertical {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   24. 安全区 & 设备适配
   ========================================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .mobile-bottom-nav {
            padding-bottom: calc(8px + env(safe-area-inset-bottom));
            height: auto;
            min-height: 56px;
        }

        .main-content {
            padding-bottom: calc(72px + env(safe-area-inset-bottom));
        }
    }
}

/* ==========================================
   25. 各模块补充修复 (short.css / film_production / ai-image / admin)
   ========================================== */

/* --- 25a. 短剧工坊 (short.css) — 保持PC排列，字更大 --- */
@media (max-width: 768px) {
    /* 步骤条：保持原排列 */
    .td-stepbar {
        gap: 4px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .td-stepbar .td-step-item {
        padding: 8px 4px;
        font-size: 11px;
    }
    .td-stepbar .td-step-item i {
        font-size: 13px;
    }

    /* 项目列表：改为2列，保证项目名至少显示5个字 */
    .td-project-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .td-project-tab-name {
        min-width: 55px !important;
    }
    .td-project-list .td-project-pill {
        padding: 6px 4px !important;
        font-size: 11px !important;
    }

    /* 详情切换器：保持5列一行 */
    .td-detail-switcher {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }
    .td-detail-switcher .td-detail-tab {
        padding: 6px 3px !important;
        font-size: 11px !important;
    }
    .td-detail-switcher .td-detail-tab i {
        font-size: 12px !important;
    }

    /* 映射网格：保持3列；单详情模式改为1列 */
    .td-mapping-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .td-mapping-grid.is-single-detail {
        grid-template-columns: 1fr !important;
    }

    /* 单详情模式卡片列表：1列，卡片填满 */
    .td-mapping-column.is-single-detail .td-mapping-card-list {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .td-mapping-column.is-single-detail .td-mapping-card {
        padding: 12px !important;
        border-radius: 12px !important;
        margin-bottom: 0 !important;
    }
    .td-mapping-column.is-single-detail .td-mapping-name {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    .td-mapping-column.is-single-detail .td-mapping-kind-badge {
        font-size: 12px !important;
        padding: 4px 8px !important;
        margin-bottom: 6px !important;
    }
    .td-mapping-column.is-single-detail .td-mapping-action-row {
        gap: 6px !important;
    }
    .td-mapping-column.is-single-detail .td-mapping-action-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* 资产生成网格：2列（两行） */
    .td-asset-gen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    /* 资产生成按钮：横向并排 */
    .td-section-action-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    .td-asset-flow-actions {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .td-asset-flow-btn {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 3px 6px !important;
        font-size: 12px !important;
        min-height: 30px !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }
    .td-asset-flow-btn:not(:last-child)::after {
        display: none !important;
    }
    .td-add-asset-btn {
        width: auto !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        padding: 3px 6px !important;
        font-size: 12px !important;
        min-height: 30px !important;
    }

    /* 时间线：保持5列 */
    .td-timeline {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 3px !important;
        font-size: 11px !important;
    }

    /* 上传切换标签：保持2列 */
    .td-upload-tab-bar {
        gap: 4px;
    }
    .td-upload-tab-bar .td-upload-tab {
        font-size: 12px !important;
        padding: 8px 6px !important;
    }

    /* 第二阶段流程：保持原排列 */
    .td-step2-flow {
        gap: 4px !important;
    }
    .td-step2-flow .td-step2-arrow {
        width: 24px !important;
    }

    /* 项目编辑器：剧本/风格/年代并排 */
    .td-project-pill--editor {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .td-project-pill--editor .td-project-pill-segment--editor {
        padding: 10px 10px !important;
        min-height: 44px !important;
        gap: 6px !important;
    }
    .td-project-pill--editor .td-project-pill-label {
        font-size: 13px !important;
    }
    .td-project-pill--editor input,
    .td-project-pill--editor select {
        font-size: 14px !important;
    }
    .td-save-project-btn {
        min-height: 40px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
    .td-project-pill--split {
        gap: 4px !important;
    }

    /* 分镜卡片：缩小空白 */
    .td-storyboard-list {
        gap: 8px !important;
        margin-bottom: 10px !important;
    }
    .td-storyboard-card {
        padding: 10px !important;
        border-radius: 12px !important;
    }
    .td-storyboard-head {
        margin-bottom: 6px !important;
    }
    .td-storyboard-text {
        margin-bottom: 6px !important;
        padding: 4px 8px !important;
        border-radius: 8px !important;
        max-height: 200px !important;
        overflow-y: auto !important;
    }
    .td-storyboard-text:empty {
        display: none !important;
    }
    .td-storyboard-title {
        font-size: 15px !important;
    }
    .td-card-media-row {
        margin: 6px 0 !important;
        gap: 8px !important;
    }

    /* 卡片内边距 */
    .td-project-card,
    .td-project-pill,
    .td-stage3-hero,
    .td-wizard-card {
        padding: 10px 8px !important;
    }

    /* 上传分割 */
    .td-upload-split {
        gap: 4px !important;
    }

    /* 手动上传网格：2列 */
    .td-manual-upload-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
}

/* --- 25b. 独立电影 (film_production.css) --- */
@media (max-width: 768px) {
    /* 步骤条：4列→2列，分两行 */
    .fp-stepbar {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2px;
        margin-bottom: 14px;
    }
    .fp-step-item {
        padding: 10px 8px;
        font-size: 12px;
        gap: 6px;
    }
    .fp-step-item i {
        font-size: 13px;
    }
    /* 阶段1操作按钮缩小间距 */
    .fp-stage1-actions {
        gap: 6px;
    }

    /* 计划表格在移动端可横向滚动 */
    .fp-plan-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 分页控件：横向一排 */
    .fp-clip-nav {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    .fp-clip-nav-btn {
        padding: 0 10px !important;
        font-size: 12px !important;
        min-height: 32px !important;
        flex-shrink: 0 !important;
    }
    .fp-clip-select {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 12px !important;
        min-height: 32px !important;
        padding: 0 10px !important;
    }
    .fp-clip-info {
        display: none !important;
    }
}

/* --- 25c. AI 作图 (ai-image.css) --- */
@media (max-width: 768px) {
    /* 固定底部输入栏上移，避免被底部 Tab 遮挡 */
    #ai-image .video-v2-bottom-bar {
        bottom: 60px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 115 !important;
        padding: 0 8px 8px !important;
    }

    /* AI 作图输入框最小高度 */
    #ai-image #aiImagePromptInput.video-v2-chat-input {
        min-height: 36px !important;
        max-height: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    /* 下拉框缩短 */
    #ai-image .ai-image-dropdowns {
        gap: 3px !important;
    }
    #ai-image .ai-image-select {
        max-width: 100px !important;
        padding: 4px 20px 4px 8px !important;
        font-size: 13px !important;
        height: auto !important;
        min-height: 30px !important;
    }

    /* 控制按钮：框包下字，字体清晰 */
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        gap: 6px !important;
        max-height: none !important;
    }
    #ai-image .video-option-btn {
        max-width: none !important;
        min-width: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 32px !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }
}

/* --- 25d. 素材库 --- */
@media (max-width: 768px) {
    /* 筛选栏缩小 */
    #assetsFilterBar {
        padding: 12px 8px !important;
    }
    /* 顶部来源切换按钮 — 字体加大，与第二行有间距 */
    #assetsFilterBar > div:first-child {
        gap: 6px !important;
        margin-bottom: 16px !important;
        flex-wrap: nowrap !important;
    }
    #assetsFilterBar > div:first-child button {
        padding: 6px 8px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }
    #assetsFilterBar > div:first-child button i {
        font-size: 11px !important;
    }
    /* 分类筛选按钮缩小 */
    #assetsCategoryFilter {
        gap: 6px !important;
        margin-bottom: 12px !important;
    }
    #assetsCategoryFilter button {
        padding: 6px 12px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }
    /* 搜索行缩小 */
    #assetsProjectDropdownWrapper {
        min-width: 140px !important;
    }
    #assetsProjectDropdown {
        padding: 8px 28px 8px 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }
    #assetsSearchInput {
        padding: 8px 8px 8px 30px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }
    #assetsSearchInput + div,
    #assetsFilterBar button[onclick*="doAssetsSearch"],
    #assetsFilterBar button[onclick*="clearAssetsSearch"] {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    /* 网格缩小 */
    #assetsGrid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 8px !important;
        padding: 12px 8px !important;
    }
    /* 空状态/加载 */
    #assetsLoading,
    #assetsEmpty {
        padding: 24px 12px !important;
    }
    #assetsEmpty p {
        font-size: 13px !important;
    }
}

/* --- 25e. 管理后台表格 --- */
@media (max-width: 768px) {
    /* 确保表格容器可以横向滚动 */
    .admin-users-table-wrap,
    .admin-dashboard-table-wrap,
    .admin-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translateZ(0); /* 强制 GPU 加速滚动 */
    }
}

/* ==========================================
   26. 全部模块统一缩小（保持布局，只缩尺寸）
   ========================================== */
@media (max-width: 768px) {

    /* ---- 26a. admin-dashboard & admin-users ---- */
    .admin-dashboard-hero h2,
    .admin-users-hero h2 {
        font-size: 18px !important;
    }
    .admin-dashboard-hero,
    .admin-users-hero {
        padding: 12px 10px !important;
        gap: 10px !important;
    }
    .admin-dashboard-stat strong,
    .admin-users-stat strong {
        font-size: 17px !important;
    }
    .admin-users-guard {
        padding: 12px 10px !important;
        gap: 8px !important;
    }
    .admin-dashboard-modal .modal-content,
    .admin-dashboard-modal {
        padding: 10px !important;
        max-width: 95vw !important;
    }
    .admin-dashboard-modal .modal-header,
    .admin-dashboard-modal .modal-body {
        padding: 10px 8px !important;
    }
    .admin-dashboard-modal h3 {
        font-size: 15px !important;
    }
    .admin-users-search {
        min-width: 0 !important;
        flex: 1 !important;
    }

    /* ---- 短剧/长剧 Step 2 流程头 ---- */
    .ld-stage3-hero,
    .td-stage3-hero {
        display: none !important;
    }

    /* ---- 26b. ecommerce-studio（批量生图）---- */
    .est-bottom-row-large {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .est-variables-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .est-header {
        margin-bottom: 12px !important;
        padding: 10px 8px !important;
        border-radius: 8px !important;
    }
    .est-header .est-title {
        font-size: 16px !important;
    }
    .est-header p {
        font-size: 12px !important;
    }
    .est-step1-layout {
        gap: 10px !important;
    }
    .est-step1-layout .est-left-panel,
    .est-step1-layout .est-right-panel {
        gap: 10px !important;
    }
    .est-generate-section {
        padding: 12px 8px !important;
    }
    .est-generate-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
    .est-results-grid {
        gap: 6px !important;
    }
    .est-steps-tabs {
        gap: 4px !important;
    }
    .est-step-tab {
        padding: 8px 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }
    .est-prompt-section,
    .est-script-section,
    .est-preview-section {
        padding: 10px 8px !important;
    }
    .est-seg-body {
        gap: 10px !important;
    }

    /* ---- 26c. film_production ---- */
    .fp-hero {
        padding: 14px 12px !important;
        gap: 10px !important;
    }
    .fp-card {
        padding: 12px 10px !important;
    }
    .fp-novel-input {
        min-height: 140px !important;
    }
    .fp-asset-stats strong {
        font-size: 15px !important;
    }
    .fp-preview-zone {
        min-height: 150px !important;
    }
    .fp-status-banner {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* ---- 26d. IP库 ---- */
    .ip-stat-card {
        padding: 12px 10px !important;
    }
    .ip-stat-number {
        font-size: 20px !important;
    }
    .ip-dist-card {
        padding: 10px 8px !important;
    }
    .ip-filter-bar {
        padding: 8px 10px !important;
        gap: 6px;
    }
    .ip-filter-bar input,
    .ip-filter-bar select {
        min-width: 0 !important;
    }
    .ip-loading,
    .ip-empty {
        padding: 20px 10px !important;
    }
    .ip-library-grid {
        gap: 8px !important;
    }

    /* ---- 26e. 兑换码 ---- */
    .redeem-stat-card {
        padding: 12px 10px !important;
    }
    .redeem-panel {
        padding: 12px 10px !important;
    }
    .redeem-result-panel {
        padding: 12px 10px !important;
    }

    /* ---- 26f. 音频 ---- */
    .audio-container {
        padding: 12px 10px !important;
    }
    .audio-container h1 {
        font-size: 18px !important;
    }
    .audio-container h2 {
        font-size: 15px !important;
    }
    .audio-input-section {
        padding: 12px 10px !important;
    }
    .audio-generate-btn {
        padding: 8px 18px !important;
        font-size: 13px !important;
    }
    .audio-history-section {
        padding: 12px 10px !important;
    }

    /* ---- 26g. 支付返回页 ---- */
    .payment-return-card {
        padding: 14px 10px !important;
    }
    .payment-return-card h3 {
        font-size: 15px !important;
    }

    /* ---- 26h. root_key ---- */
    .root-key-hero {
        padding: 12px 10px !important;
        border-radius: 10px !important;
    }
    .root-key-guard {
        padding: 12px 10px !important;
    }
    .root-key-large-textarea {
        min-height: 140px !important;
    }
    .root-key-model-list {
        max-height: calc(100vh - 180px) !important;
    }

    /* ---- 26i. test 测试页 ---- */
    .test-panel-body {
        gap: 10px !important;
    }
    .test-result-text {
        min-height: 150px !important;
        max-height: 280px !important;
    }

    /* ---- 26j. keai-image-test ---- */
    .kit-guard {
        min-height: 160px !important;
    }
    .kit-composer-block {
        border-radius: 14px !important;
    }
    .kit-model-select {
        min-width: 0 !important;
    }

    /* ---- 26k. 通用：所有模态框 ---- */
    .modal-content {
        width: 94vw !important;
        max-width: none !important;
        margin: 8px auto !important;
        border-radius: 12px !important;
    }
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 10px 8px !important;
    }
    .modal-header h3 {
        font-size: 15px !important;
    }

    /* ---- 26l. 通用：大按钮缩小 ---- */
    .btn-lg,
    .full-width.btn {
        padding: 10px 14px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
}

/* 480px 极窄屏进一步缩小 */
@media (max-width: 480px) {
    .admin-dashboard-stat strong,
    .admin-users-stat strong,
    .ip-stat-number {
        font-size: 16px !important;
    }
    .est-header .est-title,
    .audio-container h1 {
        font-size: 16px !important;
    }
    .replica-container {
        gap: 8px !important;
    }
    .replica-box {
        padding: 10px 6px !important;
    }
}