/* 工具箱公共布局 (externalized from Tools/index.php inline <style>) */
/* ============================================================
 * 工具箱配色令牌（浅色档默认值；深色档在 toolbox-dark.css 覆写同名令牌）
 * 2026-09-17 模板统一改造：色值全部令牌化，明暗皮肤由变量档位切换，
 * 不再依赖独立适配器脚本 / !important 强覆盖链。
 * 档位来源：活动皮肤 theme.json 的 "scheme" 字段（dark/light）。
 * ============================================================ */
:root {
    /* 品牌 / 强调 */
    --tbx-brand: #ff6700;
    --tbx-brand-hover: #ff8533;
    --tbx-accent: #ff6700;              /* 文字/图标强调 */
    --tbx-accent-solid: #ff6700;        /* 实色强调（选中条、主按钮） */
    --tbx-accent-press: #e65c00;        /* 实色强调按下 */
    --tbx-accent-soft: rgba(255,103,0,0.1);     /* 强调淡底（图标衬底） */
    --tbx-accent-softer: rgba(255,103,0,0.04);  /* 侧栏悬停底 */
    --tbx-accent-softact: rgba(255,103,0,0.08); /* 侧栏选中底 */
    --tbx-accent-wash: #fff4ec;         /* 橙色浅底（悬停） */
    --tbx-accent-wash-on: #fff7f1;      /* 橙色浅底（选中） */
    --tbx-accent-border: #ffd7bd;       /* 橙色浅描边 */
    --tbx-on-accent: #fff;              /* 实色强调上的文字 */
    /* 面 */
    --tbx-bg: #fff;                     /* 页面/内容基底 */
    --tbx-surface: #fff;                /* 导航、侧栏、内容头等面 */
    --tbx-card-bg: #fff;                /* 卡片、收费卡片、工具容器 */
    --tbx-bg-soft: #f8fafc;             /* 工具内容区底（防闪屏） */
    --tbx-bg-foot: #f8f9fa;             /* 侧栏底部 */
    --tbx-bg-chip: #f5f5f5;             /* 小标签底 */
    /* 线 */
    --tbx-border: #e5e5e5;              /* 主分隔线 */
    --tbx-border-soft: #f0f0f0;         /* 极浅分隔线 */
    --tbx-card-border: #e5e5e5;         /* 卡片描边 */
    --tbx-card-border-hover: #ff6700;   /* 卡片悬停描边 */
    --tbx-card-shadow-hover: rgba(255,103,0,0.1); /* 卡片悬停投影 */
    --tbx-paywall-border: #eee;         /* 收费卡片描边 */
    --tbx-paywall-shadow: rgba(0,0,0,0.06);
    --tbx-rail-chip-border: #eee;       /* 窄屏右侧栏 chip 描边 */
    --tbx-btn-wallet-border: #ddd;
    /* 字 */
    --tbx-text: #333;                   /* 标题主文字 */
    --tbx-section-title: #333;          /* 分类区块标题 */
    --tbx-card-name: #333;
    --tbx-sidebar-item: #333;
    --tbx-nav-active: #333;
    --tbx-text-2: #666;                 /* 次级文字 */
    --tbx-back: #666;                   /* 返回链接 */
    --tbx-muted: #999;                  /* 弱化文字 */
    --tbx-desc: #777;                   /* 卡片描述 */
    --tbx-tool-desc: #e67e22;           /* 工具简介 */
    --tbx-foot-text: #999;
    --tbx-divider: #ccc;
    --tbx-empty-icon: #ccc;
    --tbx-back-btn: #999;               /* 侧栏返回按钮 */
    /* 右侧栏 */
    --tbx-rail-title: #999;
    --tbx-rail-item: #444;
    --tbx-rail-em: #b5b5b5;
    --tbx-rail-zero: #bbb;
    --tbx-rail-zero-em: #d5d5d5;
    /* 收费卡片部件 */
    --tbx-muted-icon-bg: rgba(0,0,0,0.05);
    --tbx-muted-icon: #999;
    --tbx-search-info-bg: #fff;
    --tbx-search-clear: #999;
    --tbx-btn-wallet-bg: #fff;
    --tbx-btn-wallet-text: #666;
    --tbx-btn-wallet-hover-bg: #f5f5f5;
    --tbx-btn-wallet-hover-text: #333;
    --tbx-btn-vip-bg: #f59e0b;
    --tbx-btn-vip-hover: #d97706;
    /* 敬请期待（coming）状态 */
    --tbx-coming-text: #999;
    --tbx-coming-icon: #999;
    --tbx-coming-card-bg: #fff;
    --tbx-coming-card-border: #e5e5e5;
    --tbx-coming-icon-bg: #f5f5f5;
    --tbx-coming-name: #333;
    --tbx-coming-desc: #777;
}
/* ========== 工具箱区域撑高，防止内容少时侧边栏/内容区缩水 ========== */
.toolbox-page {
    min-height: calc(100vh - 160px) !important;
}
.toolbox-main {
    min-height: calc(100vh - 200px) !important;
}
/* ========== footer底部清零（全模板通用） ========== */
footer.footer, .site-footer, .footer-copyright {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* ============================================================
 * SYHUO 工具箱 - 布局样式表
 * 参考后台布局：侧边栏固定 + 内容区独立滚动
 * ============================================================ */

/* ========== 修复导航栏城市定位重复图标 =========*/
.navbar .current-city i {
    display: inline !important;
}

/* ========== 修复工具箱顶部布局 =========*/
.toolbox-page {
    width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 确保工具箱分类导航不与主导航重叠 */
.toolbox-category-nav {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ========== 外层容器 - 自然高度，统一滚动 ========== */
.toolbox-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: auto;
}

/* ========== 全局 Box Model ========== */
.toolbox-title-area,
.toolbox-category-nav,
.toolbox-main,
.toolbox-sidebar,
.toolbox-content,
.toolbox-grid,
.toolbox-card {
    box-sizing: border-box;
}

/* ========== 工具箱标题区（合并到导航栏） ========== */
.toolbox-title-area {
    display: none;
}
.toolbox-brand {
    font-size: 16px;
    color: var(--tbx-brand);
    font-weight: bold;
    white-space: nowrap;
    text-decoration: none;
    margin-right: 20px;
}
.toolbox-brand:hover {
    color: var(--tbx-brand-hover);
}

/* ========== 顶部 Tab 导航栏（固定） ========== */
.toolbox-category-nav {
    width: 100%;
    padding: 0 15px;
    background: var(--tbx-surface);
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--tbx-border); /* 使用内阴影代替边框，避免缝隙 */
    display: flex;
    align-items: center;
    height: 50px;
    flex-shrink: 0;
    margin-bottom: 0; /* 确保没有底部margin */
}
.toolbox-category-nav .nav-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.toolbox-category-nav .category-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    flex: 1;
    overflow-x: visible;
    min-width: 0;
    gap: 4px;
}
.toolbox-category-nav .category-item {
    display: inline-block;
    padding: 10px 14px;
    color: var(--tbx-text-2);
    font-size: 14px;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
    text-decoration: none;
    white-space: nowrap;
}
.toolbox-category-nav .category-item:hover {
    color: var(--tbx-accent);
}
.toolbox-category-nav .category-item.active {
    color: var(--tbx-nav-active);
    font-weight: bold;
}
.toolbox-category-nav .category-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    height: 3px;
    background: var(--tbx-accent-solid);
    border-radius: 2px 2px 0 0;
}

