/*
 * 移动端样式修复（仅在 ≤768px 生效，不影响 PC 端，不修改 DOM 因此不影响 SEO）
 *
 * 修复 1：工具详情页顶部介绍区（.tool-header-card）在手机端样式错乱
 * 修复 2：首页 / 分类 / 列表页的工具卡片（.tool-card-grid / .tool-card-grid-homepage）
 *         在手机端图标-标题-描述-按钮过于分散、留白过多
 */

/* ============================================================
 *  Part 1 - 工具详情页顶部介绍区（手机端重排）
 * ============================================================ */
@media (max-width: 768px) {

    /* 关闭 PC 端的纸面装饰圆点（在窄屏会盖住按钮 / 文字） */
    .tool-header-card.card::after {
        display: none !important;
    }

    /* 卡片本身：减小阴影 / 圆角 / 外边距 */
    .tool-header-card.card {
        margin-bottom: 14px !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 18px rgba(47, 94, 168, 0.08) !important;
    }

    /* 卡片内容区：紧凑内边距，恢复正常块级布局 */
    .tool-header-card .card-body {
        display: block !important;
        padding: 16px 14px !important;
        min-height: 0 !important;
    }

    /* 三段布局重排：图标 + 文本 在第一行 (横排)，按钮独占第二行 */
    .tool-header-layout {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-areas:
            "icon  info"
            "btns  btns" !important;
        column-gap: 12px !important;
        row-gap: 10px !important;
        align-items: center !important;
    }

    /* 图标框 */
    .tool-header-card .tool-icon-frame {
        grid-area: icon !important;
        flex: 0 0 auto !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 12px !important;
    }

    .tool-header-card .tool-icon-frame .tool-header-icon {
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 文本信息区 */
    .tool-header-card .tool-header-info {
        grid-area: info !important;
        min-width: 0 !important;
    }

    /* 标题 */
    .tool-header-card h1.tool-header-title {
        margin: 0 0 4px !important;
        font-size: 17px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    /* 描述文字 */
    .tool-header-card .tool-header-desc {
        margin: 0 0 8px !important;
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        font-weight: 500 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 面包屑：紧凑、自动换行 */
    .tool-header-card .tool-breadcrumb-nav {
        max-width: 100% !important;
        margin-top: 4px !important;
    }

    .tool-header-card .tool-breadcrumb {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        min-height: 0 !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        gap: 2px 0 !important;
        box-shadow: none !important;
    }

    .tool-header-card .tool-breadcrumb .breadcrumb-item {
        font-size: 11.5px !important;
        font-weight: 700 !important;
    }

    .tool-header-card .tool-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 6px !important;
    }

    /* 操作按钮区：横排，左对齐，去掉 PC 端的强制 100px 左移 */
    .tool-header-card .tool-header-actions {
        grid-area: btns !important;
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 4px 0 0 0 !important;
        padding: 0 !important;
    }

    .tool-header-card .tool-action-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 34px !important;
        padding: 0 10px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
    }

    .tool-header-card .tool-action-btn i {
        font-size: 13px !important;
    }

    /* 本地执行提示卡片：移动端紧凑化 */
    .tool-local-notice {
        padding: 12px 14px !important;
        border-radius: 10px !important;
        margin-bottom: 14px !important;
    }

    .tool-local-notice .notice-row {
        gap: 8px !important;
    }

    .tool-local-notice .notice-row + .notice-row {
        margin-top: 8px !important;
    }

    .tool-local-notice .notice-icon {
        flex: 0 0 18px !important;
        width: 18px !important;
        height: 18px !important;
        font-size: 15px !important;
    }

    .tool-local-notice p {
        font-size: 12.5px !important;
        line-height: 1.6 !important;
    }

    /* 兼容老的 d-flex 写法（如果还残留），统一关掉 flex 横排 */
    .tool-header-card .card-body > .d-flex {
        display: block !important;
    }
}

/* 更小屏幕：进一步紧凑 */
@media (max-width: 480px) {

    .tool-header-card .card-body {
        padding: 14px 12px !important;
    }

    .tool-header-card .tool-icon-frame {
        width: 50px !important;
        height: 50px !important;
        border-radius: 11px !important;
    }

    .tool-header-card .tool-icon-frame .tool-header-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .tool-header-card h1.tool-header-title {
        font-size: 15.5px !important;
    }

    .tool-header-card .tool-header-desc {
        font-size: 12px !important;
    }

    .tool-header-card .tool-breadcrumb {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    .tool-header-card .tool-breadcrumb .breadcrumb-item {
        font-size: 11px !important;
    }

    .tool-header-card .tool-action-btn {
        height: 32px !important;
        font-size: 12px !important;
    }
}


/* ============================================================
 *  Part 2 - 首页 / 分类 / 列表页 工具卡片（手机端紧凑化）
 *  目标：图标-标题-描述-按钮 上下贴近，不再大留白
 * ============================================================ */
@media (max-width: 768px) {

    /* 列表行：减小行间距 */
    .main-content .row:has(.tool-card-grid),
    .main-content .tool-grid-wrapper {
        --bs-gutter-x: 0.7rem !important;
        --bs-gutter-y: 0.7rem !important;
    }

    /* 让一行能放 2 个卡片（PC 是 col-md-6 在 ≤768 时变为 col-12，
       这里重写以便手机端两列展示；col-lg-3 不影响） */
    .main-content .row > [class*="col-md-6"],
    .main-content .row > [class*="col-lg-3"] {
        flex: 0 0 auto !important;
        width: 50% !important;
        max-width: 50% !important;
        padding-left: calc(var(--bs-gutter-x, 0.7rem) * 0.5) !important;
        padding-right: calc(var(--bs-gutter-x, 0.7rem) * 0.5) !important;
        margin-bottom: 0.7rem !important;
    }

    /* 卡片本体 */
    .main-content .tool-card-grid,
    .main-content .tool-card-grid-homepage,
    .tool-card-grid,
    .tool-card-grid-homepage {
        min-height: 0 !important;
        height: 100% !important;
        border-radius: 12px !important;
        box-shadow: 0 6px 14px rgba(48, 86, 150, 0.08) !important;
    }

    /* 卡片正文：紧凑居中 */
    .main-content .tool-card-grid .card-body,
    .main-content .tool-card-grid-homepage .card-body,
    .tool-card-grid .card-body,
    .tool-card-grid-homepage .card-body {
        padding: 14px 10px 12px !important;
        gap: 0 !important;
    }

    /* 图标：缩小 + 真正水平居中（覆盖 PC 端的 margin-left: 42px） */
    .main-content .tool-icon-grid,
    .main-content .tool-icon-homepage,
    .tool-icon-grid,
    .tool-icon-homepage {
        width: 52px !important;
        height: 52px !important;
        margin: 0 auto 8px auto !important;
        padding: 6px !important;
        border-radius: 12px !important;
    }

    .main-content .tool-icon-grid img,
    .main-content .tool-icon-homepage img,
    .tool-icon-grid img,
    .tool-icon-homepage img {
        max-width: 38px !important;
        max-height: 38px !important;
    }

    /* 标题：缩小、最多 1 行 */
    .main-content .tool-card-grid .card-title,
    .main-content .tool-card-grid-homepage .card-title,
    .tool-card-grid .card-title,
    .tool-card-grid-homepage .card-title {
        margin: 0 0 4px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        -webkit-line-clamp: 1 !important;
    }

    /* 描述：从 4 行降到 2 行，去掉固定高度，整体更紧凑 */
    .main-content .tool-card-grid .card-text,
    .main-content .tool-card-grid-homepage .card-text,
    .tool-card-grid .card-text,
    .tool-card-grid-homepage .card-text {
        margin: 0 0 10px !important;
        height: auto !important;
        max-height: 2.8em !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        -webkit-line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 按钮：变窄一点更协调 */
    .main-content .tool-card-button,
    .main-content .tool-card-button-homepage,
    .tool-card-button,
    .tool-card-button-homepage {
        min-width: 0 !important;
        width: 100% !important;
        height: 32px !important;
        padding: 0 10px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 10px rgba(22, 103, 232, 0.18) !important;
    }

    /* 徽标：缩小、贴近右上角 */
    .main-content .badges-grid,
    .main-content .badges-homepage,
    .badges-grid,
    .badges-homepage {
        top: 8px !important;
        right: 8px !important;
        gap: 4px !important;
    }

    .main-content .vip-badge-grid,
    .main-content .batch-badge-grid,
    .main-content .local-badge-grid,
    .main-content .vip-badge-homepage,
    .main-content .batch-badge-homepage,
    .main-content .local-badge-homepage,
    .vip-badge-grid,
    .batch-badge-grid,
    .local-badge-grid,
    .vip-badge-homepage,
    .batch-badge-homepage,
    .local-badge-homepage {
        min-height: 18px !important;
        padding: 2px 5px !important;
        font-size: 10px !important;
        border-radius: 4px !important;
    }

    /* 徽标内的图标和文字，文字在很窄屏幕可以适当节省（保留可见） */
    .badges-grid .badge-text,
    .badges-homepage .badge-text {
        font-size: 10px !important;
    }
}

/* 极窄屏（小手机）：保持两列但更紧凑；徽标只显示图标 */
@media (max-width: 360px) {

    .main-content .tool-card-grid .card-body,
    .main-content .tool-card-grid-homepage .card-body,
    .tool-card-grid .card-body,
    .tool-card-grid-homepage .card-body {
        padding: 12px 8px 10px !important;
    }

    .main-content .tool-icon-grid,
    .main-content .tool-icon-homepage,
    .tool-icon-grid,
    .tool-icon-homepage {
        width: 46px !important;
        height: 46px !important;
        margin-bottom: 6px !important;
    }

    .main-content .tool-icon-grid img,
    .main-content .tool-icon-homepage img,
    .tool-icon-grid img,
    .tool-icon-homepage img {
        max-width: 32px !important;
        max-height: 32px !important;
    }

    .main-content .tool-card-grid .card-title,
    .main-content .tool-card-grid-homepage .card-title,
    .tool-card-grid .card-title,
    .tool-card-grid-homepage .card-title {
        font-size: 13px !important;
    }

    .main-content .tool-card-grid .card-text,
    .main-content .tool-card-grid-homepage .card-text,
    .tool-card-grid .card-text,
    .tool-card-grid-homepage .card-text {
        font-size: 11.5px !important;
    }
}


/* ============================================================
 *  Part 3 - 手机端汉堡菜单展开后的侧边栏修复
 *  问题：
 *    1) 内部 .sidebar-content / .sidebar-nav 强制 height:100% + flex
 *       导致全部内容被挤进首屏一屏，且无法滚动
 *    2) .nav-section.mt-auto 在 flex 列里把"全平台支持"顶到底部，
 *       使得分类列表和底部图标重叠
 *    3) 底部内容被刘海/底部安全区遮挡看不到
 *  修复策略：
 *    在 ≤768px 时，把侧边栏内部恢复成自然的块级流（不再用 flex
 *    + 100% 高），并把滚动放到 .modern-sidebar 容器自身。
 * ============================================================ */
@media (max-width: 768px) {

    /* 容器：保持固定定位 + 全屏抽屉，确保可纵向滚动并避开底部安全区 */
    .modern-sidebar {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        /* 让安卓/iOS 上有底部 home indicator 的设备也能看到最后一项 */
        padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    }

    /* 关键：取消内部的 height:100% / flex 列布局，恢复正常块流 */
    .modern-sidebar .sidebar-content {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    .modern-sidebar .sidebar-nav {
        display: block !important;
        flex-direction: initial !important;
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 取消 mt-auto 把"全平台支持"顶到屏幕底部的行为
       —— 在没有 flex 父级时它就是普通的下边距，恢复为常规间距 */
    .modern-sidebar .sidebar-nav > .nav-section.mt-auto {
        margin-top: 0 !important;
    }

    /* 各分区之间的呼吸感（替代旧的 flex 布局视觉效果） */
    .modern-sidebar .nav-section {
        margin-bottom: 12px !important;
        padding: 0 12px !important;
    }

    .modern-sidebar .nav-section:first-child {
        margin-top: 4px !important;
    }

    .modern-sidebar .nav-section:last-child {
        margin-bottom: 8px !important;
    }

    /* 移动端搜索区域：和左右内容一致的边距 */
    .modern-sidebar .mobile-sidebar-search {
        padding: 12px !important;
    }

    /* 移动端用户/登录注册区域 */
    .modern-sidebar .mobile-sidebar-user {
        padding: 12px !important;
    }

    /* 用户菜单卡片整齐两列，避免错位 */
    .modern-sidebar .mobile-user-actions {
        gap: 8px !important;
    }

    .modern-sidebar .mobile-action-btn {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    /* 未登录时登录/注册按钮一行两列 */
    .modern-sidebar .mobile-auth-section {
        gap: 8px !important;
    }

    .modern-sidebar .mobile-auth-btn {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    /* 未登录时"使用说明"占满整行（与原结构一致） */
    .modern-sidebar .mobile-auth-section .mobile-action-btn {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    /* 分类标题间距收紧 */
    .modern-sidebar .section-header {
        padding: 6px 4px 8px !important;
    }

    /* 分类导航链接更紧凑 */
    .modern-sidebar .nav-link {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    /* 全平台支持模块：放在最末尾，不再"贴底" */
    .modern-sidebar .platform-support-minimal {
        margin: 8px 12px 4px !important;
        padding: 12px !important;
        border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
    }
}

/* 极窄屏（小手机）进一步缩小内边距，避免出现横向滚动条 */
@media (max-width: 360px) {
    .modern-sidebar .nav-section {
        padding: 0 8px !important;
    }

    .modern-sidebar .mobile-sidebar-search,
    .modern-sidebar .mobile-sidebar-user {
        padding: 10px !important;
    }

    .modern-sidebar .mobile-action-btn,
    .modern-sidebar .mobile-auth-btn {
        font-size: 12.5px !important;
        padding: 9px 10px !important;
    }
}