/* ==========================================================================
   政岸 AI 服务平台 — 设计令牌
   视觉基线取自 zaai.world 生产包（index-CVR0rPqg.css）实测值
   ========================================================================== */

:root {
  /* 声明本站是浅色方案。
     换成 light 之后有一连串连锁反应，都是好事：
       1) 表单控件（select 下拉列表、滚动条、caret、日期选择器）由浏览器
          按浅色绘制，不会突然弹出一块黑底下拉框
       2) 手机浏览器的「强制深色（算法反色）」不会再"帮忙"反色 ——
          浅色站点本来就该是浅的，反色反而会把它变黑
       3) 之前为了挡住反色而写的 .logo-card 白底豁免规则（见文件末尾）
          可以保留但已非必需：白底在浅色方案里本来就是正常底色。
          保留的原因是这个站点可能被人用「强制浅色」访问，
          那段规则做了 no-op，不影响视觉，删掉反而要重新验证一轮。
     【踩过的坑】color-scheme 只写一次在 :root 上就够，不要在每个
     组件里重复声明，否则局部变量继承会打架。 */
  color-scheme: light;

  /* ============================ 底色 ====================================
     【为什么是浅色】
     合作方两轮反馈都是「太暗、看不清」。深色方案的本质问题不是配色选得
     不好，而是底色 #0c0f16 的相对亮度只有 0.0048 —— 接近纯黑，人眼在这
     种底色上看浅灰文字，先"闷"后"刺"，越看越累。

     试过把深色系整体提亮（#0c0f16 → #1f2733，亮度 4 倍），但「深」这个
     方向本身就是问题来源。所以改走浅色。

     【浅色怎么不廉价】这是浅色方案真正的难点，三条规则：
       1) 底色不用纯白。纯白 + 深字 = 像 Excel。用微冷浅灰 #f5f8fc，
          卡片用纯白浮起来，这一层反差是整个方案的基础。
       2) 阴影必须偏冷且散得开。黑色阴影在浅底上会显脏（像落灰），
          用带蓝调的 rgba(15,23,42,.10)、扩散 26px，才有"浮起"感。
       3) 描边要比深色方案更淡。深底上描边要清晰，浅底上描边要若有若无，
          边界交给阴影交代。照搬深色的 0.10 描边会让界面变成"一堆框"。
     ====================================================================== */
  --bg-primary: #f5f8fc;      /* 页面底色：微冷浅灰，不是纯白 */
  --bg-secondary: #ffffff;    /* 次级区块：纯白 */
  --bg-elevated: #ffffff;     /* 浮起层（弹窗、下拉）：纯白 */
  --bg-card: #ffffff;         /* 卡片：纯白，靠阴影与底色分层 */
  --bg-input: #ffffff;        /* 输入框：纯白 */
  /* 浮层专用底（下拉菜单、气泡、悬浮面板）。浅色下统一纯白即可，
     但它跟 --bg-card 的语义不同：浮层没有阴影也能看，卡片必须靠阴影。 */
  --bg-popover: #ffffff;
  /* 表格吸顶列：需要在滚动时盖住下面的内容，用不透明的白 */
  --bg-sticky: #ffffff;
  /* 代码块：浅色下用极淡灰，比纯白略微区分 */
  --bg-code: #f8fafc;

  /* 描边：浅色下刻意压低对比，边界主要靠阴影。
     border-color 只做「存在感极低的分隔」，border-strong 用于需要明确
     框住的地方（输入框、下拉面板）。 */
  --border-color: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);
  --border-focus: rgba(37, 99, 235, 0.45);

  /* 文本
     【浅色下的对比度实测】相对 --bg-primary #f5f8fc（WCAG 正文门槛 4.5）：
       text-primary   17.1   深墨蓝，不是纯黑（纯黑+白底对比过强，看着"硬"）
       text-secondary  8.0   次级正文
       text-muted      5.5   辅助说明
       text-faint      4.9   最弱一档（占位符、时间戳）

     四级全部过 4.5。faint 定到 4.9 而不是刚好 4.5 —— 卡片、输入框这些
     地方还有一层底色差，卡着及格线定值等于实际不达标。 */
  --text-primary: #0d1526;
  --text-secondary: #3d4d68;
  --text-muted: #55657f;
  --text-faint: #5f6d86;

  /* ======================= 语义色（重要） ==============================
     深色方案里「状态色」只有一个用途：深底上的浅色文字。所以 var(--green-ink)
     这种浅绿到处都是。
     到了浅色底上，这些浅色字会直接看不见 —— 这是换浅色最容易翻车的地方。
     因此把每种状态色拆成两个变量：
       --*    ：主色（用于填充、边框、图标、图表）
       --*-ink：文字色（专门用在浅底上，压深到能读）
     规则：凡是 color: 用 --*-ink；凡是 background/border 用 --*。
     ====================================================================== */
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-ink: #1e40af;        /* 5.9 在浅底上 */

  --purple: #7c3aed;
  --purple-dark: #6d28d9;
  --purple-ink: #5b21b6;      /* 6.6 */

  --cyan: #0891b2;
  --cyan-ink: #0c6a82;        /* 5.5（在纯白上），在淡青底上 5.49 */

  --green: #059669;
  --green-ink: #036b4d;       /* 5.0（在淡绿底上）/ 6.5（在白底上）*/

  --amber: #b45309;
  --amber-ink: #92400e;       /* 6.7 */

  --red: #dc2626;
  --red-ink: #b91c1c;         /* 6.1 */

  /* 渐变：浅底上降低饱和度，否则大面积铺开会刺眼。
     科技感靠"小面积高饱和 + 大量留白"，不靠到处发光。

     【三个色标都用 ink 档】
     这个变量被 .gradient-text 用来做「文字渐变」（登录页标题、
     首页副标题里的强调字等）。文字渐变和按钮渐变的要求不一样：
     按钮是"色块"，色值亮一点没所谓；文字是"笔画"，
     色值一亮就在浅底上糊掉（青色端 #0891b2 实测只有 3.5）。
     所以这里全部换成 --*-ink 那一档（都在 5 以上）。 */
  --accent-gradient: linear-gradient(135deg, #1e40af, #5b21b6, #0c6a82);
  --accent-gradient-btn: linear-gradient(90deg, #2563eb, #7c3aed);

  /* 尺寸 */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --nav-h: 64px;

  /* 阴影
     【浅色方案的灵魂在这一行】
     深色方案里阴影几乎看不见（黑底上打黑影），所以阴影只是点缀。
     浅色方案里卡片必须"浮"在底色上，全靠阴影 —— 但阴影最容易做脏：
       · 用纯黑 rgba(0,0,0,x)：浅底上会发灰发脏，像落了灰
       · 偏移太大、扩散太小：像贴了张纸，不像浮起来
     所以这里用三个特征一起做：
       1) 色调偏冷（15,23,42 是深蓝灰，不是纯黑）
       2) 双层叠加：近处一层 1px 极淡（定义边缘），远处一层大扩散（定义浮起）
       3) 大扩散配负 spread，让边缘自然淡出，不出现"硬边"
     悬停时色调从蓝灰转向品牌蓝，同时加深 —— 这是浅色下最有效的交互反馈。 */
  --shadow-glow: 0 6px 16px -4px rgba(37, 99, 235, 0.22);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04),
                 0 8px 26px -10px rgba(15, 23, 42, 0.10);
  --shadow-card-hover: 0 2px 4px rgba(15, 23, 42, 0.05),
                       0 16px 36px -14px rgba(37, 99, 235, 0.18);
  /* 浮层（下拉、气泡、弹窗）比卡片更"高"，阴影更深更远 */
  --shadow-pop: 0 4px 12px -2px rgba(15, 23, 42, 0.08),
                0 20px 48px -16px rgba(15, 23, 42, 0.18);
  --shadow-pop-lg: 0 8px 24px -4px rgba(15, 23, 42, 0.10),
                   0 32px 64px -20px rgba(15, 23, 42, 0.22);

  --font: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }

