/* ==========================================================================
   归浦GEO v8.3 视觉增强层（v83.css）
   定位：在 v8.css 设计系统之上做「超越竞品」的原创视觉升级

   设计主张（与招财兔拉开身位）：
     1. 开发者气质 —— 信息密度高、语义色克制、数据优先，不做营销页式的大色块堆砌
     2. 品牌 Logo 矩阵 —— AI 平台用真实开源品牌图标，视觉可信度直接拉满
     3. 状态即颜色 —— C 位 / 推荐位 / 缺口 / 结论均有稳定色标，扫一眼就懂
     4. 动效克制 —— 只用 160-320ms 位移与淡入，绝不抖动、不弹跳

   知识产权：配色、排版、组件、动效全部原创，未复制任何竞品界面；
   AI 平台标识来自 MIT 开源图标库 @lobehub/icons-static-svg
   ========================================================================== */

/* ---------------- 1. AI 平台品牌图标 ---------------- */
.v8-aiico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--surface-3);
  overflow: hidden;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0}
.v8-aiico img { display: block; object-fit: contain}
.v8-aiico.is-miss { background: var(--surface-3)}

/* 平台 Logo 矩阵：首页 / 可见度页的「AI 全域平台覆盖」 */
.v8-aimatrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px}
.v8-aimatrix__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  cursor: default}
.v8-aimatrix__cell:hover {
  border-color: var(--brand-100);
  transform: translateY(-2px)}
/* 表现等级：0 无数据 / 1-4 由低到高，用左侧色条而非整块底色，保持克制 */
.v8-aimatrix__cell { position: relative}
.v8-aimatrix__cell::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--line)}
.v8-aimatrix__cell--1::before { background: #FDB022}
.v8-aimatrix__cell--2::before { background: #F79009}
.v8-aimatrix__cell--3::before { background: #2E90FA}
.v8-aimatrix__cell--4::before { background: #12B76A}
.v8-aimatrix__name {
  font-size: 11.5px;
  color: var(--text-2);
  text-align: center;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap}
.v8-aimatrix__val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums}

/* ---------------- 2. 侧边栏：品牌感 + 激活指示 ---------------- */
.v8-side__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 14px}
.v8-side__logo {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #1B54A6 0%, #4A93EC 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px;
  
  flex: 0 0 auto}
.v8-side__title { font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: .2px}
.v8-side__sub { font-size: 11px; color: var(--text-4); margin-top: 1px}

/* 菜单组激活：左侧 3px 指示条 + 淡蓝底，比整块高亮更耐看 */
.v8-nav__item.is-active {
  background: var(--brand-50);
  color: var(--brand);
  font-weight: 600}
.v8-nav__item {
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
.v8-nav__item:hover { background: var(--surface-3)}

/* ---------------- 3. KPI 语义强调 ---------------- */
/* 给关键 KPI 一个「语义色顶条」，不改变整体白底风格 */
.v8-kpi--accent-brand   {  }
.v8-kpi--accent-success {  }
.v8-kpi--accent-warn    {  }
.v8-kpi--accent-danger  {  }
.v8-kpi--accent-purple  {  }

.v8-kpi {
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
.v8-kpi:hover { transform: translateY(-1px)}

/* v8.3 十二项 KPI 分组面板：品牌表现 / 引用资产 / 内容资产 */
.v8-kpisec { margin-bottom: 14px}
.v8-kpisec__head {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 8px;
  padding-left: 2px}
.v8-kpisec__head b {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .2px}
.v8-kpisec__head::before {
  content: '';
  width: 3px; height: 12px;
  border-radius: 2px;
  background: var(--brand);
  margin-right: 7px;
  align-self: center}
.v8-kpisec__head span { color: var(--text-4)}

/* 补 v8.css 缺失的 6 列栅格（品牌表现组 6 项指标使用） */
.v8-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr))}

/* ---------------- 3b. 工作台·待解决问题（诊断清单） ---------------- */
.v8-diag__sum {
  display: flex;
  gap: 14px;
  padding: 0 2px 10px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 4px}
.v8-diag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line-2)}
.v8-diag:last-child { border-bottom: 0}
.v8-diag__ico { flex: 0 0 auto; padding-top: 1px}
.v8-diag__body { flex: 1; min-width: 0}
.v8-diag__title { font-size: 13px; font-weight: 600; color: var(--text)}
.v8-diag__ev { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.55}
.v8-diag .v8-btn { flex: 0 0 auto; align-self: center}
/* 严重度左侧色条：红色 = 严重，橙 = 需关注，蓝 = 优化项，绿 = 健康 */
.v8-diag { position: relative}
.v8-diag--high::before,
.v8-diag--mid::before,
.v8-diag--low::before {
  content: '';
  position: absolute;
  left: -8px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 2px}
