/* ============================================================
   9200AI工具 · 子主题前端样式（v5 - Phase E）
   目标：现代卡片风、信息层级清晰、体验顺滑。
   复用 onenav 真实变量：--theme-color / --main-bg-color（带回退；
   派生色 --io9200-2 / --io-bg-3 经 color-mix 从单一主题变量推导，保持主题联动）。
   圆角统一跟随父主题"内容圆角"：--main-radius（主题设置>全局功能>颜色布局>内容圆角）
   ============================================================ */
:root{
  /* C-1 修复：--io9200 指向父主题真实变量 --theme-color，后台改主题色全站联动；
     派生色经 color-mix 从单一主题变量推导，既保持层级/双色调，又随主题联动。
     （--io-border 暂无对应父主题变量，保留原回退，避免大范围边框变深。） */
  --io9200: var(--theme-color, #4f46e5);
  --io9200-2: color-mix(in srgb, var(--theme-color, #6366f1) 72%, #000 28%);
  --io-bg-2: var(--main-bg-color, #f7f8fa);
  --io-bg-3: color-mix(in srgb, var(--main-bg-color, #eef1f5) 90%, #000 10%);
  --io-border: var(--border, #e7eaee);
  --io-text: #1f2937;
  --io-muted: #6b7280;
  --io-green: #10b981;
  --io-red: #ef4444;
  --io-amber: #f59e0b;
  /* 内容圆角：与父主题"内容圆角"设置完全一致 */
  --io-radius: var(--main-radius, 12px);
  --io-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --io-shadow-h: 0 6px 18px rgba(79,70,229,.16);
}

/* ===================== 通用区块标题 ===================== */
.io9200-section-title{ font-size: 20px; font-weight: 800; margin: 0; display:inline-flex; align-items:center; gap:8px; }
.io9200-section-sub{ color: var(--io-muted); margin: 6px 0 0; font-size: 14px; }
.io9200-page-title{ font-size: 26px; font-weight: 800; display:flex; align-items:center; gap:10px; margin:0; }
.io9200-page-sub{ color: var(--io-muted); margin: 8px 0 0; font-size: 15px; }

/* ===================== 详情页主卡（背景 + 标签置顶） ===================== */
body.single-sites .site-content.mb-4.mb-md-5{
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border: 1px solid var(--io-border);
  border-radius: var(--io-radius);
  padding: 18px 20px 16px;
  box-shadow: var(--io-shadow);
  margin-top: 8px;
}
body.single-sites .site-content .panel-body.single{ background: transparent; }

/* 隐藏主卡上的非必要信息（所在地/语言/收录时间/其它站点/SEO权重） */
body.single-sites .table-div{ display: none !important; }
body.single-sites .sites-seo-load{ display: none !important; }
body.single-sites .sites-weight{ display: none !important; }

/* Phase H：主卡元信息行去掉发布时间 + 父主题点赞，保留浏览/评论 + 子主题好用/不好用 */
/* 父主题元信息容器：<div class="d-flex flex-fill text-muted text-sm"> → 第 1 个 span 是时间 */
body.single-sites .site-body .d-flex.flex-fill.text-sm > span:nth-child(1){ display:none !important; }
/* 只隐藏父主题"点赞"(data-type="like")；收藏(data-type="favorite") 的 <a> 也带 .io-posts-like 类，
   但必须保留并显示，恢复原主题样式 */
body.single-sites .io-posts-like[data-type="like"],
body.single-sites .site-body .d-flex.flex-fill.text-sm .io-posts-like[data-type="like"]{ display:none !important; }
/* 防御：部分父主题版本时间用 <i class="iconfont icon-time-o"> 的兄弟节点 */
body.single-sites .site-body .d-flex.flex-fill.text-sm [title*="发布"]{ display:none !important; }

/* 网站名称加粗 */
body.single-sites .site-name{ font-weight: 800 !important; line-height: 1.25; }
/* 子主题自带的 .io9200-pubtime 兜底隐藏（PHP 入口已关闭，双保险） */
body.single-sites .io9200-pubtime{ display: none !important; }
/* 原主题元信息行（发布时间 / 父主题点赞）已隐藏；浏览+评论保留；好用/不好用 由子主题 JS 注入到 .views 之后 */

/* 工具功能介绍 大标题（紧跟 detail_top 后） */
.io9200-intro-title{ margin-top: 18px !important; margin-bottom: 12px !important; }
/* 决策块标题：网站名称用主题色区分 */
.io9200-bt-name{ color: #7c8083; }

/* ===================== 主卡：站名 / 收藏 同一基线 ===================== */
body.single-sites .site-content.mb-4.mb-md-5 > .d-flex.flex-wrap.mb-4{ display:flex; align-items:center; flex-wrap:wrap; gap: 8px 12px; }
body.single-sites .site-content.mb-4.mb-md-5 .posts-like{ display:flex; align-items:center; margin: 0 !important; padding-left: 4px; }
body.single-sites .site-content.mb-4.mb-md-5 .posts-like .btn{ line-height: 1.2; }

/* ===================== 主卡顶部：精选 / 属性·适用 ===================== */
/* 编辑精选：紧跟站名后（已由 PHP 输出在 site-name 之后） */
.io9200-featured-tag{
  display:inline-flex; align-items:center; gap:4px; vertical-align:middle;
  font-size:12px; font-weight:800; color:#b45309;
  background:#fef3c7;
  padding:2px 10px; border-radius:999px; margin-left:4px;
  cursor:help; box-shadow:none;
  line-height: 1.4;
}
.io9200-cn-tag{
  display:inline-flex; align-items:center; gap:4px; vertical-align:middle;
  font-size:12px; font-weight:800; color:#ffffff;
  background:#e23523;
  padding:2px 10px; border-radius:999px; margin-left:4px;
  cursor:help; box-shadow:none;
  line-height: 1.4;
}
.io9200-featured-tag i{ font-size:11px; font-style: normal; }

/* 属性 / 适用 → 移到"打开网站"上方；适用在前
   标签统一灰色系（不显眼），不再随后台 term 颜色 */
.io9200-tags-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:10px 0 4px; padding-bottom:8px; border-bottom:1px solid rgba(0,0,0,.08); }

/* 价格 / 平台 → 移到"打开网站"上方，位于 属性·适用(tags-row) 之上
   价格(免费权益+收费模式) 在左，平台(支持平台) 在右；同行，放不下则平台整块换行 */
.io9200-metabar{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 12px; margin:10px 0 8px; padding-bottom:8px; border-bottom:1px solid rgba(0,0,0,.08); }
.io9200-mb-block{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; }
.io9200-tag-block{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; }
.io9200-tag-label{
  font-size:12px; font-weight:700; color:var(--io-muted);
  background:var(--io-bg-3); padding:2px 8px; border-radius:6px;
  line-height: 1.4;
}
.io9200-tag{
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:500; padding:2px 8px; border-radius:6px;
  text-decoration:none; transition:.15s; line-height: 1.4;
  border: 1px solid #e2e8f0;
  color: #475569;
  /* 背景色调用后台 term 设置的颜色（仅改背景，边框/字号保持不变） */
  background: color-mix(in srgb, var(--io-tag-bg, #f1f5f9) 18%, #fff);
}
.io9200-tag:hover{ filter:brightness(.96); color:#1f2937; background:#e2e8f0; }

/* sitetag / 分类标签：统一灰色系 + 稍小（不抢色，Phase G） */
body.single-sites .terms-list a{
  border:1px solid #e2e8f0 !important;
  background:#f1f5f9 !important;
  color:#64748b !important;
  font-size:12px !important;
  font-weight:600 !important;
  padding:2px 10px !important;
  margin:2px 4px 2px 0 !important;
}
body.single-sites .terms-list a:hover{ background:#e2e8f0 !important; color:#334155 !important; }

/* ===================== 主卡按钮：用户投票盒（好用/不好用 + 我要评价） ===================== */
.io9200-votebox{
  flex: 1 0 100%;
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  margin-top:10px; padding:8px 10px;
  background:var(--io-bg-2); border:1px solid var(--io-border);
  border-radius:var(--io-radius);
}
.io9200-votebox-label{ font-size:13px; font-weight:700; color:var(--io-muted); }
.io9200-vbtn{
  display:inline-flex !important; align-items:center; gap:4px;
  padding:5px 10px; border-radius:var(--io-radius) !important;
  font-size:13px; font-weight:600; text-decoration:none !important;
  cursor:pointer; border:1px solid transparent; transition:.15s; line-height:1;
}
/* 投票盒内文字显示（Phase G：好用/不好用 文字回到按钮上） */
.io9200-vbtn-label{ display: inline; font-size: 12.5px; }
/* 拇指图标：用 mask-image + background-color:currentColor，使图标颜色跟随所在位置的文字颜色。
   注意：background-image 里的 currentColor 不会继承元素 color（会渲染成黑色），必须用 mask 方案。 */
.io9200-ico{
  display:inline-block; width:16px; height:16px;
  vertical-align: middle; flex:none;
  background-color: currentColor;
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
  mask-repeat:no-repeat; mask-position:center; mask-size:contain;
}
.io9200-ico-up{
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/></svg>");
}
.io9200-ico-down{
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M22 3h-4v12h4V3zM2 14c0 1.1-.9-2 2 2h6.31l-.95 4.57-.03.32c0 .41-.17-.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2h-9c-.83 0-1.54.5-1.84 1.22L.34 11.27C.25 11.5.2 11.74.2 12v2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M22 3h-4v12h4V3zM2 14c0 1.1-.9-2 2 2h6.31l-.95 4.57-.03.32c0 .41-.17-.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2h-9c-.83 0-1.54.5-1.84 1.22L.34 11.27C.25 11.5.2 11.74.2 12v2z'/></svg>");
}
.io9200-vote-pill .io9200-ico,
.io9200-cmt-pill .io9200-ico{ width:14px; height:14px; color: inherit; }
.io9200-vbtn-num{
  font-weight:600; font-size:13px; color:inherit;
}
.io9200-vbtn-good{ background: var(--io-green); color:#fff; }
.io9200-vbtn-good:hover{ background:#0ea372; transform:translateY(-1px); }
.io9200-vbtn-good.is-active{ background: var(--io-green); color:#fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--io-green); }
.io9200-vbtn-bad{ background:#fff; color: var(--io-red); border-color:#fecaca; }
.io9200-vbtn-bad:hover{ background:#fef2f2; transform:translateY(-1px); }
.io9200-vbtn-bad.is-active{ background: var(--io-red); color:#fff; border-color:transparent; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--io-red); }
.io9200-rateme{
  background:transparent; border:1px dashed var(--io-border); color:var(--io-muted);
  font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:var(--io-radius);
  cursor:pointer; transition:.15s; margin-left:auto;
}
.io9200-rateme:hover{ border-color:var(--io9200); color:var(--io9200); }

/* 父主题"打开网站/手机查看"按钮也被纳入主卡区：稍调 */
body.single-sites .site-go{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
body.single-sites .site-go .btn{ margin: 0 !important; }
body.single-sites .site-go .vc-theme{ box-shadow: 0 6px 16px rgba(79,70,229,.25); }
body.single-sites .site-go .qr-img{ background: #fff; color: var(--io-text); border: 1px solid var(--io-border); }
body.single-sites .site-go .io9200-report-btn{ background: #fff; color: var(--io-red); border: 1px solid #fecaca; }

/* ===================== 主卡：站名下方元信息行（好用/不好用/浏览/评论） ===================== */
/* 块级，紧贴 .site-name-box 之下；不再同一行 */
.io9200-metavote{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:14px; margin:8px 0 4px; font-size:13px;
}
.io9200-mv{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--io-muted); text-decoration:none;
  transition:.15s; font-weight:400; line-height:1;
}
.io9200-mv i{ font-size:14px; }
.io9200-mv span{ font-weight:400; }
/* 可点击的拇指上下 */
.io9200-mv-up{ cursor:pointer; }
.io9200-mv-down{ cursor:pointer; }
.io9200-mv-up:hover, .io9200-mv-up.is-active{ color:var(--io-green); }
.io9200-mv-down:hover, .io9200-mv-down.is-active{ color:var(--io-red); }
/* 只读指标 */
.io9200-mv-view, .io9200-mv-comment{ color:var(--io-muted); }

/* ===================== 顶部元信息行：好用/不好用（Phase H 追加） ===================== */
/* 跟父主题 .views / .mr-3 视觉一致（text-muted 默认色 + 字号一致） */
.io9200-meta-mv{ display:inline-flex; align-items:center; }
.io9200-meta-mv a{
  display:inline-flex; align-items:center; gap:4px;
  color: inherit; text-decoration: none; cursor: pointer;
  transition: color .15s;
}
.io9200-meta-mv .io9200-ico{ width:14px; height:14px; color: inherit; }
/* hover/active 状态：好用→绿、不好用→红（thumb 通过 currentColor 联动） */
.io9200-meta-mv-up:hover, .io9200-meta-mv-up.is-active{ color: var(--io-green); }
.io9200-meta-mv-down:hover, .io9200-meta-mv-down.is-active{ color: var(--io-red); }
.io9200-decision{ margin-top: 22px; }
.io9200-block{ margin-bottom: 26px; }
.io9200-block-title{
  font-size:18px; font-weight:800; margin:0 0 14px; padding-left:12px;
  display:flex; align-items:center; gap:8px;margin-top: 30px;
}
.io9200-proscons{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.io9200-pc-side{
  background:var(--io-bg-2); border:1px solid var(--io-border); border-radius: var(--io-radius);
  padding:14px 16px;
}
.io9200-pc-h{ font-size:15px; font-weight:800; margin:0 0 10px; display:flex; align-items:center; gap:6px; }
.io9200-pc-h.pros{ color:var(--io-green); }
.io9200-pc-h.cons{ color:var(--io-red); }
.io9200-pc-side ul{ margin:0; padding-left:18px; }
.io9200-pc-side li{ margin:6px 0; color:#374151; line-height:1.6; }

.io9200-alt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.io9200-alt-card{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:#fff; border:1px solid var(--io-border); border-radius:12px;
  text-decoration:none; color:inherit; transition:.15s; box-shadow: var(--io-shadow);
}
.io9200-alt-card:hover{ transform:translateY(-2px); box-shadow: var(--io-shadow-h); border-color:var(--io9200); }
.io9200-alt-logo{ width:42px; height:42px; flex:none; border-radius:10px; overflow:hidden; background:var(--io-bg-3); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--io-muted); }
.io9200-alt-logo img{ width:100%; height:100%; object-fit:cover; }
.io9200-alt-info{ display:flex; flex-direction:column; min-width:0; }
.io9200-alt-title{ font-weight:700; font-size:14px; }
.io9200-alt-desc{ font-size:12px; color:var(--io-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.io9200-tut-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.io9200-tut-card{
  display:flex; align-items:center; gap:8px; padding:12px 14px;
  background:linear-gradient(135deg,#eef2ff,#f5f3ff); border:1px solid #e0e7ff;
  border-radius:12px; text-decoration:none; color:#3730a3; font-weight:600; transition:.15s;
  line-height:1.4;
}
.io9200-tut-card:hover{ transform:translateY(-2px); box-shadow: var(--io-shadow-h); }
.io9200-tut-title{ font-weight:600; font-size:13.5px; line-height:1.4; }
.io9200-tut-card:hover .io9200-tut-title{ color:#1e1b4b; }

.io9200-table-wrap{ overflow-x:auto; border:1px solid var(--io-border); border-radius:12px; }
.io9200-compare-table{ width:100%; border-collapse:collapse; font-size:14px; min-width:420px; }
.io9200-compare-table th, .io9200-compare-table td{ border-bottom:1px solid var(--io-border); padding:10px 12px; text-align:left; }
.io9200-compare-table th{ background:var(--io-bg-3); font-weight:700; }
.io9200-compare-table tr:last-child td{ border-bottom:none; }

/* 决策块下方的标签：稍小一号（与主卡一致但更紧凑） */
.io9200-block .io9200-tag{ font-size:11.5px; padding:1px 7px; }
.io9200-block .io9200-tag-label{ font-size:11.5px; padding:1px 7px; }

/* ===================== 首页场景卡 ===================== */
.io9200-scenarios{ background:var(--io-bg-2); border:1px solid var(--io-border); border-radius: var(--io-radius); padding:18px 20px; margin: 10px 0 18px; box-shadow: var(--io-shadow); box-sizing:border-box; max-width:100%; overflow:hidden; }
/* 场景卡版块头部：两行结构 —— 第一行 标题(左)+查看更多(右)；第二行 副标题 */
.io9200-scenarios-head{ margin-bottom:14px; }
.io9200-scenarios-head-row{
  display:flex; align-items:center; justify-content:space-between;
}
.io9200-scenarios-head .io9200-section-title{ margin-bottom:6px; }
.io9200-scenarios-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; max-width:100%; }
.io9200-scenario-card{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:18px 12px 14px; border-radius: var(--io-radius); text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--io-border); transition:.18s; overflow:hidden; min-width:0;
}
.io9200-scenario-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--c1,var(--io9200));
}
.io9200-scenario-card:hover{ transform:translateY(-4px); box-shadow:0 10px 26px rgba(16,24,40,.12); }
.io9200-scenario-ico{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#fff; background:var(--c1,var(--io9200)); margin-bottom:10px; box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.io9200-scenario-ico .io9200-emoji{ font-style:normal; }
.io9200-scenario-title{ font-weight:800; font-size:15px; }
.io9200-scenario-sub{ font-size:12px; color:var(--io-muted); margin-top:4px; line-height:1.5; word-break:break-word; }
.io9200-scenario-arrow{ position:absolute; right:12px; bottom:12px; color:var(--c1,var(--io9200)); opacity:0; transform:translateX(-4px); transition:.18s; }
.io9200-scenario-card:hover .io9200-scenario-arrow{ opacity:1; transform:translateX(0); }

/* ===================== 全部场景卡汇总页 ===================== */
.io9200-allsc-head{ margin-bottom:18px; }
.io9200-allsc-head h1{ font-size:26px; font-weight:800; margin:0 0 6px; }
.io9200-allsc-head p{ margin:0; color:var(--io-muted); font-size:15px; }
.io9200-allsc-empty{ color:var(--io-muted); padding:30px 0; text-align:center; }

/* ===================== 场景详情页 ===================== */
.io9200-scenario-detail{ max-width: 1100px; }

/* ---- Hero ---- */
.io9200-sc-hero{
  display:flex; gap:20px; align-items:center; padding:22px 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 12%, #fff), #fff);
  border:1px solid var(--io-border); border-radius: var(--io-radius); margin-bottom: 24px;
  box-shadow: var(--io-shadow);
}
.io9200-sc-hero-ico{
  width:84px; height:84px; flex:none; border-radius:20px; display:flex; align-items:center; justify-content:center;
  font-size:38px; color:#fff; background: var(--c1, var(--io9200)); box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.io9200-sc-hero-ico .io9200-emoji{ font-style:normal; }
.io9200-sc-hero-body{ flex:1; min-width:0; }
.io9200-sc-badge{
  display:inline-block; font-size:12px; font-weight:700; color:#fff;
  background: var(--c1, var(--io9200)); padding:3px 12px; border-radius:999px; margin-bottom:10px;
}
.io9200-sc-hero-title{ font-size:28px; font-weight:800; margin:0 0 6px; line-height:1.25; }
.io9200-sc-hero-sub{ color:#475569; margin:0; font-size:15px; line-height:1.6; }
/* Banner 右侧浏览量 */
.io9200-sc-hero-views{
  flex:none; margin-left:auto; padding-left:18px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  border-left:1px solid var(--io-border);
}
.io9200-sc-hero-views-num{ font-size:22px; font-weight:800; color:var(--c1,var(--io9200)); line-height:1; }
.io9200-sc-hero-views-label{ font-size:12px; color:var(--io-muted); display:inline-flex; align-items:center; gap:3px; }

/* ---- 筛选条 ---- */
.io9200-sc-filterbar{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;
  padding:10px 14px; background:var(--io-bg-2); border:1px solid var(--io-border);
  border-radius:var(--io-radius); box-shadow:var(--io-shadow);
}
.io9200-sc-filter{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:13px; font-weight:600; color:var(--io-muted); cursor:pointer;
  padding:7px 16px; border-radius:999px; background:#fff; border:1px solid var(--io-border); transition:.15s;
}
/* 筛选按钮：hover 用低饱和度浅底 + 同色系文字（各按钮仍保持不同色相） */
.io9200-sc-filter:hover{
  background: color-mix(in srgb, var(--c1,var(--io9200)) 10%, #fff);
  color: color-mix(in srgb, var(--c1,var(--io9200)) 78%, #444);
  border-color: color-mix(in srgb, var(--c1,var(--io9200)) 45%, #ddd);
}
/* 选中态：低饱和度（保留各分类不同色相，但柔和不刺眼） */
.io9200-sc-filter.is-active{
  background: color-mix(in srgb, var(--c1,var(--io9200)) 22%, #fff);
  color: color-mix(in srgb, var(--c1,var(--io9200)) 82%, #333);
  border-color: color-mix(in srgb, var(--c1,var(--io9200)) 50%, #ddd);
}
.io9200-sc-filter.is-active .io9200-sc-dot{ background:var(--c1,var(--io9200)); }
/* 圆点：每个分类一个颜色（--c1 由 PHP 按调色板逐个内联输出） */
.io9200-sc-dot{ width:8px; height:8px; border-radius:50%; background:var(--c1,var(--io9200)); flex:none; }

/* ---- 分类区块 ---- */
.io9200-sc-cat{ margin-bottom:28px; }
.io9200-sc-cat-head{
  display:flex; align-items:center; gap:14px; margin:50px 0 4px; padding-bottom:12px;
  border-bottom:2px solid var(--io-bg-3);
}
/* 分类图标背景：低饱和度（各分类仍保持不同色相，但更柔和） */
.io9200-sc-cat-ico{
  width:48px; height:48px; flex:none; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff;
  background: color-mix(in srgb, var(--c1,var(--io9200)) 72%, #f1f5f9);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.io9200-sc-cat-ico .io9200-emoji{ font-style:normal; }
.io9200-sc-cat-titles{ flex:1; min-width:0; }
.io9200-sc-cat-title{ font-size:18px; font-weight:800; margin:0 0 3px; }
.io9200-sc-cat-sub{ font-size:13px; color:var(--io-muted); margin:0; line-height:1.5; }
/* 更多工具：低饱和度（跟随所在分类 --c1 色相，但柔和不抢眼） */
.io9200-sc-more{
  flex:none; font-size:13px; font-weight:600;
  color: color-mix(in srgb, var(--c1,var(--io9200)) 68%, #555);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:4px; padding:6px 14px;
  border:1px solid color-mix(in srgb, var(--c1,var(--io9200)) 40%, #ddd);
  border-radius:999px; transition:.15s;
}
.io9200-sc-more:hover{
  background: color-mix(in srgb, var(--c1,var(--io9200)) 12%, #fff);
  color: color-mix(in srgb, var(--c1,var(--io9200)) 82%, #333);
}
.io9200-sc-cat-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px;margin-top:0px; ;
}

/* ---- 通用区块容器 ---- */
.io9200-sc-block{ margin-bottom:30px; }
/* 详情页区块标题行：带右侧操作按钮（更多实操攻略 / 更多资源） */
.io9200-scenario-detail .io9200-block-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:50px 0 14px;
}
.io9200-scenario-detail .io9200-block-head .io9200-block-title{ margin:0; }
/* 未带按钮的区块标题（你可能还会用到的场景）仍保留上间距 */
.io9200-scenario-detail .io9200-block-title{ margin-top:50px; }
/* 区块标题右侧按钮：低饱和度（跟随主题色，但柔和不抢眼） */
.io9200-block-more{
  flex:none; font-size:13px; font-weight:600; text-decoration:none;
  color: color-mix(in srgb, var(--io9200) 68%, #555);
  display:inline-flex; align-items:center; gap:4px; padding:6px 14px;
  border:1px solid color-mix(in srgb, var(--io9200) 40%, #ddd);
  border-radius:999px; transition:.15s;
}
.io9200-block-more:hover{
  background: color-mix(in srgb, var(--io9200) 12%, #fff);
  color: color-mix(in srgb, var(--io9200) 82%, #333);
}

/* ---- 新手路径 ---- */
.io9200-sc-path-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.io9200-sc-path-card{
  display:flex; flex-direction:column; gap:14px; padding:16px; background:#fff; border:1px solid var(--io-border);
  border-radius:var(--io-radius); text-decoration:none; color:inherit; transition:.18s; box-shadow:var(--io-shadow);
}
.io9200-sc-path-main{ display:flex; gap:14px; }
.io9200-sc-path-card:hover{ transform:translateY(-3px); box-shadow:var(--io-shadow-h); border-color:var(--io9200); }
.io9200-sc-path-ico{
  width:64px; height:64px; flex:none; border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg,var(--io9200),var(--io9200-2));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px;
}
.io9200-sc-path-ico img{ width:100%; height:100%; object-fit:cover; }
.io9200-sc-path-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.io9200-sc-path-body h3{ font-size:15px; font-weight:800; margin:0 0 5px; }
.io9200-sc-path-body p{ font-size:13px; color:var(--io-muted); margin:0 0 8px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.io9200-sc-path-meta{ display:flex; gap:14px; justify-content:space-between; font-size:12px; color:var(--io-muted); margin-top:auto; padding-top:10px; border-top:1px solid var(--io-border); }
.io9200-sc-path-meta span{ display:inline-flex; align-items:center; gap:4px; }

/* ---- 资源/APP（竖版卡片：方形封面在上，名称/简介/浏览量/免费付费依次向下） ---- */
.io9200-sc-app-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.io9200-sc-app-card{
  display:flex; flex-direction:column; padding:12px; background:#fff; border:1px solid var(--io-border);
  border-radius:var(--io-radius); text-decoration:none; color:inherit; transition:.18s; box-shadow:var(--io-shadow);
  overflow:hidden;
}
.io9200-sc-app-card:hover{ transform:translateY(-3px); box-shadow:var(--io-shadow-h); border-color:var(--io9200); }
/* 封面：16:9 满宽贴边（左/上/右无内边距），参考 AI资源中心汇总页卡片封面 .io9-res-cover */
.io9200-sc-app-ico{
  width:calc(100% + 24px);            /* 内容宽 + 左右各 12px padding */
  aspect-ratio:16/9; overflow:hidden;
  margin:-12px -12px 10px;             /* 负 margin 拉回贴边（父级 overflow:hidden 会裁剪，必须配合 calc 宽度） */
  background:var(--io-bg-3); display:flex; align-items:center; justify-content:center; font-size:34px;
}
.io9200-sc-app-ico img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 兼容不支持 aspect-ratio 的老浏览器 */
@supports not (aspect-ratio:16/9){
  .io9200-sc-app-ico{ width:calc(100% + 24px); height:0; padding-bottom:56.25%; position:relative; }
  .io9200-sc-app-ico img{ position:absolute; inset:0; }
}
.io9200-sc-app-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.io9200-sc-app-body h3{
  font-size:14px; font-weight:700; margin:0 0 4px; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.io9200-sc-app-body p{
  font-size:12.5px; color:var(--io-muted); margin:0 0 8px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.9em;
}
.io9200-sc-app-meta{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; padding-top:8px; border-top:1px solid rgba(0,0,0,.05); }
.io9200-sc-app-meta span{ font-size:12px; color:var(--io-muted); display:inline-flex; align-items:center; gap:4px; }
.io9200-sc-tag-view{ font-size:11px; font-weight:700; color:#4f46e5; background:#eef2ff; padding:2px 8px; border-radius:4px; }

/* ---- 返回导航 / 面包屑 ---- */
.io9200-scenario-nav{ margin-top:28px; text-align:center; }
.io9200-scenario-nav .btn{ font-size:14px; }

/* 详情页底部面包屑（按钮样式 + 箭头）：首页 › 场景汇总页 › 场景分类页 */
.io9200-sc-detail-bc{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  margin-top:28px;
}
.io9200-sc-detail-bc a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; text-decoration:none;
  padding:7px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--io-border); color:#475569; transition:.15s;
}
.io9200-sc-detail-bc a:hover{ border-color:var(--io9200); color:var(--io9200); }
.io9200-sc-detail-bc .io9200-sc-bc-sep{
  width:22px; height:22px; flex:none; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--io-bg-3); color:var(--io-muted); font-size:12px; opacity:1;
}
.io9200-sc-detail-bc .io9200-sc-bc-cur{
  display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px;
  font-size:13px; font-weight:700; color:#fff; background:var(--io9200);
}

/* ===================== 工具卡片（io9200_render_site_card 输出） =====================
 * 基础样式完全复用分类目录列表页的 category.css（functions.php 里已在
 * is_singular('io_scenario') 时一并入队），此处只做「场景详情页」局部微调，
 * 避免两处规则各写一套导致不一致。
 * -------------------------------------------------------------------------- */
/* 工具 LOGO：场景详情页统一 40x40 */
.io9200-scenario-detail .io9-tc-ico{ width:40px; height:40px; flex:0 0 40px; border-radius:8px; }
.io9200-scenario-detail .io9-tc-ico--letter{ font-size:18px; }
/* 卡片等高对齐 */
.io9200-sc-cat-grid .io9-tool-card{ height:100%; }
/* 场景详情页内的工具网格：跟随容器自适应列数 */
.io9200-sc-cat-grid.io9-grid--featured{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }

/* ===================== 场景列表页（archive / taxonomy） ===================== */
.io9200-scenario-archive{ max-width:1180px; }
.io9200-sc-breadcrumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--io-muted); margin-bottom:14px; }
.io9200-sc-breadcrumb a{ color:var(--io-muted); text-decoration:none; }
.io9200-sc-breadcrumb a:hover{ color:var(--io9200); }
.io9200-sc-bc-sep{ opacity:.6; }
.io9200-sc-bc-cur{ color:var(--gc-text, #2d2a3e); font-weight:400; }

.io9200-sc-list-hero{
  display:flex; gap:18px; align-items:center; padding:22px 26px; margin-bottom:22px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--io9200) 12%, #fff), #fff);
  border:1px solid var(--io-border); border-radius:var(--io-radius); box-shadow:var(--io-shadow);
}
.io9200-sc-list-hero--all{ background:linear-gradient(135deg, color-mix(in srgb, var(--io9200) 16%, #fff), #fff); }
.io9200-sc-list-ico{
  width:64px; height:64px; flex:none; border-radius:18px; display:flex; align-items:center; justify-content:center;
  font-size:30px; color:#fff; background:var(--io9200); box-shadow:0 8px 20px rgba(0,0,0,.15); overflow:hidden;
}
.io9200-sc-list-ico img{ width:100%; height:100%; object-fit:cover; }
.io9200-sc-list-body{ flex:1; min-width:0; }
.io9200-sc-list-body h1{ font-size:26px; font-weight:800; margin:0 0 6px; }
.io9200-sc-list-body p{ margin:0; color:#475569; font-size:15px; line-height:1.6; }
.io9200-sc-list-count{ flex:none; font-size:14px; color:var(--io-muted); }
.io9200-sc-list-count b{ color:var(--io9200); font-size:20px; }

.io9200-scenario-meta{ font-size:11.5px; color:var(--io-muted); margin-top:6px; }
.io9200-scenario-card.is-external .io9200-scenario-arrow{ color:#94a3b8; }

.io9200-sc-pager{ display:flex; justify-content:center; gap:6px; margin:18px 0; flex-wrap:wrap; }
.io9200-sc-pager a, .io9200-sc-pager span{
  min-width:36px; height:36px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--io-border); background:#fff; color:#334155; text-decoration:none; font-size:14px;
}
.io9200-sc-pager a:hover{ border-color:var(--io9200); color:var(--io9200); }
.io9200-sc-pager .current{ background:var(--io9200); color:#fff; border-color:transparent; }

@media (max-width:576px){
  .io9200-sc-list-hero{ flex-direction:column; text-align:center; }
  .io9200-sc-list-count{ display:none; }
  /* 场景详情页移动端 */
  .io9200-sc-hero{ flex-direction:column; align-items:center; text-align:center; padding:18px 16px; }
  .io9200-sc-hero-ico{ width:64px; height:64px; font-size:28px; }
  .io9200-sc-hero-views{ margin-left:0; padding-left:0; border-left:none; margin-top:10px; flex-direction:row; gap:6px; }
  .io9200-sc-hero-title{ font-size:22px; }
  .io9200-sc-cat-head{ flex-wrap:wrap; gap:10px; }
  .io9200-sc-cat-ico{ width:40px; height:40px; font-size:18px; }
  .io9200-sc-more{ order:3; width:100%; justify-content:center; }
  .io9200-sc-cat-grid,
  .io9200-sc-cat-grid.io9-grid--featured{ grid-template-columns:1fr; }
  .io9200-sc-path-grid{ grid-template-columns:1fr; }
  .io9200-sc-app-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .io9200-sc-filterbar{ padding:8px 10px; }
  .io9200-sc-filter{ padding:6px 12px; font-size:12px; }
}

/* ===================== 榜单页（单页，AI 工具榜单） =====================
 * 样式已迁移至 assets/css/rankings.css（与参考设计 1:1，圆角跟随 --io-radius）。
 * 此处仅保留小工具相关样式（下方「小工具」区块）。旧 /rank/ 虚拟页面样式已全部移除。 */

/* ===================== 小工具（详情页侧栏） ===================== */
.io9200-widget{ border-radius: var(--io-radius) !important; box-shadow: var(--io-shadow) !important; overflow:hidden; }
.io9200-widget .widget-header{ background:var(--io-bg-2); border-bottom:1px solid var(--io-border); }
.io9200-widget .widget-header h3{ font-weight:800; }
.io9200-widget-list{ margin:0; }
.io9200-widget-card{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
  text-decoration:none; color:inherit; transition:.15s;
}
.io9200-widget-card:hover{ background:var(--io-bg-3); transform:translateX(2px); }
.io9200-widget-logo{ width:36px; height:36px; flex:none; border-radius:9px; overflow:hidden; background:var(--io-bg-3); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--io-muted); }
.io9200-widget-logo img{ width:100%; height:100%; object-fit:cover; }
.io9200-widget-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.io9200-widget-title{ font-weight:700; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.io9200-widget-desc{ font-size:12px; color:var(--io-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.io9200-widget-count{ font-weight:800; font-size:13px; color:var(--io-amber); flex:none; }

/* 「查看完整榜单」按钮：红色背景（覆盖父主题 .card-footer 的灰色 var(--muted-bg-a-color)） */
.card-footer.text-center{  border-radius:0 0 var(--io-radius) var(--io-radius); }
.card-footer.text-center .io9200-widget-more{
  display:block; padding:11px 12px; text-align:center;background:var(--io9200) !important;
  font-size:13px; font-weight:700; text-decoration:none;
  color:#fff; background:transparent; border:none; transition:.15s;
}
.card-footer.text-center .io9200-widget-more:hover{ color:#fff; background:rgba(255,255,255,.16); border-radius:var(--io-radius); }

/* ===== 分类导航（手风琴） ===== */
.io9200-catnav{ list-style:none; margin:0; padding:4px 2px; }
.io9200-catnav-item{ border-bottom:1px solid var(--io-border); }
.io9200-catnav-item:last-child{ border-bottom:none; }
.io9200-catnav-head{ display:flex; align-items:center; gap:6px; }
.io9200-catnav-link{
  position:relative; flex:1; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 10px 10px 14px; color:var(--io-text); text-decoration:none; font-weight:700; font-size:14px;
  border-radius:10px; transition:.15s;
}
.io9200-catnav-link::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:16px; border-radius:3px; background:var(--io9200); opacity:0; transition:.15s;
}
.io9200-catnav-link:hover{ color:var(--io9200); background:var(--io-bg-3); }
.io9200-catnav-link:hover::before{ opacity:1; }
.io9200-catnav-toggle{
  flex:none; width:28px; height:28px; border:none; background:var(--io-bg-3); cursor:pointer;
  border-radius:8px; color:var(--io-muted); display:flex; align-items:center; justify-content:center; transition:.2s;
}
.io9200-catnav-toggle:hover{ color:#fff; background:var(--io9200); }
.io9200-catnav-toggle i{ font-size:12px; transition:transform .25s ease; }
.io9200-catnav-item.open > .io9200-catnav-head .io9200-catnav-toggle i{ transform:rotate(90deg); }
.io9200-catnav-children{
  list-style:none; margin:0; padding:0 0 0 14px;
  max-height:0; overflow:hidden; transition:max-height .28s ease;
}
.io9200-catnav-item.open > .io9200-catnav-children{ max-height:720px; }
.io9200-catnav-children li a{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 10px 7px 16px; margin:3px 0; border-radius:8px;
  color:var(--io-muted); text-decoration:none; font-size:13px; transition:.15s;
}
.io9200-catnav-children li a::before{
  content:""; position:absolute; left:4px; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--io-muted); opacity:.5; transition:.15s;
}
.io9200-catnav-children li a:hover{ color:var(--io9200); background:var(--io-bg-3); }
.io9200-catnav-children li a:hover::before{ background:var(--io9200); opacity:1; }
.io9200-catnav-count{
  font-size:11px; font-weight:700; color:var(--io9200); background:var(--io-bg-3);
  padding:2px 9px; border-radius:999px; flex:none; transition:.15s;
}
.io9200-catnav-children li a:hover .io9200-catnav-count{ background:rgba(79,70,229,.12); }

/* ===================== 评论区：好用/不好用 + 徽章 ===================== */
.io9200-hide-email, #email{ display:none !important; }
.io9200-comment-vote{
  background:var(--io-bg-2); border:1px solid var(--io-border); padding:10px 14px;
  border-radius:12px; margin:0 0 12px;
  display:flex !important; align-items:center !important; flex-wrap:wrap;
  gap:12px; line-height:1 !important;
}
.io9200-cv-label{
  font-weight:800; color:var(--io-text); font-size:13.5px;
  display:inline-flex !important; align-items:center !important;
  line-height:1 !important; height:auto;
}
.io9200-comment-vote label{
  cursor:pointer;
  display:inline-flex !important; align-items:center !important; gap:6px;
  line-height:1 !important; margin:0 !important; padding:0;
  vertical-align: middle;
}
.io9200-comment-vote input[type="radio"]{
  margin:0 !important; vertical-align: middle; line-height:1;
  position: relative; top: -1px;
}
.io9200-vote-pill{ padding:5px 12px; border-radius:999px; font-size:13px; font-weight:700; border:1px solid var(--io-border); transition:.15s; line-height:1.2; }
.io9200-vote-pill.good{ color:var(--io-green); }
.io9200-vote-pill.bad{ color:var(--io-red); }
.io9200-comment-vote input:checked + .io9200-vote-pill.good{ background:var(--io-green); color:#fff; border-color:transparent; }
.io9200-comment-vote input:checked + .io9200-vote-pill.bad{ background:var(--io-red); color:#fff; border-color:transparent; }
.io9200-cv-hint{
  margin-left:auto; font-size:12px; color:var(--io-muted);
  display:inline-flex !important; align-items:center !important;
  line-height:1 !important;
}

/* 昵称与"取消/发表评论"同一行且靠右对齐（sites / guide / AI资源中心 / 文章 一致） */
.single-sites #comment-author-info,
.single-io_guide #comment-author-info,
.single-app #comment-author-info,
.single-post #comment-author-info { display:none !important; }
.single-sites .com-footer,
.single-io_guide .com-footer,
.single-app .com-footer,
.single-post .com-footer { display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:flex-end; }
.single-sites .io9200-cmt-btn-row,
.single-io_guide .io9200-cmt-btn-row,
.single-app .io9200-cmt-btn-row,
.single-post .io9200-cmt-btn-row { display:flex; align-items:center; gap:10px; width:100%; flex-wrap:wrap; justify-content:flex-end; }
.single-sites .io9200-merged-author,
.single-io_guide .io9200-merged-author,
.single-app .io9200-merged-author,
.single-post .io9200-merged-author { flex:0 1 240px; max-width:280px; margin:0 !important; }
.single-sites .io9200-merged-author input,
.single-io_guide .io9200-merged-author input,
.single-app .io9200-merged-author input,
.single-post .io9200-merged-author input { width:100%; }

/* 投票徽章：插在昵称前 */
.io9200-cmt-pill{ display:inline-block; font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:8px; margin-right:6px; vertical-align: 1px; }
.io9200-cmt-pill.good{ background:#dcfce7; color:#166534; }
.io9200-cmt-pill.bad{ background:#fee2e2; color:#991b1b; }
.io9200-cmt-pill.none{ background:#e2e8f0; color:#475569; }

/* ===================== 投票弹窗 ===================== */
.io9200-cmt-modal-mask{ position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; align-items:center; justify-content:center; z-index:9998; padding:20px; }
.io9200-cmt-modal-mask.open{ display:flex; }
.io9200-cmt-modal{ background:#fff; border-radius:16px; padding:22px 22px 18px; max-width:480px; width:100%; position:relative; box-shadow:0 24px 60px rgba(0,0,0,.3); animation: io9200-pop .22s ease; }
.io9200-cmt-close{ position:absolute; right:10px; top:8px; background:transparent; border:0; font-size:22px; cursor:pointer; color:#94a3b8; line-height:1; padding:4px 8px; }
.io9200-cmt-close:hover{ color:#ef4444; }
.io9200-cmt-title{ font-size:18px; font-weight:800; margin:0 0 14px; }
.io9200-cmt-vote{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.io9200-cmt-vote-opt{ cursor:pointer; }
.io9200-cmt-vote-opt input{ display:none; }
.io9200-cmt-vote-opt input:checked + .io9200-cmt-pill.good{ box-shadow:0 0 0 2px var(--io-green); }
.io9200-cmt-vote-opt input:checked + .io9200-cmt-pill.bad{ box-shadow:0 0 0 2px var(--io-red); }
.io9200-cmt-vote-opt input:checked + .io9200-cmt-pill.none{ box-shadow:0 0 0 2px #94a3b8; }
.io9200-cmt-text, .io9200-cmt-name{
  width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--io-border); border-radius:10px; font: inherit; font-size:14px; margin-bottom:10px;
  background: var(--io-bg-2);
}
.io9200-cmt-text:focus, .io9200-cmt-name:focus{ background:#fff; border-color: var(--io9200); outline:0; }
.io9200-cmt-actions{ display:flex; gap:8px; justify-content:flex-end; }
.io9200-cmt-actions button{ padding:9px 18px; border-radius:10px; font-weight:700; font-size:14px; cursor:pointer; border:0; transition:.15s; }
.io9200-cmt-cancel{ background: var(--io-bg-3); color: var(--io-text); }
.io9200-cmt-cancel:hover{ background:#e2e8f0; }
.io9200-cmt-submit{ background: var(--io9200); color:#fff; }
.io9200-cmt-submit:hover{ filter:brightness(1.08); }
.io9200-cmt-submit:disabled{ opacity:.6; cursor:not-allowed; }
@keyframes io9200-pop{ from{ transform:scale(.92); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ===================== 预览截图：自适应高度 + 灯箱放大 ===================== */
.sites-preview{
  position:relative;
  border-radius: var(--io-radius);
  overflow:hidden;
  box-shadow: var(--io-shadow);
  border:1px solid var(--io-border);
  flex: 0 0 auto;
  width: 360px;
  max-width: 100%;
  /* 关键：让外框跟随图片本身高度，而不是撑满整张主卡 */
  height: auto !important;
  align-self: flex-start;
}
.sites-preview .preview-body{ border-radius: var(--io-radius); overflow:hidden; }
.sites-preview .preview-body .site-favicon{ display:flex; align-items:center; gap:6px; padding:6px 10px; background: rgba(255,255,255,.85); border-bottom:1px solid var(--io-border); font-size:12px; }
.sites-preview .preview-body .site-favicon img{ width:16px; height:16px; }
.sites-preview .preview-body .site-img{ display:block; }
.sites-preview .preview-body .site-img img{ width:100%; height:auto; display:block; cursor: zoom-in; }
@media (max-width: 768px){ .sites-preview{ width:100%; margin-top:12px; } }
.io9200-zoom{
  position:absolute; top:10px; right:10px; z-index:3; width:34px; height:34px; border-radius:10px;
  background:rgba(17,24,39,.55); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:16px; backdrop-filter:blur(2px); transition:.15s;
}
.io9200-zoom:hover{ background:rgba(17,24,39,.8); transform:scale(1.06); }

.io9200-lightbox{ position:fixed; inset:0; background:rgba(15,23,42,.82); display:none; align-items:center; justify-content:center; z-index:9999; cursor:zoom-out; padding:24px; }
.io9200-lightbox img{ max-width:92vw; max-height:92vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.io9200-lightbox.open{ display:flex; }

/* ===================== 评论后引导注册弹窗 ===================== */
.io9200-modal-mask{ position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:center; justify-content:center; z-index:9998; padding:20px; }
.io9200-modal-mask.open{ display:flex; }
.io9200-modal{ background:#fff; border-radius:16px; padding:26px 24px; max-width:420px; width:100%; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.3); animation:io9200-pop .25s ease; }
.io9200-modal h3{ margin:0 0 10px; font-size:19px; }
.io9200-modal p{ color:var(--io-muted); font-size:14px; line-height:1.6; }
.io9200-modal .io9200-modal-actions{ margin-top:18px; display:flex; gap:10px; justify-content:center; }
.io9200-modal .io9200-reg-btn{
  background: linear-gradient(135deg, #10b981, #059669); color:#fff; border:0;
  font-size:15px; font-weight:800; padding:10px 22px; border-radius:10px; text-decoration:none;
  box-shadow:0 6px 16px rgba(16,185,129,.32); transition:.15s;
}
.io9200-modal .io9200-reg-btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.io9200-modal .io9200-modal-close{
  background:#fff; color:var(--io-muted); border:1px solid var(--io-border);
  font-size:13.5px; font-weight:600; padding:10px 18px; border-radius:10px; cursor:pointer; transition:.15s;
}
.io9200-modal .io9200-modal-close:hover{ border-color:var(--io9200); color:var(--io9200); }

/* ===================== Toast ===================== */
.io9200-toast{
  position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(20px);
  background:rgba(17,24,39,.92); color:#fff; padding:10px 18px; border-radius:999px; font-size:14px;
  z-index:10000; opacity:0; transition:.25s; pointer-events:none; box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.io9200-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===================== A-1 语义化标题复位 =====================
 * 列表 / 卡片条目的标题已由 <span> 改为 <h3>（利于 SEO 与无障碍大纲）。
 * 这里只复位浏览器 UA 默认的 margin / 字号 / 粗细 / 颜色，视觉与改版前完全一致。
 * 用 :where() 让本规则特异性为 0 —— 各卡片自身的 .io9200-xxx-title 规则永远优先，
 * 所以后续调样式不用管这段，也不会被它抢走优先级。
 * 本文件全站加载，故 guide.css 里的攻略卡标题也一并覆盖。
 * ============================================================== */
:where(h3.io9200-scenario-title,
       h3.io9200-guide-title,
       h3.io9200-guide-list-title,
       h3.g-title){
  margin:0; padding:0;
  font-size:inherit; font-weight:inherit; line-height:inherit; color:inherit;
}

/* ===================== 响应式 ===================== */
@media (max-width: 576px){
  .io9200-proscons{ grid-template-columns:1fr; }
  .io9200-page-title{ font-size:22px; }
  .io9200-rank-aggregate{ grid-template-columns:1fr; }
  .io9200-votebox{ gap:5px; padding:7px 8px; }
  .io9200-votebox-label{ font-size:12px; }
  .io9200-vbtn{ padding:5px 10px; font-size:12px; }
  .io9200-rateme{ padding:5px 10px; font-size:12px; margin-left:auto; }
  .io9200-cv-hint{ width:100%; margin-left:0; margin-top:2px; }
}