/* ============================================================
   components.css — 组件结构与状态机
   只消费令牌，不判断平台。状态类 .s-hover / .s-active / .s-focus /
   .s-disabled 用于把状态静态定格下来，方便截图比对。
   ============================================================ */

.panel {
  background: var(--ui-surface);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: var(--ui-font-size);
  -webkit-font-smoothing: antialiased;
}

/* ---------------- Button ---------------- */

.btn {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--btn-h);
  margin: 0;
  padding: 0 var(--btn-px);
  border: var(--btn-border-w) solid var(--btn-border);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  box-shadow: var(--btn-shadow), inset 0 -1px 0 var(--btn-bottom-stroke);
  transition:
    background-color var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease),
    color var(--ui-duration) var(--ui-ease),
    box-shadow var(--ui-duration) var(--ui-ease);
}

.btn:is(:hover, .s-hover) {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
}

.btn:is(:active, .s-active) {
  background: var(--btn-bg-active);
  border-color: var(--btn-border-active, var(--btn-border));
  color: var(--btn-fg-active, var(--btn-fg));
  box-shadow: var(--btn-shadow-active, var(--btn-shadow)), inset 0 -1px 0 var(--btn-bottom-stroke);
}

.btn:is(:focus-visible, .s-focus) {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow:
    var(--btn-shadow),
    inset 0 -1px 0 var(--btn-bottom-stroke),
    var(--focus-ring);
}

.btn:is(:disabled, .s-disabled) {
  background: var(--btn-bg-disabled, var(--disabled-bg));
  border-color: var(--btn-border-disabled, var(--disabled-border));
  color: var(--btn-fg-disabled, var(--disabled-fg));
  box-shadow: var(--btn-shadow-disabled, none);
}

/* 主按钮：整块覆盖，所以放在普通状态之后 */
.btn--primary {
  background: var(--primary-bg);
  border-color: var(--primary-border);
  color: var(--primary-fg);
  box-shadow: var(--primary-shadow), inset 0 -1px 0 var(--primary-bottom-stroke);
}

.btn--primary:is(:hover, .s-hover) {
  background: var(--primary-bg-hover);
  border-color: var(--primary-border);
}

.btn--primary:is(:active, .s-active) {
  background: var(--primary-bg-active);
  border-color: var(--primary-border-active, var(--primary-border));
  color: var(--primary-fg);
  box-shadow: var(--primary-shadow-active, var(--primary-shadow)),
    inset 0 -1px 0 var(--primary-bottom-stroke);
}

.btn--primary:is(:disabled, .s-disabled) {
  background: var(--btn-bg-disabled, var(--disabled-bg));
  border-color: var(--btn-border-disabled, var(--disabled-border));
  color: var(--btn-fg-disabled, var(--disabled-fg));
  box-shadow: var(--btn-shadow-disabled, none);
}

/* ---------------- Text field ---------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field__label {
  font-size: var(--field-label-size);
  color: var(--ui-text-2);
  line-height: 1.2;
}

.field__wrap {
  position: relative;
  display: block;
  min-width: 0;
}

.field__input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: var(--field-h);
  margin: 0;
  padding: 0 var(--field-px);
  border: var(--field-border-w) solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--field-bg);
  color: var(--ui-text);
  font-family: inherit;
  font-size: var(--field-font-size);
  line-height: normal;
  box-shadow: var(--field-shadow);
  transition:
    background-color var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease),
    box-shadow var(--ui-duration) var(--ui-ease);
}

.field__input::placeholder {
  color: var(--field-placeholder);
  opacity: 1;
}

/* Win11 的强调色下划线：其他平台 --field-underline-w 为 0，不显示 */
.field__wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--field-underline-w);
  border-radius: 0 0 3px 3px;
  background: var(--field-underline-color);
  pointer-events: none;
}

.field:is(:focus-within, .s-focus) .field__input {
  border-color: var(--field-focus-border);
  box-shadow: var(--field-focus-shadow), var(--focus-ring);
  outline: var(--field-focus-outline, var(--focus-outline));
  outline-offset: var(--focus-outline-offset);
}

.field:is(:focus-within, .s-focus) .field__wrap::after {
  background: var(--ui-accent);
}

.field__input:disabled {
  background: var(--field-bg-disabled, var(--disabled-bg));
  border-color: var(--field-border-disabled, var(--disabled-border));
  color: var(--field-fg-disabled, var(--disabled-fg));
  box-shadow: var(--field-shadow-disabled, none);
}

.field:has(.field__input:disabled) .field__label {
  color: var(--ui-text-disabled);
}

/* ---------------- Checkbox ---------------- */

.check,
.radio,
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--choice-gap, 8px);
  font-size: var(--ui-font-size);
  color: var(--ui-text);
  cursor: default;
  user-select: none;
}