/* ========== 主内容区（侧边栏 + 右侧内容） ========== */
.toolbox-wrapper {
    display: flex;
    align-items: stretch; /* 高度一致 */
    background: var(--tbx-bg);
    /* 不强制撑满剩余空间，按内容自然高度 */
    margin-top: 0; /* 确保没有顶部margin */
    padding-top: 0; /* 确保没有顶部padding */
    width: 100%;
}

/* ========== 侧边栏区域（包含底部） ========== */
.toolbox-sidebar-wrapper {
    width: 200px;
    min-width: 200px;
    flex-shrink: 0;
    background: var(--tbx-surface);
    box-shadow: inset -1px 0 0 var(--tbx-border); /* 使用内阴影代替边框，避免缝隙 */
    display: flex;
    flex-direction: column;
    /* 确保没有额外的 margin/padding */
    margin-top: 0;
    padding-top: 0;
    margin-right: 0; /* 移除右侧margin */
    position: relative;
    z-index: 10;
}

/* 侧边栏内容区（跟随页面滚动） */
.toolbox-sidebar-content {
    padding: 0;
    flex: 1;
    /* 确保顶部对齐 */
    margin-top: 0;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    /* 确保没有右侧缝隙 */
    margin-right: 0;
    padding-right: 0;
    position: relative;
    z-index: 10;
}

