/*
Theme Name:		导航侠-子主题
Theme URI:		https://www.xintheme.com/
Description:	由Ai驱动的网址导航主题...
Author:			XinTheme 新主题 + WordPress果酱
Author URI:		https://www.xintheme.com/
Template:		NavXia
Version:		1.0.1
*/

/* --- 修复 Logo 文字显示问题 --- */
/* 作用：隐藏 Logo 图片下方的“Ai入口”文字，但保留给搜索引擎看 */
.header-logo .site-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.post-content {
    background: #fff;
    margin-bottom: 20px;
    padding: 30px;
    box-shadow: none;
    border: 1px solid #ebedf0;
    border-radius: 6px;
}

/*文章摘要*/
.post-content .post-desc{margin-bottom:20px;padding:0 20px;border:1px solid #ebedf0;background:#F7F8FA;border-radius:6px}
.post-content .post-desc p{margin-bottom:20px;font-size:12px;line-height:1.6}

/*文章详细内容*/
.post-content .post-body{font-size:18px;line-height:1.75;font-weight:400}
.post-content .post-body.text-indent p{text-indent:2em}
.post-content .post-body>*{margin:1em 0}
.post-content .post-body>:first-child{margin-top:0;padding-top:0}
.post-content .post-body>:last-child{margin-bottom:0}
.post-content .post-body ul{border:1px solid #ebedf0;list-style:disc;background:#F7F8FA;border-radius:6px;padding:15px 30px;line-height:1.6}
.post-content .post-body ul li:not(:last-child){margin-bottom:4px}
.post-content .post-body img{display:block;_width:auto!important;_height:auto!important;_max-width:100%!important}
.post-content .post-body img.aligncenter{margin:0 auto;display:block}
.post-content .post-body div.aligncenter{margin:0 auto;display:block;text-align:center}
.post-content .post-body>p:first-child{margin-top:0}
.post-content .post-body hr{background-color:#eee;color:#eee}
.post-content .post-body a{color:var(--main_color,#2b5ff5)}
.post-content .post-body a:hover{opacity:.8;text-decoration:underline}

.tool-buttons-area{max-width:500px;width:100%}
@media screen and (min-width:769px){
    .tool-details{display:flex!important;gap:50px;align-items:flex-start}
    .tool-details-r{flex:0 0 calc(60% - 25px)!important;width:calc(60% - 25px)!important;max-width:calc(60% - 25px)}
    .tool-details-l{flex:0 0 calc(40% - 25px)!important;width:calc(40% - 25px)!important;max-width:calc(40% - 25px);position:static!important;transform:none!important}
    .tool-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
}
@media screen and (max-width:768px){
    .tool-details{display:flex;flex-direction:column}
    .tool-details-l{order:-1;margin-bottom:20px}
    .tool-details-r{order:2}
    .tool-faq-grid{display:flex;flex-direction:column;gap:10px}
}
.post-meta-row{margin-bottom:15px;color:#666666;font-size:14px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.tool-tags-row{margin-bottom:20px}
.tool-tags-cloud{display:flex;flex-wrap:wrap;gap:10px}
.post-meta-row a{color:#888;text-decoration:none}
.tool-buttons-area{margin-bottom:20px}
.tool-excerpt{color:var(--text-secondary,#4b5563);font-size:16px;line-height:1.7;margin-bottom:15px}
.tool-independent-card{background:#fff;border-radius:6px;border:1px solid #ebedf0;box-shadow:none;padding:30px}
/* 独立模块正文基准字号 */
.tool-independent-card{font-size:18px;color:#191919;font-weight:400}
.tool-independent-card p,
.tool-independent-card ul,
.tool-independent-card ol{max-width:75ch}
@media screen and (max-width:768px){.tool-independent-card{padding:20px}}
.blue-line-title{font-size:24px;font-weight:800;color:#191919;margin-top:3rem;margin-bottom:1.5rem;position:relative;padding-bottom:10px}
.blue-line-title:after{content:"";position:absolute;bottom:0;left:0;width:2em;height:3px;background-color:#0d59d5}
.tool-subnav{
    position: sticky;
    top: var(--subnav-top, 0px);
    z-index: 101;
    background: transparent;
    border-bottom: 1px solid #e5e7eb; /* 细灰底线 */
    display: flex;
    gap: 24px;
    flex-wrap: wrap;                /* 允许换行，避免项目被隐藏 */
    white-space: normal;            /* 允许换行 */
    overflow-x: visible;            /* 不再需要水平滚动 */
    scroll-behavior: auto;
    padding: 0;                     /* 统一由子项撑开高度 */
}
.tool-subnav-bg{
    position: fixed;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    z-index: 100;
    display: none;
    pointer-events: none;
}
.tool-subnav-link{
    color: var(--text-primary,#030712);
    text-decoration: none;
    padding: 14px 8px;              /* 舒适的上下留白 */
    flex-shrink: 0;                 /* 保持标签宽度不压缩 */
    font-size: 17px;
    transition: none;
}
.tool-subnav-link:hover{
    color: var(--tab_accent, var(--main_color,#2b5ff5));
}
.tool-subnav-link.active{
    color: var(--tab_accent, var(--main_color,#2b5ff5));
    border-bottom: 3px solid var(--tab_accent, var(--main_color,#2b5ff5)); /* 粗下划线覆盖底线 */
    font-weight: 600;
}
.tool-pros-cons-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tool-section-subtitle-pros{font-weight:600;margin-bottom:10px;color:#10b981;font-size:24px}
.tool-section-subtitle-cons{font-weight:600;margin-bottom:10px;color:#ef4444;font-size:24px}
.tool-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tool-alternatives-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* 5. 确保 FAQ 答案默认隐藏 */
.tool-faq-answer {
    display: none; /* 默认隐藏 */
    padding: 20px;
    background: #fff;
    color: #191919;
    line-height: 1.7;
    border-top: 1px solid #ebedf0;
}

/* ⚠️ 移除 .active 下的 display:block，完全交由 JS slideToggle 控制 */
/* 只保留 active 状态下的其他样式（如箭头旋转），不再控制内容显示 */
/* .tool-faq-item.active .tool-faq-answer { display: block; } */
.tool-faq-item{border:1px solid #ebedf0;border-radius:8px;overflow:hidden;background:#fff}
.tool-faq-question{cursor:pointer;padding:15px;background:#F7F8FA;font-weight:600;display:flex;justify-content:space-between;align-items:center;user-select:none}
.tool-faq-answer{padding:20px;background:#fff;color:#191919;line-height:1.7;border-top:1px solid #ebedf0}
.pricing-item{border:1px solid #ebedf0;border-radius:8px;padding:16px}
.pricing-item-title{font-weight:600;margin-bottom:6px;font-size:20px}
.pricing-item-price{color:var(--main_color,#2b5ff5);margin-bottom:6px;font-size:18px}
.pricing-item-desc{color:#666;font-size:14px}
.alt-item{border:1px solid #ebedf0;border-radius:8px;padding:16px}
.alt-item-title{font-weight:600;margin-bottom:6px;font-size:20px}
.alt-item-link{color:var(--main_color,#2b5ff5);text-decoration:none}
.alt-item-desc{color:#666;font-size:14px}
/* 通用列表样式 (修正缩进) */
.tool-list-base{
    margin: 0;
    padding-left: 0; /* 移除左侧 padding */
    color: #191919;
    line-height: 1.8;
    font-size: 18px;
    font-weight: 400;
    list-style: none; /* 移除默认圆点 */
}
.tool-list-base li:not(:last-child){margin-bottom:8px}

/* 工具简介内容样式修正 (覆盖 post-body 的 18px) */
.tool-intro-content.post-body {
    font-size: 18px;
    line-height: 1.8;
    font-weight: 400;
}
/* 确保简介中的段落也是 18px */
.tool-intro-content.post-body p {
    font-size: 18px;
}
.timeline-list{list-style:none;margin:0;padding:0}
.timeline-item{position:relative;padding-left:18px}
.timeline-item::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:9999px;background:var(--main_color,#2b5ff5)}
.timeline-item:not(:last-child){padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid #ebedf0}
.timeline-meta{color:#6b7280;font-size:14px;line-height:1.4;margin-bottom:4px}
.timeline-title{font-weight:600;font-size:20px;line-height:1.4;margin:0 0 4px}
.timeline-title a{color:#191919;text-decoration:none}
.timeline-title a:hover{color:var(--main_color,#2b5ff5);text-decoration:underline}
.timeline-desc{color:var(--text-secondary,#4b5563);font-size:16px;line-height:1.7}
.faq-question-text{margin:0;font-size:20px;font-weight:600;display:inline-block}
/* FAQ 切换图标通过伪元素实现 */
.tool-faq-question::after{
    content:"+";
    color:#999;
    font-weight:normal;
    font-size:14px;
}
.tool-faq-item.active .tool-faq-question::after{
    content:"-";
}

/* 6. FAQ 悬停效果：问题标题变主题色 */
.tool-faq-question:hover .faq-question-text {
    color: var(--main_color, #2b5ff5);
    transition: color 0.2s ease;
}
@media screen and (max-width:768px){
    .tool-pricing-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
    .tool-pricing-grid>div{min-width:80%;scroll-snap-align:start}
    .post-meta-row{margin-bottom:10px;font-size:12px;gap:15px}
    .tool-tags-cloud{gap:8px;margin-bottom:15px}
}

.tool-header-block{
    display:flex;
    align-items:center;
    margin-bottom:15px;
}
.tool-favicon{
    margin-right:15px;
    flex-shrink:0;
}
.tool-favicon img{
    width:64px;
    height:64px;
    border-radius:10px;
    object-fit:cover;
    display:block;
}
.tool-header-block h1{
    margin:0;
    font-size:24px;
    line-height:1.2;
}
.tool-divider{
    width:100%;
    height:1px;
    background-color:#eee;
    margin-bottom:20px;
}
.icon-spaced{margin-right:4px;vertical-align:middle}
.tool-tag-pill{display:inline-block;background-color:#f3e8ff;color:#581c87;padding:4px 12px;border:1px solid #e9d5ff;border-radius:9999px;font-size:14px;text-decoration:none}

/* 限制标签区域只显示两行 */
.tool-tags-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* 标签间距 */
    max-height: 80px; /* 预估两行的高度 */
    overflow: hidden; /* 超出隐藏 */
}

/* 4. 免费平替模块中的标签样式 (可选，如果觉得也需要限制的话) */
#section-alternatives .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    height: 28px; /* 强制只显示一行 */
    overflow: hidden;
}

#section-alternatives .tag-list a {
    font-size: 12px;
    padding: 2px 8px;
    background: #f3f4f6;
    border-radius: 4px;
    color: #666;
    transition: all 0.2s ease; /* 增加过渡效果 */
    text-decoration: none; /* 去掉默认下划线 */
    display: inline-flex; /* 使用 flex 布局实现居中 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    line-height: 1.2; /* 修正行高 */
    height: 24px; /* 固定高度，确保对齐 */
}

/* 标签悬停效果 */
#section-alternatives .tag-list a:hover {
    background: var(--main_color, #2b5ff5); /* 悬停变主题色 */
    color: #fff; /* 文字变白 */
    transform: translateY(-1px); /* 微微上浮 */
}

@media screen and (max-width:768px){
    .tool-tag-pill{padding:4px 8px;font-size:12px}
}
.tool-related-products{margin-top:3rem}
:root .mdBorderMain{border:1px solid #ebedf0}
/* =========================================
   全局基础样式修正 (从 额外CSS 迁移)
   ========================================= */

/* 1. 基础表格去双线 (SaaS风格表格必备) */
table { 
    border-collapse: collapse; 
    width: 100%; 
    margin-bottom: 20px; 
}

/* 2. 单元格加线、加内边距 */
td, th { 
    border: 1px solid #dcdcdc; /* 精致灰边框 */
    padding: 12px;             /* 增加呼吸感 */
}

/* 3. 表头美化 */
th {
    background-color: #f5f7fa; /* 浅灰蓝背景 */
    font-weight: bold;
    color: #333;
}

/* =========================================
   全局容器宽度调整 (关键！让网站变宽)
   ========================================= */

/* 1. 修改全局最大宽度为 1440px */
.page-container, 
.container,
.site-header .page-container,
.site-footer .page-container {
    max-width: 1440px !important; /* 核心修改：让左右分栏更宽敞 */
    width: 95%; /* 移动端防贴边 */
    margin-left: auto;
    margin-right: auto;
}

/* 2. 内容区域填充 */
.post-content, 
.entry-content {
    max-width: 100%; 
}

/* 3. SaaS 布局修正 */
.container-wide {
    max-width: 1440px !important;
    padding: 0 40px; 
}

body, button, input, select, textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif !important;
}

:root {
    --text-primary: #191919;
    --text-secondary: #666666;
}

body{
    color:#191919;
    font-weight:400;
    background-color:#F7F8FA;
}

h1,h2,h3,h4,h5,h6{
    color:#191919;
    font-weight:700;
}

.post-content .post-body h2,
.tool-details-v2 .post-body h2,
h2 {
    font-size: 28px;
    font-weight: 700;
}

.post-content .post-body h3,
.tool-details-v2 .post-body h3,
h3 {
    font-size: 20px;
    font-weight: 700;
}

.related-title h3{
    font-size:24px;
    font-weight:800;
    color:#191919;
}

.tool-details-v2 .post-body{
    color:#191919;
}
.tool-independent-card > div + div{margin-top:24px}
.tool-vs-group {
    margin-bottom: 40px;
}
.tool-vs-group:last-child {
    margin-bottom: 0;
}
.tax-tool_category,.tool-template-default{background:#F7F8FA!important}

/* ==========================================================================
   评分、热度、平台、定价 新增样式 (18px)
   ========================================================================== */
.tool-meta-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 18px !important;
    line-height: 1.6;
}

.tool-meta-item .meta-label {
    color: #191919;
    flex-shrink: 0;
    width: 70px;
    font-weight: 600;
}

.tool-meta-item .meta-value {
    color: #191919;
    font-weight: 500;
}

/* 评分样式 */
.star-rating-container {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.star-rating {
    display: inline-flex;
    gap: 6px;
    color: #e0e0e0;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.star-rating .star-icon {
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 24px;
    line-height: 1;
}
.star-rating .star-icon.active {
    color: #ffb400;
}

/* 已评分状态禁用动画 */
.tool-rating-row.has-rated .star-rating .star-icon {
    cursor: default;
}
.tool-rating-row.has-rated .star-rating .star-icon:hover {
    transform: none !important;
}

/* Hover 动画效果：仅在未评分时触发 */
.tool-rating-row:not(.has-rated) .star-rating .star-icon:hover,
.tool-rating-row:not(.has-rated) .star-rating .star-icon:hover ~ .star-icon {
    color: #ffb400;
    transform: scale(1.2);
}
/* 当鼠标悬浮在容器上时，非 hover 状态的星星变灰 */
.tool-rating-row:not(.has-rated) .star-rating:hover .star-icon:not(:hover):not(:hover ~ .star-icon) {
    color: #e0e0e0 !important;
}

.rating-score {
    font-weight: 700;
    color: #191919;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
}
.rating-count {
    font-size: 14px;
    color: #666666;
    line-height: 1;
    display: flex;
    align-items: center;
    margin-top: 2px;
}

/* 热度图标 */
.icon-heat {
    color: #ff4d4f;
    margin-right: 5px;
}

/* 平台/定价图标 */
.meta-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f5f7fa;
    border-radius: 50%;
    margin-right: 8px;
    color: #666;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    border: 1px solid #ebedf0;
}
/* 平台/定价图标颜色体系 */
.meta-icon-wrapper[title*="网页"] { color: #1890ff; background: #e6f7ff; border-color: #91d5ff; }
.meta-icon-wrapper[title*="APP"], .meta-icon-wrapper[title*="Android"], .meta-icon-wrapper[title*="iOS"] { color: #52c41a; background: #f6ffed; border-color: #b7eb8f; }
.meta-icon-wrapper[title*="小程序"] { color: #07c160; background: #e8fff3; border-color: #a0eec0; }
.meta-icon-wrapper[title*="插件"] { color: #722ed1; background: #f9f0ff; border-color: #d3adf7; }
.meta-icon-wrapper[title*="免费"] { color: #faad14; background: #fffbe6; border-color: #ffe58f; }
.meta-icon-wrapper[title*="试用"] { color: #fa8c16; background: #fff7e6; border-color: #ffd591; }
.meta-icon-wrapper[title*="付费"], .meta-icon-wrapper[title*="订阅"] { color: #f5222d; background: #fff1f0; border-color: #ffa39e; }

.meta-icon-wrapper:hover {
    background: #191919 !important;
    color: #fff !important;
    border-color: #191919 !important;
    transform: translateY(-2px);
}
.meta-icon-wrapper i {
    font-size: 18px;
}
/* 自定义 Tooltip (可选，目前使用 title 属性) */
.meta-icon-wrapper::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background: #191919;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    pointer-events: none;
    z-index: 10;
}
.meta-icon-wrapper:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px);
}

/* 按钮组优化 */
.tool-buttons-area {
    margin-top: 25px;
    margin-bottom: 25px;
}
/* 按钮样式调整 */
.tool-btn-box {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.tool-btn-box > div {
    margin: 0 !important;
    flex: 0 1 auto !important;
}

.tool-btn-box a, 
.tool-btn-box span {
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 15px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    border-radius: 21px !important;
}

/* 移除之前冲突的定义 */

/* 二级导航样式（恢复原始样式，仅保留必要结构） */
.tool-subnav {
    display: flex;
    gap: 25px;
    padding: 12px 0 0 0; /* 仅保留顶部padding，底部交由link控制 */
    /* 灰色下划线：加深颜色，加粗到2px以便与选中状态匹配 */
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 25px;
    background: transparent;
    position: sticky;
    top: var(--subnav-top, 0);
    z-index: 100;
    /* 移除可能导致闪烁的背景过渡 */
    transition: none; 
}

/* 吸顶状态 */
.tool-subnav.stuck {
    /* 吸顶时保持容器本身透明，隐藏原有边框，改由伪元素实现全宽背景和边框 */
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none; /* 移除阴影 */
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

/* 使用伪元素实现吸顶后的全宽白底和下划线，避免内容抖动 */
.tool-subnav.stuck::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw; /* 延伸至全屏宽度 */
    height: 100%;
    background: #fff;
    /* 吸顶后的下划线，保持与非吸顶状态一致的样式 */
    border-bottom: 2px solid #e0e0e0;
    box-shadow: none; /* 移除阴影 */
    z-index: -1; /* 置于内容下方 */
}

.tool-subnav-link {
    color: #191919;
    font-size: 18px;
    text-decoration: none;
    transition: color 0.3s;
    /* 调整底部padding，适配4px边框，保持总高度一致 (10px padding + 4px border = 14px) */
    padding: 0 0 10px 0; 
    position: relative;
    font-weight: inherit;
    /* 预留位置：透明边框4px */
    border-bottom: 4px solid transparent; 
    /* 负边距：让链接的边框底部与容器边框底部对齐 */
    margin-bottom: -2px; 
}
.tool-subnav-link:hover,
.tool-subnav-link.active {
    color: #0052d9 !important;
    font-weight: inherit;
    /* 选中状态和悬停状态：蓝色边框4px */
    border-bottom: 4px solid #0052d9; 
}

/* 顶部模块高度压缩 */
.tool-details {
    padding-top: 15px !important;
}
.tool-header-block {
    margin-bottom: 15px !important;
}
.tool-meta-item {
    margin-bottom: 10px !important;
}
.tool-buttons-area {
    margin-top: 20px !important;
}
.tool-details-l {
    padding-top: 0 !important;
}
.tool-thumbnail-wrapper {
    margin-top: 0 !important;
}
.tool-thumbnail-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #ebedf0;
    margin-bottom: 0 !important;
}
.tool-thumbnail {
    position: relative;
    transition: transform 0.3s ease;
}
.screenshot-link:hover .tool-thumbnail {
    transform: scale(1.02);
}
.screenshot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.screenshot-link:hover .screenshot-overlay {
    opacity: 1;
}
.screenshot-overlay span {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 24px;
    border: 2px solid #fff;
    border-radius: 30px;
}

/* 标签区域样式 */
.tool-tags-area {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tool-tag-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0052d9 !important; /* 品牌色 */
    background-color: rgba(0, 82, 217, 0.05); /* 更浅的背景 */
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px !important;
    font-weight: 400 !important; /* 变细 */
    text-decoration: none;
    border: none !important;
    transition: all 0.3s;
}
.tool-tag-pill:hover {
    background-color: #0052d9;
    color: #fff !important;
}

/* 移动端适配：防止底部悬浮栏遮挡内容 */
@media (max-width: 768px) {
    body {
        padding-bottom: 80px !important; /* 预留足够空间给底部固定栏 */
    }
    .tool-meta-item {
        font-size: 16px !important;
    }
    .tool-meta-item .meta-label {
        width: 60px;
    }
}

/* 工具详情页 - 大板块分组样式 */
.tool-big-section {
    margin-bottom: 40px;
}
.tool-big-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #191919;
    display: flex;
    align-items: center;
}
.tool-big-title::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 24px;
    background: var(--main_color, #2b5ff5);
    margin-right: 12px;
    border-radius: 3px;
}

/* 优化后的大板块卡片样式 */
.tool-group-card {
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ebedf0;
    box-shadow: none;
    padding: 30px;
}
@media screen and (max-width: 768px) {
    .tool-group-card {
        padding: 20px;
    }
}

/* 模块分割线 */
.tool-module-divider {
    height: 1px;
    background-color: #eee;
    margin: 30px 0;
}

/* 简介模块通栏宽度修正 */
.tool-intro-content p {
    max-width: 100% !important;
}

/* H3 标题样式优化 */
.tool-section-subtitle {
    font-size: 20px;
    font-weight: 700;
    color: #191919;
    margin-bottom: 20px;
    display: block;
}

/* ---------------------------------------------------------------------------------
   免费平替模块样式 (针对 section-alternatives)
   --------------------------------------------------------------------------------- */

/* 1. 工具标题字号放大 */
#section-alternatives .itme-title h2 {
    font-size: 18px; /* 默认通常是 16px 或 15px，放大到 18px */
    font-weight: 700;
}

/* 2. 评分显示样式 (交互版) */
#section-alternatives .tool-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;
}

#section-alternatives .star-rating {
    display: flex;
    gap: 2px;
}

#section-alternatives .star-icon {
    font-size: 18px; /* 放大星星 */
    color: #e5e7eb; /* 默认灰色 */
    cursor: pointer;
    transition: color 0.2s;
}

#section-alternatives .star-icon.active {
    color: #ffb400; /* 激活为金黄色 */
}

/* 简单的 Hover 效果 */
#section-alternatives .star-icon:hover,
#section-alternatives .star-icon:hover ~ .star-icon {
    /* 这里比较难纯CSS实现反向选择，暂时只高亮当前hover的，
       JS 会处理点击后的状态。为了体验更好，可以加深颜色 */
    color: #f59e0b;
}

#section-alternatives .rating-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

#section-alternatives .rating-score {
    font-weight: 400; /* 去掉加粗 */
    font-size: 13px; /* 缩小字号 */
    color: #555; /* 稍微调淡一点颜色，避免太突兀 */
}

#section-alternatives .rating-count {
    color: #888;
    font-size: 12px;
}

/* 3. “直达”按钮悬停放大 */
#section-alternatives .itme-img .item-direct a {
    transition: all 0.3s ease;
}

#section-alternatives .itme-img:hover .item-direct a {
    transform: scale(1.2); /* 放大 1.2 倍 */
    padding: 8px 15px; /* 增加内边距，让它看起来更显眼 */
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}