/* ============ 基础按钮（侧栏/登录/通用） ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm);
  padding: 10px 18px; border: 1px solid var(--c-outline-var); border-radius: var(--r-lg);
  background: var(--c-surface-container); color: var(--c-on-surface);
  font-size: var(--fs-sm); font-weight: 600;
  transition: all .15s var(--ease);
}
.btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--primary {
  background: var(--c-primary-container); color: var(--c-on-primary);
  border-color: transparent; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover { color: var(--c-on-primary); filter: brightness(1.06); }
.btn--ghost { background: transparent; border-color: var(--c-outline-var); }
.btn--block { width: 100%; padding: 13px 18px; }

/* 主题切换 */
.theme-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  padding: 7px 12px; border-radius: var(--r-full);
  border: 1px solid var(--c-outline-var); background: var(--c-surface-container);
  color: var(--c-on-surface); font-size: var(--fs-sm); font-weight: 600;
}
.theme-toggle:hover { border-color: var(--c-primary); }
.theme-toggle__dot { width: 14px; height: 14px; border-radius: var(--r-full); background: var(--c-primary-container); box-shadow: 0 0 0 3px var(--c-surface); }

/* ============ 按钮矩阵（Interface Variance Matrix） ============ */
.btn-matrix { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-md); }
@media (max-width: 640px) { .btn-matrix { grid-template-columns: repeat(2, 1fr); } }

.btn2 {
  padding: 9px 14px; border: 2px solid transparent; border-radius: var(--r);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: transparent; color: var(--c-on-surface); box-shadow: var(--shadow-sm);
  transition: all .15s var(--ease); cursor: pointer;
}
/* 实色 */
.btn2--primary   { background: var(--c-primary);          color: var(--c-on-primary); }
.btn2--secondary { background: var(--c-secondary);        color: var(--c-on-secondary); }
.btn2--tertiary  { background: var(--c-tertiary);         color: var(--c-on-tertiary); }
.btn2--error     { background: var(--c-error);            color: var(--c-on-error); }
.btn2--inverse   { background: var(--c-on-surface);       color: var(--c-surface); }
.btn2--primary:hover, .btn2--secondary:hover, .btn2--tertiary:hover,
.btn2--error:hover, .btn2--inverse:hover { filter: brightness(1.08); }
/* 描边 */
.btn2--o-primary   { border-color: var(--c-primary);    color: var(--c-primary);    box-shadow: none; }
.btn2--o-secondary { border-color: var(--c-secondary);  color: var(--c-secondary);  box-shadow: none; }
.btn2--o-tertiary  { border-color: var(--c-tertiary);   color: var(--c-tertiary);   box-shadow: none; }
.btn2--o-error     { border-color: var(--c-error);      color: var(--c-error);      box-shadow: none; }
.btn2--o-inverse   { border-color: var(--c-on-surface); color: var(--c-on-surface); box-shadow: none; }
.btn2--o-primary:hover   { background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
.btn2--o-secondary:hover { background: color-mix(in srgb, var(--c-secondary) 8%, transparent); }
.btn2--o-tertiary:hover  { background: color-mix(in srgb, var(--c-tertiary) 8%, transparent); }
.btn2--o-error:hover     { background: color-mix(in srgb, var(--c-error) 8%, transparent); }
.btn2--o-inverse:hover   { background: color-mix(in srgb, var(--c-on-surface) 8%, transparent); }

/* ---- 尺寸：巨大 / 大 / 中 / 普通(默认) / 小 / 很小 ---- */
.btn2--xl { padding: 15px 30px; font-size: 18px; border-radius: var(--r-md); }
.btn2--lg { padding: 12px 22px; font-size: 15px; }
.btn2--md { padding: 10px 17px; font-size: 13px; }
/* 普通 = 默认 .btn2（padding 9px 14px / 12px） */
.btn2--sm { padding: 6px 12px;  font-size: 11px; }
.btn2--xs { padding: 3px 8px;   font-size: 10px; letter-spacing: .02em; }

/* ---- 更多实心配色：红/蓝/绿/橙/黄/黑/灰/紫/金/粉 ---- */
.btn2--red    { background: #dc2626; color: #fff; }
.btn2--blue   { background: #2563eb; color: #fff; }
.btn2--green  { background: #16a34a; color: #fff; }
.btn2--orange { background: #f97316; color: #fff; }
.btn2--yellow { background: #eab308; color: #1a1a1a; }
.btn2--black  { background: #1f2430; color: #fff; }
.btn2--gray   { background: #6b7280; color: #fff; }
.btn2--purple { background: #9333ea; color: #fff; }
.btn2--gold   { background: #c9a227; color: #1a1a1a; }
.btn2--pink   { background: #ec4899; color: #fff; }
.btn2--red:hover, .btn2--blue:hover, .btn2--green:hover, .btn2--orange:hover, .btn2--yellow:hover,
.btn2--black:hover, .btn2--gray:hover, .btn2--purple:hover, .btn2--gold:hover, .btn2--pink:hover { filter: brightness(1.08); }

/* 按钮横排（自适应换行，用于尺寸/配色展示与工具栏）*/
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-md); }

/* ============ 徽章 / chip（Status Indicators + 卡片角标） ============ */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-md); }
.chip {
  display: inline-flex; align-items: center;
  padding: 3px 12px; border: 1px solid transparent; border-radius: var(--r-full);
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
/* 实色 */
.chip--primary     { background: var(--c-primary);   color: var(--c-on-primary); }
.chip--secondary   { background: var(--c-secondary); color: var(--c-on-secondary); }
.chip--tertiary    { background: var(--c-tertiary);  color: var(--c-on-tertiary); }
.chip--error-solid { background: var(--c-error);     color: var(--c-on-error); }
/* 描边 */
.chip--o-primary   { border-color: var(--c-primary);   color: var(--c-primary); }
.chip--o-secondary { border-color: var(--c-secondary); color: var(--c-secondary); }
.chip--o-tertiary  { border-color: var(--c-tertiary);  color: var(--c-tertiary); }
.chip--o-error     { border-color: var(--c-error);     color: var(--c-error); }
/* 卡片角标：软主色 / 中性 / 软错误 */
.chip--soft    { background: color-mix(in srgb, var(--c-primary-container) 14%, transparent); color: var(--c-primary); }
.chip--neutral { background: var(--c-surface-highest); color: var(--c-on-surface-var); }
.chip--error   { background: var(--c-error-container); color: var(--c-error); }

/* 额外指令按钮（black.png 的 Bio-Metric 药丸 / Stealth 隐身）*/
.btn2--pill {
  border-radius: var(--r-full); box-shadow: none; color: var(--c-primary);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 20%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--c-primary) 26%, transparent);
}
.btn2--stealth { background: color-mix(in srgb, var(--c-on-surface) 7%, transparent); color: var(--c-on-surface-var); font-style: italic; box-shadow: none; }

/* Audit Note 提示框（black.png 右下角）*/
.callout { display: flex; gap: var(--sp-md); padding: var(--sp-md); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--c-primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-primary) 14%, transparent); }
.callout__icon { flex: none; color: var(--c-primary); font-size: 18px; line-height: 1.3; }
.callout__title { font-size: var(--fs-label); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary); }
.callout__text { margin-top: 4px; font-size: var(--fs-label); line-height: 1.5; color: var(--c-on-surface-var); }