/* 组件:按钮、输入、滑块、分段选择、选择卡、信息卡、指标卡、徽标、对话气泡、表格(只用 令牌.css 的变量) */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
.数 { font-variant-numeric: tabular-nums; }
.辅 { font-size: var(--fs-aux); color: var(--text-2); }
svg.lucide { width: 18px; height: 18px; stroke-width: 2; flex: none; }

/* 卡片 */
.卡 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.卡头 { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); min-height: 48px; border-bottom: 1px solid var(--line); }
.卡头 h3 { font-size: var(--fs-aux); font-weight: 700; color: var(--text); letter-spacing: .02em; white-space: nowrap; }
.图例项 { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-aux); color: var(--text-2); white-space: nowrap; }
.图例项 i { width: 12px; height: 4px; border-radius: 2px; display: inline-block; }
.卡头 .lucide { color: var(--brand); }
.卡头 .右 { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }
.卡身 { padding: var(--s-4); }

/* 按钮 */
.钮 { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 40px; padding: 0 var(--s-4); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: var(--fs-aux); font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; white-space: nowrap; }
.钮:hover { background: var(--g-50); }
.钮:focus-visible { outline: none; box-shadow: var(--focus); }
.钮.主 { background: var(--p-600); border-color: var(--p-600); color: var(--text-inv); }
.钮.主:hover { background: var(--p-700); border-color: var(--p-700); }
.钮.大 { height: 48px; font-size: var(--fs-body); padding: 0 var(--s-5); }
.钮.满 { width: 100%; }
.钮.静 { border-color: transparent; background: transparent; color: var(--text-2); }
.钮.静:hover { background: var(--g-50); color: var(--text); }
.钮[disabled] { background: var(--g-100); border-color: var(--g-100); color: var(--g-600); cursor: not-allowed; }

/* 表单 */
.字段 { display: grid; gap: var(--s-2); }
.字段 + .字段 { margin-top: var(--s-4); }
.字段名 { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-aux); font-weight: 500; color: var(--text); }
.字段名 output { color: var(--brand-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.输入 { height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-aux); width: 100%; }
.输入:focus { outline: none; border-color: var(--p-500); box-shadow: var(--focus); }
.输入::placeholder { color: var(--g-500); }

/* 滑块 */
input[type=range].滑块 { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; margin: 0; cursor: pointer; --百分: 50%; }
input[type=range].滑块::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-pill); background: linear-gradient(to right, var(--p-500) 0 var(--百分), var(--g-100) var(--百分) 100%); }
input[type=range].滑块::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--g-100); }
input[type=range].滑块::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--p-500); }
input[type=range].滑块::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--surface); border: 2px solid var(--p-500); box-shadow: var(--sh-1); }
input[type=range].滑块::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--p-500); }
input[type=range].滑块:focus-visible { outline: none; }
input[type=range].滑块:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
.刻度 { display: flex; justify-content: space-between; font-size: var(--fs-aux); color: var(--text-2); }

/* 分段选择(单选或多选) */
.分段 { display: flex; padding: 3px; gap: 3px; background: var(--g-50); border: 1px solid var(--line); border-radius: var(--r-md); }
.分段 label { flex: 1; position: relative; }
.分段 input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.分段 span { display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 var(--s-2); border-radius: var(--r-sm); font-size: var(--fs-aux); font-weight: 500; color: var(--text-2); white-space: nowrap; transition: background .15s, color .15s; }
.分段 input:checked + span { background: var(--surface); color: var(--brand-text); box-shadow: var(--sh-1); }
.分段 input:focus-visible + span { box-shadow: var(--focus); }

/* 选择卡(单选的大选项) */
.选项 { display: grid; gap: var(--s-2); }
.选项.双 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.选项 label { position: relative; display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font-size: var(--fs-aux); }
.选项 input { position: absolute; opacity: 0; }
.选项 .点 { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--g-300); flex: none; }
.选项 input:checked ~ .点 { border: 5px solid var(--p-600); }
.选项 label:has(input:checked) { border-color: var(--p-500); background: var(--p-50); }

/* 指标卡 */
.指标组 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.指标 { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.指标 .名 { font-size: var(--fs-aux); color: var(--text-2); display: flex; align-items: center; gap: var(--s-1); }
.指标 .名 .lucide { width: 16px; height: 16px; color: var(--g-500); }
.指标 .值 { font-size: var(--fs-num); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--text); }
.指标 .值 small { font-size: var(--fs-aux); font-weight: 500; color: var(--text-2); margin-left: 2px; }
.指标.好 .值 { color: var(--ok-700); }
.指标.坏 .值 { color: var(--err-700); }

/* 徽标 */
.徽 { display: inline-flex; align-items: center; gap: var(--s-1); height: 26px; padding: 0 var(--s-2); border-radius: var(--r-pill); font-size: var(--fs-aux); font-weight: 500; white-space: nowrap; background: var(--g-50); color: var(--text-2); }
.徽组 { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
.徽 .lucide { width: 14px; height: 14px; }
.徽.主 { background: var(--p-50); color: var(--p-700); }
.徽.紫 { background: var(--a-50); color: var(--a-700); }
.徽.好 { background: var(--ok-50); color: var(--ok-700); }
.徽.警 { background: var(--warn-50); color: var(--warn-700); }
.徽.坏 { background: var(--err-50); color: var(--err-700); }

/* 信息条 */
.提示 { display: flex; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: var(--p-50); color: var(--p-800); font-size: var(--fs-aux); }
.提示 .lucide { color: var(--p-600); margin-top: 3px; }
.提示.警 { background: var(--warn-50); color: var(--warn-700); }
.提示.警 .lucide { color: var(--warn-700); }

/* 对话气泡 */
.气泡 { max-width: 72%; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); font-size: var(--fs-aux); }
.气泡.问 { margin-left: auto; background: var(--p-600); color: var(--text-inv); border-bottom-right-radius: var(--r-sm); }
.气泡.答 { background: var(--a-50); color: var(--g-800); border-bottom-left-radius: var(--r-sm); }
.气泡 .依据 { display: block; margin-top: var(--s-1); color: var(--a-700); }

/* 表格 */
.表 { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-aux); }
.表 th { text-align: left; font-weight: 500; color: var(--text-2); background: var(--g-50); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.表 td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.表 tr:hover td { background: var(--g-25); }
.表 td.数 { text-align: right; }