.check__input,
.radio__input,
.switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.check__box {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: var(--check-size);
  height: var(--check-size);
  margin: var(--check-pad, 0px);
  border: var(--check-border-w) solid var(--check-border);
  border-radius: var(--check-radius);
  background: var(--check-bg);
  box-shadow: var(--check-shadow);
  transition:
    background-color var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease);
}

.check__mark {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--check-mark);
  /* 数值是 viewBox（20×20）里的单位，跟着控件一起缩放 */
  stroke-width: var(--check-stroke, 2.4);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
  transition: stroke-dashoffset var(--check-duration, 140ms) var(--ui-ease);
  pointer-events: none;
}

.check__input:checked + .check__box {
  background: var(--check-bg-checked);
  border-color: var(--check-border-checked);
  box-shadow: var(--check-shadow-checked, var(--check-shadow));
}

.check__input:checked + .check__box .check__mark {
  stroke-dashoffset: 0;
}

/* 禁用态不响应指针：悬停 / 按下规则一律先排除它。原生各平台都不给禁用控件
   悬停反馈，而这批选择器带的 :is()/:not() 让权重高过下面的禁用规则（选中态悬停
   是 5 个类，禁用选中只有 4 个），不排除的话一悬停就画回选中态（Win11/macOS/GNOME
   直接变强调色）。 */
.check:not(.s-disabled, :has(.check__input:disabled)):is(:hover, .s-hover)
  .check__input:not(:checked)
  + .check__box {
  background: var(--check-bg-hover, var(--check-bg));
  border-color: var(--check-border-hover, var(--check-border));
}

.check:not(.s-disabled, :has(.check__input:disabled)):is(:active, .s-active)
  .check__input:not(:checked)
  + .check__box {
  background: var(--check-bg-active, var(--check-bg));
  border-color: var(--check-border-active, var(--check-border));
}

.check:not(.s-disabled, :has(.check__input:disabled)):is(:hover, .s-hover)
  .check__input:checked
  + .check__box {
  background: var(--check-bg-checked-hover, var(--check-bg-checked));
  border-color: var(--check-border-checked-hover, var(--check-border-checked));
}

.check:not(.s-disabled, :has(.check__input:disabled)):is(:active, .s-active)
  .check__input:checked
  + .check__box {
  background: var(--check-bg-active, var(--check-bg-checked));
  border-color: var(--check-border-active, var(--check-border-checked));
}

.check:not(.s-disabled, :has(.check__input:disabled)):is(:hover, .s-hover)
  .check__box
  .check__mark {
  stroke: var(--check-mark-hover, var(--check-mark));
}

.check:not(.s-disabled, :has(.check__input:disabled)):is(:hover, .s-hover)
  .check__input:checked
  + .check__box
  .check__mark {
  stroke: var(--check-mark-checked-hover, var(--check-mark-hover, var(--check-mark)));
}

.check:not(.s-disabled, :has(.check__input:disabled)):is(:active, .s-active)
  .check__box
  .check__mark {
  stroke: var(--check-mark-active, var(--check-mark));
}

.check__input:disabled + .check__box,
.check.s-disabled .check__box {
  background: var(--check-bg-disabled, var(--disabled-bg));
  border-color: var(--check-border-disabled, var(--disabled-border));
}

.check__input:disabled:checked + .check__box,
.check.s-disabled .check__box {
  background: var(--check-bg-disabled, var(--disabled-bg));
  border-color: var(--check-border-disabled, var(--disabled-border));
}

.check__input:disabled:checked + .check__box .check__mark,
.check.s-disabled .check__box .check__mark {
  stroke: var(--check-mark-disabled, var(--ui-text-disabled));
}

.check:has(.check__input:disabled) .check__label,
.check.s-disabled .check__label {
  color: var(--ui-text-disabled);
}

.check:is(:has(.check__input:focus-visible), .s-focus) .check__box,
.radio:is(:has(.radio__input:focus-visible), .s-focus) .radio__dot {
  outline: var(--choice-box-focus-outline, var(--focus-outline));
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring);
}

/* 有的平台（Win10）焦点框画在整行上，不是只框那个小方块 */
.check:is(:has(.check__input:focus-visible), .s-focus),
.radio:is(:has(.radio__input:focus-visible), .s-focus) {
  outline: var(--choice-focus-outline, none);
  outline-offset: var(--choice-focus-offset, var(--focus-outline-offset));
}

/* 经典外观的焦点框只框标签文字，不框整行（原生 DrawFocusRect 的范围） */
.check:is(:has(.check__input:focus-visible), .s-focus) .check__label,
.radio:is(:has(.radio__input:focus-visible), .s-focus) .radio__label {
  outline: var(--choice-label-focus-outline, none);
  outline-offset: var(--choice-label-focus-offset, 0);
}

/* 经典外观没有 focus-visible 的概念：鼠标点一下也画焦点框。默认不画 */
.check:has(.check__input:focus:not(:focus-visible)) .check__label,
.radio:has(.radio__input:focus:not(:focus-visible)) .radio__label {
  outline: var(--choice-label-focus-outline-mouse, none);
  outline-offset: var(--choice-label-focus-offset, 0);
}

