/* ================================================================
   祥升电竞·闲鱼托管 — Mobile First Patch v1.0
   全面移动端适配补丁 — 最后加载，覆盖所有样式
   加载顺序：app.css → theme.css → [admin.css] → panel.css → components.css → mobile.css
   ================================================================ */

/* ================================================================
   1. Landing 首页移动端
   ================================================================ */

@media (max-width: 768px) {
    /* --- 导航栏 --- */
    .landing-nav .nav-inner {
        padding: 0 1rem;
    }
    .landing-nav .nav-logo {
        font-size: .95rem;
    }
    .landing-nav .nav-logo .logo-mark {
        width: 28px; height: 28px;
        border-radius: var(--r-sm);
    }

    /* 汉堡按钮 — 显示 */
    .nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px; height: 40px;
        border-radius: var(--r-md);
        color: var(--c-text);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-toggle:active {
        background: var(--c-surface-2);
    }

    /* 导航链接 — 移动端下拉 */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--c-surface);
        border-bottom: 1px solid var(--c-border);
        flex-direction: column;
        padding: var(--space-3) 1rem;
        gap: 0;
        box-shadow: var(--shadow-lg);
        z-index: 100;
    }
    .nav-links.open {
        display: flex;
    }
    .nav-links a {
        padding: .75rem .5rem;
        font-size: var(--fs-md);
        border-bottom: 1px solid var(--c-border-light);
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .nav-links a:last-child {
        border-bottom: none;
    }

    /* 导航操作按钮 */
    .nav-actions .btn-landing {
        display: none;
    }
    .nav-actions .btn-landing-primary {
        display: inline-flex;
        padding: .4rem .875rem;
        font-size: var(--fs-xs);
        min-height: 36px;
    }

    /* --- Hero 区域 --- */
    .hero-section {
        padding: 3rem 1.25rem 2rem;
    }
    .hero-section h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    .hero-section .hero-desc {
        font-size: .95rem;
        max-width: 100%;
        margin-bottom: var(--space-6);
    }
    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
    }
    .hero-actions .btn-landing,
    .hero-actions .btn-landing-primary {
        width: 100%;
        max-width: 320px;
        text-align: center;
        justify-content: center;
        min-height: 48px;
        font-size: var(--fs-md);
    }
    .hero-stats {
        gap: 1.25rem;
        margin-top: 2.5rem;
    }
    .hero-stat-item .num {
        font-size: 1.35rem;
    }
    .hero-stat-item .label {
        font-size: var(--fs-xs);
    }

    /* --- Mockup 浏览器 --- */
    .hero-mockup {
        padding: 0 .75rem;
        margin-top: 2rem;
    }
    .mockup-browser {
        transform: none;
        border-radius: var(--r-lg);
    }
    .mockup-browser:hover {
        transform: none;
    }
    .mockup-sidebar {
        display: none;
    }
    .mockup-content {
        min-height: 240px;
    }
    .mockup-main {
        padding: 12px;
        gap: 10px;
    }
    .mockup-hero-card {
        padding: 12px;
        gap: 12px;
    }
    .mockup-ring {
        width: 56px; height: 56px;
        border-width: 4px;
    }
    .mockup-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .mockup-stat {
        padding: 10px;
    }
    .mockup-chart {
        height: 56px;
        padding: 8px;
        gap: 4px;
    }

    /* --- 信任背书 --- */
    .trust-section {
        padding: 2rem 1.25rem;
    }
    .trust-stats {
        gap: 1rem;
    }
    .trust-num {
        font-size: 1.35rem;
    }
    .trust-desc {
        font-size: var(--fs-xs);
    }
    .trust-divider {
        display: none;
    }

    /* --- Section 通用 --- */
    .section {
        padding: 3rem 1.25rem;
    }
    .section-title {
        font-size: 1.35rem;
    }
    .section-desc {
        font-size: .9rem;
        max-width: 100%;
        margin-bottom: 2rem;
    }

    /* --- 功能卡片 --- */
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    .feature-card-new {
        padding: 1.5rem 1.25rem;
    }
    .feature-card-new:hover {
        transform: none;
    }
    .feature-icon-new {
        width: 40px; height: 40px;
        margin-bottom: var(--space-4);
    }

    /* --- AI 对话演示 --- */
    .demo-chat {
        max-width: 100%;
        padding: 0;
    }
    .demo-chat-window {
        border-radius: var(--r-lg);
    }
    .demo-chat-header {
        padding: var(--space-3) var(--space-4);
    }
    .demo-chat-avatar {
        width: 32px; height: 32px;
        font-size: .8rem;
    }
    .demo-chat-body {
        padding: var(--space-4);
        min-height: 260px;
        gap: var(--space-2);
    }
    .demo-msg {
        max-width: 88%;
    }
    .demo-msg-bubble {
        font-size: var(--fs-xs);
        padding: .5rem .75rem;
    }
    .demo-msg-avatar {
        width: 24px; height: 24px;
        font-size: .6rem;
    }

    /* --- 步骤卡片 --- */
    .steps-section {
        padding: 3rem 1.25rem;
    }
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .step-connector {
        display: none;
    }
    .step-card .step-num {
        width: 44px; height: 44px;
        font-size: 1rem;
        margin-bottom: var(--space-3);
    }

    /* --- 对比表格 --- */
    .compare-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--r-md);
    }
    .compare-row {
        min-width: 520px;
    }
    .compare-cell {
        padding: var(--space-3) var(--space-2);
        font-size: var(--fs-xs);
    }

    /* --- 评价卡片 --- */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    .testimonial-card {
        padding: 1.5rem 1.25rem;
    }
    .testimonial-card:hover {
        transform: none;
    }

    /* --- FAQ --- */
    .faq-list {
        max-width: 100%;
    }
    .faq-item summary {
        padding: var(--space-3) var(--space-4);
        font-size: var(--fs-sm);
        min-height: 44px;
    }
    .faq-answer {
        padding: 0 var(--space-4) var(--space-3);
        font-size: var(--fs-xs);
    }

    /* --- CTA --- */
    .cta-section {
        padding: 3rem 1.25rem;
    }
    .cta-card {
        padding: 2rem 1.25rem;
        border-radius: var(--r-xl);
    }
    .cta-card h2 {
        font-size: 1.35rem;
    }
    .cta-card p {
        font-size: .9rem;
    }
    .cta-actions .btn-landing-outline {
        width: 100%;
        max-width: 280px;
        min-height: 48px;
        font-size: var(--fs-md);
    }

    /* --- Footer --- */
    .landing-footer {
        padding: 2.5rem 1.25rem 1.5rem;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .footer-col:first-child {
        grid-column: 1 / -1;
    }
    .footer-brand {
        font-size: .95rem;
    }
    .footer-desc {
        font-size: var(--fs-xs);
    }
    .footer-col h4 {
        font-size: var(--fs-xs);
    }
    .footer-col a, .footer-col span {
        font-size: var(--fs-xs);
    }
    .footer-bottom {
        padding-top: 1.5rem;
    }

    /* --- 认证页面 --- */
    .auth-body {
        padding: 1rem;
    }
    .auth-card-new {
        padding: 1.75rem 1.25rem;
        border-radius: var(--r-xl);
    }
    .auth-logo .logo-mark {
        width: 44px; height: 44px;
    }
    .auth-logo h1 {
        font-size: 1.2rem;
    }
    .auth-input {
        font-size: 16px; /* iOS 防缩放 */
        padding: .7rem .875rem;
        min-height: 44px;
    }
    .auth-code-btn {
        min-height: 44px;
        padding: .5rem .75rem;
        font-size: var(--fs-xs);
    }
    .auth-submit {
        min-height: 48px;
        font-size: var(--fs-md);
    }
    .auth-features {
        gap: var(--space-2);
    }
    .auth-features span {
        font-size: var(--fs-xs);
    }

    /* --- 页面 Hero（features/pricing/about） --- */
    .page-hero {
        padding: 3rem 1.25rem 2rem;
    }
    .page-hero h1 {
        font-size: 1.5rem;
    }
    .hero-sub {
        font-size: .9rem;
    }
    .features-section,
    .pricing-section,
    .about-section {
        padding: 2rem 1.25rem 3rem;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }
    .pricing-card.featured {
        order: -1;
    }
    .pricing-card {
        padding: 1.5rem 1.25rem;
    }
    .pricing-card:hover {
        transform: none;
    }
}