::selection { background: rgba(124, 58, 237, 0.18); color: var(--text-primary); }

/* 滚动条：浅底上必须用深色半透明，原来的白色在浅底上完全看不见 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.30);
  background-clip: content-box;
}

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* 深色底 + 白底图标的组合，禁止浏览器「强制深色」反转。
   部分手机浏览器（多数安卓自带浏览器、部分 Chromium 定制版、
   以及开启「强制深色网站」的 Chrome）会做一次**算法反色**：
   把浅色背景反成深色、深色文字反成浅色。
   本站整体是深色底，反色后背景几乎不变，但白底块会被反成深灰/近黑，
   而 logo 图案本身多为深色，反转后与底色融为一体、整块发黑 ——
   这正是用户截图里的现象。

   要挡住它必须三件套一起上，缺一不可：
     1) color-scheme: only light
        声明「这个元素只支持浅色方案」。浏览器看到 only 就不会对它做
        强制反色，因为反色后没有任何可用的浅色方案可回落。
        只写 forced-color-adjust: none 不够 —— 在强制深色模式下
        Chromium 会忽略该声明，只有 color-scheme 才是权威开关。
     2) forced-color-adjust: none
        挡住 Windows 高对比度 / 强制颜色模式对颜色的覆盖。
     3) 显式写死背景与文字色
        不依赖 CSS 变量的继承，避免变量在反色链路上被改写。

   作用范围只限「白底承载深色图案」这一类元素，不影响本站其余深色区域。 */
