:root {
  --field-border: #acbeb5;
  --field-border-soft: #becdc5;
  --panel-border: #e4e9e6;
  --brand-deep: #143b39;
  --action: #2784ed;
  --action-ink: #155fb1;
  --action-hover: #166ed0;
  --action-soft: #eaf3ff;
  --canvas: #f2f6f5;
  --ink: #192e2a;
  --border-soft: #d8e3e1;
  --platform-font: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}
select {
  appearance: none;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 36px 0 12px;
  line-height: 1.5;
  border: 1px solid var(--field-border);
  border-radius: 6px;
  color: var(--ink);
  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2350645f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px;
  cursor: pointer;
}
@media (hover: hover) {
  select:hover { border-color: var(--action-ink) }
}
:is(button, a[href], summary, select, input[type=checkbox], input[type=radio]):focus-visible {
  outline: 2px solid var(--action-ink);
  outline-offset: -2px;
}
button.primary:focus-visible, a[aria-current=page]:focus-visible { outline-color: white; outline-offset: -4px }
@media (forced-colors: active) {
  :is(button, a[href], summary, select):focus-visible { outline-color: Highlight }
}
@media (forced-colors: active) {
  select { appearance: auto; background-image: none; padding-right: 12px }
}

@supports (appearance: base-select) {
  @media (forced-colors: none) {
    select, select::picker(select) { appearance: base-select }
    select:not([multiple]):not([size]) { display: inline-flex; align-items: center }
    select::picker-icon { display: none }
    select::picker(select) {
      margin-block: 4px;
      min-width: anchor-size(width);
      padding: 4px;
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--border-soft);
      border-radius: 8px;
      box-shadow: 0 4px 14px #192e2a14;
      font: inherit;
    }
    select option {
      display: flex;
      align-items: center;
      min-height: 44px;
      padding: 8px 10px;
      border-radius: 4px;
      cursor: pointer;
    }
    select option::checkmark { order: 1; margin-left: auto; color: var(--action-ink) }
    select option:checked { background: var(--action-soft); color: var(--action-ink); font-weight: 600 }
    select option:hover { background: var(--canvas) }
    select option:focus-visible { outline: 2px solid var(--action-ink); outline-offset: -2px }
  }
}

/* Trace the field edge without changing its size or covering the text inset. */
:is(input:not([type=checkbox], [type=radio], [type=button], [type=submit]), textarea):focus {
  outline: 1px solid var(--action-ink);
  outline-offset: -1px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--action-ink) 9%, transparent);
}
@media (forced-colors: active) {
  :is(input, textarea):focus-visible { outline: 2px solid Highlight; outline-offset: 1px }
}