/* ---------------- Radio ---------------- */

.radio__dot {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: var(--radio-size);
  height: var(--radio-size);
  margin: var(--radio-pad, 0px);
  box-shadow: var(--radio-shadow, none);
  border: var(--radio-border-w) solid var(--radio-border);
  /* 四边可以给不同颜色（--radio-border-color 是 top right bottom left 四值）；
     圆环用 1px 外边框 + 1px 内圈伪元素画，比 offset 阴影更接近 GDI 的均匀环 */
  border-color: var(--radio-border-color, var(--radio-border));
  border-radius: 50%;
  background: var(--radio-bg);
  transition:
    background-color var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease);
}

/* 内圈（第二圈）环：默认宽度 0，其他主题不受影响 */
.radio__dot::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  /* 拆成三个长写属性：内圈颜色是四值（top right bottom left），
     直接塞进 border 简写会让整条声明在计算期失效（宽度变 0）。 */
  border-width: var(--radio-inner-w, 0px);
  border-style: solid;
  border-color: var(--radio-inner-color, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.radio__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--radio-dot);
  height: var(--radio-dot);
  border-radius: 50%;
  background: var(--radio-dot-color);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--radio-dot-duration, 90ms) var(--ui-ease);
}

.radio__input:checked + .radio__dot {
  background: var(--radio-bg-checked);
  border-color: var(--radio-border-checked, var(--radio-border-color, var(--radio-border)));
  box-shadow: var(--radio-shadow-checked, var(--radio-shadow, none));
}

.radio__input:checked + .radio__dot::after {
  transform: translate(-50%, -50%) scale(1);
}

.radio:is(:hover, .s-hover) .radio__dot {
  border-color: var(--radio-border-hover, var(--radio-border-color, var(--radio-border)));
}

.radio:is(:hover, .s-hover) .radio__dot::after {
  background: var(--radio-dot-hover, var(--radio-dot-color));
}

.radio:is(:active, .s-active) .radio__dot {
  background: var(--radio-bg-active, var(--radio-bg));
  border-color: var(--radio-border-active, var(--radio-border-color, var(--radio-border)));
}

.radio:is(:active, .s-active) .radio__dot::after {
  background: var(--radio-dot-active, var(--radio-dot-color));
}

.radio__input:disabled + .radio__dot {
  background: var(--radio-bg-disabled, var(--disabled-bg));
  border-color: var(--radio-border-disabled, var(--radio-border-color, var(--radio-border)));
}

.radio__input:disabled + .radio__dot::after {
  background: var(--radio-dot-disabled, var(--ui-text-disabled));
}

.radio:has(.radio__input:disabled) .radio__label,
.radio.s-disabled .radio__label {
  color: var(--ui-text-disabled);
}

/* ---------------- Switch ---------------- */

.switch__track {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: var(--switch-w);
  height: var(--switch-h);
  padding: 0;
  border: var(--switch-border-w) solid var(--switch-border);
  border-radius: var(--switch-radius, calc(var(--switch-h) / 2));
  background: var(--switch-bg);
  box-shadow: var(--switch-track-shadow, none);
  transition:
    background-color var(--switch-duration) var(--switch-ease),
    border-color var(--switch-duration) var(--switch-ease);
}

.switch__knob {
  position: absolute;
  top: 50%;
  left: calc(var(--switch-pad) + var(--switch-border-w));
  /* macOS 26 的滑块是「胶囊」不是圆：宽高可以分开给 */
  width: var(--switch-knob-w, var(--switch-knob));
  height: var(--switch-knob);
  border-radius: var(--switch-knob-radius, calc(var(--switch-knob) / 2));
  background: var(--switch-knob-bg);
  box-shadow: var(--switch-knob-shadow);
  transform: translateY(-50%) translateX(0);
  transition:
    transform var(--switch-duration) var(--switch-ease),
    background-color var(--switch-duration) var(--switch-ease);
}

/* 滑块里的可选标记层：默认不画。主题给 --switch-mark 一张 mask 图、再给勾选态的
   颜色，就能把开关画成复选框；mask 的路径通常和 .check__mark 的 SVG 一致。 */
.switch__knob::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: var(--switch-mark, none) center / contain no-repeat;
  mask: var(--switch-mark, none) center / contain no-repeat;
}

.switch__input:checked + .switch__track {
  background: var(--switch-bg-on);
  border-color: var(--switch-border-on);
}

.switch__input:checked + .switch__track .switch__knob {
  transform: translateY(-50%) translateX(
    calc(
      var(--switch-w) - var(--switch-knob-w, var(--switch-knob)) - 2 *
        var(--switch-pad) - 2 * var(--switch-border-w)
    )
  );
  background: var(--switch-knob-on-bg);
}

.switch__input:checked + .switch__track .switch__knob::after {
  background: var(--switch-mark-color, transparent);
}

