@layer components {
.btn {
  height: 30px; padding: 0 11px; border-radius: var(--r-8); border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--fg-2); white-space: nowrap; font-size: var(--fs-12-5);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.btn:hover { border-color: var(--fg-4); color: var(--fg); }
.btn.lg { height: 36px; padding: 0 14px; font-size: var(--fs-13); border-radius: var(--r-9); }
.btn.sm { height: 24px; padding: 0 8px; font-size: var(--fs-11-5); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--fg-on-accent); font-weight: 600; }
.btn.pri:hover { filter: brightness(1.08); color: var(--fg-on-accent); }
.btn.white { background: var(--fg); border-color: var(--fg); color: var(--fg-on-light); font-weight: 600; }
.btn.white:hover { background: var(--white); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: var(--fg-on-accent); font-weight: 600; }
.btn.ok:hover { filter: brightness(1.08); color: var(--fg-on-accent); }
.btn.bad { border-color: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); }
.btn.bad:hover { background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); }
.btn.bad.filled { background: color-mix(in srgb, var(--bad) 12%, transparent); }
.btn.warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }
.btn.warn:hover { background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); }
.btn.warn.filled { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.btn:disabled { opacity: 0.4; }
.ibtn:disabled, .ra:disabled { opacity: 0.3; pointer-events: none; }
.btn.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--fg); }
.btn kbd { background: rgb(var(--ink-rgb) / 0.15); border-color: rgb(var(--ink-rgb) / 0.2); color: inherit; }
.btn.link { border: 0; height: auto; padding: 0; color: var(--accent); }

.ghost { height: 26px; border-radius: var(--r-7); padding: 0 9px; font-size: var(--fs-11-5); color: var(--fg-3); border: 1px dashed var(--line-2); }
.ghost:hover { color: var(--fg); border-style: solid; border-color: var(--fg-4); }

.toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-2); font-size: var(--fs-12); white-space: nowrap; }
.toggle .sw { width: 28px; height: 16px; border-radius: var(--r-8); background: var(--bg-5); position: relative; transition: var(--t-base); flex: none; }
.toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: var(--r-round); background: var(--fg-3); transition: var(--t-base); }
.toggle[aria-pressed="true"] .sw { background: var(--accent); }
.toggle[aria-pressed="true"] .sw::after { left: 14px; background: var(--bg-1); }

.seg { display: inline-flex; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-9); padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { height: 28px; padding: 0 11px; border-radius: var(--r-6); color: var(--fg-3); font-size: var(--fs-12-5); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.seg button:hover { color: var(--fg); }
.seg button.on { background: var(--sel); color: var(--fg); }
}