/* ============================================================
   思想者AI · GEO 监测工作台 样式（token 驱动）
   设计规范见 DESIGN.md ｜ 品牌紫 #A83DD6 来自官方品牌稿
   两种皮肤：默认=管理端（工具感） / body.skin-client=客户端（交付级）
   ============================================================ */
:root{
  /* 品牌紫 */
  --brand:#A73CD7; --brand-strong:#8E2BB8; --brand-deep:#6E1F91;
  --brand-soft:#EFDFF7; --brand-wash:#F8F1FC;
  --brand-100:#F3E6FA; --brand-200:#E9D1F7; --brand-300:#DCB2F0;
  --brand-400:#CE8FE8; --brand-500:#BE6BE0;
  /* 中性 */
  --bg:#F7F8FA; --card:#fff; --fg:#14161A; --fg2:#3D444F; --muted:#6B7280; --line:#E5E7EB;
  /* 语义 */
  --ok:#15803D; --warn:#B45309; --bad:#B4232A;
  /* 交互（唯一高饱和处） */
  --accent:var(--brand-strong); --accent-ink:var(--brand-deep);
  /* 密度 */
  --pad:14px; --gap:14px; --radius:10px; --radius-sm:6px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#131518; --card:#1B1E23; --fg:#EAECEF; --fg2:#C4C9D1; --muted:#98A1AC; --line:#2C3138;
    --brand-soft:#3A1D4A; --brand-wash:#241229; --brand-100:#2E1638;
    --accent:#C56BE4; --accent-ink:#DDA8F0;
    --ok:#4ADE80; --warn:#FBBF24; --bad:#F87171;
  }
}
/* 客户端皮肤：只改密度与留白，不改色板与字体 */
body.skin-client{ --pad:20px; --gap:20px; --bg:#FAFAFC; }
@media (prefers-color-scheme: dark){ body.skin-client{ --bg:#101216; } }

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.6 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
h1{font-size:17px;margin:0;letter-spacing:-.01em}
h2{font-size:13px;margin:24px 0 10px;color:var(--muted);font-weight:600;letter-spacing:.02em}

/* ---------- 顶栏 ---------- */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* 顶栏只用蝴蝶徽标（完整字标文件保留给报告/物料使用） */
.logo{width:30px;height:30px;border-radius:8px;display:block;flex:none}
body.skin-client .logo{width:34px;height:34px;border-radius:9px}
.dot{width:9px;height:9px;border-radius:50%;background:#9CA3AF}
.dot.on{background:var(--ok);box-shadow:0 0 0 4px rgba(21,128,61,.14)}
.sub{color:var(--muted);font-size:12px}
.muted{color:var(--muted);font-size:12px}
.ok{color:var(--ok);font-weight:600}
.bad{color:var(--bad);font-weight:600}
tr.total td{background:var(--brand-wash);font-weight:600}
.topinfo{color:var(--muted);font-size:12px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.projsel{display:inline-flex;align-items:center;gap:6px}
.projsel select{font-size:12px;padding:4px 8px}

/* ---------- 页签 ---------- */
.tabs{display:flex;gap:2px;padding:6px 16px 0;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:53px;z-index:4;flex-wrap:wrap}
.tab{border:0;background:transparent;color:var(--muted);padding:11px 14px;cursor:pointer;font-size:13px;border-bottom:2px solid transparent;transition:color .12s}
.tab:hover{color:var(--fg2)}
.tab.active{color:var(--accent-ink);border-bottom-color:var(--brand);font-weight:600}

main{padding:var(--pad) 20px 48px;max-width:1500px}
.panel{display:none}
.panel.active{display:block}

/* ---------- 控件 ---------- */
.runbar,.filters,.settings,.effectform{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:var(--gap)}
.runbar label,.settings label{color:var(--muted);font-size:12px}
select,input,textarea{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;font:inherit}
select:focus,input:focus,textarea:focus{outline:2px solid var(--brand-200);outline-offset:0;border-color:var(--brand)}
input.wide{flex:1;min-width:320px}
.keyinput{min-width:260px}
button{cursor:pointer;border-radius:var(--radius-sm);padding:9px 15px;font:inherit;border:1px solid var(--line);background:var(--card);color:var(--fg);transition:background .12s,border-color .12s}
button:hover{border-color:var(--brand-300);color:var(--accent-ink)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.primary:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
button.ghost{background:transparent}
button.small{padding:5px 10px;font-size:12px}
a.btn{display:inline-block;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 13px;text-decoration:none;color:var(--fg);background:var(--card)}
a.btn:hover{border-color:var(--brand-300);color:var(--accent-ink)}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gap);margin:10px 0 6px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad);position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--brand);opacity:.28}
.kpi .v{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi .k{color:var(--fg2);font-size:12px;font-weight:500;margin-top:6px}
.kpi .n{color:var(--muted);font-size:11px;margin-top:6px}
body.skin-client .kpi .v{font-size:34px}
body.skin-client .kpi{padding:20px 18px}

/* ---------- 表格 ---------- */
.tablewrap{overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);max-height:70vh}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:9px 11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{position:sticky;top:0;background:var(--card);color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.03em;z-index:1}
tbody tr:hover td,tr:hover td{background:var(--brand-wash);cursor:pointer}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;border:1px solid var(--line);color:var(--fg2)}
.tag.ok{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 40%, transparent);background:color-mix(in srgb, var(--ok) 8%, transparent)}
.tag.no{color:var(--muted)}
.tag.err{color:var(--bad);border-color:color-mix(in srgb, var(--bad) 40%, transparent);background:color-mix(in srgb, var(--bad) 8%, transparent)}
.tag.mock{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 40%, transparent);background:color-mix(in srgb, var(--warn) 8%, transparent)}