/* 按下态：给「开关画成复选框」的平台用，默认不改变外观 */
.switch:is(:active, .s-active) .switch__input:not(:checked) + .switch__track {
  background: var(--switch-bg-active, var(--switch-bg));
}

.switch:is(:active, .s-active) .switch__input:checked + .switch__track {
  background: var(--switch-bg-checked-active, var(--switch-bg-on));
}

.switch:is(:has(.switch__input:focus-visible), .s-focus) {
  outline: var(--switch-row-focus-outline, none);
  outline-offset: var(--switch-row-focus-offset, 0);
}

.switch:is(:has(.switch__input:focus-visible), .s-focus) .switch__track {
  outline: var(--switch-box-focus-outline, var(--focus-outline));
  outline-offset: var(--switch-focus-outline-offset, var(--focus-outline-offset));
  box-shadow: var(--focus-ring);
}

.switch:is(:has(.switch__input:focus-visible), .s-focus) .switch__label {
  outline: var(--switch-label-focus-outline, none);
  outline-offset: var(--switch-label-focus-offset, 0);
}

.switch:has(.switch__input:focus:not(:focus-visible)) .switch__label {
  outline: var(--switch-label-focus-outline-mouse, none);
  outline-offset: var(--switch-label-focus-offset, 0);
}

.switch__input:disabled + .switch__track {
  opacity: var(--switch-disabled-opacity, 0.5);
  filter: var(--switch-disabled-filter, grayscale(1));
}

.switch__input:not(:checked):disabled + .switch__track {
  background: var(--switch-bg-disabled, var(--switch-bg));
}

.switch__input:checked:disabled + .switch__track {
  background: var(--switch-bg-checked-disabled, var(--switch-bg-on));
}

.switch__input:checked:disabled + .switch__track .switch__knob::after {
  background: var(--switch-mark-color-disabled, var(--switch-mark-color, transparent));
}

.switch:has(.switch__input:disabled) .switch__label,
.switch.s-disabled .switch__label {
  color: var(--ui-text-disabled);
}


/* ---------------- 文本选择 ----------------
   控件标签、按钮文字不该能选中；输入框内部照旧可以选、可以拖。 */
.panel :not(input):not(textarea) {
  -webkit-user-select: none;
  user-select: none;
}

.field__input {
  -webkit-user-select: text;
  user-select: text;
}


/* ---------------- 多行输入 ---------------- */

.field__input--multiline {
  height: auto;
  min-height: var(--textarea-min-h);
  padding: var(--textarea-py) var(--field-px);
  line-height: var(--textarea-line-height, 1.45);
  resize: var(--textarea-resize, vertical);
  border-color: var(--textarea-border, var(--field-border));
}

.field:is(:focus-within, .s-focus) .field__input--multiline {
  border-color: var(--textarea-focus-border, var(--field-focus-border));
}

.field__input--multiline:disabled {
  border-color: var(--textarea-disabled-border, var(--disabled-border));
}

/* ---------------- 下拉框 ---------------- */

.select {
  position: relative;
  display: inline-block;
}

.select__button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  height: var(--select-h);
  min-width: 140px;
  padding: 0 var(--select-pr, var(--select-px)) 0 var(--select-px);
  border: var(--select-border-w) solid var(--select-border);
  border-radius: var(--select-radius);
  background: var(--select-bg);
  color: var(--select-fg, inherit);
  font-family: inherit;
  font-size: var(--ui-font-size);
  line-height: 1;
  cursor: default;
  user-select: none;
  box-shadow: var(--select-shadow, none);
  transition:
    background-color var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease);
}

.select__button:is(:hover, .s-hover) {
  background: var(--select-bg-hover, var(--select-bg));
  border-color: var(--select-border-hover, var(--select-border));
}

.select__button:is(:active, .s-active) {
  background: var(--select-bg-active, var(--select-bg));
  border-color: var(--select-border-active, var(--select-border));
}

.select__button:is(:focus-visible, .s-focus) {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring);
}

.select__button:is(:disabled, .s-disabled) {
  background: var(--select-bg-disabled, var(--disabled-bg));
  border-color: var(--select-border-disabled, var(--disabled-border));
  color: var(--select-fg-disabled, var(--disabled-fg));
}

.select__button:is(:disabled, .s-disabled) .select__chevron {
  color: var(--select-chevron-disabled, var(--select-chevron));
}

/* 箭头格：Windows 的 ComboBox 右边是一个独立的箭头按钮（17px + 1px 分隔线），
   其它平台不给 --select-arrow-w，就是普通的小箭头。 */
.select__chevron {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  width: var(--select-arrow-w, auto);
  min-width: var(--select-arrow-w, 0px);
  height: calc(100% - 2 * var(--select-arrow-inset, 0px));
  margin-right: var(--select-arrow-inset, 0px);
  padding-left: var(--select-arrow-pad, 0px);
  border-left: var(--select-arrow-sep-w, 0px) solid var(--select-arrow-sep, transparent);
  background: var(--select-arrow-bg, transparent);
  box-shadow: var(--select-arrow-shadow, none);
  color: var(--select-chevron);
}

