/* ========================================
   移动端适配样式 — 独立文件
   所有样式限定在 @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;
    }

    .mobile-recharge-btn {
        display: inline-flex !important;
        width: 34px;
        height: 34px;
        min-width: 34px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 999px;
        color: #ffffff;
        border: 1px solid rgba(255,255,255,0.18);
        background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
        box-shadow: 0 10px 24px rgba(239,68,68,0.28);
    }

    /* 返回按钮移动端适配 */
    .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;
}

.mobile-user-center-modal {
    display: none;
}

.mobile-profile-label {
    display: none;
}

@media (min-width: 769px) {
    .mobile-recharge-btn {
        display: none !important;
    }
}

@media (max-width: 768px) {
    body.mobile-user-center-open {
        overflow: hidden;
    }

    .mobile-user-center-modal {
        position: fixed;
        inset: 0;
        z-index: 30000;
    }

    .mobile-user-center-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.58);
    }

    .mobile-user-center-sheet {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: min(82dvh, 680px);
        overflow-y: auto;
        padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
        background: #101114;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 0;
        border-radius: 8px 8px 0 0;
        box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.5);
        color: #f8fafc;
    }

    .mobile-user-center-handle {
        width: 42px;
        height: 4px;
        margin: 0 auto 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
    }

    .mobile-user-center-header,
    .mobile-user-center-identity,
    .mobile-user-center-balance,
    .mobile-user-center-section-title,
    .mobile-user-record {
        display: flex;
        align-items: center;
    }

    .mobile-user-center-header {
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    .mobile-user-center-identity {
        min-width: 0;
        gap: 10px;
    }

    .mobile-user-center-avatar {
        display: flex;
        width: 42px;
        height: 42px;
        min-width: 42px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #2563eb;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
    }

    .mobile-user-center-identity h3 {
        margin: 0 0 3px;
        font-size: 17px;
        line-height: 1.2;
    }

    .mobile-user-center-identity p {
        margin: 0;
        max-width: 220px;
        overflow: hidden;
        color: #9ca3af;
        font-size: 12px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-user-center-close {
        display: inline-flex;
        width: 34px;
        height: 34px;
        min-width: 34px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        color: #e5e7eb;
        cursor: pointer;
    }

    .mobile-user-center-balance {
        justify-content: space-between;
        gap: 10px;
        padding: 14px;
        border: 1px solid rgba(76, 133, 240, 0.32);
        border-radius: 8px;
        background: #171a22;
    }

    .mobile-user-center-balance span,
    .mobile-user-center-stats span {
        color: #9ca3af;
        font-size: 12px;
    }

    .mobile-user-center-balance strong {
        flex: 1;
        color: #f8fafc;
        font-size: 24px;
        line-height: 1;
        text-align: left;
    }

    .mobile-user-center-balance button,
    .mobile-user-center-section-title button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 34px;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 700;
    }

    .mobile-user-center-balance button {
        padding: 0 12px;
        background: #22c55e;
        color: #052e16;
    }

    .mobile-user-center-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 10px 0 14px;
    }

    .mobile-user-center-stats div {
        min-width: 0;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        background: #15161a;
    }

    .mobile-user-center-stats strong {
        display: block;
        margin-top: 5px;
        overflow-wrap: anywhere;
        color: #f8fafc;
        font-size: 14px;
        line-height: 1.25;
    }

    .mobile-user-center-records {
        padding: 12px 0 2px;
    }

    .mobile-user-center-section-title {
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
    }

    .mobile-user-center-section-title > span {
        font-size: 14px;
        font-weight: 700;
    }

    .mobile-user-center-section-title button {
        padding: 0 10px;
        background: rgba(76, 133, 240, 0.14);
        color: #93c5fd;
        font-size: 12px;
    }

    .mobile-user-center-record-list {
        display: grid;
        gap: 8px;
    }

    .mobile-user-record {
        justify-content: space-between;
        gap: 12px;
        min-height: 68px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        background: #15161a;
    }

    .mobile-user-record div {
        min-width: 0;
    }

    .mobile-user-record strong,
    .mobile-user-record span,
    .mobile-user-record time {
        display: block;
    }

    .mobile-user-record strong {
        margin-bottom: 3px;
        color: #f8fafc;
        font-size: 13px;
        line-height: 1.25;
    }

    .mobile-user-record span,
    .mobile-user-record time {
        overflow: hidden;
        color: #9ca3af;
        font-size: 12px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-user-record b {
        min-width: 76px;
        text-align: right;
        font-size: 13px;
    }

    .mobile-user-record b.income {
        color: #34d399;
    }

    .mobile-user-record b.consume {
        color: #f87171;
    }

    .mobile-user-center-empty {
        padding: 18px 12px;
        border: 1px dashed rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        color: #9ca3af;
        font-size: 13px;
        text-align: center;
    }

    .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);
    }
}

