/* ==========================================================================
   NeuroAI Talent · 目录页共用样式
   路径: /shared/directory.css
   覆盖: /cns-v2/index.html（CNS 药企目录）、/neurotech/index.html（NeuroTech 名录）
   阶段: P0 —— 设计令牌（L1）+ 页头 / 页脚骨架（L2）
   约定:
     1) 本文件只放两页共用的令牌与组件，页面级差异样式留在各页自己的 <style> 里。
     2) 令牌一律以 --d- 开头；页面旧变量名（--bg/--accent 等）在各页 <style> 中映射到这里，避免改动既有选择器。
     3) 主色 #06b6d4 用于描点/边框/图标；青底配白字对比度不足，按钮与标签底色统一走 --d-accent-strong (#0891b2)。
   ========================================================================== */

:root {
  /* —— 底色 / 表面 / 描边 —— */
  --d-bg: #f6f7fa;
  --d-surface: #ffffff;
  --d-surface-2: #fafbfd;
  --d-border: #e3e7ee;
  --d-border-soft: #eef1f6;

  /* —— 三级文字色 —— */
  --d-text-1: #101521; /* 主文本 */
  --d-text-2: #4b5568; /* 次要文本 */
  --d-text-3: #8a93a6; /* 弱化文本 / 占位符 */

  /* —— 主色：站点青 —— */
  --d-accent: #06b6d4;        /* 站点主色：描点、边框、图标、激活态描边 */
  --d-accent-strong: #0891b2; /* 压深一档：按钮与标签底色 / 主色文字，#06b6d4 配白字对比度不足 */
  --d-accent-soft: #ecfeff;   /* 主色浅底 */
  --d-accent-line: #a5f3fc;   /* 主色浅描边 */

  /* —— 几何 —— */
  --d-radius: 10px;      /* 容器圆角统一 10px */
  --d-radius-sm: 6px;    /* 输入框 / 小控件 */
  --d-radius-pill: 999px;/* 胶囊标签 */
  --d-shadow-sm: 0 1px 2px rgba(16, 21, 33, .05), 0 1px 3px rgba(16, 21, 33, .04);
  --d-shadow-md: 0 4px 14px rgba(16, 21, 33, .07);

  /* —— 语义色 —— */
  --d-ok: #0b7a52;
  --d-ok-bg: #effaf5;
  --d-warn: #b45309;
  --d-warn-bg: #fef7ec;

  /* —— 排版 —— */
  --d-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --d-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ------------------------------ 基线 ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--d-font);
  background: var(--d-bg);
  color: var(--d-text-1);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--d-accent-strong); }

/* -------------------- 页头（两页同构，勿各自改写） --------------------
   结构：
   <header class="d-header">
     <div class="container d-header-inner">
       <h1><span class="logo-dot"></span>标题<span class="subtitle">副标题</span></h1>
       <div class="header-stats">
         <span><strong>N</strong> 家公司</span>
         <span><strong>M</strong> 条记录</span>
         <span>数据更新：YYYY-MM-DD</span>
       </div>
     </div>
   </header>
   注：NeuroTech 页的 .header-stats 外层有 SYNC:HEADER_* 锚点，改样式不改锚点。
----------------------------------------------------------------------- */
.d-header {
  background: var(--d-surface);
  border-bottom: 1px solid var(--d-border);
  padding: 24px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.d-header .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}
.d-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.d-header h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--d-text-1);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.d-header h1 .logo-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--d-accent);
  display: inline-block;
}
.d-header h1 .subtitle {
  font-size: 13px;
  font-weight: 400;
  color: var(--d-text-3);
}
.d-header .header-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 13px;
  color: var(--d-text-2);
}
.d-header .header-stats strong {
  color: var(--d-accent-strong);
  font-size: 16px;
  font-weight: 700;
}

/* -------------------- 页脚（两页同构，措辞一致） --------------------
   <footer class="d-footer">
     <div class="container"><span>© 2026 NeuroAI Talent · 数据来源：公开信息整理 · 仅供行业研究参考</span></div>
   </footer>
------------------------------------------------------------------- */
.d-footer {
  margin-top: 40px;
  border-top: 1px solid var(--d-border);
  background: var(--d-surface);
  padding: 24px 0 32px;
  font-size: 12px;
  color: var(--d-text-3);
  text-align: center;
}
.d-footer .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}
.d-footer span { display: inline-block; }

/* ------------------ 通用原子（P0 已备好，P1 起套用） ------------------
   .d-toolbar / .d-tag / .d-card / .d-table 是两页工具条与卡片收敛后的目标样式，
   P0 只提供令牌驱动的定义，暂不强制套到现有 DOM 上（交互与字段统一属 P1）。
--------------------------------------------------------------------- */
.d-toolbar {
  background: var(--d-surface);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow-sm);
  padding: 16px 18px;
}
.d-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--d-radius-sm);
  background: var(--d-surface-2);
  color: var(--d-text-2);
  border: 1px solid var(--d-border);
}
.d-tag.is-active {
  background: var(--d-accent-strong);
  border-color: var(--d-accent-strong);
  color: #fff;
}
.d-card {
  background: var(--d-surface);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow-sm);
}
.d-card:hover { box-shadow: var(--d-shadow-md); }
.d-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.d-table thead th {
  background: var(--d-surface-2);
  color: var(--d-text-2);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  padding: 11px 12px;
  border-bottom: 1px solid var(--d-border);
}
.d-table tbody td {
  padding: 10px 12px;
  vertical-align: top;
  color: var(--d-text-1);
  border-bottom: 1px solid var(--d-border-soft);
}
.d-table tbody tr:last-child td { border-bottom: none; }

