/* ============================================================
 * AI实操攻略（io_guide）  v2 — 全面重做
 *  色系：低饱和柔和紫灰（不用蓝色）
 *  圆角：全部跟随主题 --io-radius（主题设置>全局功能>颜色布局>内容圆角）
 *  1) 首页卡片  2) 汇总/分类列表页  3) 详情页
 * ============================================================ */

/* ---------- 0) CSS 变量（可被内联 --gc 覆盖） ---------- */
:root {
  --gc-primary: #7873c2;    /* 默认卡片主色（低饱和紫） */
  --gc-primary-2: #958ccf;  /* 主色浅 */
  --gc-bg: #f6f5fb;         /* 淡紫底 */
  --gc-bg-soft: #edeaf6;    /* 更深一点 */
  --gc-text: #2d2a3e;       /* 主文字 */
  --gc-muted: #7a7590;      /* 次文字 */
  --gc-border: #e2deec;     /* 边框 */
  --gc-tip-bg: #f0eef8;     /* 提示背景 */
  --gc-tip-border: #d8d4e8; /* 提示边框 */
  --gc-goal-bg: #f4f2fa;    /* 目标背景 */
  --gc-goal-accent: #7873c2; /* 目标左边框 */
}

/* ---------- 1) 首页卡片 ---------- */
.io9200-guides{ margin:18px 0; }
/* 整个版块背景框（和场景卡一样） */
.io9200-guides-wrap{
  background:#fff; border:1px solid var(--io-border, var(--gc-border));
  border-radius:var(--io-radius, 12px); padding:24px 26px;
  box-shadow:0 2px 8px rgba(45,42,62,.03);
}
/* 版块头部：两行结构 —— 第一行 标题(左)+查看更多(右)；第二行 副标题 */
.io9200-guides-head{ margin-bottom:18px; }
.io9200-guides-head-row{
  display:flex; align-items:center; justify-content:space-between;
}
.io9200-guides-head h2{ font-size:20px; font-weight:800; margin:0 0 6px; color:var(--gc-text); display:flex; align-items:center; gap:8px; }
.io9200-guides-head h2 i{ color:var(--gc-primary); }
.io9200-guides-head p{ margin:0; font-size:13.5px; color:var(--gc-muted); }
/* 版块标题右侧"查看更多→"（小字灰色，同场景卡简介字号） */
.io9200-head-more{
  font-size:12px; color:#9ca3af; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:2px; transition:color .15s; flex:none;
}
.io9200-head-more:hover{ color:var(--gc-primary); }
.io9200-guides-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr); /* 一行3个，比场景卡宽 */
  gap:16px;
}
.io9200-guide-card{
  display:flex; flex-direction:column; padding:16px 16px 3px 16px; background:#fff;
  border:1px solid var(--io-border, var(--gc-border));
  border-radius:var(--io-radius, 12px);
  text-decoration:none; color:inherit; transition:.2s;
  box-shadow:0 2px 8px rgba(45,42,62,.04);
  position:relative; overflow:hidden;
}
.io9200-guide-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--gc, var(--gc-primary));
}
.io9200-guide-card:hover{ transform:translateY(-3px); box-shadow:0 8px 24px rgba(45,42,62,.1); border-color:color-mix(in srgb, var(--gc, var(--gc-primary)) 35%, #fff); }

/* 顶部横排：左图标 + 右标题/简介 */
.io9200-guide-top{
  display:flex; align-items:flex-start; gap:14px; margin-bottom:12px;
}
.io9200-guide-cover{
  width:56px; height:56px; flex:none; border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg, var(--gc, var(--gc-primary)), var(--gc-primary-2, color-mix(in srgb, var(--gc, var(--gc-primary)) 70%, #fff)));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px;
  box-shadow:0 4px 12px rgba(120,115,194,.18);
}
.io9200-guide-cover img{ width:100%; height:100%; object-fit:cover; }

/* 右侧信息：标题+简介两行 */
.io9200-guide-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; padding-top:2px; }
.io9200-guide-title{ font-size:15px; font-weight:800; line-height:1.35; color:var(--gc-text); }
.io9200-guide-sub{
  font-size:12px; color:var(--gc-muted); line-height:1.55; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.io9200-guide-sub1{
  font-size:16px; margin-top: 5px;color:var(--gc-muted); line-height:1.55; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* 底部行：步骤数 | 工具数（上边框浅灰线，文字垂直居中，适当内边距） */
.io9200-guide-meta{
  display:flex; justify-content:center; align-items:center;
  gap:20px; /* 左右文字之间有间隔 */
  margin-top:auto; padding:3px 0px 0px; border-top:1px solid #ecebf2;
  font-size:12px; color:var(--gc-muted);
  min-height:34px;
}
.io9200-guide-meta i{ margin-right:5px; font-size:11px; }
.io9200-guide-meta-steps{ display:flex; align-items:center; }
.io9200-guide-meta-tools{ display:flex; align-items:center; }

/* ---------- 2) 汇总 / 分类列表页 ---------- */
.io9200-guide-archive{ max-width:1180px; margin-left:auto; margin-right:auto; }
.io9200-guide-list-hero{
  display:flex; align-items:center; gap:16px; padding:22px 24px; margin-bottom:16px;
  background:#fff; border:1px solid var(--io-border, var(--gc-border)); border-radius:var(--io-radius, 12px);
  box-shadow:0 2px 8px rgba(45,42,62,.04);
}
.io9200-guide-list-ico{
  width:56px; height:56px; flex:none; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg, var(--gc-primary), var(--gc-primary-2));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px;
  box-shadow:0 6px 16px rgba(120,115,194,.22);
}
.io9200-guide-list-body{ flex:1; min-width:0; }
.io9200-guide-list-body h1{ font-size:22px; font-weight:800; margin:0 0 4px; color:var(--gc-text); }
.io9200-guide-list-body p{ margin:0; font-size:13.5px; color:var(--gc-muted); line-height:1.55; }
.io9200-guide-list-count{ flex:none; font-size:13px; color:var(--gc-muted); white-space:nowrap; }
.io9200-guide-list-count b{ color:var(--gc-primary); font-size:18px; font-weight:800; }

/* 筛选条 */
.io9200-guide-filterbar{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px;
}
.io9200-guide-filter{
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px; cursor:pointer;
  background:#fff; border:1px solid var(--io-border, var(--gc-border)); border-radius:var(--io-radius, 12px); font-size:13px;
  color:var(--gc-text,#333); text-decoration:none; transition:.18s;
}
.io9200-guide-filter:hover{ border-color:var(--gc-primary); color:var(--gc-primary); }
.io9200-guide-filter.is-active{
  background:color-mix(in srgb, var(--gc-primary) 10%, #fff);
  border-color:var(--gc-primary); color:color-mix(in srgb, var(--gc-primary) 80%, #333); font-weight:700;
}
.io9200-guide-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--c1, var(--gc-primary)); flex:none;
}

/* 统一列表卡片（首页/汇总/分类共用样式）—— 横排：左图标+右标题简介 */
.io9200-guide-list-card{
  display:flex; flex-direction:column; padding:16px 0px 3px 16px; background:#fff;
  border:1px solid var(--io-border, var(--gc-border));
  border-radius:var(--io-radius, 12px); text-decoration:none;
  color:inherit; transition:.2s; box-shadow:0 2px 8px rgba(45,42,62,.04);
  position:relative; overflow:hidden;
}
.io9200-guide-list-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--c1, var(--gc-primary));
}
.io9200-guide-list-card:hover{ transform:translateY(-4px); box-shadow:0 10px 28px rgba(45,42,62,.1); border-color:color-mix(in srgb, var(--c1, var(--gc-primary)) 40%, #fff); }

/* 横排：左图标 + 右标题/简介 */
.io9200-guide-list-top{
  display:flex; align-items:flex-start; gap:14px; margin-bottom:10px;
}
.io9200-guide-list-cover{
  width:56px; height:56px; flex:none; border-radius:14px; overflow:hidden;
  color:#fff; font-size:24px;
  background:linear-gradient(135deg, var(--c1, var(--gc-primary)), var(--c1, var(--gc-primary)));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(120,115,194,.18);
}
.io9200-guide-list-cover img.io9200-guide-cover-img{ width:100%; height:100%; object-fit:cover; }
.io9200-guide-list-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; padding-top:2px; }
.io9200-guide-list-title{ font-size:18px; font-weight:700; line-height:1.35; color:var(--gc-text); }
.io9200-guide-list-featured{
  font-size:11px; font-weight:700; color:#fff; background:var(--c1, var(--gc-primary));
  padding:1px 8px; border-radius:999px;
}
.io9200-guide-list-intro{
  font-size:13px; color:var(--gc-muted); line-height:1.55; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* 底部行：居中显示，文字与图标有间隔，垂直居中 */
.io9200-guide-list-meta{
  display:flex; justify-content:center; align-items:center;
  gap:20px;
  margin-top:auto; padding:3px 0px 0px; border-top:1px solid #ecebf2;
  font-size:12px; color:var(--gc-muted);
  min-height:34px;
}
.io9200-guide-list-meta i{ margin-right:5px; font-size:11px; }
.io9200-guide-list-arrow{ display:none; } /* 列表页不需要箭头 */

/* 汇总/分类页底部导航（返回首页/全部攻略）—— 上方留间隔 */
.io9200-guide-nav{ margin:20px 0 4px; display:flex; gap:10px; flex-wrap:wrap; padding-top:18px;  }
.io9200-guide-pager{
  display:flex; justify-content:center; gap:6px; margin:20px 0; flex-wrap:wrap;
}
.io9200-guide-pager a, .io9200-guide-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, var(--gc-border)); background:#fff;
  color:var(--gc-text); text-decoration:none; font-size:14px; transition:.15s;
}
.io9200-guide-pager a:hover{ border-color:var(--gc-primary); color:var(--gc-primary); }
.io9200-guide-pager .current{ background:var(--gc-primary); color:#fff; border-color:var(--gc-primary); font-weight:700; }

/* 汇总页统一网格：一行3个 */
.io9200-guide-unified-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}

/* ---------- 3) 详情页 ---------- */
.io9200-guide-detail{ max-width:1100px; margin-left:auto; margin-right:auto; }
.io9200-guide-layout{ display:flex; gap:28px; align-items:flex-start; }

/* 左侧 sticky 导航 */
.io9200-guide-sidebar{
  position:sticky; top:70px; /* 预留原主题导航栏高度（移动端由媒体查询覆盖） */
  flex:none; width:200px; align-self:flex-start;
  background:#fff; border:1px solid var(--io-border, var(--gc-border));
  border-radius:var(--io-radius, 12px);
  padding:18px 16px; box-shadow:0 2px 8px rgba(45,42,62,.04);
}
.io9200-guide-sidebar-logo{ font-size:15px; font-weight:800; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--io-border, var(--gc-border)); color:var(--gc-text); }
.io9200-guide-toc{ list-style:none; margin:20px 0px 0px 0px; padding:0; display:flex; flex-direction:column; gap:3px; }
.io9200-guide-toc a{
  display:block; padding:9px 12px; border-radius:10px; font-size:13.5px; color:var(--gc-muted);
  text-decoration:none; transition:.15s; line-height:1.4;
}
.io9200-guide-toc a:hover{ background:var(--gc-bg); color:var(--gc-primary); }
.io9200-guide-toc a.is-active{ background:color-mix(in srgb, var(--gc-primary) 10%, #fff); color:var(--gc-primary); font-weight:700; }
.io9200-guide-sidebar-footer{ margin-top:14px; padding-top:12px; border-top:1px solid var(--io-border, var(--gc-border)); }
.io9200-guide-sidebar-footer a{ display:block; font-size:13px; color:var(--gc-primary); text-decoration:none; font-weight:400; }

/* 右侧主内容 */
.io9200-guide-main{ flex:1; min-width:0; }

/* 头部：标题放大 + 简介 */
.io9200-guide-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.io9200-guide-header-left h1{ font-size:28px; font-weight:800; margin:0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--gc-text); letter-spacing:-.3px; }
.io9200-guide-step-badge{
  font-size:13px; font-weight:600; color:var(--gc-primary);
  background:color-mix(in srgb, var(--gc-primary) 10%, #fff);
  padding:3px 14px; border-radius:999px; white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--gc-primary) 25%, #fff);
}

/* 浏览量 / 评论量：扁平化图标重新设计 */
.io9200-guide-header-stats{
  flex:none; display:flex; gap:14px; font-size:13px; color:var(--gc-muted);
  background:#fff; border:1px solid var(--io-border, var(--gc-border));
  border-radius:999px; padding:8px 18px; box-shadow:0 2px 6px rgba(45,42,62,.03);
}
.io9200-guide-header-stats > span{ display:inline-flex; align-items:center; gap:5px; }
.io9200-guide-header-stats .num{ font-weight:700; color:var(--gc-text); }
/* 扁平化 SVG 图标替代 emoji */
.io9200-guide-stats-views::before{ content:''; display:inline-block; width:15px; height:15px; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%237a7590" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>') center/contain no-repeat; vertical-align:-2px; margin-right:2px; }
.io9200-guide-stats-cmts::before{ content:''; display:inline-block; width:15px; height:15px; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%237a7590" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>') center/contain no-repeat; vertical-align:-2px; margin-right:2px; }

/* 进度条（sticky，透明背景） */
.io9200-guide-progress{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px;
  padding:10px 0; margin-bottom:18px;
  /* 透明背景 */
  background:transparent;
  border-radius:0 0 12px 12px;
}
.io9200-guide-progress-track{ flex:1; height:5px; border-radius:999px; background:var(--gc-bg-soft); overflow:hidden; }
.io9200-guide-progress-track .bar{ height:100%; width:0; background:linear-gradient(90deg, var(--gc-primary), var(--gc-primary-2)); border-radius:999px; transition:width .12s linear; }
.io9200-guide-step-counter{ font-size:13px; font-weight:600; color:var(--gc-primary); background:color-mix(in srgb, var(--gc-primary) 10%, #fff); padding:4px 14px; border-radius:999px; white-space:nowrap; }

/* 步骤卡：独立背景框 */
.io9200-guide-step{
  background:#fff; border:1px solid var(--io-border, var(--gc-border));
  border-radius:var(--io-radius, 12px); padding:24px 26px; margin-bottom:20px;
  box-shadow:0 2px 8px rgba(45,42,62,.03); scroll-margin-top:72px;
  transition:box-shadow .2s, border-color .2s;
}
.io9200-guide-step:hover{ border-color:color-mix(in srgb, var(--gc-primary) 30%, #fff); }
.io9200-guide-step-header{ display:flex; align-items:center; gap:14px; margin-bottom:14px;margin-top:5px; }
/* 步骤数字：更大 */
.io9200-guide-step-number{
  width:38px; height:38px; flex:none; border-radius:50%; color:#fff; font-size:16px; font-weight:800;
  background:linear-gradient(135deg, var(--gc-primary), var(--gc-primary-2));
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(120,115,194,.25);
}
/* 步骤标题：更大 */
.io9200-guide-step-title{ font-size:21px; font-weight:800; color:var(--gc-text); }

/* 目标行：独立背景框 */
.io9200-guide-step-goal{
  font-size:15px; color:var(--gc-text); margin-bottom:14px; line-height:1.65;
  background:var(--gc-goal-bg); padding:14px 18px; border-radius:12px;
  border-left:4px solid var(--gc-goal-accent);
}
.io9200-guide-step-goal strong{ color:var(--gc-text); }

/* 操作说明：降低行高 */
.io9200-guide-step-textbox{
  background:var(--gc-bg); border:1px solid var(--io-border, var(--gc-border)); border-radius:12px;
  padding:18px 22px; font-size:14px; line-height:1.6; color:var(--gc-text); margin-bottom:14px;
}
.io9200-guide-step-textbox .content p{ margin:0 0 6px; }
.io9200-guide-step-textbox .content p:last-child{ margin-bottom:0; }

/* 推荐工具区域 */
.io9200-guide-tools{ margin-bottom:14px; }
.io9200-guide-tools .label{ font-size:16px; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:6px; color:var(--gc-text); flex-wrap:wrap; }

/* 行内提示词按钮（紧挨"推荐工具"文字右侧） */
.io9200-guide-prompt-btn-inline{
  display:inline-flex; align-items:center; gap:3px; cursor:pointer;
  padding:3px 10px; border:1px solid color-mix(in srgb, var(--gc-primary) 35%, #fff);
  color:var(--gc-primary); background:transparent;
  border-radius:999px; font-size:12px;  transition:.15s; margin-left:4px;
  vertical-align:middle; line-height:1.8;
}
.io9200-guide-prompt-btn-inline:hover{ background:color-mix(in srgb, var(--gc-primary) 8%, #fff); }
.io9200-guide-prompt-btn-inline::before{ content:'✨'; font-size:11px; }
.io9200-guide-tools-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

/* 工具卡片：div 容器（非 a 标签）—— 左LOGO + 右名称简介 + 底部行(免费标签|直达图标) */
.io9200-guide-tool-card{
  display:flex; flex-direction:column; padding:0; background:#fff;
  border:1px solid var(--io-border, var(--gc-border)); border-radius:var(--io-radius, 12px);
  overflow:hidden; box-shadow:0 2px 6px rgba(45,42,62,.03);
  transition:.2s;
}
.io9200-guide-tool-card:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(45,42,62,.08); border-color:color-mix(in srgb, var(--gc-primary) 30%, #fff); }
/* 工具卡主体：可点击区域（→详情/外部链接） */
.io9200-guide-tool-main{ display:flex; gap:12px; padding:14px 14px 10px; align-items:flex-start; text-decoration:none; color:inherit; transition:background .15s; }
.io9200-guide-tool-main:hover{ background:color-mix(in srgb, var(--gc-primary) 4%, #fff); }
.io9200-guide-tool-logo{
  width:48px; height:48px; flex:none; border-radius:12px; overflow:hidden;
  background:var(--gc-bg-soft); display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--gc-muted); border:1px solid var(--io-border, var(--gc-border));
  transition:background .2s;
}
/* LOGO悬停特效 */
.io9200-guide-tool-card:hover .io9200-guide-tool-logo{ background:color-mix(in srgb, var(--gc-primary) 12%, #fff); border-color:color-mix(in srgb, var(--gc-primary) 30%, #fff); }
.io9200-guide-tool-logo img{ width:100%; height:100%; object-fit:cover; border-radius:10px; }
.io9200-guide-tool-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.io9200-guide-tool-name{ font-size:14px; font-weight:700; color:var(--gc-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.io9200-guide-tool-desc{ font-size:12px; color:var(--gc-muted); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* 工具卡底部行：上边框浅灰线 | 左免费标签 右直达图标(独立可点击) */
.io9200-guide-tool-ft{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 14px; border-top:1px solid #ecebf2; font-size:12px;
}
.io9200-guide-tool-tag{ color:var(--gc-primary); font-weight:400; background:color-mix(in srgb, var(--gc-primary) 10%, #fff); padding:2px 10px; border-radius:999px; white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.io9200-guide-tool-link{
  color:var(--gc-muted); font-size:16px; transition:color .15s; line-height:1;
  display:inline-flex; align-items:center; text-decoration:none; padding:2px 6px;
  border-radius:6px;
}
.io9200-guide-tool-link:hover{ color:var(--gc-primary); background:color-mix(in srgb, var(--gc-primary) 8%, #fff); }

/* AI指令按钮：放到推荐工具后面，缩小 */
.io9200-guide-prompt-btn{
  margin-top:8px; display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  padding:5px 12px; border:1px solid color-mix(in srgb, var(--gc-primary) 35%, #fff);
  color:var(--gc-primary); background:transparent;
  border-radius:999px; font-size:12px; font-weight:600; transition:.15s;
}
.io9200-guide-prompt-btn:hover{ background:color-mix(in srgb, var(--gc-primary) 8%, #fff); }
.io9200-guide-prompt-btn::before{ content:'✨'; font-size:12px; }

/* 提示行：灯泡垂直居中，低饱和黄色系，文字可换行，字号同操作说明 */
.io9200-guide-step-tip{
  display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#8a7432;
  background:#fefce8; border:1px solid #f0e6a0; border-radius:12px;
  padding:12px 14px; line-height:1.6;
  word-wrap:break-word; overflow-wrap:break-word; white-space:normal;
}
.io9200-guide-step-tip span:first-child{ font-size:15px; flex:none; display:flex; align-items:center; margin-top:1px; }
.io9200-guide-step-tip span:last-child{ font-size:14px; }

/* ========== 区块版块（相关资源 / 更多攻略 / 评论）：带背景框 ========== */
.io9200-guide-section{
  margin-top:28px; background:#fff; border:1px solid var(--io-border, var(--gc-border));
  border-radius:var(--io-radius, 12px); padding:24px 26px;
  box-shadow:0 2px 8px rgba(45,42,62,.03);
}
.io9200-guide-section h2{
  font-size:20px; font-weight:800; margin:0 0 18px; color:var(--gc-text);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
/* 区块标题右侧按钮 */
.io9200-guide-section-more{
  margin-left:auto; font-size:14px; font-weight:400; color:var(--gc-primary);
  text-decoration:none; 
  padding:4px 14px; border-radius:999px; transition:.15s; white-space:nowrap;
}


/* 攻略详情页评论：隐藏邮箱字段（后端已关闭必填，自动填充匿名邮箱）；昵称框圆角跟随主题 */
.io9200-guide-section #comment-author-info > .col-12:last-child{ display:none !important; }
.io9200-guide-section #author{
  background:var(--gc-bg); border:1px solid var(--io-border, var(--gc-border));
  border-radius:var(--io-radius, 12px);
}
.io9200-guide-section #comment{ border-radius:var(--io-radius, 12px); }

/* 评论按钮行：取消 + 发表评论 同一行 */
.io9200-cmt-btn-row{ display:flex; align-items:center; gap:10px; }
.io9200-cmt-cancel-btn{
  padding:8px 18px; border:1px solid var(--io-border, var(--gc-border));
  background:#fff; color:var(--gc-muted); font-size:13px; border-radius:var(--io-radius, 12px);
  cursor:pointer; transition:.15s; text-decoration:none; display:inline-block;
}
.io9200-cmt-cancel-btn:hover{ color:var(--gc-text); border-color:var(--gc-text); }

/* 评论标题右侧条数徽章 */
.io9200-guide-cmt-count{
  margin-left:auto; font-size:13px; font-weight:400; color:var(--gc-muted);
  display:inline-flex; align-items:center; gap:4px;
}
.io9200-guide-cmt-count i{ font-size:14px; }

/* 相关资源：场景卡详情页样式 —— 上方正方形图片 + 名称 + 简介 + 底部行(浏览量|查看资源) */
.io9200-guide-resource-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px;
}
.io9200-guide-resource-card{
  display:flex; flex-direction:column; padding:14px; background:#fff;
  border:1px solid var(--io-border, var(--gc-border));
  border-radius:var(--io-radius, 12px); text-decoration:none; color:inherit;
  transition:.18s; box-shadow:0 2px 6px rgba(45,42,62,.03); overflow:hidden;
}
.io9200-guide-resource-card:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(45,42,62,.08); border-color:color-mix(in srgb, var(--gc-primary) 30%, #fff); }
/* 封面：16:9 满宽贴边（左/上/右无内边距），参考 AI资源中心汇总页卡片封面 .io9-res-cover */
.io9200-guide-resource-card .res-cover{
  width:calc(100% + 28px);            /* 内容宽 + 左右各 14px padding */
  aspect-ratio:16/9; overflow:hidden;
  margin:-14px -14px 10px;             /* 负 margin 拉回贴边（父级 overflow:hidden 会裁剪，必须配合 calc 宽度） */
  background:var(--gc-bg-soft); display:flex; align-items:center; justify-content:center;
}
.io9200-guide-resource-card .res-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 兼容不支持 aspect-ratio 的老浏览器 */
@supports not (aspect-ratio:16/9){
  .io9200-guide-resource-card .res-cover{ width:calc(100% + 28px); height:0; padding-bottom:56.25%; position:relative; }
  .io9200-guide-resource-card .res-cover img{ position:absolute; inset:0; }
}
.io9200-guide-resource-card .res-noimg{ font-size:36px; opacity:.4; }
/* 资源名称 */
.io9200-guide-resource-card .res-name{ font-size:15px; font-weight:700; color:var(--gc-text); line-height:1.35; margin-bottom:4px; }
/* 简介截断 */
.io9200-guide-resource-card .res-desc{ font-size:12.5px; color:var(--gc-muted); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:8px; flex:1; }
/* 底部行：左浏览量 右"查看资源"按钮 */
.io9200-guide-resource-card .res-meta-row{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; border-top:1px solid #ecebf2; font-size:12px; color:var(--gc-muted);
}
.io9200-guide-resource-card .res-meta-row .res-views{ display:flex; align-items:center; gap:4px; }
.io9200-guide-resource-card .res-meta-row .res-link-btn{
  font-size:12px; font-weight:600; color:var(--gc-primary);
  background:color-mix(in srgb, var(--gc-primary) 10%, #fff);
  padding:3px 12px; border-radius:999px; transition:.15s;
}
.io9200-guide-resource-card:hover .res-link-btn{ background:var(--gc-primary); color:#fff; }

/* ========== 查看工具使用图示（折叠版块，复用 .io9200-guide-section 背景框） ========== */
.io9200-guide-demo{ /* 继承 .io9200-guide-section 的背景框，此处只控制内部 */ }
.io9200-guide-demo-body{
  display:block; padding-top:0; border-top:none;
  font-size:14.5px; line-height:1.7; color:var(--gc-text);
}
.io9200-guide-demo-body img{ max-width:100%; height:auto; border-radius:8px; }

/* ========== 步骤图示（查看本步骤图示 · 折叠 / 选项卡 / 滑动 / 灯箱） ========== */
.io9200-guide-shot-toggle-wrapper{
  margin-top:14px; border-top:1px dashed var(--io-border, var(--gc-border)); padding-top:14px;
}
.io9200-guide-shot-toggle{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--gc-bg); border:1px solid var(--io-border, var(--gc-border));
  border-radius:999px; padding:6px 16px 6px 14px; font-size:13px; font-weight:500; color:var(--gc-text);
  transition:.18s;
}
.io9200-guide-shot-toggle:hover{ background:color-mix(in srgb, var(--gc-primary) 8%, #fff); border-color:color-mix(in srgb, var(--gc-primary) 35%, #fff); }
.io9200-guide-shot-toggle i.fa-images{ color:var(--gc-primary); }
.io9200-guide-shot-count{
  background:color-mix(in srgb, var(--gc-primary) 12%, #fff);
  border-radius:999px; padding:0 10px; font-size:11px; font-weight:600; color:var(--gc-primary);
}
.io9200-guide-shot-arrow{ font-size:11px; color:var(--gc-muted); transition:transform .25s; }

.io9200-guide-shot-wrapper{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s ease, opacity .3s ease, margin-top .3s ease; margin-top:0;
}
.io9200-guide-shot-wrapper.open{ max-height:640px; opacity:1; margin-top:12px; }

.io9200-guide-shot-display{
  background:var(--gc-bg-soft); border:1px solid var(--io-border, var(--gc-border));
  border-radius:12px; padding:10px; overflow:hidden;
}
.io9200-guide-shot-imgbox{
  position:relative; width:100%; background:#fff; border-radius:10px; overflow:hidden;
  user-select:none; -webkit-user-select:none; touch-action:pan-y;
}
.io9200-guide-shot-img{
  width:100%; height:300px; object-fit:contain; background:#f8faff; display:block;
  cursor:pointer; transition:transform .2s ease;
}
.io9200-guide-shot-img:active{ transform:scale(.99); }
.io9200-guide-shot-zoom{
  position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%;
  background:rgba(45,42,62,.5); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer; transition:.15s;
}
.io9200-guide-shot-zoom:hover{ background:rgba(45,42,62,.78); }

.io9200-guide-shot-tabs{
  display:flex; justify-content:center; gap:8px; flex-wrap:wrap; padding:10px 0 4px; background:transparent;
}
.io9200-guide-shot-tab{
  background:#fff; border:1px solid var(--io-border, var(--gc-border)); border-radius:999px;
  padding:4px 14px; font-size:12px; font-weight:500; color:var(--gc-muted); cursor:pointer; transition:.18s;
}
.io9200-guide-shot-tab:hover{ border-color:color-mix(in srgb, var(--gc-primary) 40%, #fff); }
.io9200-guide-shot-tab.active{ background:var(--gc-primary); border-color:var(--gc-primary); color:#fff; font-weight:600; }

/* 步骤图示灯箱 */
.io9200-guide-lightbox{
  display:none; position:fixed; inset:0; z-index:99999; background:rgba(20,18,30,.88);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:30px;
}
.io9200-guide-lightbox.io-open{ display:flex; }
.io9200-guide-lightbox-close{
  position:absolute; top:22px; right:30px; font-size:38px; color:#fff; cursor:pointer; line-height:1;
  opacity:.8; transition:transform .2s; z-index:2;
}
.io9200-guide-lightbox-close:hover{ transform:rotate(90deg); opacity:1; }
.io9200-guide-lightbox-img{
  max-width:90%; max-height:90%; object-fit:contain; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5); background:#fff; padding:4px;
}

/* 更多攻略列表 */
.io9200-guide-guide-list{ display:flex; flex-direction:column; gap:12px; }
.io9200-guide-guide-item{
  display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--gc-bg);
  border:1px solid var(--io-border, var(--gc-border)); border-radius:var(--io-radius, 12px);
  text-decoration:none; color:inherit; transition:.18s;
}
.io9200-guide-guide-item:hover{ background:color-mix(in srgb, var(--gc-primary) 6%, #fff); border-color:color-mix(in srgb, var(--gc-primary) 25%, #fff); }
.io9200-guide-guide-item .g-icon{
  width:46px; height:46px; flex:none; border-radius:12px; overflow:hidden; font-size:22px; color:#fff;
  background:linear-gradient(135deg, var(--gc-primary), var(--gc-primary-2));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 4px 12px rgba(120,115,194,.2);
}
.io9200-guide-guide-item .g-icon img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
.io9200-guide-guide-item .g-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.io9200-guide-guide-item .g-title{ font-size:15px; font-weight:700; color:var(--gc-text); }
.io9200-guide-guide-item .g-desc{ font-size:12.5px; color:var(--gc-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.io9200-guide-guide-item .g-arrow{ color:var(--gc-muted); font-size:18px; flex:none; }

/* ========== AI 指令提示词弹窗 ========== */
.io9200-guide-prompt-modal{
  position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  background:rgba(45,42,62,.45); padding:20px;
}
.io9200-guide-prompt-modal.io-open{ display:flex; }
.io9200-guide-prompt-box{
  width:min(560px,100%); background:#fff; border-radius:16px; padding:20px; box-shadow:0 20px 60px rgba(45,42,62,.25);
}
.io9200-guide-prompt-head{ display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:800; margin-bottom:12px; color:var(--gc-text); }
.io9200-guide-prompt-head button{ border:none; background:var(--gc-bg); border-radius:8px; padding:5px 14px; cursor:pointer; font-size:13px; color:var(--gc-muted); transition:.15s; }
.io9200-guide-prompt-head button:hover{ background:var(--gc-bg-soft); }
.io9200-guide-prompt-box textarea{ width:100%; min-height:160px; resize:vertical; border:1px solid var(--io-border, var(--gc-border)); border-radius:12px; padding:14px; font-size:13.5px; line-height:1.65; font-family:inherit; box-sizing:border-box; color:var(--gc-text); background:#fafbff; }
.io9200-guide-prompt-copy{ margin-top:14px; width:100%; padding:11px; border:none; border-radius:10px; background:var(--gc-primary); color:#fff; font-size:14px; font-weight:700; cursor:pointer; transition:opacity .15s; }
.io9200-guide-prompt-copy:hover{ opacity:.90; }

/* ========== 响应式 ========== */
@media (max-width:1200px){
  .io9200-guides-grid{ grid-template-columns:repeat(2, 1fr); } /* 平板2列 */
  .io9200-guide-unified-grid{ grid-template-columns:repeat(2, 1fr); }
  .io9200-guide-tools-row{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:992px){
  .io9200-guide-layout{ flex-direction:column; gap:14px; }
  .io9200-guide-sidebar{ display:none; }
  .io9200-guide-header{ flex-direction:column; }
  .io9200-guide-header-stats{ align-self:flex-start; flex-wrap:wrap; }
  .io9200-guide-resource-grid{ grid-template-columns:repeat(2,1fr); }
  .io9200-guide-tool-card{ width:100%; }
  .io9200-guide-tools-row{ grid-template-columns:repeat(2,1fr); gap:10px; }
  /* 移动端进度条：top 补偿导航栏 + 额外15px防遮挡 */
  .io9200-guide-progress{ top:61px; padding:8px 0 6px; border-radius:0 0 10px 10px; }
  /* 移动端侧栏补偿已隐藏（display:none），无需额外处理 */
  .io9200-guides-grid{ grid-template-columns:1fr; } /* 手机单列 */
  .io9200-guide-unified-grid{ grid-template-columns:1fr; }
  .io9200-guide-header-left h1{ font-size:22px; }
  .io9200-guide-step-title{ font-size:18px; }
  .io9200-guide-step-number{ width:34px; height:34px; font-size:14px; }
  .io9200-guide-section{ padding:18px 16px; border-radius:12px; }
  .io9200-guide-step{ padding:18px 16px; scroll-margin-top:64px; }
  .io9200-guide-shot-img{ height:220px; }
}

@media (max-width:480px){
  .io9200-guide-shot-img{ height:170px; }
  .io9200-guide-shot-wrapper.open{ max-height:520px; }
  .io9200-guide-shot-toggle{ font-size:12px; padding:4px 14px 4px 10px; }
}