.select__chevron-up,
.select__chevron-down {
  display: block;
  width: var(--select-chevron-size, 6px);
  height: var(--select-chevron-h, var(--select-chevron-size, 6px));
  border-right: var(--select-chevron-w, 1.5px) solid currentColor;
  border-bottom: var(--select-chevron-w, 1.5px) solid currentColor;
  /* 圆头折线箭头：主题给一张指向上方的 mask 图时，边框让位给 mask + 背景色，
     两段用同一个 mask 靠 transform 翻转。默认 none，行为不变。 */
  background: var(--select-chevron-mask-fill, transparent);
  -webkit-mask: var(--select-chevron-mask, none) center / contain no-repeat;
  mask: var(--select-chevron-mask, none) center / contain no-repeat;
}

.select__chevron-up {
  display: var(--select-chevron-up, none);
  transform: var(--select-chevron-up-transform, rotate(-135deg));
}

.select__chevron-down {
  display: var(--select-chevron-down, block);
  transform: var(--select-chevron-down-transform, rotate(45deg));
}

/* ---------------- 滑块 ---------------- */

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--slider-h);
  margin: 0;
  background: transparent;
  cursor: default;
}

.slider::-webkit-slider-runnable-track {
  height: var(--slider-track-h);
  border-radius: var(--slider-track-radius, 999px);
  background: linear-gradient(
    to right,
    var(--slider-fill) 0 var(--slider-pct, 40%),
    var(--slider-track) var(--slider-pct, 40%) 100%
  );
  box-shadow: var(--slider-track-shadow, none),
    inset 0 0 0 var(--slider-track-edge-w, 0px) var(--slider-track-edge, transparent);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--slider-thumb-w, var(--slider-thumb));
  height: var(--slider-thumb-h, var(--slider-thumb));
  margin-top: calc(
    (var(--slider-track-h) - var(--slider-thumb-h, var(--slider-thumb))) / 2
  );
  border: var(--slider-thumb-border-w, 0px) solid var(--slider-thumb-border, transparent);
  border-radius: var(--slider-thumb-radius, 50%);
  background: var(--slider-thumb-bg);
  box-shadow: var(--slider-thumb-shadow);
}

.slider:is(:hover, .s-hover)::-webkit-slider-thumb {
  background: var(--slider-thumb-bg-hover, var(--slider-thumb-bg));
}

.slider:is(:active, .s-active)::-webkit-slider-thumb {
  background: var(--slider-thumb-bg-active, var(--slider-thumb-bg));
}

.slider:disabled::-webkit-slider-thumb {
  background: var(--slider-thumb-bg-disabled, var(--slider-thumb-bg));
}

.slider::-moz-range-track {
  height: var(--slider-track-h);
  border-radius: var(--slider-track-radius, 999px);
  background: var(--slider-track);
  box-shadow: var(--slider-track-shadow, none),
    inset 0 0 0 var(--slider-track-edge-w, 0px) var(--slider-track-edge, transparent);
}

/* Firefox 把滑块左边那段单独画在 ::-moz-range-progress 上，
   斜面阴影必须两边都给，否则左边的进度段会没有立体边、看起来只剩半截。 */
.slider::-moz-range-progress {
  height: var(--slider-track-h);
  border-radius: var(--slider-track-radius, 999px);
  background: var(--slider-fill);
  box-shadow: var(--slider-track-shadow, none),
    inset 0 0 0 var(--slider-track-edge-w, 0px) var(--slider-track-edge, transparent);
}

.slider::-moz-range-thumb {
  width: var(--slider-thumb-w, var(--slider-thumb));
  height: var(--slider-thumb-h, var(--slider-thumb));
  border: var(--slider-thumb-border-w, 0px) solid var(--slider-thumb-border, transparent);
  border-radius: var(--slider-thumb-radius, 50%);
  background: var(--slider-thumb-bg);
  box-shadow: var(--slider-thumb-shadow);
}

.slider:is(:hover, .s-hover)::-moz-range-thumb {
  background: var(--slider-thumb-bg-hover, var(--slider-thumb-bg));
}

.slider:is(:active, .s-active)::-moz-range-thumb {
  background: var(--slider-thumb-bg-active, var(--slider-thumb-bg));
}

.slider:disabled::-moz-range-thumb {
  background: var(--slider-thumb-bg-disabled, var(--slider-thumb-bg));
}

/* 滑块焦点：不写这条的话六个主题都是浏览器默认那圈蓝框。这里走各平台已有的
   焦点令牌——Windows / GNOME 是描边，macOS 是外发光。 */
.slider:is(:focus-visible, .s-focus) {
  outline: var(--focus-outline);
  outline-offset: var(--slider-focus-outline-offset, var(--focus-outline-offset));
  box-shadow: var(--focus-ring);
}