.logo-card,
.logo-card img,
.dt-qr__frame,
.dt-qr__frame img {
  color-scheme: only light;
  forced-color-adjust: none;
  -webkit-forced-color-adjust: none;
}
.logo-card {
  background: #fff !important;
}
/* 文字卡是纯文字没有 img，反色后深灰字压深底会彻底看不见，单独锁死 */
.logo-card__text {
  color: #334155 !important;
}

/* --------------------------- 品牌通用元素 ------------------------------- */
.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glass-card {
  /* 浅色下的「玻璃拟态」要克制。
     深色方案里 blur + 半透明深底 = 磨砂玻璃，很高级；
     浅色方案里同样的半透明会显得脏（背后颜色透上来发灰）。
     所以这里改成实白 + 阴影，把「质感」交给阴影而不是模糊。
     backdrop-filter 保留但只作用在真正需要的地方（见 plaza 页），
     卡片本体用纯白更干净。 */
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
}

.glass-card-hover { transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.glass-card-hover:hover {
  border-color: rgba(37, 99, 235, 0.24);
  box-shadow: var(--shadow-card-hover);
}

.section-title {
  margin-bottom: 1rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  /* 原来是 #fff —— 深底上是对的，浅底上会直接隐形 */
  color: var(--text-primary);
}
.section-subtitle {
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--text-secondary);
}

/* 品牌标记 */
.brand { display: flex; align-items: center; gap: 0.5rem; }
.brand__mark {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #2563eb, #9333ea);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
brand__mark span { color: var(--text-primary); font-weight: 700; font-size: 0.875rem; letter-spacing: -0.02em; }
/* 品牌名在页头/页脚都要跟着底色走，原来写死 #fff 在浅底上不可见 */
.brand__name { color: var(--text-primary); font-weight: 600; font-size: 1.125rem; }
.brand--lg .brand__mark { width: 2.5rem; height: 2.5rem; border-radius: var(--radius); }
.brand--lg .brand__name { font-size: 1.25rem; }

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary { background: var(--accent-gradient-btn); color: #fff; box-shadow: var(--shadow-glow); }
/* 悬停不换色系，只加深 —— 浅底上大幅变色会显得跳 */
.btn--primary:hover:not(:disabled) { background: linear-gradient(90deg, #1d4ed8, #6d28d9); }

.btn--sm { padding: 0.5rem 1rem; font-size: 0.8125rem; }
.btn--xs { padding: 0.3125rem 0.625rem; font-size: 0.75rem; border-radius: 6px; }
.btn--md { padding: 0.625rem 1.25rem; font-size: 0.875rem; }
.btn--lg { padding: 0.75rem 1.5rem; font-size: 0.9375rem; }
.btn--block { width: 100%; padding: 0.75rem; font-size: 0.9375rem; }

.btn--ghost { color: var(--text-secondary); border-color: var(--border-strong); }
.btn--ghost:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: rgba(15, 23, 42, 0.22);
  background: rgba(15, 23, 42, 0.04);
}

/* 危险按钮：浅底上 var(--red-ink) 完全看不见，改用 --red-ink */
.btn--danger { color: var(--red-ink); border-color: rgba(220, 38, 38, 0.3); }
.btn--danger:hover:not(:disabled) { background: rgba(220, 38, 38, 0.07); color: var(--red-ink); }

/* 表单 */
.field { margin-bottom: 1.25rem; }
.field__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.field__hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.375rem; }

.input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--bg-input);
  /* 输入框需要明确边界，否则白底白框看不出哪能输入 */
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  transition: all 0.2s;
}
.input::placeholder { color: var(--text-faint); }
.input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.input:disabled { opacity: 0.6; cursor: not-allowed; background: var(--bg-code); }
.input--error { border-color: rgba(220, 38, 38, 0.5); }