/* 侧边栏底部区域 */
.toolbox-sidebar-footer {
    flex-shrink: 0;
    padding: 12px;
    border-top: 1px solid var(--tbx-border);
    background: var(--tbx-bg-foot);
}
.toolbox-sidebar-footer-text {
    font-size: 12px;
    color: var(--tbx-foot-text);
    text-align: center;
    line-height: 1.6;
}
.toolbox-sidebar-footer-text .tool-count {
    color: var(--tbx-accent);
    font-weight: 500;
}

/* ========== 内容区区域（包含底部） ========== */
.toolbox-content-wrapper {
    flex: 1; /* 横向撑满剩余宽度 */
    min-width: 0;
    max-width: calc(100% - 200px); /* 减去侧边栏宽度 */
    background: var(--tbx-bg);
    display: flex;
    flex-direction: column;
    margin-left: 0; /* 移除左侧margin */
    padding-left: 0; /* 移除左侧padding */
    position: relative;
    z-index: 1;
}

/* 内容区主内容（跟随页面滚动） */
.toolbox-content-main {
    padding: 15px 20px;
    /* 确保顶部对齐 */
    margin-top: 0;
    padding-top: 15px;
    display: block;
    /* 确保内容紧贴侧边栏 */
    margin-left: 0;
}

/* 工具页面：左右留小间距，缝隙用背景色填充 */
.toolbox-content-main--tool {
    padding: 0;
    background: var(--tbx-bg-soft);
    position: relative;
    z-index: 1;
    display: block;
}

.toolbox-content-main--tool .toolbox-tool-content {
    display: block;
    width: 100%;
}
.toolbox-content-main--tool .toolbox-content-header {
    margin: 0;
    padding: 12px 20px;
    background: var(--tbx-surface);
    position: relative;
    z-index: 1;
}

/* ========== 工具标题区域 ========== */
.toolbox-content-header {
    margin: -15px -20px 15px 0;
    padding: 12px 20px;
    background: var(--tbx-surface);
    border-bottom: 1px solid var(--tbx-border);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

/* 标题栏右侧返回按鈕 */
.toolbox-header-back {
    margin-left: auto;
    font-size: 13px;
    color: var(--tbx-back);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: color 0.15s;
}
.toolbox-header-back:hover {
    color: var(--tbx-accent);
}

.toolbox-tool-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--tbx-text);
    white-space: nowrap;
}

.toolbox-tool-divider {
    color: var(--tbx-divider);
    font-size: 16px;
}

.toolbox-tool-desc {
    font-size: 13px;
    margin: 0;
    color: var(--tbx-tool-desc);
}

/* ========== 侧边栏返回按钮 ========== */