/* 经典外观没有 focus-visible：鼠标点完也画焦点框，由主题决定要不要 */
.slider:focus:not(:focus-visible) {
  outline: var(--slider-focus-mouse-outline, none);
  outline-offset: var(--slider-focus-mouse-outline-offset, var(--slider-focus-outline-offset, var(--focus-outline-offset)));
  box-shadow: var(--slider-focus-mouse-ring, none);
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.slider__value {
  font-size: 12px;
  color: var(--ui-text-2);
  font-variant-numeric: tabular-nums;
  min-width: 2.5em;
}


/* ---------------- 下拉菜单 ---------------- */

.menu {
  position: fixed;
  inset: auto;
  margin: 0;
  box-sizing: border-box;
  /* 下拉框打开时由脚本把最小宽度设成按钮宽度；独立菜单用 --menu-min-w，
     这里不能写 100%，position:fixed 下那是视口宽度 */
  min-width: var(--menu-min-w);
  max-height: 260px;
  padding: var(--menu-pad);
  overflow-y: auto;
  list-style: none;
  border: var(--menu-border-w) solid var(--menu-border);
  border-radius: var(--menu-radius);
  background: var(--menu-bg);
  color: var(--menu-fg);
  box-shadow: var(--menu-shadow);
  font-size: var(--menu-item-font-size);
  user-select: none;
  /* 焦点在菜单容器上，靠高亮项指示位置，原生菜单不画焦点环 */
  outline: none;
}

.menu__item {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--menu-item-h);
  padding: 0 var(--menu-item-pad-x) 0
    calc(var(--menu-item-pad-x) + var(--menu-item-marker-space, 12px));
  border-radius: var(--menu-item-radius);
  color: inherit;
  white-space: nowrap;
  cursor: default;
}

/* 选中项左侧的小竖条：Windows 用，其它平台 token 里是透明 */
.menu__item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 3px;
  height: calc(var(--menu-item-h) - 14px);
  border-radius: 2px;
  background: transparent;
  transform: translateY(-50%);
}

.menu__item[aria-selected="true"]::before {
  background: var(--menu-item-marker);
}

.menu__item:is(.is-active, :hover) {
  background: var(--menu-item-hover-bg);
  color: var(--menu-item-hover-fg, inherit);
}

.menu__item[aria-selected="true"] {
  background: var(--menu-item-selected-bg);
  color: var(--menu-item-selected-fg);
}

/* 禁用项：原生各平台都不给悬停 / 按下反馈，键盘也要跳过。
   这条必须放在悬停 / 选中规则之后，靠同特异度、后写覆盖来压住它们的背景色。
   指针事件仍会落到它身上（方便脚本清掉上一项的高亮），点击由脚本按 aria-disabled 拦。 */
.menu__item[aria-disabled="true"],
.menu__item:disabled {
  background: transparent;
  color: var(--menu-item-disabled-fg, var(--ui-text-disabled));
}

/* 分隔线：单线是多数平台的做法，Windows XP 是两条蚀刻线，
   靠 --menu-sep-h / --menu-sep-shadow 表达，默认单线 */
.menu__separator {
  height: var(--menu-sep-h, 1px);
  margin: var(--menu-sep-margin, 4px 8px);
  padding: 0;
  border: 0;
  background: var(--menu-sep-color, rgba(0, 0, 0, 0.12));
  box-shadow: var(--menu-sep-shadow, none);
}

/* 快捷键提示：靠右对齐，颜色比正文弱一档 */
.menu__shortcut {
  margin-left: auto;
  padding-left: 24px;
  color: var(--menu-shortcut-fg, currentColor);
  opacity: var(--menu-shortcut-opacity, 0.55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------- 分段控件 ---------------- */

/* 一排互斥的按钮。六个平台里只有 macOS 和 GNOME（48+）有原生分段控件，
   Windows 三代的取值来自「最接近的原生组合」或扩展控件，见各主题注释。 */
.segmented {
  display: inline-flex;
  align-self: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  height: var(--seg-h);
  padding: var(--seg-pad, 0);
  border: var(--seg-border-w, 0) solid var(--seg-border, transparent);
  border-radius: var(--seg-radius);
  background: var(--seg-bg);
  box-shadow: var(--seg-shadow, none);
  font-family: var(--ui-font);
  user-select: none;
}

/* 焦点环：macOS 画整组，Windows / GNOME 画在单个段上 */
.segmented:has(.segmented__item:focus-visible) {
  box-shadow: var(--seg-focus-container, var(--seg-shadow, none));
}

.segmented__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--seg-item-min-w, 0);
  margin: 0;
  padding: 0 var(--seg-item-pad-x);
  border: 0;
  border-radius: var(--seg-item-radius, 0);
  background: transparent;
  color: var(--seg-fg);
  font: inherit;
  font-size: var(--seg-font-size);
  font-weight: var(--seg-font-weight, 400);
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  transition: background-color var(--seg-duration, 0ms) var(--ui-ease),
    color var(--seg-duration, 0ms) var(--ui-ease),
    box-shadow var(--seg-duration, 0ms) var(--ui-ease);
}