@media (min-width: 1025px) {
    #mobileVideoFeed {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    body:not(.mobile-home-feed-active) #mobileVideoFeed {
        display: none !important;
        pointer-events: none !important;
    }

    .app-container {
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    .sidebar {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100vw !important;
        min-width: 0;
        overflow-y: auto;
        padding-bottom: 72px;
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 62px;
        z-index: 150;
        justify-content: space-evenly;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 52px;
        min-height: 48px;
        padding: 4px 6px;
        border-radius: 10px;
        color: #71717a;
        font-size: 11px;
        font-weight: 500;
        text-decoration: none;
    }

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

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

    .mobile-tab.active {
        color: #67e8f9;
        background: rgba(34, 211, 238, 0.16);
    }

    body.mobile-home-feed-active {
        overflow: hidden;
        background: #050507;
    }

    body.mobile-home-feed-active .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 0;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        z-index: 170;
        pointer-events: none;
    }

    body.mobile-home-feed-active .header-left,
    body.mobile-home-feed-active .header-right > :not(#userProfileMenu):not(#mobileRechargeBtn):not(#langSelect) {
        display: none !important;
    }

    body.mobile-home-feed-active #mobileRechargeBtn {
        position: fixed;
        top: max(15px, calc(env(safe-area-inset-top) + 3px));
        right: 60px;
        z-index: 190;
        pointer-events: auto;
        display: inline-flex !important;
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    body.mobile-home-feed-active #userProfileMenu {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        z-index: 190;
        pointer-events: auto;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    body.mobile-home-feed-active #userProfileMenu .user-info {
        display: none !important;
    }

    body.mobile-home-feed-active #userProfileMenu .avatar {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255,255,255,0.3);
        box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    }

    body.ui3-director .ui3-admin-carousel-toggle,
    body.ui3-director .ui3-card-manager-toggle,
    body.ui3-director .ui3-home-card-manager,
    body.ui3-director #adminArea .home-carousel-admin-bar,
    body.ui3-director .ui3-poster-delete,
    body.ui3-director .ui3-upload-delete {
        display: none !important;
        pointer-events: none !important;
    }

    body.mobile-home-feed-active .main-content {
        overflow: hidden;
        padding-bottom: 0 !important;
    }

    #home.section:has(#mobileVideoFeed) {
        padding: 0 !important;
        min-height: 100dvh;
        overflow: hidden;
        background: #050507;
    }

    #home.section:has(#mobileVideoFeed) > :not(#mobileVideoFeed) {
        display: none !important;
    }

    #mobileVideoFeed.mobile-video-feed {
        display: block !important;
        position: relative;
        width: 100vw;
        height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        background: #050507;
        z-index: 20;
    }

    .mobile-feed-card {
        position: relative;
        width: 100vw;
        height: 100dvh;
        scroll-snap-align: start;
        overflow: hidden;
        background: #050507;
        isolation: isolate;
    }

    .mobile-feed-media,
    .mobile-feed-shade {
        position: absolute;
        inset: 0;
    }

    .mobile-feed-media {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #050507;
        overflow: hidden;
        z-index: 1;
    }

    .mobile-feed-card--horizontal .mobile-feed-media::before {
        content: "";
        position: absolute;
        inset: -28px;
        background: var(--mobile-feed-bg) center / cover no-repeat;
        filter: blur(26px);
        transform: scale(1.12);
        opacity: 0.44;
    }

    .mobile-feed-video,
    .mobile-feed-image {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 2;
        background: #050507;
    }

    .mobile-feed-card--horizontal .mobile-feed-video,
    .mobile-feed-card--horizontal .mobile-feed-image {
        width: calc(100vw - 24px);
        height: auto;
        max-height: 62vh;
        aspect-ratio: 16 / 9;
        object-fit: contain;
        border-radius: 12px;
        box-shadow: 0 16px 52px rgba(0,0,0,0.45);
    }

    .mobile-feed-shade {
        z-index: 3;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(0,0,0,0.46) 0%, transparent 24%, transparent 58%, rgba(0,0,0,0.76) 100%),
            linear-gradient(90deg, rgba(0,0,0,0.28), transparent 38%);
    }

    .mobile-feed-sound {
        position: absolute;
        right: 16px;
        bottom: calc(142px + env(safe-area-inset-bottom));
        z-index: 8;
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: #ffffff;
        background: rgba(10,12,18,0.42);
        box-shadow: 0 12px 28px rgba(0,0,0,0.32);
        backdrop-filter: blur(16px);
        cursor: pointer;
    }

    .mobile-feed-sound[aria-pressed="true"] {
        background: rgba(34,211,238,0.9);
        border-color: rgba(255,255,255,0.28);
        box-shadow: 0 14px 30px rgba(34,211,238,0.24);
    }

    .mobile-feed-sound i {
        font-size: 16px;
        line-height: 1;
    }

    .mobile-feed-copy {
        position: absolute;
        left: 16px;
        right: 78px;
        bottom: calc(78px + env(safe-area-inset-bottom));
        z-index: 5;
        color: #fff;
        transition: transform 0.24s ease, opacity 0.24s ease;
    }

    .mobile-feed-title {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.25;
        text-shadow: 0 2px 12px rgba(0,0,0,0.55);
    }

    .mobile-feed-hint {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-top: 8px;
        padding: 7px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.16);
        background: rgba(255,255,255,0.14);
        color: rgba(255,255,255,0.86);
        font-size: 12px;
        backdrop-filter: blur(14px);
        cursor: pointer;
        pointer-events: auto;
    }

    .mobile-feed-prompt {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(82vw, 340px);
        z-index: 7;
        padding: calc(72px + env(safe-area-inset-top)) 18px calc(90px + env(safe-area-inset-bottom));
        overflow-y: auto;
        background: rgba(8, 10, 14, 0.88);
        color: #f8fafc;
        border-left: 1px solid rgba(255,255,255,0.12);
        backdrop-filter: blur(18px);
        transform: translateX(102%);
        transition: transform 0.24s ease;
    }

    .mobile-feed-card.show-prompt::after {
        content: '';
        position: absolute;
        inset: 0 min(82vw, 340px) 0 0;
        z-index: 6;
        background: rgba(0,0,0,0.12);
    }

    .mobile-feed-card.show-prompt .mobile-feed-prompt {
        transform: translateX(0);
    }

    .mobile-feed-card.show-prompt .mobile-feed-copy {
        transform: translateX(-18px);
        opacity: 0.45;
    }

    .mobile-feed-prompt-label {
        font-size: 12px;
        color: rgba(255,255,255,0.6);
        margin-bottom: 10px;
    }

    .mobile-feed-prompt p {
        margin: 0;
        font-size: 15px;
        line-height: 1.75;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .mobile-novel-section,
    .mobile-novel-reader-section {
        padding-top: 0 !important;
        padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-novel-wrapper,
    .mobile-reader-wrapper {
        padding: 0 !important;
    }

    .mobile-novel-shell,
    .mobile-reader-shell {
        min-height: calc(100vh - 84px - env(safe-area-inset-bottom));
        background:
            radial-gradient(circle at top right, rgba(34, 211, 238, 0.12), transparent 28%),
            linear-gradient(180deg, #081016 0%, #05070b 100%);
        color: #e5eef7;
    }

    .mobile-novel-topbar,
    .mobile-reader-topbar {
        position: sticky;
        top: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
        background:
            linear-gradient(180deg, rgba(10, 16, 24, 0.96), rgba(7, 10, 15, 0.90));
        backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    }

    .mobile-novel-title {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0;
        flex: 1;
        text-align: center;
    }

    .mobile-novel-search,
    .mobile-novel-back,
    .mobile-reader-back {
        flex: 0 0 auto;
    }

    .mobile-novel-search,
    .mobile-novel-back {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #f5fbff;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    }

    .mobile-novel-search i,
    .mobile-novel-back i {
        font-size: 14px;
    }

    .mobile-novel-filter-row {
        padding: 12px 12px 0;
    }

    .mobile-novel-hero {
        margin: 12px 12px 0;
        padding: 18px;
        border-radius: 18px;
        background:
            linear-gradient(135deg, rgba(34, 211, 238, 0.20), rgba(59, 130, 246, 0.10)),
            rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    }

    .mobile-novel-hero-badge {
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        font-size: 11px;
        color: rgba(229, 238, 247, 0.88);
        margin-bottom: 12px;
    }

    .mobile-novel-hero h2 {
        margin: 0;
        font-size: 20px;
        line-height: 1.25;
    }

    .mobile-novel-hero p {
        margin: 10px 0 0;
        color: rgba(229, 238, 247, 0.74);
        font-size: 13px;
        line-height: 1.7;
    }

    .mobile-novel-category-strip {
        display: flex;
        gap: 8px;
        padding: 14px 12px 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .mobile-novel-category-strip::-webkit-scrollbar {
        display: none;
    }

    .mobile-novel-cat {
        flex: 0 0 auto;
        padding: 8px 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        color: rgba(229, 238, 247, 0.76);
        font-size: 12px;
        white-space: nowrap;
    }

    .mobile-novel-category-select {
        width: 100%;
        min-height: 46px;
        padding: 0 46px 0 14px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.10);
        background:
            linear-gradient(180deg, rgba(14, 22, 30, 0.98), rgba(11, 17, 24, 0.98));
        color: #f4fbff;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        color-scheme: dark;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 10px 24px rgba(0, 0, 0, 0.18);
        background-image:
            linear-gradient(45deg, transparent 50%, rgba(229, 238, 247, 0.80) 50%),
            linear-gradient(135deg, rgba(229, 238, 247, 0.80) 50%, transparent 50%),
            linear-gradient(180deg, rgba(34, 211, 238, 0.12), rgba(34, 211, 238, 0.02));
        background-position:
            calc(100% - 18px) 18px,
            calc(100% - 12px) 18px,
            0 0;
        background-size:
            6px 6px,
            6px 6px,
            100% 100%;
        background-repeat: no-repeat;
        outline: none;
    }

    .mobile-novel-category-select option {
        background: #071118;
        color: #f4fbff;
    }

    .mobile-novel-category-select option:checked,
    .mobile-novel-category-select option:focus,
    .mobile-novel-category-select option:hover {
        background: #0d3b49;
        color: #ffffff;
    }

    .mobile-novel-category-select optgroup {
        background: #071118;
        color: #f4fbff;
    }

    .mobile-novel-category-select:focus {
        border-color: rgba(34, 211, 238, 0.42);
        box-shadow:
            0 0 0 3px rgba(34, 211, 238, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 10px 24px rgba(0, 0, 0, 0.18);
    }

    .mobile-novel-filter-row::before {
        content: "分类";
        display: block;
        margin: 0 0 8px 2px;
        color: rgba(229, 238, 247, 0.56);
        font-size: 11px;
        letter-spacing: 0;
    }

    .mobile-novel-cat.active {
        background: rgba(34, 211, 238, 0.18);
        border-color: rgba(34, 211, 238, 0.36);
        color: #f8feff;
    }

    .mobile-novel-list {
        display: grid;
        gap: 12px;
        padding: 14px 12px 0;
    }

    .mobile-novel-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 14px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    }

    .mobile-novel-cover {
        display: none;
    }

    .mobile-novel-cover--2 {
        display: none;
    }

    .mobile-novel-cover--3 {
        display: none;
    }

    .mobile-novel-card-copy {
        min-width: 0;
    }

    .mobile-novel-card-top,
    .mobile-novel-card-meta {
        color: rgba(229, 238, 247, 0.62);
        font-size: 11px;
    }

    .mobile-novel-card h3 {
        margin: 8px 0 6px;
        font-size: 16px;
        line-height: 1.35;
        color: #f8fbff;
    }

    .mobile-novel-card p {
        margin: 0;
        font-size: 13px;
        line-height: 1.65;
        color: rgba(229, 238, 247, 0.76);
    }

    .mobile-novel-card-meta {
        margin-top: 10px;
    }

    .mobile-reader-chapters {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 10px 12px 12px;
        scrollbar-width: none;
    }

    .mobile-reader-actionbar {
        position: sticky;
        top: calc(64px + env(safe-area-inset-top));
        z-index: 4;
        padding: 10px 12px 0;
        background: linear-gradient(180deg, rgba(7, 10, 15, 0.94), rgba(7, 10, 15, 0));
    }

    .mobile-reader-video-btn {
        width: 100%;
        min-height: 46px;
        border: 1px solid rgba(34, 211, 238, 0.32);
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 14px;
        color: #f8feff;
        background:
            linear-gradient(135deg, rgba(34, 211, 238, 0.88), rgba(59, 130, 246, 0.82));
        box-shadow: 0 14px 30px rgba(34, 211, 238, 0.18);
        font-size: 14px;
        font-weight: 700;
    }

    .mobile-reader-video-btn:disabled {
        opacity: 0.52;
        cursor: wait;
    }

    .mobile-reader-chapters::-webkit-scrollbar {
        display: none;
    }

    .mobile-reader-chapter {
        flex: 0 0 auto;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.04);
        color: rgba(229, 238, 247, 0.78);
        font-size: 12px;
    }

    .mobile-reader-chapter.active {
        background: rgba(34, 211, 238, 0.18);
        border-color: rgba(34, 211, 238, 0.38);
        color: #f8feff;
    }

    .mobile-reader-page {
        margin: 0 12px 12px;
        padding: 16px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
    }

    .mobile-reader-page h2 {
        margin: 0 0 12px;
        font-size: 18px;
    }

    .mobile-reader-content {
        font-size: 15px;
        line-height: 1.9;
        white-space: pre-wrap;
        color: rgba(245, 250, 255, 0.88);
    }

    .mobile-bottom-nav {
        background: rgba(5,5,7,0.72);
        border-top-color: rgba(255,255,255,0.1);
        backdrop-filter: blur(18px);
    }
}

/* ==========================================
   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;
    }
}

@media (max-width: 768px) {
    #userProfileMenu.header-user-profile {
        width: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;
        flex: 0 0 78px !important;
        box-sizing: border-box !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        background: rgba(37, 99, 235, 0.92) !important;
        border: 1px solid rgba(147, 197, 253, 0.4) !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, 0.26) !important;
        cursor: pointer;
    }

    #userProfileMenu .avatar {
        display: none !important;
    }

    #userProfileMenu .user-info,
    body.mobile-home-feed-active #userProfileMenu .user-info {
        display: flex !important;
    }

    #userProfileMenu .user-entry-row {
        display: flex !important;
        align-items: center !important;
    }

    #userProfileMenu #userDisplayName {
        display: none !important;
    }

    #userProfileMenu .mobile-profile-label {
        display: inline-block !important;
        color: #ffffff;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    #userProfileMenu #userLogoutBtn {
        display: none !important;
    }

    body.ui3-director .lang-select,
    body.mobile-home-feed-active .lang-select,
    body.mobile-home-feed-active .header-right > #langSelect.lang-select {
        position: fixed !important;
        display: block !important;
        top: max(14px, calc(env(safe-area-inset-top) + 2px)) !important;
        left: 16px !important;
        right: auto !important;
        z-index: 190 !important;
        pointer-events: auto !important;
        width: 124px !important;
        min-width: 124px !important;
        max-width: 124px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding-left: 14px !important;
        padding-right: 30px !important;
    }

    #mobileRechargeBtn.mobile-recharge-btn,
    body.mobile-home-feed-active #mobileRechargeBtn {
        width: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;
        flex: 0 0 78px !important;
        box-sizing: border-box !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        background: #d97706 !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        box-shadow: 0 10px 24px rgba(217, 119, 6, 0.26) !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    #mobileRechargeBtn i {
        font-size: 13px !important;
    }

    body.mobile-home-feed-active #userProfileMenu {
        top: max(14px, calc(env(safe-area-inset-top) + 2px)) !important;
        right: 16px !important;
        background: rgba(37, 99, 235, 0.92) !important;
        border: 1px solid rgba(147, 197, 253, 0.4) !important;
    }

    body.mobile-home-feed-active #mobileRechargeBtn {
        top: max(14px, calc(env(safe-area-inset-top) + 2px)) !important;
        right: 104px !important;
    }

    .mobile-user-center-balance button {
        min-width: 82px;
    }

    .mobile-user-center-section-title button {
        min-width: 118px;
    }
}