/* ========== 侧边栏标题和列表 ========== */
.toolbox-sidebar-title {
    padding: 12px 12px 8px;
    font-size: 12px;
    color: var(--tbx-muted);
    border-bottom: 1px solid var(--tbx-border-soft);
    /* 顶部对齐 - 当没有返回按钮时 */
    margin-top: 15px;
}
/* 当前面有返回按钮时，标题不需要额外的 margin-top */
.toolbox-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 11;
}
.toolbox-sidebar-item {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    color: var(--tbx-sidebar-item);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    border-left: 3px solid transparent;
    position: relative;
    z-index: 11;
    pointer-events: auto;
}
.toolbox-sidebar-item:hover {
    color: var(--tbx-accent);
    background: var(--tbx-accent-softer);
}
.toolbox-sidebar-item.active {
    color: var(--tbx-accent);
    background: var(--tbx-accent-softact);
    border-left-color: var(--tbx-accent-solid);
    font-weight: 500;
}
.toolbox-sidebar-item i {
    margin-right: 10px;
    font-size: 16px;
    width: 20px;
    text-align: center;
}
.toolbox-sidebar-item .coming-tag {
    margin-left: auto;
    font-size: 10px;
    color: var(--tbx-coming-text);
    background: var(--tbx-bg-chip);
    padding: 2px 6px;
    border-radius: 2px;
}
.toolbox-sidebar-item.is-coming {
    color: var(--tbx-coming-icon);
}
.toolbox-sidebar-item.is-coming:hover {
    color: var(--tbx-coming-icon);
    background: transparent;
    cursor: default;
}

/* ========== 内容区全宽模式 ========== */
.toolbox-content-wrapper-full {
    width: 100%;
}

/* ⚡ 防闪屏：工具内容区背景色 */
.toolbox-content-main--tool {
    background: var(--tbx-bg-soft) !important;
}

/* 工具内容容器 */
.toolbox-tool-content {
    background: transparent !important;
    min-height: auto;
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* 确保工具内容能正常覆盖默认样式 */
.toolbox-tool-content * {
    box-sizing: border-box;
}

/* 分类模式下显示工具卡片时 */
.toolbox-content-main > .toolbox-grid {
    padding: 0;
    flex: 1;
    align-content: start;
}

/* ========== 工具卡片网格 ========== */
.toolbox-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.toolbox-card {
    background: var(--tbx-card-bg);
    border-radius: 8px;
    border: 1px solid var(--tbx-card-border);
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    position: relative;
    height: 100%;
}
.toolbox-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--tbx-card-shadow-hover);
    border-color: var(--tbx-card-border-hover);
}
.toolbox-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--tbx-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    overflow: hidden;
    flex-shrink: 0;
}
.toolbox-card-content {
    flex: 1;
    min-width: 0;
}
.toolbox-card-icon i {
    font-size: 18px;
    color: var(--tbx-accent);
}
.toolbox-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.toolbox-card-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--tbx-card-name);
    margin-bottom: 4px;
    line-height: 1.3;
}
.toolbox-card-desc {
    font-size: 12px;
    color: var(--tbx-desc);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.toolbox-card-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 10px;
    color: var(--tbx-coming-text);
    background: var(--tbx-bg-chip);
    padding: 3px 8px;
    border-radius: 2px;
}
.toolbox-card.is-coming {
    opacity: 0.6;
    background: var(--tbx-coming-card-bg);
    border-color: var(--tbx-coming-card-border);
}
.toolbox-card.is-coming:hover {
    transform: none;
    box-shadow: none;
    cursor: default;
}
.toolbox-card.is-coming .toolbox-card-icon {
    background: var(--tbx-coming-icon-bg);
}
.toolbox-card.is-coming .toolbox-card-icon i {
    color: var(--tbx-coming-icon);
}
.toolbox-card.is-coming .toolbox-card-name {
    color: var(--tbx-coming-name);
}
.toolbox-card.is-coming .toolbox-card-desc {
    color: var(--tbx-coming-desc);
}

/* 分类标题 */
.category-section {
    margin-bottom: 20px;
}
.category-section:last-child {
    margin-bottom: 0;
}
.category-section {
    margin-bottom: 0 !important;
}
.toolbox-grid {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.category-section-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--tbx-section-title);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tbx-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.category-section-title i {
    color: var(--tbx-accent);
}