/* 小屏手机额外优化 */
@media (max-width: 480px) {
    .hero-section h1 {
        font-size: 1.5rem;
    }
    .hero-stats {
        gap: .75rem;
    }
    .hero-stat-item .num {
        font-size: 1.15rem;
    }
    .trust-stats {
        flex-direction: column;
        gap: .75rem;
    }
    .trust-item {
        display: flex;
        align-items: baseline;
        gap: .5rem;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .compare-row {
        min-width: 480px;
    }
}

/* ================================================================
   2. 用户端移动端补充
   ================================================================ */

@media (max-width: 768px) {
    /* 侧边栏 — 全屏抽屉 */
    .sidebar {
        width: 82% !important;
        max-width: 320px;
        top: 0 !important;
        bottom: 0;
        height: 100vh;
        height: 100dvh;
        z-index: var(--z-overlay);
        border-radius: 0;
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* 侧边栏遮罩 */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: calc(var(--z-overlay) - 1);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-base) var(--ease);
    }
    .sidebar-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

    /* 顶部栏 */
    .topbar {
        padding: 0 .75rem;
        gap: .5rem;
    }
    .topbar-right {
        gap: .5rem;
    }

    /* 主内容区 */
    .main-content {
        padding: .875rem .875rem calc(56px + env(safe-area-inset-bottom, 0px) + 16px) !important;
    }

    /* 页面标题 */
    .panel-page-header {
        margin-bottom: .75rem;
    }
    .panel-page-header h1 {
        font-size: 1.25rem;
    }
    .panel-page-header p {
        font-size: .75rem;
    }

    /* 卡片 */
    .panel-card {
        border-radius: 12px;
        margin-bottom: .625rem;
    }
    .panel-card-header {
        padding: .75rem .875rem;
    }
    .panel-card-header h3 {
        font-size: .82rem;
    }
    .panel-card-body {
        padding: .875rem;
    }

    /* 统计卡片 */
    .panel-stat-grid {
        gap: .5rem;
    }
    .panel-stat {
        padding: .75rem;
        border-radius: 10px;
    }
    .panel-stat .panel-stat-icon {
        width: 28px; height: 28px;
        border-radius: 7px;
        margin-bottom: .25rem;
    }
    .panel-stat .panel-stat-value {
        font-size: 1.25rem;
    }
    .panel-stat .panel-stat-label {
        font-size: .65rem;
    }

    /* Hero 区域 */
    .panel-hero-stat {
        padding: 1rem;
        border-radius: 12px;
        gap: .75rem;
    }
    .panel-ring {
        width: 72px; height: 72px;
    }
    .panel-ring-text {
        font-size: 1.25rem;
    }

    /* 待办条 */
    .panel-todo-bar {
        gap: .375rem;
    }
    .panel-todo-item {
        padding: .5rem .75rem;
        border-radius: 8px;
    }

    /* 表格 */
    .panel-table-wrap {
        border-radius: 8px;
        margin: 0 -.875rem;
        padding: 0 .875rem;
    }
    .panel-table {
        font-size: .72rem;
        min-width: 480px;
    }
    .panel-table th, .panel-table td {
        padding: .4rem .5rem;
    }

    /* 表单 */
    .panel-input, .panel-select, .panel-textarea {
        font-size: 16px;
        padding: .55rem .75rem;
        border-radius: 8px;
        min-height: 44px;
    }
    .panel-form-group label {
        font-size: .78rem;
    }
    .panel-btn {
        min-height: 44px;
        padding: .5rem 1rem;
        font-size: .82rem;
        border-radius: 8px;
    }
    .panel-btn-sm {
        min-height: 36px;
        padding: .35rem .65rem;
        font-size: .74rem;
    }
    .panel-btn-lg {
        min-height: 48px;
    }

    /* 开关 */
    .form-toggle {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
    }

    /* Tab */
    .panel-tab {
        min-height: 44px;
        padding: .5rem .875rem;
        font-size: .82rem;
    }

    /* 空状态 */
    .empty-state {
        padding: var(--space-8) var(--space-3);
    }
    .empty-state-icon {
        width: 48px; height: 48px;
        font-size: 1.25rem;
    }
    .empty-state-title {
        font-size: var(--fs-md);
    }
    .empty-state-desc {
        font-size: var(--fs-xs);
    }

    /* Modal */
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .modal {
        max-width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: 16px 16px 0 0;
    }
    .modal-header {
        padding: .875rem 1rem;
        position: sticky;
        top: 0;
        background: var(--c-surface);
        z-index: 1;
    }
    .modal-header h2 {
        font-size: .95rem;
    }
    .modal-body {
        padding: 1rem;
    }
    .modal-footer {
        padding: .75rem 1rem;
        position: sticky;
        bottom: 0;
        background: var(--c-surface-2);
    }
    .modal-footer .panel-btn {
        flex: 1;
        min-height: 44px;
    }

    /* Toast */
    .toast-container {
        top: auto;
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        left: .75rem;
        right: .75rem;
    }
    .toast {
        max-width: none;
        border-radius: 10px;
        font-size: .8rem;
        padding: .65rem .85rem;
    }

    /* 快捷回复 */
    .im-quick-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
    .im-quick-row button {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* 聊天输入框 */
    .im-input-row textarea {
        font-size: 16px;
        min-height: 40px;
    }
    .im-send-btn {
        min-height: 40px;
        min-width: 60px;
    }

    /* 反馈按钮 */
    .feedback-fab {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        right: 12px;
        width: 44px; height: 44px;
        border-radius: 50%;
        padding: 0;
    }
    .feedback-fab span {
        display: none;
    }

    /* 移动端 Tab 栏 */
    .mobile-tabbar {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mobile-tabbar a {
        min-height: 48px;
        padding: 4px 0;
    }

    /* 渐变 Banner */
    .panel-gradient-banner {
        padding: .875rem 1rem;
        border-radius: 10px;
        gap: .5rem;
    }
    .panel-gradient-banner h3 {
        font-size: .85rem;
    }
    .panel-gradient-banner p {
        font-size: .72rem;
    }

    /* 设置页面 */
    .settings-quick-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
    }

    /* 绑定店铺 Tab */
    .bind-shop-tabs {
        flex-direction: column;
    }
    .bind-shop-tab {
        width: 100%;
    }

    /* 关键词表单 */
    .keywords-form-grid {
        grid-template-columns: 1fr;
    }

    /* 商城表单 */
    .mall-form-grid {
        grid-template-columns: 1fr;
    }
    .mall-status-bar {
        flex-direction: column;
    }
    .mall-status-card {
        min-width: 0;
    }

    /* 补贴页面 */
    .subsidy-action-grid {
        grid-template-columns: 1fr;
    }

    /* 黑名单表单 */
    .blacklist-form-grid {
        grid-template-columns: 1fr;
    }

    /* 分销页面 */
    .referral-code-card {
        flex-direction: column;
        align-items: flex-start;
    }

    /* 商品操作按钮 */
    .product-actions .panel-btn,
    .shop-actions .panel-btn {
        display: none;
    }
    .product-actions .panel-btn:first-child,
    .shop-actions .panel-btn:first-child,
    .product-actions .product-actions-more,
    .shop-actions .shop-actions-more {
        display: inline-flex;
    }

    /* 骨架屏 */
    .skeleton-card {
        padding: var(--space-3);
    }
    .skeleton-page {
        padding: var(--space-3);
    }

    /* 按钮组 */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    .btn-group .btn, .btn-group .panel-btn {
        border-radius: var(--r-md) !important;
        margin-left: 0;
        margin-bottom: var(--space-2);
        width: 100%;
    }
}

/* 小屏手机用户端 */
@media (max-width: 480px) {
    .main-content {
        padding: .625rem .625rem calc(56px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    }
    .panel-stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: .375rem;
    }
    .panel-stat {
        padding: .625rem;
    }
    .panel-stat .panel-stat-value {
        font-size: 1.1rem;
    }
    .panel-page-header h1 {
        font-size: 1.1rem;
    }
    .panel-card-body {
        padding: .75rem;
    }
}

/* ================================================================
   3. 管理端移动端补充
   ================================================================ */

@media (max-width: 768px) {
    .admin-sidebar {
        width: 260px;
        transform: translateX(-100%);
        padding-top: env(safe-area-inset-top, 0px);
    }
    .admin-sidebar.open {
        transform: translateX(0);
    }
    .admin-body, .admin-main {
        margin-left: 0;
    }
    .admin-content {
        padding: var(--space-3);
    }
    .admin-topbar {
        padding: 0 .75rem;
    }
    .admin-user-name {
        display: none;
    }

    /* 管理端统计 */
    .admin-products-stats {
        grid-template-columns: 1fr;
    }
    .admin-products-filter {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-scripts-form-row {
        flex-direction: column;
    }

    /* 管理端表格 */
    .admin-content .panel-table-wrap {
        margin: 0 -.75rem;
        padding: 0 .75rem;
    }
}

/* ================================================================
   4. 全局移动端触摸优化
   ================================================================ */

@media (max-width: 768px) {
    /* 所有可点击元素最小44px */
    a[href], button, [role="button"],
    .btn, .panel-btn, .btn-landing, .btn-landing-primary,
    .tab, .panel-tab, .sidebar-link, .admin-nav-link,
    .chat-item, .form-toggle, .panel-checkbox,
    .faq-item summary, .nav-links a {
        min-height: 44px;
    }

    /* 例外：紧凑场景 */
    .btn-sm, .panel-btn-sm,
    .panel-table .btn, .panel-table .panel-btn,
    .table-actions .btn, .table-actions .panel-btn,
    .im-quick-row button {
        min-height: 36px;
    }

    /* 输入框防iOS缩放 */
    input, select, textarea {
        font-size: 16px;
    }

    /* 去掉所有hover效果（手机上无hover） */
    .card:hover, .panel-card:hover,
    .feature-card-new:hover, .testimonial-card:hover,
    .pricing-card:hover {
        transform: none;
    }

    /* 触摸反馈 */
    .btn:active, .panel-btn:active,
    .btn-landing:active, .btn-landing-primary:active,
    .sidebar-link:active, .admin-nav-link:active {
        opacity: .85;
        transform: scale(.98);
    }

    /* 横向滚动区域 */
    .im-filter-tabs, .panel-tabs, .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    .im-filter-tab, .panel-tab, .tab {
        flex-shrink: 0;
    }

    /* 安全区域适配 */
    .topbar {
        padding-top: env(safe-area-inset-top, 0px);
    }
    .landing-nav {
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* 隐藏桌面端专用元素 */
    .desktop-only {
        display: none !important;
    }
}

/* 横屏适配 */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        padding: 2rem 1.25rem 1.5rem;
    }
    .hero-section h1 {
        font-size: 1.5rem;
    }
    .hero-mockup {
        display: none;
    }
    .modal {
        max-height: 85vh;
    }
}

/* ================================================================
   5. 暗色主题移动端适配
   ================================================================ */

[data-theme="dark"] .nav-links {
    background: var(--c-surface);
    border-bottom-color: var(--c-border);
}
[data-theme="dark"] .sidebar-overlay {
    background: rgba(0,0,0,.6);
}