/* 行内条形（表格里的小进度） */
.bar{height:6px;border-radius:999px;background:var(--brand-100);overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;background:var(--brand);border-radius:999px}

/* ---------- 布局块 ---------- */
.split{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--gap);align-items:start}
@media (max-width:1000px){.split{grid-template-columns:1fr}}
.detail{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad);max-height:70vh;overflow:auto}
.detail h3{margin:0 0 10px;font-size:14px}
.detail pre{white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px;font:12px/1.7 ui-monospace,Menlo,monospace;max-height:340px;overflow:auto}
.detail a{color:var(--accent-ink);word-break:break-all}
.banner{background:color-mix(in srgb, var(--warn) 10%, transparent);border:1px solid color-mix(in srgb, var(--warn) 45%, transparent);color:var(--warn);border-radius:8px;padding:10px 13px;margin-bottom:12px;font-size:13px}
.hidden{display:none}
.gaps{margin:0;padding-left:18px}
.gaps li{margin:5px 0}
.foot{display:flex;justify-content:space-between;gap:12px;padding:14px 20px;color:var(--muted);font-size:12px;border-top:1px solid var(--line);flex-wrap:wrap}
.icp-link{color:inherit;text-decoration:none;white-space:nowrap}
.icp-link:hover,.icp-link:focus-visible{color:var(--ink);text-decoration:underline}
.notice{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:13px;margin-bottom:12px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12px;margin:9px 0}
.kv b{color:var(--muted);font-weight:500}

