/* PolicyBot 共用主题 —— Academia
 *
 * 三个界面（qa 8900 / papers 8899 / control 8901）原先各写一套配色，同一个
 * "主色"在三处是三个值。这里只放规范 token，各 app 自己保留一小段别名映射，
 * 把它原有的变量名指过来。不在这里直接定义各 app 的变量名：--surface-strong
 * 在 papers 是纯白、在 control 是浅灰蓝，语义相反，合并会打架。
 *
 * 改配色只改这个文件。各 app 的组件样式不需要动。
 */
:root{
  /* ── 纸面 ── 暖白，比纯白柔和，长时间阅读不刺眼 */
  --paper:#faf8f3;
  --paper-raised:#ffffff;     /* 浮起：卡片、气泡、模态框 */
  --paper-sunken:#f3efe6;     /* 凹陷：表头、输入条、次级面板 */

  /* ── 墨色 ── 对 --paper 的对比度：ink 15:1，soft 9.7:1，muted 5.6:1 */
  --ink:#1a1a1a;
  --ink-soft:#3d3833;
  --ink-muted:#6b6155;

  /* ── 界线 ── */
  --rule:#d9d2c5;
  --rule-soft:#e8e2d6;

  /* ── 墨绿：主操作、选中态、链接 ── */
  --accent:#2d5016;
  --accent-hover:#20390f;
  --accent-wash:#eaefe3;

  /* ── 三色引用体系：全站一致，换界面也别换意思 ──
     赭石=政策，靛青=文献，苔绿=统计/成功 */
  --ochre:#a55a10;   --ochre-wash:#f8f0e4;
  --azure:#255f85;   --azure-wash:#e6eff5;
  --moss:#16714f;    --moss-wash:#e6f2ec;
  --danger:#9b2c1f;  --danger-wash:#f8ebe8;

  /* ── 阴影：暖色投影，配暖白底才不发灰 ── */
  --shadow-sm:0 1px 2px rgba(60,50,35,.06);
  --shadow:0 1px 3px rgba(60,50,35,.07),0 8px 24px rgba(60,50,35,.06);
  --shadow-lg:0 16px 48px rgba(60,50,35,.16);

  --radius:6px;--radius-sm:5px;--radius-lg:8px;
  --fs-xs:12px;--fs-sm:13px;--fs-md:14.5px;--fs-lg:18px;

  /* 衬线只给标题和论文正文。中文衬线按系统可用性降级，没有网络字体依赖，
     内网/离线也不会掉字。 */
  --font-display:Georgia,'Songti SC','Noto Serif CJK SC','Source Han Serif SC','SimSun',serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans SC','PingFang SC','Microsoft YaHei',Arial,sans-serif;
  --font-mono:'SF Mono',Menlo,'Cascadia Mono','Fira Code',Consolas,monospace;

  --transition:.16s ease;

  --bar-h:54px;          /* 三端顶栏统一高度，页面结构靠它对齐 */
}

/* ════════════════════════════════════════════════════════════════════
 * 共用外壳
 *
 * 三端原先各造了一套顶部结构：qa 是「品牌条」，control 是「标题条 + 状态条 +
 * 标签条」三层叠着，papers 是「大标题 + 副标题 + 密码框 + 标签行」四块。同一个
 * 系统的三个界面看不出是一家的，而且 control 光页头就吃掉约 200px。
 *
 * 这里定义唯一的一套：一条 54px 的 .app-bar，里面依次是产品标识、导航、右侧
 * 实时指标与操作。三端都用它，页头高度和视觉重量从此一致。
 *
 * 命名统一加 app- 前缀，与三端已有的类名（76/61/61 个）完全不重叠，所以接入
 * 时不会波及任何既有组件样式。
 * ════════════════════════════════════════════════════════════════════ */

.app-bar{height:var(--bar-h);flex-shrink:0;display:flex;align-items:stretch;gap:20px;
  padding:0 20px;background:var(--paper-raised);border-bottom:1px solid var(--rule);
  position:relative;z-index:40}

/* 产品标识：小字号 + 字距，不跟页面内容抢注意力。产品名恒定，应用名跟着界面变，
   这样三端并排打开时一眼能看出是同一个系统的哪一块。 */
.app-mark{display:flex;align-items:center;gap:9px;flex-shrink:0;text-decoration:none}
.app-mark b{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.app-mark i{width:1px;height:15px;background:var(--rule);font-style:normal;flex-shrink:0}
.app-mark span{font-size:var(--fs-xs);color:var(--ink-muted);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}

/* 导航就在顶栏里，不再单独占一行。下划线指示当前页，比整块染色安静。 */
.app-nav{display:flex;align-items:stretch;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.app-nav::-webkit-scrollbar{display:none}
.app-tab{display:inline-flex;align-items:center;padding:0 13px;border:0;background:transparent;
  font-family:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--ink-muted);cursor:pointer;
  white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--transition),border-color var(--transition)}
.app-tab:hover{color:var(--ink)}
.app-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.app-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.app-bar-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}

/* 顶栏里的实时指标。放这里而不是放页面里，是为了让它在切换标签时不消失——
   papers 原先把统计塞在「搜索」标签内部的 hero 里，一换标签数字就没了。 */
.app-stat{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0 11px;border-left:1px solid var(--rule-soft)}
.app-stat span{font-size:10.5px;color:var(--ink-muted);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.app-stat b{font-size:var(--fs-sm);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.app-stat b.ok{color:var(--moss)} .app-stat b.warn{color:var(--ochre)} .app-stat b.bad{color:var(--danger)}

.app-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:31px;padding:0 12px;
  border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--paper-raised);
  font-family:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--ink-soft);cursor:pointer;
  transition:background var(--transition),border-color var(--transition),color var(--transition)}
.app-btn:hover{background:var(--accent-wash);border-color:var(--accent);color:var(--accent)}
.app-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.app-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.app-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.app-btn.quiet{border-color:transparent;background:transparent}
.app-btn.quiet:hover{background:var(--accent-wash)}
.app-btn[disabled]{opacity:.5;cursor:not-allowed}

.app-field{display:flex;align-items:center;gap:7px}
.app-field label{font-size:var(--fs-xs);color:var(--ink-muted);white-space:nowrap}
.app-field input{min-height:31px;padding:0 10px;border:1px solid var(--rule);border-radius:var(--radius-sm);
  background:var(--paper);font-family:inherit;font-size:var(--fs-sm);color:var(--ink);outline:none;transition:border-color var(--transition)}
.app-field input:focus{border-color:var(--accent)}

/* 内容区：统一的滚动容器和阅读宽度。三端原先一个用 .container 定宽、一个铺满、
   一个各标签自己定，横向节奏对不上。 */
.app-main{flex:1;overflow-y:auto;min-height:0}
.app-wrap{max-width:1180px;margin:0 auto;padding:22px 20px 40px;display:flex;flex-direction:column;gap:16px}

@media(max-width:760px){
  .app-bar{gap:10px;padding:0 12px}
  .app-mark i,.app-mark span{display:none}
  .app-stat{display:none}        /* 窄屏先保导航，指标在页面里还有一份 */
  .app-wrap{padding:14px 12px 28px}
}