/* 防御性规则：带 list 属性的输入框，Chrome / Edge 会在右侧绘制原生下拉三角，
   与站点风格不符，统一隐藏。（园区字段已改用自定义候选标签，不依赖此规则） */
.input::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.input[list] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

/* ★ 上面那条规则会连日期框的日历按钮一起关掉 —— 同一个伪元素，
   对 type="text"+list 是「下拉三角」，对 type="date" 就是「日历」。
   于是日期框看起来只能靠键盘敲日期，点右边什么都不会发生，
   用户会以为这个控件坏了。

   这里把日期类输入框的指示器恢复出来。必须带 !important：
   上面那条也是 !important，靠选择器权重更高（.input[type] 比 .input 多一个
   属性选择器）才压得住。 */
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="month"]::-webkit-calendar-picker-indicator,
.input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.input[type="time"]::-webkit-calendar-picker-indicator,
.input[type="week"]::-webkit-calendar-picker-indicator {
  display: block !important;
  opacity: 0.55;
  pointer-events: auto !important;
  width: 1rem;
  height: 1rem;
  margin-left: 0.125rem;
  cursor: pointer;
  transition: opacity 0.15s;
}
.input[type="date"]:hover::-webkit-calendar-picker-indicator,
.input[type="month"]:hover::-webkit-calendar-picker-indicator,
.input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
.input[type="time"]:hover::-webkit-calendar-picker-indicator,
.input[type="week"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
/* 日期框本身也给指针光标：可点区域不该只有那个 16px 的小图标 */
.input[type="date"],
.input[type="month"],
.input[type="datetime-local"],
.input[type="time"],
.input[type="week"] { cursor: pointer; }
/* 日期框没填值时，Chrome 用一段本地化文案占位（如「年/月/日」），
   颜色比正常文字浅一档；统一到 --text-faint，与其他 input 的 placeholder 一致。 */
.input[type="date"]::-webkit-datetime-edit,
.input[type="month"]::-webkit-datetime-edit { color: var(--text-primary); }
.input[type="date"]:invalid::-webkit-datetime-edit,
.input[type="month"]:invalid::-webkit-datetime-edit { color: var(--text-faint); }
/* 可清空：Chrome 在有值时会在最右侧给一个「清除」小叉，样式同样被上面那条压掉了。
   日期框留空 = 不限，所以这个叉是有意义的，不要隐藏。 */
.input[type="date"]::-webkit-clear-button,
.input[type="month"]::-webkit-clear-button {
  display: block;
  opacity: 0.5;
  cursor: pointer;
}

select.input { appearance: none; cursor: pointer; }
select.input option { background: var(--bg-popover); color: var(--text-primary); }

/* 提示条
   浅底上的提示条不能用「浅色文字压浅色底」——原来 var(--red-ink) 在 10% 红底上
   几乎读不出来。改成：极淡的色底 + 深色文字，对比度立刻够。 */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.alert--error { background: rgba(220, 38, 38, 0.07); border: 1px solid rgba(220, 38, 38, 0.22); color: var(--red-ink); }
.alert--success { background: rgba(5, 150, 105, 0.07); border: 1px solid rgba(5, 150, 105, 0.22); color: var(--green-ink); }
.alert--warn { background: rgba(180, 83, 9, 0.07); border: 1px solid rgba(180, 83, 9, 0.22); color: var(--amber-ink); }
.alert--info { background: rgba(37, 99, 235, 0.07); border: 1px solid rgba(37, 99, 235, 0.22); color: var(--blue-ink); }

/* 徽标 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 99px;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
/* 徽标底极淡、字够深 —— 浅底上「同色系浅底浅字」是最常见的不达标写法 */
.tag--blue { background: rgba(37, 99, 235, 0.10); color: var(--blue-ink); }
.tag--purple { background: rgba(124, 58, 237, 0.10); color: var(--purple-ink); }
.tag--green { background: rgba(5, 150, 105, 0.10); color: var(--green-ink); }
.tag--amber { background: rgba(180, 83, 9, 0.10); color: var(--amber-ink); }
.tag--red { background: rgba(220, 38, 38, 0.10); color: var(--red-ink); }
.tag--slate { background: rgba(15, 23, 42, 0.06); color: var(--text-secondary); }

/* 加载态 */
.spinner { width: 1rem; height: 1rem; animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn__loading { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }

/* 工具类 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}