.v8-diag--high::before { background: #F04438}
.v8-diag--mid::before { background: #F79009}
.v8-diag--low::before { background: #2E90FA}
.v8-diag--ok {
  background: var(--success-50, #F0FDF4);
  border: 1px solid var(--success-100, #ABEFC6);
  border-radius: var(--r);
  padding: 12px 14px;
  border-bottom: 0}
.v8-diag--ok .v8-diag__ico { color: #12B76A}

/* ---------------- 3c. 工作台·积分与订阅速览 ---------------- */
.v8-pts__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px}
.v8-pts__num {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--brand);
  font-variant-numeric: tabular-nums}

/* ---------------- 4. 评价色标（卓越 / 优秀 / 良好 / 中等 / 一般 / 较差） -------- */
.v8-eval { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600}
.v8-eval::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor}
.v8-eval--卓越, .v8-eval--优秀 { color: #067647}
.v8-eval--良好 { color: #175CD3}
.v8-eval--中等, .v8-eval--一般 { color: #B54708}
.v8-eval--较差 { color: #B42318}
.v8-eval--待数据 { color: var(--text-4)}

/* ---------------- 5. 进度条语义色 ---------------- */
.v8-prog__bar--success { background: linear-gradient(90deg, #32D583, #12B76A)}
.v8-prog__bar--brand   { background: linear-gradient(90deg, #4A93EC, #2F7FE0)}
.v8-prog__bar--warn    { background: linear-gradient(90deg, #FDB022, #F79009)}
.v8-prog__bar--danger  { background: linear-gradient(90deg, #FDA29B, #F04438)}

/* ---------------- 6. 行内代码 / 密钥 ---------------- */
.v8-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid var(--line-2);
  word-break: break-all}

/* ---------------- 7. 只读护栏提示条 ---------------- */
.v8-readonly-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--brand-100);
  background: var(--brand-50);
  border-radius: var(--r);
  font-size: 12.5px;
  color: var(--text-2)}
.v8-readonly-bar b { color: var(--brand)}

/* ---------------- 8. 卡片微动效 ---------------- */
.v8-card {
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease)}
.v8-card--hoverable:hover {
  
  border-color: var(--brand-100)}

/* ---------------- 9. 表格：行悬浮更明显 + 数字对齐 ---------------- */
.v8-table tbody tr.is-clickable:hover { background: var(--brand-50)}
.v8-table td.v8-right, .v8-table th.v8-right { text-align: right}
.v8-table td { font-variant-numeric: tabular-nums}

/* ---------------- 10. 分段控件（筛选器） ---------------- */
.v8-seg button, .v8-seg .v8-btn {
  border-radius: 7px}
.v8-btn.is-active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand)}

/* ---------------- 11. 空态：更轻、更聚焦动作 ---------------- */
.v8-empty {
  padding: 34px 20px}
.v8-empty__ico { color: var(--text-4); opacity: .75}
.v8-empty h4 { font-size: 14px; font-weight: 600; margin: 10px 0 4px}
.v8-empty p { font-size: 12.5px; color: var(--text-3); max-width: 460px; margin: 0 auto}

/* ---------------- 12. 移动端：矩阵与网格降级 ---------------- */
@media (max-width: 720px) {
  .v8-aimatrix { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px}
  .v8-aimatrix__cell { padding: 10px 6px 8px}
  .v8-aimatrix__name { font-size: 11px}
  /* KPI 分组面板在窄屏降为两列，保证数字不折行 */
  .v8-grid--6, .v8-grid--5, .v8-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr))}
  .v8-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr))}
}

/* ---------------- 13. 打印：报告导出 ---------------- */
@media print {
  .v8-side, .v8-top, .v8-page-head__r { display: none !important}
  .v8-card {  border: 1px solid #ddd; break-inside: avoid}
  .v8-aimatrix__cell:hover { transform: none}
}