/* ------------------------------ 响应式 ------------------------------ */
@media (max-width: 768px) {
  .d-header { padding: 16px 0; }
  .d-header-inner { align-items: flex-start; flex-direction: column; gap: 8px; }
  .d-header h1 { font-size: 17px; flex-wrap: wrap; }
  .d-header .header-stats { font-size: 12px; gap: 12px; }
  .d-header .header-stats strong { font-size: 14px; }
  .d-footer { padding: 20px 0 26px; }
}

/* ------------------------------ 打印 ------------------------------ */
@media print {
  .d-header { position: static; }
  .d-card, .d-toolbar { box-shadow: none; }
}

/* ==========================================================================
   阶段: P1 —— 工具条 / 标签多选 / 结果计数 / 视图切换（两页共用）
   约定: 两页工具条结构完全一致 ——
     <div class="d-toolbar">
       <div class="d-toolbar-row">     搜索框 + 视图切换 + 重置
       <div class="d-filter-rows">     维度行: .d-filter-row > .d-filter-label + .d-tag-list[data-dim]
       <div class="d-toolbar-foot">    结果计数 .d-count#resultCount
     </div>
   筛选语义: 同一维度内多选为「或」，维度之间为「与」；点重置清空全部。
   ========================================================================== */

.d-toolbar { padding: 14px 18px 12px; }

.d-toolbar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.d-search { flex: 1 1 260px; min-width: 200px; display: flex; }
.d-search input {
  width: 100%;
  padding: 9px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--d-text-1);
  background: var(--d-surface);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.d-search input::placeholder { color: var(--d-text-3); }
.d-search input:focus { border-color: var(--d-accent); box-shadow: 0 0 0 3px var(--d-accent-soft); }

.d-toolbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.d-view-toggle { display: inline-flex; border: 1px solid var(--d-border); border-radius: var(--d-radius-sm); overflow: hidden; }
.d-view-btn {
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  background: var(--d-surface);
  color: var(--d-text-2);
  border: none;
  transition: background .15s, color .15s;
}
.d-view-btn + .d-view-btn { border-left: 1px solid var(--d-border); }
.d-view-btn:hover { background: var(--d-surface-2); color: var(--d-accent-strong); }
.d-view-btn.is-active { background: var(--d-accent-strong); color: #fff; }

.d-reset {
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  background: var(--d-surface);
  color: var(--d-text-2);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius-sm);
  transition: color .15s, border-color .15s;
}
.d-reset:hover { color: var(--d-accent-strong); border-color: var(--d-accent); }

.d-filter-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.d-filter-row { display: flex; align-items: flex-start; gap: 10px; }
.d-filter-label { flex: none; width: 64px; padding-top: 4px; font-size: 12px; font-weight: 700; color: var(--d-text-2); }
.d-tag-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.d-tag { cursor: pointer; user-select: none; transition: border-color .15s, background .15s, color .15s; }
.d-tag:hover { border-color: var(--d-accent); color: var(--d-accent-strong); }
.d-tag-list.is-scroll { max-height: 76px; overflow-y: auto; padding-right: 2px; }
.d-tag-more {
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  color: var(--d-accent-strong);
  background: none;
  border: none;
  padding: 3px 4px;
  text-decoration: underline;
}

.d-toolbar-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--d-border-soft); }
.d-count { font-size: 13px; color: var(--d-text-3); }
.d-count strong { color: var(--d-text-1); font-weight: 700; }

.d-sort { margin-left: 4px; font-size: 10px; opacity: .45; }
th.is-sorted .d-sort { opacity: 1; }

.d-empty { padding: 60px 20px; text-align: center; color: var(--d-text-3); font-size: 14px; }

@media (max-width: 768px) {
  .d-view-toggle { display: none !important; }
  .d-toolbar-actions { margin-left: 0; }
  .d-filter-row { flex-direction: column; gap: 4px; }
  .d-filter-label { width: auto; padding-top: 0; }
  .d-tag-list.is-scroll { max-height: none; overflow: visible; }
}

@media print {
  .d-toolbar, .d-view-toggle { display: none !important; }
}

/* ------------------------------ 页面切换：目录 / 数据看板 ------------------------------ */
.nt-switch {
  display: flex; gap: 3px; flex: none;
  padding: 3px; background: var(--d-surface-2);
  border: 1px solid var(--d-border); border-radius: var(--d-radius-pill);
}
.nt-switch a {
  font-size: 12.5px; line-height: 1.5; padding: 5px 13px;
  border-radius: var(--d-radius-pill); color: var(--d-text-2);
  text-decoration: none; white-space: nowrap;
}
.nt-switch a:hover { color: var(--d-accent-strong); background: var(--d-surface); }
.nt-switch a[aria-current="page"] { background: var(--d-accent-strong); color: #fff; }
@media (max-width: 640px) {
  .nt-switch a { padding: 4px 10px; font-size: 12px; }
}
@media print { .nt-switch { display: none !important; } }

/* 目录页页头：仅在存在切换控件时（:has）让出右上角，避免影响 CNS 目录页 */
@media (min-width: 769px) {
  .d-header-inner.has-switch, .d-header-inner:has(.nt-switch) { position: relative; padding-right: 196px; }
  .d-header-inner.has-switch .header-stats, .d-header-inner:has(.nt-switch) .header-stats { margin-left: auto; }
  .d-header-inner .nt-switch { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
}
@media (max-width: 768px) {
  .d-header-inner .nt-switch { position: static; margin-top: 2px; }
}