/* ========== 工具内容区域 ========== */
.tool-content-wrapper {
    background: var(--tbx-card-bg);
    border-radius: 8px;
    border: 1px solid var(--tbx-card-border);
    padding: 20px;
    min-height: auto;
    flex: 1;
}

/* ========== 空状态 ========== */
.toolbox-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--tbx-muted);
    background: var(--tbx-bg);
    border-radius: 8px;
    flex: 1;
}
.toolbox-empty i {
    font-size: 48px;
    color: var(--tbx-empty-icon);
    margin-bottom: 16px;
    display: block;
}
.toolbox-empty p {
    font-size: 14px;
    margin: 0;
}

/* ========== 收费拦截卡片 ========== */
.toolbox-paywall {
    max-width: 420px;
    margin: 60px auto;
    padding: 44px 32px 36px;
    text-align: center;
    background: var(--tbx-card-bg);
    border: 1px solid var(--tbx-paywall-border);
    border-radius: 12px;
    box-shadow: 0 6px 24px var(--tbx-paywall-shadow);
}
.paywall-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tbx-accent-soft);
}
.paywall-icon i {
    font-size: 30px;
    color: var(--tbx-accent);
}
.paywall-icon--muted {
    background: var(--tbx-muted-icon-bg);
}
.paywall-icon--muted i {
    color: var(--tbx-muted-icon);
}
.paywall-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--tbx-text);
    margin: 0 0 8px;
}
.paywall-desc {
    font-size: 13px;
    color: var(--tbx-muted);
    margin: 0 0 24px;
    line-height: 1.7;
}
.paywall-price {
    color: var(--tbx-accent);
}
.paywall-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 30px;
    border: none;
    border-radius: 8px;
    background: var(--tbx-accent-solid);
    color: var(--tbx-on-accent);
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}
.paywall-btn:hover {
    background: var(--tbx-accent-press);
    color: var(--tbx-on-accent);
    text-decoration: none;
}
.paywall-btn i {
    font-size: 15px;
}
.paywall-btn--vip {
    background: var(--tbx-btn-vip-bg);
}
.paywall-btn--vip:hover {
    background: var(--tbx-btn-vip-hover);
}
.paywall-btn--wallet {
    background: var(--tbx-btn-wallet-bg);
    color: var(--tbx-btn-wallet-text);
    border: 1px solid var(--tbx-btn-wallet-border);
    margin-top: 10px;
}
.paywall-btn--wallet:hover {
    background: var(--tbx-btn-wallet-hover-bg);
    color: var(--tbx-btn-wallet-hover-text);
}

/* ========== 搜索结果 ========== */
.search-result-info {
    background: var(--tbx-search-info-bg);
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--tbx-text-2);
}
.search-result-info strong {
    color: var(--tbx-accent);
}
.search-result-clear {
    float: right;
    color: var(--tbx-search-clear);
    font-size: 13px;
    text-decoration: none;
}
.search-result-clear:hover {
    color: var(--tbx-accent);
}
.toolbox-empty-action {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 14px;
    border: 1px solid var(--tbx-accent-border);
    border-radius: 4px;
    color: var(--tbx-accent);
    font-size: 13px;
    text-decoration: none;
}
.toolbox-empty-action:hover {
    background: var(--tbx-accent-wash);
}
/* ========== 搜索右侧栏（2026-09-14 搜索重构·A-6）：命中少时补住原先的空白列 ===== */
.toolbox-rail {
    flex: 0 0 232px;
    min-width: 0;
    align-self: flex-start;
    background: var(--tbx-surface);
    border-left: 1px solid var(--tbx-border-soft);
    padding: 16px 14px;
}
.toolbox-rail-block + .toolbox-rail-block {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--tbx-border-soft);
}
.toolbox-rail-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tbx-rail-title);
}
.toolbox-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.toolbox-rail-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--tbx-rail-item);
    text-decoration: none;
}
.toolbox-rail-item:hover {
    background: var(--tbx-accent-wash);
    color: var(--tbx-accent);
}
.toolbox-rail-item.on {
    background: var(--tbx-accent-wash-on);
    color: var(--tbx-accent);
    font-weight: 600;
}
.toolbox-rail-item em {
    margin-left: auto;
    font-style: normal;
    font-size: 12px;
    color: var(--tbx-rail-em);
}
.toolbox-rail-item.is-zero {
    color: var(--tbx-rail-zero);
}
.toolbox-rail-item.is-zero em {
    color: var(--tbx-rail-zero-em);
}

