/* ============================================================
 * 融媒体中心 —— 独立样式
 *
 * 设计约束：
 *   1) 尽量复用灵炬智学主系统的全局类（.card/.page-head/.section-title/
 *      .scoreboard/.admin-table/.chip-*/.empty-tip/.btn-*），只在主系统
 *      没有对应组件时新增。
 *   2) 所有新增样式限定在 .gzh-scope 内，绝不污染主系统页面。
 *   3) 色系沿用主系统 CSS 变量（--primary 蓝 #2563eb），保证视觉统一。
 *   4) 变量用 --g- 前缀，作用域限定在 .gzh-scope（照抄主系统 .tour-scope 模式）。
 * ============================================================ */

.gzh-scope {
  /* 沿用主系统调色板，缺失时给出回退值 */
  --g-primary: var(--primary, #2563eb);
  --g-primary-dark: var(--primary-dark, #1d4ed8);
  --g-primary-light: var(--primary-light, #dbeafe);
  --g-success: var(--success, #16a34a);
  --g-success-light: var(--success-light, #dcfce7);
  --g-danger: var(--danger, #dc2626);
  --g-danger-light: var(--danger-light, #fee2e2);
  --g-warning: var(--warning, #d97706);
  --g-warning-light: var(--warning-light, #fef3c7);
  --g-text: var(--text, #1f2937);
  --g-sub: var(--text-sub, #6b7280);
  --g-card: var(--card, #fff);
  --g-border: var(--border, #e5e7eb);
  --g-bg-soft: #f8fafc;
  --g-radius: var(--radius, 14px);
  --g-shadow: var(--shadow, 0 2px 12px rgba(30, 41, 59, .08));
  --g-purple: #7c3aed;
  --g-cyan: #0891b2;
  --g-pink: #db2777;
}

/* ---------- 页内 tab 条（照抄主系统 .tour-tabs 视觉） ---------- */
.gzh-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  border-bottom: 1.5px solid var(--g-border);
}
.gzh-tab {
  padding: 9px 18px;
  border: none;
  background: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--g-sub);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  border-radius: 8px 8px 0 0;
  transition: color .15s, background .15s;
}
.gzh-tab:hover { background: var(--g-bg-soft); }
.gzh-tab.is-active {
  color: var(--g-primary);
  border-bottom-color: var(--g-primary);
}
.gzh-tab .gt-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 9px;
  background: var(--g-warning);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  vertical-align: 1px;
}
.gzh-tab .gt-count[hidden] { display: none !important; }

/* ---------- KPI 指标卡（比主系统 .scoreboard 更紧凑，带图标） ---------- */
.gzh-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.gzh-kpi {
  background: var(--g-card);
  border-radius: 12px;
  box-shadow: var(--g-shadow);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.gzh-kpi .gk-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  flex: 0 0 auto;
  background: var(--g-primary-light);
  color: var(--g-primary-dark);
}
.gzh-kpi .gk-num {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--g-text);
}
.gzh-kpi .gk-label {
  font-size: 12.5px;
  color: var(--g-sub);
  margin-top: 1px;
}
.gzh-kpi.is-green  .gk-icon { background: var(--g-success-light); color: #14532d; }
.gzh-kpi.is-red    .gk-icon { background: var(--g-danger-light);  color: var(--g-danger); }
.gzh-kpi.is-orange .gk-icon { background: var(--g-warning-light); color: var(--g-warning); }
.gzh-kpi.is-purple .gk-icon { background: #ede9fe; color: var(--g-purple); }
.gzh-kpi.is-cyan   .gk-icon { background: #cffafe; color: var(--g-cyan); }
.gzh-kpi.is-pink   .gk-icon { background: #fce7f3; color: var(--g-pink); }

/* ---------- 内容卡片网格（账号卡 / 文章卡 / 视频卡） ---------- */
.gzh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.gzh-tile {
  background: var(--g-card);
  border-radius: 12px;
  box-shadow: var(--g-shadow);
  padding: 18px;
  border: 1.5px solid transparent;
  transition: border-color .15s, transform .15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gzh-tile:hover { transform: translateY(-2px); }
.gzh-tile.is-current { border-color: var(--g-primary); }
.gzh-tile .gt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gzh-tile .gt-name {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--g-text);
  display: flex;
  align-items: center;
  gap: 7px;
}
.gzh-tile .gt-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.gzh-tile .gt-meta {
  font-size: 12.5px;
  color: var(--g-sub);
  line-height: 1.7;
}
.gzh-tile .gt-meta b { color: var(--g-text); font-weight: 600; }
.gzh-tile .gt-ops {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}

/* ---------- 状态标签复用主系统 chip ---------- */
.gzh-scope .chip { white-space: nowrap; }

/* ---------- 表单 ---------- */
.gzh-form { display: grid; gap: 14px; }
.gzh-field { display: flex; flex-direction: column; gap: 5px; }
.gzh-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-text);
}
.gzh-field label .req { color: var(--g-danger); margin-left: 2px; }
.gzh-input,
.gzh-select,
.gzh-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--g-border);
  border-radius: 9px;
  font: inherit;
  font-size: 14px;
  color: var(--g-text);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.gzh-textarea { min-height: 120px; resize: vertical; line-height: 1.65; }
.gzh-input:focus,
.gzh-select:focus,
.gzh-textarea:focus {
  outline: none;
  border-color: var(--g-primary);
  box-shadow: 0 0 0 3px var(--g-primary-light);
}
.gzh-row {
  display: grid;
  /* ★ 原来 minmax(200px, 1fr)：970px 宽能塞下 4 条 200px 轨道，auto-fit
     把空的两条塌成 0px，于是「两栏各 478px + 右侧 28px 死白」，
     看起来两栏没铺满、右边多一截。
     下限提到 320px 后：970px 只能放 2 条（3×320+2×14=988>970），
     正好两栏等宽铺满。窄屏自动降为单栏。 */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
@media (max-width: 720px) {
  .gzh-row { grid-template-columns: 1fr; }
}

/* ★ 原生 file 控件不吃 .gzh-input 的 border/padding，会露出浏览器默认灰按钮，
   和旁边的输入框完全不搭。这里统一成描边胶囊。 */
.gzh-input[type=file] {
  padding: 7px 10px;
  cursor: pointer;
}
/* ★ 这里不能用 var(--g-*)。.gzh-scope 上的 --g-primary-light 是
   「var(--primary-light, #dbeafe)」这种惰性引用，Chromium 在伪元素上解析
   会拿到空串，导致按钮背景/边框全部失效（看起来就是「按钮样式没了」）。
   写死字面色值，稳定生效。 */
.gzh-input[type=file]::file-selector-button {
  margin-right: 10px;
  padding: 6px 14px;
  border: 1px solid #2563eb;
  border-radius: 7px;
  background: #dbeafe;
  color: #1d4ed8;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.gzh-input[type=file]::file-selector-button:hover {
  background: #2563eb;
  color: #fff;
}

/* ---------- 公益报道 · 配图缩略图 ---------- */
.ga-imgbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 6px;
}
.ga-imgbox:empty { display: none; }
.ga-thumb {
  position: relative; display: inline-block;
  width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--g-border); background: var(--g-bg-soft);
}
.ga-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ga-thumb .ga-thumb-x {
  position: absolute; top: 1px; right: 1px;
  width: 17px; height: 17px; line-height: 15px; text-align: center;
  border: none; border-radius: 50%; cursor: pointer; padding: 0;
  background: rgba(15, 23, 42, .68); color: #fff; font-size: 12px;
}
.ga-thumb .ga-thumb-x:hover { background: var(--g-danger); }
.ga-imgnum { font-size: 12.5px; color: var(--g-sub); }

/* ---------- 表格补充（主系统已有 .admin-table，这里补长文本单元格） ---------- */
.gzh-scope .admin-table td.is-wrap {
  white-space: normal;
  max-width: 420px;
  line-height: 1.6;
}
.gzh-scope .admin-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 进度条 / 趋势条 ---------- */
.gzh-bars { display: grid; gap: 10px; }
.gzh-bar-row {
  display: grid;
  grid-template-columns: 150px 1fr 72px;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}
.gzh-bar-track {
  height: 9px;
  background: var(--g-bg-soft);
  border-radius: 999px;
  overflow: hidden;
}
.gzh-bar-fill {
  height: 100%;
  background: var(--g-primary);
  border-radius: 999px;
  transition: width .5s ease;
}
.gzh-bar-fill.is-green { background: var(--g-success); }
.gzh-bar-fill.is-orange { background: var(--g-warning); }
.gzh-bar-row .gb-pct { text-align: right; color: var(--g-sub); }

/* ---------- 迷你柱状图（7 天趋势） ---------- */
.gzh-minichart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 96px;
  padding: 6px 2px 0;
}
.gzh-minichart .gmc-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.gzh-minichart .gmc-bar {
  width: 100%;
  max-width: 34px;
  background: var(--g-primary);
  border-radius: 5px 5px 0 0;
  min-height: 3px;
  transition: height .5s ease;
}
.gzh-minichart .gmc-x {
  font-size: 11px;
  color: var(--g-sub);
  white-space: nowrap;
}

/* ---------- 弹窗 ---------- */
.gzh-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.gzh-modal {
  background: #fff;
  border-radius: var(--g-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gzh-modal.is-wide { max-width: 900px; }
.gzh-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--g-border);
}
.gzh-modal-head h3 { font-size: 17px; font-weight: 700; margin: 0; }
.gzh-modal-close {
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--g-sub);
  cursor: pointer;
  padding: 0 4px;
}
.gzh-modal-close:hover { color: var(--g-danger); }
.gzh-modal-body { padding: 20px 22px; overflow-y: auto; }
.gzh-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--g-border);
  background: var(--g-bg-soft);
}

/* ---------- 主系统表格里的操作按钮（浅底，不用 .btn-ghost） ---------- */
.gzh-scope .admin-ops .btn { padding: 3px 10px; font-size: 12px; }
.gzh-scope .admin-ops .btn-ghost {
  background: #fff;
  color: var(--g-primary);
  border: 1px solid var(--g-border);
}
.gzh-scope .admin-ops .btn-ghost:hover { border-color: var(--g-primary); }

/* ---------- 正文预览（Markdown 渲染结果） ---------- */
.gzh-preview {
  font-size: 14px;
  line-height: 1.85;
  color: var(--g-text);
  max-height: 52vh;
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--g-bg-soft);
  border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.gzh-preview h1,
.gzh-preview h2,
.gzh-preview h3 { margin: 14px 0 8px; font-weight: 700; }
.gzh-preview h2 { font-size: 17px; }
.gzh-preview h3 { font-size: 15.5px; }
.gzh-preview p { margin: 8px 0; }
.gzh-preview strong { color: var(--g-primary-dark); }

/* ---------- 提示条 ---------- */
.gzh-tip {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.65;
  margin-bottom: 14px;
  background: var(--g-primary-light);
  color: var(--g-primary-dark);
}
.gzh-tip.is-warn { background: var(--g-warning-light); color: #92400e; }
.gzh-tip.is-danger { background: var(--g-danger-light); color: #991b1b; }
.gzh-tip.is-ok { background: var(--g-success-light); color: #14532d; }

/* ---------- 生成中遮罩（AI 任务） ---------- */
.gzh-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 44px 20px;
  color: var(--g-sub);
  font-size: 14px;
}
.gzh-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--g-border);
  border-top-color: var(--g-primary);
  border-radius: 50%;
  animation: gzh-spin .8s linear infinite;
}
@keyframes gzh-spin { to { transform: rotate(360deg); } }

/* ---------- 侧边栏分组：融媒体中心（与主系统分组一致） ---------- */
/* 复用主系统 .nav-group-label 样式，此处不额外定义，仅在需要时兜底 */
.gzh-nav-note {
  font-size: 11.5px;
  color: var(--g-sub);
  padding: 2px 12px 6px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  .gzh-bar-row { grid-template-columns: 100px 1fr 56px; font-size: 12.5px; }
  .gzh-grid { grid-template-columns: 1fr; }
  .gzh-modal { max-height: 92vh; }
}