/* 段间分隔线：只在两个未选中段之间出现，贴着选中段的左右不画 */
.segmented__item + .segmented__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--seg-sep-inset, 0);
  bottom: var(--seg-sep-inset, 0);
  width: var(--seg-sep-w, 0);
  background: var(--seg-sep-color, transparent);
  pointer-events: none;
}

.segmented__item[aria-checked="true"]::before,
.segmented__item[aria-checked="true"] + .segmented__item::before {
  display: none;
}

.segmented__item:is(:hover, .s-hover):not([aria-checked="true"]):not(:disabled) {
  background: var(--seg-hover-bg);
  color: var(--seg-hover-fg, var(--seg-fg));
}

.segmented__item:is(:active, .s-active):not([aria-checked="true"]):not(:disabled) {
  background: var(--seg-active-bg, var(--seg-hover-bg));
}

.segmented__item[aria-checked="true"] {
  background: var(--seg-selected-bg);
  color: var(--seg-selected-fg);
  box-shadow: var(--seg-selected-shadow, none);
}

.segmented__item:is(:hover, .s-hover)[aria-checked="true"] {
  background: var(--seg-selected-hover-bg, var(--seg-selected-bg));
}

.segmented__item:is(:active, .s-active)[aria-checked="true"] {
  background: var(--seg-selected-active-bg, var(--seg-selected-bg));
}

.segmented__item:disabled {
  color: var(--seg-disabled-fg, var(--ui-text-disabled));
  opacity: var(--seg-disabled-opacity, 1);
}

.segmented__item[aria-checked="true"]:disabled {
  background: var(--seg-selected-disabled-bg, var(--seg-selected-bg));
}

.segmented__item:focus-visible {
  outline: var(--seg-focus-outline, none);
  outline-offset: var(--seg-focus-offset, -2px);
  z-index: 1;
}

/* ---------------- 标签页 ---------------- */

.tabs {
  display: block;
  min-width: 0;
}

.tabs__list:has(.tabs__tab:focus-visible) {
  box-shadow: var(--tabs-list-focus, none);
}

.tabs__list {
  display: flex;
  align-items: flex-end;
  justify-content: var(--tabs-list-justify, flex-start);
  gap: var(--tabs-gap);
  box-sizing: border-box;
  width: var(--tabs-list-width, auto);
  margin: 0 auto var(--tabs-list-overlap);
  padding: var(--tabs-list-pad-top, 0) var(--tabs-list-pad-x, 0)
    var(--tabs-list-pad-bottom, 0);
  list-style: none;
  border-bottom: var(--tabs-strip-border-w) solid var(--tabs-strip-border);
  border-radius: var(--tabs-list-radius, 0);
  background: var(--tabs-strip-bg);
}

.tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--tabs-h);
  margin: 0;
  padding: 0 var(--tabs-pad-x);
  border: var(--tabs-tab-border-w) solid var(--tabs-tab-border);
  border-bottom: 0;
  border-radius: var(--tabs-tab-radius);
  background: transparent;
  box-shadow: var(--tabs-tab-shadow);
  color: var(--tabs-fg);
  font: inherit;
  font-size: var(--tabs-font-size);
  font-weight: var(--tabs-font-weight);
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  transition: background-color var(--tabs-duration) var(--ui-ease),
    color var(--tabs-duration) var(--ui-ease);
}

/* 选中指示条：Windows 10 / 11 这种下划线式标签用；高度为 0 时不可见 */
.tabs__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--tabs-strip-border-w));
  height: var(--tabs-indicator-h);
  background: var(--tabs-indicator-color);
  pointer-events: none;
}

.tabs__tab + .tabs__tab {
  margin-left: var(--tabs-tab-overlap, 0);
}

.tabs__tab:is(:hover, .s-hover):not([aria-selected="true"]):not(:disabled) {
  background: var(--tabs-hover-bg);
  color: var(--tabs-hover-fg);
}

.tabs__tab[aria-selected="true"] {
  background: var(--tabs-selected-bg);
  color: var(--tabs-selected-fg);
  border-color: var(--tabs-selected-border);
  box-shadow: var(--tabs-selected-shadow);
  /* Win10/WinXP 的选中项比未选中高 2px，底边和面板连通；不能只往上抬，
     否则面板顶边会从下面露出来 */
  height: calc(var(--tabs-h) + var(--tabs-selected-lift, 0px));
  z-index: 1;
}

.tabs__tab:is(:hover, .s-hover)[aria-selected="true"] {
  background: var(--tabs-selected-hover-bg, var(--tabs-selected-bg));
}

.tabs__tab:is(:active, .s-active)[aria-selected="true"] {
  background: var(--tabs-selected-active-bg, var(--tabs-selected-hover-bg, var(--tabs-selected-bg)));
}

.tabs__tab:disabled {
  color: var(--tabs-disabled-fg, var(--ui-text-disabled));
}