/* ========== 响应式适配 ========== */
@media (max-width: 1200px) {
    .toolbox-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 992px) {
    .toolbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* 窄屏：搜索右侧栏落到结果区下方，分类改成横向 chip，不挤占卡片宽度 */
    .toolbox-wrapper {
        flex-wrap: wrap;
    }
    .toolbox-content-wrapper-full {
        flex: 1 1 100%;
    }
    .toolbox-rail {
        flex: 1 1 100%;
        border-left: none;
        border-top: 1px solid var(--tbx-border-soft);
    }
    .toolbox-rail-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .toolbox-rail-item {
        padding: 7px 12px;
        border: 1px solid var(--tbx-rail-chip-border);
        border-radius: 14px;
    }
    .toolbox-rail-item em {
        margin-left: 4px;
    }
    .toolbox-rail-block + .toolbox-rail-block {
        margin-top: 14px;
        padding-top: 12px;
    }
}
@media (max-width: 768px) {
    /* 移动端：外层容器保持自然高度 */
    
    /* 导航栏响应式 */
    .toolbox-category-nav {
        padding: 0 10px;
        height: auto;
        flex-wrap: wrap;
        padding-bottom: 5px;
    }
    .toolbox-brand {
        font-size: 14px;
        margin-right: 10px;
    }
    .toolbox-category-nav .category-list {
        flex-wrap: nowrap;
        order: 3;
        width: 100%;
        margin-top: 5px;
    }
    .toolbox-category-nav .category-item {
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
    }
    
    /* 主内容区变为垂直布局 */
    .toolbox-wrapper {
        flex-direction: column;
    }
    /* 关键修复：column 布局下必须解除桌面期为两列设计的 calc(100% - 200px) 宽度钳制，
       否则内容区仅 ~190px 宽，付费墙/工具卡片被压成竖排长条 */
    .toolbox-content-wrapper {
        max-width: 100%;
    }
    
    /* 侧边栏区域变为横向滚动 */
    .toolbox-sidebar-wrapper {
        width: 100%;
        min-width: 100%;
        box-shadow: none; /* 移动端移除阴影 */
        border-bottom: 1px solid var(--tbx-border);
    }
    .toolbox-sidebar-content {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0;
    }
    .toolbox-sidebar-footer {
        display: none;
    }
    .toolbox-sidebar-title {
        display: none;
    }
    .toolbox-sidebar-list {
        display: flex;
        padding: 0 10px;
    }
    .toolbox-sidebar-item {
        padding: 8px 12px;
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
        font-size: 12px;
    }
    .toolbox-sidebar-item.active {
        border-left-color: transparent;
        border-bottom-color: var(--tbx-accent-solid);
    }
    
    /* 内容区保持自然滚动 */
    .toolbox-content-main {
        padding: 15px;
    }
    
    /* 工具标题区域响应式 */
    .toolbox-content-header {
        margin: -15px -15px 15px -15px;
        padding: 10px 15px;
        flex-wrap: wrap;
        gap: 5px 10px;
    }
    .toolbox-tool-title {
        font-size: 16px;
    }
    .toolbox-tool-divider {
        font-size: 14px;
    }
    .toolbox-tool-desc {
        font-size: 12px;
    }
}
@media (max-width: 480px) {
    .toolbox-brand {
        font-size: 16px;
    }
    .toolbox-category-nav .category-item {
        padding: 10px 12px;
        font-size: 13px;
    }
    .toolbox-grid {
        grid-template-columns: 1fr;
    }
    .toolbox-card {
        padding: 15px;
    }
}