/*
 * 设计令牌的**唯一来源**。客户页与后台共用这一份 ——
 * 颜色与圆角只在这里改，别在页面样式里写死色值。
 */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #dfe3e8;
  --border-strong: #c4cad2;

  --text: #1c1f23;
  --text-muted: #616a75;
  --text-faint: #8b949e;

  --accent: #1f6feb;
  --accent-hover: #1a5fd0;
  --accent-soft: #e7f0ff;
  --accent-text: #ffffff;

  --ok: #1a7f4b;
  --ok-soft: #e6f4ec;
  --warn: #9a6400;
  --warn-soft: #fdf3e0;
  --danger: #b3261e;
  --danger-soft: #fdeceb;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 4px 12px rgb(16 24 40 / 6%);

  --gap: 16px;
  --gap-sm: 8px;
  --gap-lg: 24px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --surface: #1c2024;
    --surface-2: #23282d;
    --border: #313841;
    --border-strong: #46505c;

    --text: #e8eaed;
    --text-muted: #a5adb7;
    --text-faint: #7d858f;

    --accent: #4b8ef7;
    --accent-hover: #6ba1f8;
    --accent-soft: #1b2c47;

    --ok: #4cc38a;
    --ok-soft: #16301f;
    --warn: #e0a032;
    --warn-soft: #33280f;
    --danger: #f2685c;
    --danger-soft: #3a1d1a;

    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 12px rgb(0 0 0 / 30%);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  margin: 0 0 var(--gap-sm);
  line-height: 1.3;
}

h1 {
  font-size: 20px;
}
h2 {
  font-size: 17px;
}
h3 {
  font-size: 15px;
}

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

button {
  font: inherit;
}

/*
 * `[hidden]` 必须永远生效。**放在这份共用样式里，是因为这个坑已经踩到第二次了。**
 *
 * 浏览器给 `[hidden]` 的 `display: none` 来自 UA 样式表，权重比任何页面规则都低 ——
 * 只要有一处写了 `display`（比如 `dialog .field { display: block }`），
 * `element.hidden = true` 就形同虚设，元素照样显示。
 *
 *   第一次：登录页的免登面板（在 admin.css 里用 `:not([hidden])` 局部解决了）
 *   第二次：2026-10-16 在浏览器里点「取消单据」时发现，弹窗里同时冒出了
 *          「取消原因」和**「承运商」**两个输入框 —— 承运商那一栏是发货用的，
 *          它由 `dlgCarrierWrap.hidden = !spec.carrier` 控制，而那行 `.field { display: block }`
 *          把它盖掉了。接口层的几十项验证全绿，抓不到这种。
 *
 * 同一个坑出现第二次就不再局部打补丁：**这一份是全局兜底**，
 * 各页面不必再写 `:not([hidden])`（已有的那份留着无害）。`!important` 在这里是
 * 有意为之 —— 它要盖的正是"某处随手写的 display"，而不是某个具体设计。
 */
[hidden] {
  display: none !important;
}

.muted {
  color: var(--text-muted);
}
.faint {
  color: var(--text-faint);
}
.mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* 屏幕阅读器可见、视觉隐藏 */
.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;
}