/* 独立站 SEO · 产品案例
 * ------------------------------------------------------------------
 * 这一套样式只做一件事：让 SEO 的三页看起来跟工作台其它模块是同一套东西。
 * 因此：
 *   · 颜色一律取 .work 作用域里的变量（--ink/--sub/--line/--brand/--brand-soft），
 *     不写字面量十六进制 —— 写死颜色在换主题或调色板时会变成一块补丁；
 *   · 版式是「通栏分节 + 卡片栅格」（与 GEO 工作台同构），不做窄正文 + 侧栏；
 *   · 全局的 input/select/textarea 是 width:100%，所以工具条里的控件必须显式给宽度，
 *     否则每个筛选控件都会各占一整行。
 */

/* 页面容器：与 .gh-page 同宽同序，避免同一模块里两页左右边界不一致 */
.seo-page{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.seo-page>.card{margin:0}
.seo-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.seo-head .workspace-heading{margin:0}
.seo-head>.btn{white-space:nowrap;flex:none;height:38px}
.seo-page h2{margin:0 0 10px;font-size:16px}
.seo-page h3{margin:0;font-size:14px}
.seo-page p{line-height:1.7}

/* ---------- 弹窗（新建案例 / 编辑译文） ----------
 * 结构沿用工作台的三段式对话框（.dialog-heading / .dialog-body / .dialog-footer），
 * 但全局 .modal .box 自带 28px 内边距，三段式自己又各带内边距 —— 不清零就是
 * 双层留白，标题下的分隔线也悬在半空。这里清零并改成「固定壳 + 正文内部滚动」
 * （与 CRM 的 lead/followup 弹窗同构）；字段间距由正文统一 gap 撑开，
 * 各字段不再自己手写 margin-top，间距就不会一处 12px 一处 14px。 */
#seo-modal .box{padding:0;display:flex;flex-direction:column;overflow:hidden;width:640px;max-width:calc(100vw - 32px)}
/* 新建案例是一张完整表单（类目/标题/图片/信息表/正文），640 太挤 */
#seo-modal .box.seo-wide{width:860px}
#seo-modal .dialog-body{display:flex;flex-direction:column;gap:14px}
/* 弹窗里的行内组合（输入框 + 按钮）在窄弹窗里不允许被全局 width:100% 拉成两行 */
#seo-modal .seo-actions .btn{width:auto}

/* ---------- 顶部状态带（案例编辑：这一条案例现在处于什么状态、下一步做什么） ---------- */
.seo-hero{padding:18px 20px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(115deg,#f4f8ff,#fff)}
.seo-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.seo-hero h2{margin:0 0 6px;font-size:19px}
.seo-hero p{margin:0;color:var(--sub);font-size:12.5px}
.seo-hero-actions{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.seo-hero-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.seo-hero-facts>div{min-width:0}
.seo-hero-facts small{display:block;color:var(--sub);font-size:12px}
.seo-hero-facts strong{display:block;font-size:15px;margin-top:3px;overflow-wrap:anywhere}

/* ---------- 统计与工具条 ---------- */
.seo-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.seo-stat{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:16px 18px;box-shadow:var(--shadow)}
.seo-stat small{display:block;color:var(--sub);font-size:12px}
.seo-stat strong{display:block;font-size:26px;font-weight:650;margin-top:5px}
.seo-stat span{display:block;color:var(--sub);font-size:11.5px;margin-top:3px}
.seo-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.seo-toolbar label{margin:0;flex:none}
.seo-toolbar select{width:150px}
.seo-toolbar input{width:230px}
.seo-toolbar .seo-toolbar-end{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.seo-filter{background:var(--soft,#f8fafc);border:1px solid var(--line);border-radius:12px;padding:14px 16px}

/* ---------- 案例列表（表格：一屏能对比多条，卡片流做不到） ---------- */
.seo-table-wrap{overflow-x:auto}
.seo-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12.5px}
.seo-table th{background:var(--soft,#f8fafc);font-weight:600;color:var(--sub);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:12px}
.seo-table td{padding:14px;border-bottom:1px solid var(--line);vertical-align:middle;overflow-wrap:anywhere}
.seo-table tr:last-child td{border-bottom:0}
.seo-table tbody tr:hover td{background:#fbfcff}
.seo-table th:first-child,.seo-table td:first-child{width:26%}
.seo-table th:nth-child(2),.seo-table td:nth-child(2){width:12%}
.seo-table th:nth-child(3),.seo-table td:nth-child(3){width:19%}
.seo-table th:nth-child(4),.seo-table td:nth-child(4){width:12%}
.seo-table th:nth-child(5),.seo-table td:nth-child(5){width:11%}
.seo-table th:last-child,.seo-table td:last-child{width:118px;text-align:right}
.seo-title{border:0;background:none;color:var(--brand);font:inherit;font-weight:600;font-size:13.5px;text-align:left;cursor:pointer;padding:0;line-height:1.5}
.seo-title:hover{text-decoration:underline}
.seo-slug{display:block;color:var(--sub);font-size:11.5px;margin-top:5px;overflow-wrap:anywhere;font-family:ui-monospace,Menlo,Consolas,monospace}
.seo-row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.seo-cell-sub{display:block;color:var(--sub);font-size:11.5px;margin-top:4px}

/* ---------- 徽章 ---------- */
.seo-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:#f1f3f6;color:var(--sub);white-space:nowrap}
.seo-badge.ok{background:#e9f7f0;color:var(--green)}
.seo-badge.warn{background:#fdf5e6;color:var(--amber)}
.seo-badge.bad{background:#fdeeed;color:var(--red)}
.seo-badge.info{background:var(--brand-soft);color:var(--brand)}
.seo-badge.off{background:#f1f3f6;color:#93a0b0}

/* ---------- 案例编辑：字段栅格 ---------- */
.seo-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.seo-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 18px}
.seo-field{min-width:0}
.seo-field-wide{grid-column:1/-1}
/* 只作用于字段的标题行（直接子级）—— 之前写成后代选择器，把信息表里
   「工艺可多选」那排 .seo-option 标签也压成了 display:block，勾选框和文字
   叠成两行，再撞上 999px 圆角就成了一个个椭圆（2026-09-29 用户指出）。 */
.seo-field>label{display:block;margin-bottom:6px;font-size:12px;color:var(--sub)}
.seo-field-extra{margin:8px 0 0;color:var(--sub);font-size:11.5px;line-height:1.6}
.seo-body-input{min-height:220px;line-height:1.85}
.seo-spec-source{color:var(--sub);font-size:11.5px;margin-left:6px;font-weight:400}

/* 多选（工艺）：整块可点，选中态用 :has 高亮 */
/* 多选点选词：朴素复选框 + 文字（与工作台列表的复选观感一致）。
   之前是带边框的圆角胶囊：中文逐字可断行，两字词在胶囊里贴边换行，
   整排全被挤成小椭圆（2026-09-29 用户指出）。 */
.seo-options{display:flex;flex-wrap:wrap;gap:6px 16px}
.seo-option{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font-size:12.5px;color:var(--ink);cursor:pointer;margin:0;white-space:nowrap}
.seo-option:hover{color:var(--brand)}
.seo-option:has(input:checked){color:var(--brand);font-weight:600}
.seo-option input{width:14px;height:14px;margin:0;flex:none}

/* ---------- 图片 ---------- */
.seo-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin-top:14px}
.seo-image{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);min-width:0}
.seo-image img{display:block;width:100%;height:118px;object-fit:cover;background:#f5f7fa}
.seo-image-foot{padding:8px 10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.seo-image-foot span{color:var(--sub);font-size:11.5px}
/* 图片上传区直接用全局 .drop-zone（app.css），不再自造 .seo-drop */

/* ---------- 多语言译文 ---------- */
.seo-trs{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.seo-tr{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--panel);display:flex;flex-direction:column;gap:8px;min-width:0}
.seo-tr.ok{border-color:#cfe9dc;background:#fbfefc}
.seo-tr.warn{border-color:#f0e0b8;background:#fffdf6}
.seo-tr.bad{border-color:#f3d4d1;background:#fdf3f2}
.seo-tr.off{background:#fafbfc}
.seo-tr-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seo-tr-head h3{font-size:13.5px}
.seo-tr-head small{color:var(--sub);font-size:11.5px}
.seo-tr-title{margin:0;font-size:13px;font-weight:600;line-height:1.6}
.seo-tr-sum{margin:0;color:var(--sub);font-size:12px;line-height:1.7}
/* 语言卡上的 SEO 信息：与页面内容分开的一小块，视觉上明显弱于正文标题 */
.seo-tr-seo{border-top:1px dashed var(--line);padding-top:8px;display:flex;flex-direction:column;gap:3px}
.seo-tr-seo small{color:var(--sub);font-size:11px;font-weight:600}
.seo-tr-seo p{margin:0;color:var(--sub);font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.seo-tr-seo p:first-of-type{color:var(--ink);font-weight:550}
.seo-tr-meta{color:var(--sub);font-size:11.5px;margin:0}
.seo-tr-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}

/* ---------- 提示条 ---------- */
.seo-notice{margin:0;padding:9px 12px;border-radius:9px;font-size:12.5px;line-height:1.65;border:1px solid var(--line);background:#fafbfd;color:var(--sub)}
.seo-notice.warn{border-color:#f0e0b8;background:#fffdf6;color:#8a6412}
.seo-notice.bad{border-color:#f3d4d1;background:#fdf3f2;color:#a8403a}
.seo-notice.ok{border-color:#cfe9dc;background:#fbfefc;color:#1d7a4c}
.seo-notices{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.seo-details{font-size:12px;color:var(--sub)}
.seo-details summary{cursor:pointer;color:var(--brand);font-weight:600}
.seo-details p{margin:6px 0;color:var(--sub);font-size:12px;line-height:1.7;overflow-wrap:anywhere}

/* ---------- 推送 ---------- */
.seo-push-locales{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.seo-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- 站点设置 ----------
 * 只摆用户真正要填的东西（地址 + 令牌）。站点自报的能力面、实时查重状态
 * 是「读到的信息」，不是要设置的项 —— 混进设置页只会把要填的两个框淹没
 * （用户 2026-09-29 明确要求去掉；这些信息在用到的地方本来就有：候选表、查重结论）。 */
.seo-settings{max-width:720px}
.seo-site-view-out{margin-top:10px}
.seo-busy{color:var(--sub);font-size:12px;padding:20px 4px}

/* ---------- URL 标识：候选列表 ----------
 * 一次给几个候选让用户挑，所以每条都要能一眼看出「能不能用、为什么不能用」：
 *   可用的给按钮（点了就换上），撞车的只给原因不给按钮 —— 不能点的东西就不要长得像能点。
 * 选中的那条用左侧色条标出来，避免用户点完不知道当前用的是哪个。 */
.seo-cands{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.seo-cand-head{margin:0;padding:11px 14px;background:var(--soft,#f8fafc);border-bottom:1px solid var(--line);color:var(--sub);font-size:11.5px;line-height:1.7}
.seo-cand{padding:12px 14px;border-bottom:1px solid var(--line);border-left:3px solid transparent;display:flex;flex-direction:column;gap:7px;min-width:0}
.seo-cand:last-child{border-bottom:0}
.seo-cand.ok{border-left-color:var(--green)}
.seo-cand.used{border-left-color:var(--brand);background:var(--brand-soft)}
.seo-cand.bad{border-left-color:#e6b3ae;background:#fdfaf9}
.seo-cand-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seo-cand-slug{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere;min-width:0;flex:1}
.seo-cand.bad .seo-cand-slug{color:var(--sub);text-decoration:line-through}
.seo-cand-tag{flex:none;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;background:#f1f3f6;color:var(--sub);white-space:nowrap}
.seo-cand.ok .seo-cand-tag{background:#e9f7f0;color:var(--green)}
.seo-cand.used .seo-cand-tag{background:#e4edff;color:var(--brand)}
.seo-cand.bad .seo-cand-tag{background:#fdeeed;color:var(--red)}
.seo-cand-top .btn{flex:none;padding:5px 12px;font-size:12px}
.seo-cand-why{margin:0;color:var(--sub);font-size:11.5px;line-height:1.65;overflow-wrap:anywhere}
.seo-cand-why.bad{color:var(--red)}
/* 候选行里放按钮会被全局 width:100% 拉满整行，所以显式收窄 */
.seo-cands .btn{width:auto}

@media(max-width:1000px){
 .seo-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .seo-grid-2{grid-template-columns:1fr}
 .seo-head{flex-direction:column;align-items:stretch}
 .seo-head>.btn{width:100%}
}
@media(max-width:760px){
 .seo-table{min-width:720px}
 .seo-toolbar select,.seo-toolbar input{width:100%}
 .seo-toolbar .seo-toolbar-end{width:100%;margin-left:0}
 .seo-hero-actions{width:100%}
}

/* 站点设置 · 案例信息选项（字段名固定，只维护点选词；tag 样式用工作台通用的 tag-list/tag-item） */
.seo-opt-row{margin-top:16px}
.seo-opt-row>label{display:block;margin-bottom:7px;font-size:12px;color:var(--sub)}
.seo-opt-row .tag-list{margin-bottom:9px}
.seo-opt-empty{font-size:11.5px;color:#a5afbd}
.seo-opt-add{flex-wrap:nowrap;gap:8px}
.seo-opt-add input{flex:1;min-width:0}
.seo-opt-add .btn{white-space:nowrap}