/* ---------- 图表 ---------- */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--gap);margin:12px 0 6px;align-items:start}
.chart{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad)}
.chart-hd{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:12px;font-size:13px;font-weight:600;color:var(--fg)}
.chart-hd .muted{font-size:11px;font-weight:400}
.charts.two{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
.bar-row{display:grid;grid-template-columns:104px 1fr 92px;align-items:center;gap:8px;margin:6px 0;font-size:12px}
.bar-row.hi .bar-lb{font-weight:700;color:var(--accent-ink)}
.bar-lb{color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{display:block;height:9px;background:var(--brand-100);border-radius:999px;overflow:hidden}
.bar-track>i{display:block;height:100%;border-radius:999px;background:var(--brand)}
.bar-vl{text-align:right;font-variant-numeric:tabular-nums;color:var(--fg2)}
.cmp-row{display:grid;grid-template-columns:96px 1fr 30px;gap:8px;align-items:center;margin:9px 0;font-size:12px}
.cmp-bars{display:block}
.cmp-line{display:flex;align-items:center;gap:6px;margin:2px 0}
.cmp-line>i{display:block;height:7px;border-radius:999px}
.cmp-line>i.before{background:#B7BDC7}
.cmp-line>i.after{background:var(--brand)}
.cmp-line>em{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap}
.svgchart{width:100%;height:auto;display:block}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:11px;color:var(--muted)}
.legend.col{flex-direction:column;gap:5px}
.legend .lg{display:inline-flex;align-items:center;gap:6px}
.legend .lg>i{width:10px;height:10px;border-radius:2px;display:inline-block}
.donut-wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.heat-wrap{overflow:auto;max-height:64vh;padding-right:4px}
/* 热力图表格不要被全局 width:100% 拉宽——否则左侧题目列出现大片空白 */
table.heat{width:auto;table-layout:auto}
table.heat{border-collapse:separate;border-spacing:3px;font-size:11px}
table.heat th{background:transparent;position:static;color:var(--muted);font-weight:500;font-size:10px;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.heat th.heat-rh{max-width:190px;text-align:right;padding-right:6px}
table.heat td{width:26px;height:22px;border-radius:4px;text-align:center;color:#fff;font-size:10px;border:0;padding:0}
.h-hit{background:var(--brand)}
.h-miss{background:#D8DCE3}
.h-err{background:#D97706}
.h-none{background:rgba(127,127,127,.14)}
.legend .lg>i.h-hit,.legend .lg>i.h-miss,.legend .lg>i.h-err,.legend .lg>i.h-none{width:10px;height:10px;border-radius:2px}

/* ---------- 客户端交付级补充 ---------- */
body.skin-client .top{padding:16px 24px}
body.skin-client h1{font-size:19px}
body.skin-client .charts{grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:20px}
body.skin-client .chart{padding:20px}
body.skin-client .tabs{top:57px}
body.skin-client .tablewrap table{font-size:13.5px}

/* 交付级：截图/打印都体面 */
@media (max-width:560px){
  /* 手机：KPI 两列，避免一屏只显示一个指标 */
  .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .kpi{padding:12px}
  .kpi .v{font-size:26px}
  body.skin-client .kpi .v{font-size:28px}
  main{padding:12px 12px 40px}
  .top{padding:10px 12px;gap:10px}
  .tabs{padding:4px 10px 0;top:auto;position:static}
  .brand h1{font-size:15px}
  h1{font-size:15px}
}
@media print{
  .top,.tabs,.runbar,.filters,.foot,.banner{display:none!important}
  body{background:#fff}
  .panel{display:block!important}
  .chart,.kpi,.tablewrap,.notice{break-inside:avoid;border-color:#D8DCE3}
  .kpi::after{display:none}
}

/* ---------- 运行看板（监测中心：登录灯 / 采集 / 发稿三块） ---------- */
.run-center-grid{display:flex;gap:12px;align-items:stretch;flex-wrap:nowrap}
.run-center-block{flex:1 1 0;min-width:0;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;background:var(--card)}
.run-center-block h4{margin:0 0 10px;font-size:13px;color:var(--fg2);font-weight:600}
/* 灯：10px 圆点，绿=可用 / 红=需处理 / 黄=待人工 / 灰=未核验（不用 emoji） */
.run-lamp{display:inline-block;width:10px;height:10px;border-radius:50%;background:#9CA3AF;flex:0 0 10px}
.run-lamp.ok{background:#16A34A}
.run-lamp.err{background:#DC2626}
.run-lamp.warn{background:#D97706}
.run-lamp.off{background:#9CA3AF}
.run-login-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:12px}
.run-login-row:last-child{border-bottom:0}
.run-login-name{font-weight:600;min-width:64px}
.run-login-time{color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-collect-numbers{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.run-collect-numbers b{font-size:18px;margin-right:2px}
.run-collect-numbers small{color:var(--muted);font-size:11px}
.run-collect-total{margin:4px 0 6px;font-size:11px}
.run-progress{position:relative;height:8px;border-radius:4px;background:rgba(127,127,127,.16);margin:8px 0 4px}
.run-progress i{display:block;height:100%;border-radius:4px;background:var(--brand);min-width:2px}
.run-progress em{position:absolute;right:0;top:-17px;font-size:11px;color:var(--muted);font-style:normal}
.run-current{margin:6px 0;font-size:12px;color:var(--fg2);min-height:17px}
.run-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.run-publish-card{border-bottom:1px dashed var(--line);padding:6px 0}
.run-publish-head{display:flex;align-items:center;gap:8px}
.run-publish-head b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-publish-nums{color:var(--muted);font-size:12px;margin-top:2px}
.run-issue-list{margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--line)}
.run-issue-row{display:flex;gap:8px;align-items:center;font-size:12px;padding:4px 0}
.run-issue-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-issue-err{color:#DC2626;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){
  .run-center-grid{flex-wrap:wrap}
  .run-center-block{flex:1 1 100%}
}