.tabs__tab:focus-visible {
  outline: var(--tabs-focus-outline);
  outline-offset: var(--tabs-focus-offset);
  z-index: 2;
}

.tabs__panel {
  margin: 0 var(--tabs-panel-inset-x, 0);
  background: var(--tabs-panel-bg);
  border: var(--tabs-panel-border-w) solid var(--tabs-panel-border);
  border-radius: var(--tabs-panel-radius-top, 0) var(--tabs-panel-radius-top, 0)
    var(--tabs-panel-radius) var(--tabs-panel-radius);
  box-shadow: var(--tabs-panel-shadow);
  padding: var(--tabs-panel-pad);
  color: var(--ui-text);
  font-size: var(--ui-font-size);
}

.tabs__panel[hidden] {
  display: none;
}

/* ---------------- 进度条 ---------------- */

.progress {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: var(--progress-h);
  overflow: hidden;
  background-color: var(--progress-track);
  background-image: var(--progress-track-image);
  border: var(--progress-border-w) solid var(--progress-border);
  border-radius: var(--progress-radius);
  box-shadow: var(--progress-track-shadow);
}

.progress__fill {
  width: var(--progress-value, 0%);
  height: 100%;
  background-color: var(--progress-fill);
  background-image: var(--progress-fill-image);
  border-radius: var(--progress-fill-radius);
  box-shadow: var(--progress-fill-shadow);
  transition: width var(--progress-duration) var(--ui-ease);
}

.progress[data-indeterminate] .progress__fill {
  width: var(--progress-indeterminate-w);
  animation: progress-indeterminate var(--progress-indeterminate-duration)
    var(--progress-indeterminate-ease) infinite;
}

@keyframes progress-indeterminate {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(var(--progress-indeterminate-travel));
  }
}

/* ---------------- 提示气泡 ---------------- */

.tooltip {
  position: fixed;
  z-index: 2000;
  box-sizing: border-box;
  max-width: var(--tooltip-max-w);
  padding: var(--tooltip-pad-y) var(--tooltip-pad-x);
  border: var(--tooltip-border-w) solid var(--tooltip-border);
  border-radius: var(--tooltip-radius);
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-family: var(--ui-font);
  font-size: var(--tooltip-font-size);
  line-height: 1.3;
  box-shadow: var(--tooltip-shadow);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--tooltip-duration) var(--ui-ease);
}

.tooltip[data-open] {
  opacity: 1;
}

.tooltip[hidden] {
  display: none;
}

/* ---------------- 自定义滚动条（Firefox 兜底） ---------------- */
/* Firefox 不能用 ::-webkit-scrollbar；macOS 的 overlay 也不受宽度/圆角控制。
   行为在 packages/core/src/behavior/scrollbar.js，只在 Firefox 里挂载。 */

.dsb {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 30;
  width: var(--scrollbar-size, 8px);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.dsb--fixed {
  position: fixed;
  height: 100vh;
}

.dsb[hidden] {
  display: none;
}

.dsb__track {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--scrollbar-track, transparent);
  /* 轨道不吃滚轮；滚轮落到内容上，和原生滚动条一致 */
  pointer-events: none;
}

.dsb__thumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--scrollbar-thumb, rgba(0, 0, 0, 0.35));
  border-radius: var(--scrollbar-radius, 0px);
  border: var(--scrollbar-border, 0px) solid transparent;
  background-clip: padding-box;
  box-shadow: var(--scrollbar-thumb-shadow, none);
  pointer-events: auto;
}

.dsb--dragging .dsb__thumb,
.dsb__thumb:hover {
  background: var(--scrollbar-thumb-hover, var(--scrollbar-thumb));
}

.dsb__btn {
  display: var(--scrollbar-buttons, none);
  flex: 0 0 var(--scrollbar-size, 0px);
  width: 100%;
  height: var(--scrollbar-size, 0px);
  padding: 0;
  border: 0;
  background-color: var(--scrollbar-button-bg, var(--scrollbar-track));
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--scrollbar-button-shadow, none);
  pointer-events: auto;
}

.dsb__btn--up {
  background-image: var(--scrollbar-arrow-up, none);
}

.dsb__btn--down {
  background-image: var(--scrollbar-arrow-down, none);
}

.dsb__btn:active {
  background-color: var(--scrollbar-button-active-bg, var(--scrollbar-button-bg));
  box-shadow: var(--scrollbar-button-active-shadow, var(--scrollbar-button-shadow));
}

/* 有滚动条时把它的宽度从内容区让出来，别压在控件上 */
.window__body.dsb-overflow {
  padding-right: calc(18px + var(--scrollbar-size, 0px));
}

.rooms.dsb-overflow {
  padding-right: var(--scrollbar-size, 0px);
}

/* DOM 接管后不再显示原生滚动条 */
[data-dialect-scrollbar].dsb-on {
  scrollbar-width: none;
}

[data-dialect-scrollbar].dsb-on::-webkit-scrollbar {
  display: none;
}