/*
 * Skarn UI — Components（全部组件）
 *
 * 设计铁律：
 *   - 一切元素 border-radius: 0（绝对直角）
 *   - 颜色/阴影/遮罩一律引用 var(--skarn-xxx)，派生色用 color-mix()
 *   - 大容器悬停：边框主色 + inset 内环（加粗仅向内，零布局影响）
 *   - translateY(-2px) 上浮仅限面包屑/分页/下拉菜单
 *   - 焦点环一律 box-shadow: 0 0 0 1px var(--skarn-primary)，无 outline
 *   - BEM 命名：skarn-组件__子元素--状态
 *   - 间距统一 8px 节奏（var(--skarn-space-*)）
 */

/* ================= 组件：卡片 (Card) ================= */
/* 卡片完全直角，通过大内边距和极柔和的阴影提供友好感 */
.skarn-card {
  background-color: var(--skarn-surface);
  border-radius: 0;
  border: 1px solid var(--skarn-border);
  padding: 2rem;
  box-shadow: var(--skarn-shadow);
  transition: var(--skarn-transition);
}
.skarn-card:hover {
  border-color: var(--skarn-primary);
  /* 加粗仅向内：inset 内环模拟 2px 边框，不改变 border-width，零布局影响 */
  box-shadow: var(--skarn-shadow-hover), inset 0 0 0 1px var(--skarn-primary);
}
/* 整卡可点击（<a> 用法） */
.skarn-card--link {
  display: block;
  text-decoration: none;
  color: var(--skarn-text-main);
}
/* 状态卡片：主色左栏点染（4px，与 Alert 同口径）；悬停时左栏色不被主色覆盖 */
.skarn-card--warning {
  border-inline-start: 4px solid var(--skarn-warning);
}
.skarn-card--warning:hover {
  border-inline-start-color: var(--skarn-warning);
}
.skarn-card--danger {
  border-inline-start: 4px solid var(--skarn-danger);
}
.skarn-card--danger:hover {
  border-inline-start-color: var(--skarn-danger);
}
/* 卡片内区块：标题 / 副标题 / 正文 */
.skarn-card__title {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}
.skarn-card__subtitle {
  margin: -0.25rem 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--skarn-text-muted);
}
.skarn-card__text {
  margin-bottom: 0.75rem;
}
.skarn-card__text:last-child {
  margin-bottom: 0;
}
/* 通栏页眉/页脚：负 margin 撑满卡片，抵住卡片边框 */
.skarn-card__header {
  margin: -2rem -2rem 2rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--skarn-border);
  background-color: color-mix(in srgb, var(--skarn-border) 30%, var(--skarn-surface));
  font-weight: 600;
}
.skarn-card__footer {
  margin: 2rem -2rem -2rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--skarn-border);
  background-color: color-mix(in srgb, var(--skarn-border) 30%, var(--skarn-surface));
  font-size: 0.9rem;
  color: var(--skarn-text-muted);
}

/* ================= 组件：按钮 (Button) ================= */
.skarn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 统一控件高度 44px，与输入框、下拉触发、顶栏按钮对齐 */
  height: 2.75rem;
  /* 内边距四向一致：行高 1 时内容高 = 字号（0.95rem = 15.2px），
   * 垂直留白 = (44 - 15.2) / 2 ≈ 14.4px ≈ 0.9rem，水平用同值。 */
  padding: 0 0.9rem;
  /* 行高收紧为 1：消除字体行盒上下留白，文字与图标在同一轴线上精确居中 */
  line-height: 1;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0; /* 绝对直角 */
  border: 1px solid transparent;
  background: transparent;
  color: var(--skarn-text-main);
  transition: var(--skarn-transition);
}

.skarn-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--skarn-primary); /* 直角焦点环，不用圆角 outline */
}
.skarn-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* 按压/选中态（配合按钮组切换使用） */
.skarn-btn.is-active {
  border-color: var(--skarn-primary);
  color: var(--skarn-primary);
  box-shadow: inset 0 0 0 1px var(--skarn-primary);
  z-index: 1;
}

/* 主按钮 */
.skarn-btn--primary {
  background-color: var(--skarn-primary);
  color: var(--skarn-on-primary);
}
.skarn-btn--primary:hover:not(:disabled) {
  background-color: var(--skarn-primary-hover);
  box-shadow: var(--skarn-shadow);
}
.skarn-btn--primary:focus-visible {
  box-shadow: 0 0 0 1px var(--skarn-on-primary);
}

/* 次级按钮：描边 */
.skarn-btn--outline {
  border-color: var(--skarn-border);
  background-color: var(--skarn-surface);
  color: var(--skarn-text-main);
}
.skarn-btn--outline:hover:not(:disabled) {
  border-color: var(--skarn-primary);
  color: var(--skarn-primary);
  box-shadow: var(--skarn-shadow);
}

/* 文本按钮 */
.skarn-btn--text {
  color: var(--skarn-secondary);
}
.skarn-btn--text:hover:not(:disabled) {
  color: var(--skarn-primary);
  background-color: color-mix(in srgb, var(--skarn-primary) 6%, transparent);
}

/* 尺寸：小号 36px，与分页项对齐；大号 52px（水平 padding 与各自垂直留白等值） */
.skarn-btn--sm { height: 2.25rem; padding: 0 0.7rem; font-size: 0.85rem; }
.skarn-btn--lg { height: 3.25rem; padding: 0 1.1rem; font-size: 1.05rem; }

/* ================= 组件：按钮组 (Button Group) ================= */
/* 相邻按钮共用边框（-1px 咬合），悬停/聚焦时 z-index 提升避免被遮挡 */
.skarn-btn-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.skarn-btn-group > .skarn-btn {
  position: relative;
  flex: 1 1 auto;
}
.skarn-btn-group > .skarn-btn:not(:first-child) {
  margin-inline-start: -1px;
}
.skarn-btn-group > .skarn-btn:hover,
.skarn-btn-group > .skarn-btn:focus-visible,
.skarn-btn-group > .skarn-btn.is-active {
  z-index: 1;
}
.skarn-btn-group--vertical {
  flex-direction: column;
  align-items: stretch;
}
.skarn-btn-group--vertical > .skarn-btn:not(:first-child) {
  margin-inline-start: 0;
  margin-top: -1px;
}
/* 尺寸组：整体调整内部按钮高度（padding 与单按钮口径一致） */
.skarn-btn-group--sm > .skarn-btn { height: 2.25rem; padding: 0 0.7rem; font-size: 0.85rem; }
.skarn-btn-group--lg > .skarn-btn { height: 3.25rem; padding: 0 1.1rem; font-size: 1.05rem; }
/* 工具栏：多组按钮的组合容器 */
.skarn-btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ================= 组件：标签 (Tag) ================= */
.skarn-tag {
  display: inline-block;
  /* 行高收紧后补足垂直 padding，恢复饱满高度（≈原 1.6 行高时的观感） */
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1; /* 与按钮同口径：行盒贴紧文字，垂直居中 */
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background-color: var(--skarn-bg);
  color: var(--skarn-text-muted);
}
.skarn-tag--primary { border-color: var(--skarn-primary); color: var(--skarn-primary); }
.skarn-tag--secondary { border-color: var(--skarn-secondary); color: var(--skarn-secondary); }
.skarn-tag--success { border-color: var(--skarn-success); color: var(--skarn-success); }
.skarn-tag--warning { border-color: var(--skarn-warning); color: var(--skarn-warning); }
.skarn-tag--danger { border-color: var(--skarn-danger); color: var(--skarn-danger); }

/* 实心标签 */
.skarn-tag--filled {
  border-color: var(--skarn-primary);
  background-color: var(--skarn-primary);
  color: var(--skarn-on-primary);
}
.skarn-tag--filled-secondary {
  border-color: var(--skarn-secondary);
  background-color: var(--skarn-secondary);
  color: #FFFFFF;
}
.skarn-tag--filled-success {
  border-color: var(--skarn-success);
  background-color: var(--skarn-success);
  color: #FFFFFF;
}
.skarn-tag--filled-warning {
  border-color: var(--skarn-warning);
  background-color: var(--skarn-warning);
  color: #FFFFFF;
}
.skarn-tag--filled-danger {
  border-color: var(--skarn-danger);
  background-color: var(--skarn-danger);
  color: #FFFFFF;
}

/* ================= 组件：徽标 (Badge) ================= */
.skarn-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: 0;
  background-color: var(--skarn-primary);
  color: var(--skarn-on-primary);
  vertical-align: middle;
}
.skarn-badge--secondary { background-color: var(--skarn-secondary); color: #FFFFFF; }
.skarn-badge--success { background-color: var(--skarn-success); color: #FFFFFF; }
.skarn-badge--warning { background-color: var(--skarn-warning); color: #FFFFFF; }
.skarn-badge--danger { background-color: var(--skarn-danger); color: #FFFFFF; }

/* 圆点徽标（配合 .skarn-badge-wrap 吸附在元素右上角） */
.skarn-badge--dot { width: 8px; height: 8px; min-width: 8px; padding: 0; }
.skarn-badge-wrap {
  position: relative;
  display: inline-flex;
}
.skarn-badge-wrap .skarn-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

/* ================= 组件：头像 (Avatar) ================= */
.skarn-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1; /* 汉字在方形头像内精确居中 */
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--skarn-primary) 30%, transparent);
  background-color: color-mix(in srgb, var(--skarn-primary) 12%, var(--skarn-surface));
  color: var(--skarn-primary);
}
.skarn-avatar--sm { width: 32px; height: 32px; font-size: 0.85rem; }
.skarn-avatar--lg { width: 56px; height: 56px; font-size: 1.4rem; }
.skarn-avatar--secondary {
  border-color: color-mix(in srgb, var(--skarn-secondary) 30%, transparent);
  background-color: color-mix(in srgb, var(--skarn-secondary) 12%, var(--skarn-surface));
  color: var(--skarn-secondary);
}

/* ================= 组件：导航 (Nav) ================= */
/* 通用链接导航；--pills 胶囊选中、--fill 等宽、--vertical 竖排 */
.skarn-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.skarn-nav__item { margin: 0; }
.skarn-nav__link {
  display: block;
  padding: 0.5rem 0.25rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--skarn-text-muted);
  text-decoration: none;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  transition: var(--skarn-transition);
}
.skarn-nav__link:hover {
  color: var(--skarn-primary);
}
.skarn-nav__link.is-active {
  color: var(--skarn-primary);
  border-bottom-color: var(--skarn-primary);
}
.skarn-nav__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
/* 胶囊样式：选中实心主色点染 */
.skarn-nav--pills {
  gap: 0.5rem;
}
.skarn-nav--pills .skarn-nav__link {
  border-bottom: none;
  padding: 0.5rem 1.25rem;
}
.skarn-nav--pills .skarn-nav__link.is-active {
  background-color: var(--skarn-primary);
  color: var(--skarn-on-primary);
}
/* 等宽铺满 */
.skarn-nav--fill .skarn-nav__item {
  flex: 1 1 auto;
  text-align: center;
}
/* 竖排：选中主色左栏 + 淡染 */
.skarn-nav--vertical {
  flex-direction: column;
  gap: 0.25rem;
}
.skarn-nav--vertical .skarn-nav__link {
  border-bottom: none;
  border-inline-start: 3px solid transparent;
  padding: 0.5rem 0.75rem;
}
.skarn-nav--vertical .skarn-nav__link.is-active {
  border-inline-start-color: var(--skarn-primary);
  background-color: color-mix(in srgb, var(--skarn-primary) 6%, transparent);
}

/* ================= 组件：标签页 (Tabs) ================= */
.skarn-tabs__list {
  display: flex;
  gap: 2rem;
  border-bottom: 1px solid var(--skarn-border);
}
.skarn-tabs__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.75rem 0.25rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--skarn-text-muted);
  cursor: pointer;
  transition: var(--skarn-transition);
}
.skarn-tabs__tab:hover {
  color: var(--skarn-primary);
}
.skarn-tabs__tab.is-active {
  color: var(--skarn-primary);
  border-bottom-color: var(--skarn-primary);
}
.skarn-tabs__tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
.skarn-tabs__panel {
  display: none;
  padding: 1.5rem 0;
}
.skarn-tabs__panel.is-active {
  display: block;
}
/* 等宽标签页 */
.skarn-tabs--fill .skarn-tabs__tab {
  flex: 1 1 auto;
}

/* ================= 组件：面包屑 (Breadcrumb) ================= */
.skarn-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  font-size: 0.9rem;
  margin: 0;
  padding: 0;
}
.skarn-breadcrumb__item {
  color: var(--skarn-text-muted);
}
.skarn-breadcrumb__item + .skarn-breadcrumb__item::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--skarn-text-muted);
  opacity: 0.6;
}
.skarn-breadcrumb__link {
  color: var(--skarn-secondary);
  text-decoration: none;
  transition: var(--skarn-transition);
}
.skarn-breadcrumb__link:hover {
  color: var(--skarn-primary);
  transform: translateY(-2px); /* 三处保留上浮位移之一 */
}
.skarn-breadcrumb__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
.skarn-breadcrumb__item--current {
  color: var(--skarn-text-main);
}

/* ================= 组件：分页 (Pagination) ================= */
.skarn-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.skarn-pagination__item {
  min-width: 36px;
  height: 36px;
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background-color: var(--skarn-surface);
  color: var(--skarn-text-main);
  font-family: inherit;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: var(--skarn-transition);
}
.skarn-pagination__item:hover:not(:disabled) {
  border-color: var(--skarn-primary);
  color: var(--skarn-primary);
  box-shadow: var(--skarn-shadow);
  transform: translateY(-2px); /* 三处保留上浮位移之一 */
}
.skarn-pagination__item.is-active,
.skarn-pagination__item.is-active:hover:not(:disabled) {
  background-color: var(--skarn-primary);
  border-color: var(--skarn-primary);
  color: var(--skarn-on-primary);
  transform: none;
}
.skarn-pagination__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.skarn-pagination__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
/* 尺寸：小号 32px / 大号 44px */
.skarn-pagination--sm .skarn-pagination__item { min-width: 2rem; height: 2rem; font-size: 0.85rem; }
.skarn-pagination--lg .skarn-pagination__item { min-width: 2.75rem; height: 2.75rem; font-size: 1rem; }

/* ================= 组件：表格 (Table) ================= */
.skarn-table-wrap {
  overflow-x: auto;
}
.skarn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background-color: var(--skarn-surface);
  border: 1px solid var(--skarn-border);
  box-shadow: var(--skarn-shadow);
}
.skarn-table th {
  text-align: left;
  padding: 0.85rem 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  background-color: color-mix(in srgb, var(--skarn-border) 35%, var(--skarn-surface));
  color: var(--skarn-text-main);
  border-bottom: 1px solid var(--skarn-border);
}
.skarn-table td {
  padding: 0.85rem 1.25rem;
  color: var(--skarn-text-main);
  border-bottom: 1px solid var(--skarn-border);
}
.skarn-table tbody tr:last-child td {
  border-bottom: none;
}
.skarn-table tbody tr {
  transition: background-color var(--skarn-transition);
}
.skarn-table tbody tr:hover {
  background-color: color-mix(in srgb, var(--skarn-primary) 5%, var(--skarn-surface));
}
/* 变体 */
.skarn-table--striped tbody tr:nth-of-type(odd) {
  background-color: color-mix(in srgb, var(--skarn-border) 30%, var(--skarn-surface));
}
.skarn-table--bordered th,
.skarn-table--bordered td {
  border: 1px solid var(--skarn-border);
}
.skarn-table--sm th,
.skarn-table--sm td {
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
}
.skarn-table--align-middle th,
.skarn-table--align-middle td {
  vertical-align: middle;
}

/* ================= 组件：表单输入 (Input / Textarea) ================= */
.skarn-input {
  width: 100%;
  /* 统一控件高度 44px，与按钮、下拉触发对齐 */
  height: 2.75rem;
  padding: 0 1rem;
  font-family: inherit;
  font-size: 1rem;
  background-color: var(--skarn-surface);
  border: 1px solid var(--skarn-border);
  border-radius: 0; /* 绝对直角 */
  color: var(--skarn-text-main);
  transition: var(--skarn-transition);
  outline: none;
}
.skarn-input::placeholder {
  color: var(--skarn-text-muted);
  opacity: 0.6;
}
.skarn-input:focus {
  border-color: var(--skarn-primary);
  box-shadow: 0 0 0 1px var(--skarn-primary); /* 直角聚焦框 */
}
/* Hover 预演:点状虚线 + 主色,提示可编辑。不覆盖聚焦环、禁用态与校验态。 */
.skarn-input:hover:not(:focus):not(:disabled):not(.is-invalid):not(.is-valid) {
  border-style: dotted;
  border-color: var(--skarn-primary);
}
.skarn-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
textarea.skarn-input {
  height: auto;
  padding: 0.75rem 1rem;
  resize: vertical;
}
/* 尺寸 */
.skarn-input--sm { height: 2.25rem; padding: 0 0.75rem; font-size: 0.85rem; }
.skarn-input--lg { height: 3.25rem; padding: 0 1.25rem; font-size: 1.05rem; }
/* 校验状态：无效用暗朱砂（danger），有效用竹青（success），低饱和古色警示。
 * 注：必须用四向长写而非 border-color 简写——Chromium 对简写中 var() 的
 * 失效追踪有缺陷，运行时切换配色/主题时简写边框不会刷新。 */
.skarn-input.is-invalid {
  border-top-color: var(--skarn-danger);
  border-inline-end-color: var(--skarn-danger);
  border-bottom-color: var(--skarn-danger);
  border-inline-start-color: var(--skarn-danger);
  background-color: color-mix(in srgb, var(--skarn-danger) 4%, var(--skarn-surface));
}
.skarn-input.is-valid {
  border-top-color: var(--skarn-success);
  border-inline-end-color: var(--skarn-success);
  border-bottom-color: var(--skarn-success);
  border-inline-start-color: var(--skarn-success);
  background-color: color-mix(in srgb, var(--skarn-success) 4%, var(--skarn-surface));
}
.skarn-feedback {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.skarn-feedback--invalid { color: var(--skarn-danger); }
.skarn-feedback--valid { color: var(--skarn-success); }
.skarn-input.is-invalid ~ .skarn-feedback--invalid,
.skarn-input.is-valid ~ .skarn-feedback--valid {
  display: block;
}

/* ================= 组件：输入组 (Input Group) ================= */
/* 前缀/后缀文字或按钮与输入框共用边框（-1px 咬合），聚焦时 z-index 提升 */
.skarn-input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}
.skarn-input-group > .skarn-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.skarn-input-group > .skarn-select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.skarn-input-group__text {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-size: 0.95rem;
  white-space: nowrap;
  background-color: color-mix(in srgb, var(--skarn-border) 35%, var(--skarn-surface));
  border: 1px solid var(--skarn-border);
  color: var(--skarn-text-muted);
}
.skarn-input-group__btn {
  flex: none;
}
.skarn-input-group > * {
  position: relative;
}
.skarn-input-group > *:not(:first-child) {
  margin-inline-start: -1px;
}
.skarn-input-group > .skarn-input:focus,
.skarn-input-group > .skarn-select:focus-within,
.skarn-input-group > .skarn-btn:focus-visible {
  z-index: 2;
}
/* 组内输入框聚焦时，相邻按钮同步 1px 直角内环：聚焦加粗左右齐平；
 * 纯文字加件（__text）是静态装饰，不加边框。 */
.skarn-input-group:focus-within > .skarn-btn {
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
/* 聚焦状态下悬停组内按钮：弥散阴影与内环叠加，内环不丢失（边框不消失） */
.skarn-input-group:focus-within > .skarn-btn:hover:not(:disabled) {
  box-shadow: var(--skarn-shadow), 0 0 0 1px var(--skarn-primary);
}

/* ================= 组件：自定义下拉选择 (Select) ================= */
/* 完全自绘，替代原生 select 的浏览器外观。
 * 结构：.skarn-select > .skarn-select__trigger + .skarn-select__menu > .skarn-select__option
 * 交互脚本见 skarn.js（自动初始化所有 .skarn-select）。 */
.skarn-select {
  position: relative;
  width: 100%;
}
.skarn-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  /* 统一控件高度 44px，与按钮、输入框对齐 */
  height: 2.75rem;
  padding: 0 1rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  text-align: left;
  background-color: var(--skarn-surface);
  border: 1px solid var(--skarn-border);
  border-radius: 0; /* 绝对直角 */
  color: var(--skarn-text-main);
  cursor: pointer;
  transition: var(--skarn-transition);
}
.skarn-select__trigger:hover {
  border-color: var(--skarn-primary);
}
.skarn-select__trigger:focus-visible {
  outline: none;
  border-color: var(--skarn-primary);
  box-shadow: 0 0 0 1px var(--skarn-primary); /* 直角聚焦框 */
}
.skarn-select__value--placeholder {
  color: var(--skarn-text-muted);
  opacity: 0.6;
}
.skarn-select__arrow {
  font-size: 0.75rem;
  color: var(--skarn-text-muted);
  transition: var(--skarn-transition);
}
.skarn-select.is-open .skarn-select__arrow {
  transform: rotate(180deg);
  color: var(--skarn-primary);
}
.skarn-select__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background-color: var(--skarn-surface);
  box-shadow: var(--skarn-shadow);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: var(--skarn-transition);
}
.skarn-select.is-open .skarn-select__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.skarn-select__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--skarn-text-main);
  cursor: pointer;
  transition: var(--skarn-transition);
}
.skarn-select__option::before {
  /* 预留对勾位，避免选中项文字跳动 */
  content: "";
  width: 0.9em;
  flex: none;
}
.skarn-select__option:hover,
.skarn-select__option.is-active {
  background-color: color-mix(in srgb, var(--skarn-primary) 8%, transparent);
  color: var(--skarn-primary);
}
.skarn-select__option.is-selected::before {
  content: "✓";
  color: var(--skarn-primary);
  font-weight: 600;
}
.skarn-select.is-disabled .skarn-select__trigger {
  opacity: 0.55;
  cursor: not-allowed;
}
.skarn-select.is-disabled .skarn-select__trigger:hover {
  border-color: var(--skarn-border);
}

/* ================= 组件：复选框 (Checkbox) ================= */
.skarn-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.skarn-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.skarn-checkbox__box {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background-color: var(--skarn-surface);
  transition: var(--skarn-transition);
}
/* 挑勾动画：内嵌 SVG（pathLength="1" + stroke-dasharray/dashoffset）。
 * 笔画从左上起笔向下、再向右上挑出（M4 11.5 → L10 17.5 → L20 6.5），
 * dashoffset 1 → 0 过渡即"一笔写出"，取消勾选时反向擦除。 */
.skarn-checkbox__check {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--skarn-on-primary);
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: square; /* 方头笔触，符合直角原则 */
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: var(--skarn-transition);
}
/* Hover 呼吸：盒体微放大（同 radio）。对勾不做 hover 缩放——勾的选中弹入动画
 * 与 hover 缩放都作用在 transform 上，会重蹈 radio 的冲突；悬停反馈由盒体承担即可。 */
.skarn-checkbox:hover:not(:has(.skarn-checkbox__input:disabled)) .skarn-checkbox__box {
  transform: scale(1.06);
  transition: var(--skarn-transition), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.skarn-checkbox__input:checked + .skarn-checkbox__box {
  background-color: var(--skarn-primary);
  border-color: var(--skarn-primary);
}
/* 勾选中：背景先染主色（0.2s），勾稍延迟"挑出"（0.25s 笔画过渡） */
.skarn-checkbox__input:checked + .skarn-checkbox__box .skarn-checkbox__check {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: opacity 0.15s, stroke-dashoffset 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.08s;
}
.skarn-checkbox__input:focus-visible + .skarn-checkbox__box {
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
/* 点按弹性：与 radio 同套——挂 label（已勾选/未勾选均触发），disabled 不响应。
 * 动画 fill both 停在压下态，释放回弹由 hover 规则的 transform 回弹过渡接管。 */
@keyframes skarn-checkbox-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.82); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(0.82); }
}
.skarn-checkbox:active:not(:has(.skarn-checkbox__input:disabled)) .skarn-checkbox__box {
  transform: scale(0.82);
  animation: skarn-checkbox-pop 0.3s both;
}
.skarn-checkbox__input:disabled + .skarn-checkbox__box {
  opacity: 0.5;
}
.skarn-checkbox__label {
  margin-left: 0.6rem;
  font-size: 0.9rem;
  color: var(--skarn-text-main);
}
.skarn-checkbox:has(.skarn-checkbox__input:disabled) {
  cursor: not-allowed;
}

/* ================= 组件：单选框 (Radio) ================= */
.skarn-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.skarn-radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.skarn-radio__box {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--skarn-border);
  border-radius: 0; /* 直角原则：连单选框也是方形 */
  background-color: var(--skarn-surface);
  transition: var(--skarn-transition);
}
.skarn-radio__box::after {
  content: "";
  position: absolute;
  inset: 4px;
  background-color: var(--skarn-on-primary);
  opacity: 0;
  transition: var(--skarn-transition);
}
/* Hover 呼吸：外侧矩形微微放大，内侧矩形按更大比例放大（10px × 1.4 = 14px < 内区 16px，不溢出边框）。
 * 回弹曲线只挂在 hover 规则上：释放时新状态仍为 hover（走弹性回弹）；
 * 移开鼠标时新状态非 hover（走基础平直过渡，不再过冲）——过渡取目标状态的 transition。 */
.skarn-radio:hover:not(:has(.skarn-radio__input:disabled)) .skarn-radio__box {
  transform: scale(1.06);
  transition: var(--skarn-transition), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.skarn-radio:hover:not(:has(.skarn-radio__input:disabled)) .skarn-radio__box::after {
  transform: scale(1.4);
}
.skarn-radio__input:checked + .skarn-radio__box {
  background-color: var(--skarn-primary);
  border-color: var(--skarn-primary);
}
/* 选中弹入：内块 inset 从中心小点扩张 → 过冲接近边框 → 回位，配合透明度，避免"直出"感。
 * 用 inset 而非 transform——与 hover 放大的 transform 属性互不冲突（不同属性可并存）。
 * 过冲帧 inset 2px（14×14）+ hover 1.4 倍 ≈ 19.6px，短暂略超盒身 1.6px，视觉"涨破"感，
 * 0.3s 内回到 14px 以内，无溢出残留。 */
@keyframes skarn-radio-checked-pop {
  0%   { inset: 8px; opacity: 0; }
  60%  { inset: 2px; opacity: 1; }
  100% { inset: 4px; opacity: 1; }
}
.skarn-radio__input:checked + .skarn-radio__box::after {
  opacity: 1;
  animation: skarn-radio-checked-pop 0.3s;
}
.skarn-radio__input:focus-visible + .skarn-radio__box {
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
.skarn-radio__input:disabled + .skarn-radio__box {
  opacity: 0.5;
}
/* 点按弹性：压下 → 过冲弹起 → 停在压下态（fill both）。
 * 挂在 label（.skarn-radio）而非 input 上——已选中的 radio 再点击时，
 * 浏览器会抑制 input 的 :active（只激活 label），挂 label 才能保证反复点击
 * 同一已选中项时每次都有按下反馈。
 * 释放时 :active 移除，动画与 transform 同刻消失，回弹由 hover 规则的
 * transform 回弹过渡（0.35s cubic-bezier overshoot）接管：0.82 → 弹回 1.06；
 * 若为非 hover 状态（键盘/触屏）则走基础平直过渡。 */
@keyframes skarn-radio-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.82); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(0.82); }
}
.skarn-radio:active:not(:has(.skarn-radio__input:disabled)) .skarn-radio__box {
  transform: scale(0.82);
  animation: skarn-radio-pop 0.3s both;
}
/* 按下时内块收回 hover 放大（1.4 → 1），与外盒压扁同节奏"压实"，避免内外反向运动；
 * 释放后随 hover 平直过渡回 1.4。 */
.skarn-radio:active:not(:has(.skarn-radio__input:disabled)) .skarn-radio__box::after {
  transform: none;
}
.skarn-radio__label {
  margin-left: 0.6rem;
  font-size: 0.9rem;
  color: var(--skarn-text-main);
}

/* ================= 组件：开关 (Switch) ================= */
.skarn-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.skarn-switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.skarn-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background-color: var(--skarn-border);
  transition: var(--skarn-transition);
}
.skarn-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 0;
  background-color: var(--skarn-switch-knob);
  box-shadow: var(--skarn-shadow);
  /* 弹性回弹曲线：overshoot 约 8%（20px × 8% ≈ 1.6px），恰好擦着轨道内缘（42px）不溢出 */
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 底座"顶撞"：滑块弹性到位瞬间（knob 0.35s 回弹 ≈ 0.21s 撞上边框）底座 scaleX 微微鼓宽再收回，
 * 像控制子顶撞了一下边框。scaleX 不占布局；冲撞哪边、哪边变宽——
 * transform-origin 跟随撞边：checked 撞右端 → origin left（右端外鼓）、unchecked 回程撞左端 → origin right。
 * 动画不挂在 checked 状态规则上（初始加载会全体播放、且状态翻转时 animation 值不变不重播），
 * 由 skarn.js 监听 change 挂 is-bumping 强制重播。 */
@keyframes skarn-switch-bump {
  0%   { transform: scaleX(1); }
  60%  { transform: scaleX(1.08); }
  100% { transform: scaleX(1); }
}
.skarn-switch__input:checked + .skarn-switch__track {
  background-color: var(--skarn-primary);
  border-color: var(--skarn-primary);
}
.skarn-switch__track.is-bumping {
  animation: skarn-switch-bump 0.35s;
}
.skarn-switch__input:checked + .skarn-switch__track.is-bumping {
  transform-origin: left;
}
.skarn-switch__input:not(:checked) + .skarn-switch__track.is-bumping {
  transform-origin: right;
}
.skarn-switch__input:checked + .skarn-switch__track .skarn-switch__knob {
  transform: translateX(20px);
}
.skarn-switch__input:focus-visible + .skarn-switch__track {
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
.skarn-switch__input:disabled + .skarn-switch__track {
  opacity: 0.5;
}
.skarn-switch:has(.skarn-switch__input:disabled) {
  cursor: not-allowed;
}
.skarn-switch__label {
  margin-left: 0.6rem;
  font-size: 0.9rem;
  color: var(--skarn-text-main);
}

/* ================= 组件：滑块 (Slider) ================= */
.skarn-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}
.skarn-slider::-webkit-slider-runnable-track {
  height: 4px;
  border: none;
  border-radius: 0;
  /* 已走过的部分用主色填充，比例由内联变量 --skarn-fill 控制 */
  background: linear-gradient(to right,
    var(--skarn-primary) var(--skarn-fill, 40%),
    var(--skarn-border) var(--skarn-fill, 40%));
}
.skarn-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 2px solid var(--skarn-primary); /* 2px 加粗边框（外层） */
  border-radius: 0; /* 方形滑块 */
  box-sizing: border-box;
  /* 内外两层：主色底（外层）+ 表面色内块（background-size 控制）。
   * transform 放大外框、background-size 放大内块——内外不同比例"呼吸"，
   * 与单选框的双阶放大同语言。内块涨幅：10px → 13px → 16px（+60%），
   * 远大于外框 1 → 1.1 → 1.2（+20%），内部明显"放得更多"，拖动中内块顶满。 */
  background-color: var(--skarn-primary);
  background-image: linear-gradient(var(--skarn-surface), var(--skarn-surface));
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
  /* 释放动画的落点：非 hover 时 1，hover 时 1.1——释放瞬间移开/保持鼠标都能正确落定 */
  --skarn-thumb-rest: 1;
  box-shadow: var(--skarn-shadow);
  transition: var(--skarn-transition), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-size 0.2s;
}
.skarn-slider::-webkit-slider-thumb:hover {
  border-color: var(--skarn-primary-hover);
  background-color: var(--skarn-primary-hover);
  background-size: 13px 13px; /* 内块更多放大 */
  --skarn-thumb-rest: 1.1;
  transform: scale(1.1);      /* 外框微微放大 */
  box-shadow: var(--skarn-shadow-hover);
}
.skarn-slider:active::-webkit-slider-thumb {
  border-color: var(--skarn-primary);
  background-color: var(--skarn-primary);
  background-size: 16px 16px; /* 拖动中内块顶满 */
  transform: scale(1.2);
  box-shadow: var(--skarn-shadow-hover);
}
.skarn-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
.skarn-slider::-moz-range-track {
  height: 4px;
  border: none;
  border-radius: 0;
  background: linear-gradient(to right,
    var(--skarn-primary) var(--skarn-fill, 40%),
    var(--skarn-border) var(--skarn-fill, 40%));
}
.skarn-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--skarn-primary);
  border-radius: 0;
  box-sizing: border-box;
  background-color: var(--skarn-primary);
  background-image: linear-gradient(var(--skarn-surface), var(--skarn-surface));
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
  --skarn-thumb-rest: 1;
  box-shadow: var(--skarn-shadow);
  transition: var(--skarn-transition), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-size 0.2s;
}
.skarn-slider::-moz-range-thumb:hover {
  border-color: var(--skarn-primary-hover);
  background-color: var(--skarn-primary-hover);
  background-size: 13px 13px;
  --skarn-thumb-rest: 1.1;
  transform: scale(1.1);
  box-shadow: var(--skarn-shadow-hover);
}
.skarn-slider:active::-moz-range-thumb {
  border-color: var(--skarn-primary);
  background-color: var(--skarn-primary);
  background-size: 16px 16px;
  transform: scale(1.2);
  box-shadow: var(--skarn-shadow-hover);
}
/* 释放回弹：JS 在 pointerup 挂 is-releasing 触发。
 * 0% 帧省略——从释放瞬间的当前值（active/hover 过渡中的实际值）自然衔接，无跳变；
 * 100% 落点用 var(--skarn-thumb-rest)：hover 中落 1.1、已移开落 1，与 hover 动画不冲突。
 * 时长保持 0.45s，利落感由 easeOutCubic 的干脆收尾提供。动画结束移除 class 后无缝回落。 */
@keyframes skarn-slider-release {
  50%  { transform: scale(0.95); }
  80%  { transform: scale(1.06); }
  100% { transform: scale(var(--skarn-thumb-rest)); }
}
.skarn-slider.is-releasing::-webkit-slider-thumb {
  animation: skarn-slider-release 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.skarn-slider.is-releasing::-moz-range-thumb {
  animation: skarn-slider-release 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.skarn-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--skarn-primary);
}

/* ================= 组件：进度条 (Progress) ================= */
.skarn-progress {
  height: 8px;
  overflow: hidden;
  background-color: var(--skarn-border);
}
.skarn-progress__bar {
  height: 100%;
  width: 0;
  background-color: var(--skarn-primary);
  transition: width var(--skarn-transition);
}
.skarn-progress--secondary .skarn-progress__bar { background-color: var(--skarn-secondary); }
.skarn-progress--success .skarn-progress__bar { background-color: var(--skarn-success); }
.skarn-progress--warning .skarn-progress__bar { background-color: var(--skarn-warning); }
.skarn-progress--danger .skarn-progress__bar { background-color: var(--skarn-danger); }

/* ================= 组件：提示 (Alert) ================= */
.skarn-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--skarn-border);
  border-left: 4px solid var(--skarn-primary);
  border-radius: 0;
  background-color: color-mix(in srgb, var(--skarn-primary) 6%, var(--skarn-surface));
  box-shadow: var(--skarn-shadow);
}
.skarn-alert--secondary {
  border-left-color: var(--skarn-secondary);
  background-color: color-mix(in srgb, var(--skarn-secondary) 6%, var(--skarn-surface));
}
.skarn-alert--success {
  border-left-color: var(--skarn-success);
  background-color: color-mix(in srgb, var(--skarn-success) 6%, var(--skarn-surface));
}
.skarn-alert--warning {
  border-left-color: var(--skarn-warning);
  background-color: color-mix(in srgb, var(--skarn-warning) 6%, var(--skarn-surface));
}
.skarn-alert--danger {
  border-left-color: var(--skarn-danger);
  background-color: color-mix(in srgb, var(--skarn-danger) 6%, var(--skarn-surface));
}
.skarn-alert__icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--skarn-primary);
}
.skarn-alert--secondary .skarn-alert__icon { color: var(--skarn-secondary); }
.skarn-alert--success .skarn-alert__icon { color: var(--skarn-success); }
.skarn-alert--warning .skarn-alert__icon { color: var(--skarn-warning); }
.skarn-alert--danger .skarn-alert__icon { color: var(--skarn-danger); }
.skarn-alert__title {
  font-weight: 600;
  color: var(--skarn-text-main);
  margin-bottom: 0.25rem;
}
.skarn-alert__desc {
  font-size: 0.9rem;
  color: var(--skarn-text-muted);
  margin: 0;
}
/* 可关闭：右上角出现关闭按钮，右侧留出空间 */
.skarn-alert--dismissible {
  position: relative;
  padding-inline-end: 3rem;
}
.skarn-alert--dismissible .skarn-close {
  position: absolute;
  top: 0.85rem;
  right: 0.75rem;
}

/* ================= 组件：气泡提示 (Tooltip) ================= */
.skarn-tooltip {
  position: relative;
  display: inline-block;
}
.skarn-tooltip__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(2px);
  padding: 0.45rem 0.8rem;
  font-size: 0.8rem;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background-color: var(--skarn-surface);
  color: var(--skarn-text-main);
  box-shadow: var(--skarn-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 90;
  transition: var(--skarn-transition);
}
/* 方形箭头：旋转 45° 的方块 */
.skarn-tooltip__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  transform: translateX(-50%) rotate(45deg);
  background-color: var(--skarn-surface);
  border-right: 1px solid var(--skarn-border);
  border-bottom: 1px solid var(--skarn-border);
}
.skarn-tooltip:hover .skarn-tooltip__tip,
.skarn-tooltip:focus-within .skarn-tooltip__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* 下侧变体 */
.skarn-tooltip__tip--bottom {
  top: calc(100% + 10px);
  bottom: auto;
  transform: translateX(-50%) translateY(-2px);
}
.skarn-tooltip__tip--bottom::after {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -5px;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid var(--skarn-border);
  border-top: 1px solid var(--skarn-border);
}
.skarn-tooltip:hover .skarn-tooltip__tip--bottom,
.skarn-tooltip:focus-within .skarn-tooltip__tip--bottom {
  transform: translateX(-50%) translateY(0);
}
/* 左侧变体（箭头朝右） */
.skarn-tooltip__tip--start {
  left: auto;
  right: calc(100% + 10px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) translateX(2px);
}
.skarn-tooltip__tip--start::after {
  top: 50%;
  left: auto;
  right: -5px;
  margin-top: 0;
  transform: translateY(-50%) rotate(45deg);
  border-left: none;
  border-bottom: none;
  border-right: 1px solid var(--skarn-border);
  border-top: 1px solid var(--skarn-border);
}
.skarn-tooltip:hover .skarn-tooltip__tip--start,
.skarn-tooltip:focus-within .skarn-tooltip__tip--start {
  transform: translateY(-50%) translateX(0);
}
/* 右侧变体（箭头朝左） */
.skarn-tooltip__tip--end {
  left: calc(100% + 10px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) translateX(-2px);
}
.skarn-tooltip__tip--end::after {
  top: 50%;
  right: auto;
  left: -5px;
  margin-top: 0;
  transform: translateY(-50%) rotate(45deg);
  border-right: none;
  border-top: none;
  border-left: 1px solid var(--skarn-border);
  border-bottom: 1px solid var(--skarn-border);
}
.skarn-tooltip:hover .skarn-tooltip__tip--end,
.skarn-tooltip:focus-within .skarn-tooltip__tip--end {
  transform: translateY(-50%) translateX(0);
}

/* ================= 组件：下拉菜单 (Dropdown) ================= */
.skarn-dropdown {
  position: relative;
  display: inline-block;
}
.skarn-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background-color: var(--skarn-surface);
  box-shadow: var(--skarn-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  z-index: 100;
  transition: var(--skarn-transition);
}
/* 纯 CSS 展开：焦点在容器内（或悬停）时显示 */
.skarn-dropdown:focus-within .skarn-dropdown__menu,
.skarn-dropdown:hover .skarn-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* 下拉菜单是少数保留悬停上浮位移的组件 */
.skarn-dropdown .skarn-btn:hover:not(:disabled) {
  transform: translateY(-2px); /* 三处保留上浮位移之一 */
}
/* 右对齐菜单 */
.skarn-dropdown__menu--end {
  left: auto;
  right: 0;
}
.skarn-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 1.25rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  color: var(--skarn-text-main);
  cursor: pointer;
  transition: var(--skarn-transition);
}
.skarn-dropdown__item:hover {
  background-color: color-mix(in srgb, var(--skarn-primary) 8%, transparent);
  color: var(--skarn-primary);
}
.skarn-dropdown__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: none;
  color: var(--skarn-text-muted);
}
/* 选中态：预留对勾位避免文字跳动 */
.skarn-dropdown__item::before {
  content: "";
  width: 0.9em;
  flex: none;
}
.skarn-dropdown__item.is-selected::before {
  content: "✓";
  color: var(--skarn-primary);
  font-weight: 600;
}
.skarn-dropdown__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--skarn-primary);
}
.skarn-dropdown__item--danger { color: var(--skarn-danger); }
.skarn-dropdown__item--danger:hover { color: var(--skarn-danger); }
.skarn-dropdown__divider {
  height: 1px;
  margin: 0.4rem 0;
  background-color: var(--skarn-border);
}
.skarn-dropdown__label {
  padding: 0.4rem 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: var(--skarn-text-muted);
}

/* ================= 组件：弹层 (Popover) ================= */
/* 点击触发，由 JS 切换 .is-open；方形箭头与 Tooltip 同技法 */
.skarn-popover-wrap {
  position: relative;
  display: inline-block;
}
.skarn-popover {
  position: absolute;
  z-index: 1100;
  width: 260px;
  max-width: 100%;
  background-color: var(--skarn-surface);
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  box-shadow: var(--skarn-shadow-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: var(--skarn-transition);
}
.skarn-popover.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.skarn-popover__header {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--skarn-border);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--skarn-text-main);
}
.skarn-popover__body {
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  color: var(--skarn-text-muted);
}
.skarn-popover__body p:last-child {
  margin-bottom: 0;
}
/* 默认下侧（箭头朝上） */
.skarn-popover::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 1.25rem;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background-color: var(--skarn-surface);
  border-left: 1px solid var(--skarn-border);
  border-top: 1px solid var(--skarn-border);
}
/* 上侧（箭头朝下） */
.skarn-popover--top {
  top: auto;
  bottom: calc(100% + 10px);
  transform: translateY(-4px);
}
.skarn-popover--top.is-open {
  transform: translateY(0);
}
.skarn-popover--top::after {
  top: auto;
  bottom: -5px;
  border-left: none;
  border-top: none;
  border-right: 1px solid var(--skarn-border);
  border-bottom: 1px solid var(--skarn-border);
}
/* 右侧（箭头朝左） */
.skarn-popover--end {
  left: calc(100% + 10px);
  top: 0;
  transform: translateX(-4px);
}
.skarn-popover--end.is-open {
  transform: translateX(0);
}
.skarn-popover--end::after {
  top: 1.25rem;
  left: -5px;
  border-top: none;
  border-right: none;
  border-left: 1px solid var(--skarn-border);
  border-bottom: 1px solid var(--skarn-border);
}
/* 左侧（箭头朝右） */
.skarn-popover--start {
  left: auto;
  right: calc(100% + 10px);
  top: 0;
  transform: translateX(4px);
}
.skarn-popover--start.is-open {
  transform: translateX(0);
}
.skarn-popover--start::after {
  top: 1.25rem;
  left: auto;
  right: -5px;
  border-left: none;
  border-bottom: none;
  border-right: 1px solid var(--skarn-border);
  border-top: 1px solid var(--skarn-border);
}

/* ================= 组件：折叠面板 (Accordion) ================= */
.skarn-accordion {
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background-color: var(--skarn-surface);
  box-shadow: var(--skarn-shadow);
  transition: var(--skarn-transition);
}
.skarn-accordion + .skarn-accordion {
  margin-top: 0.75rem;
}
.skarn-accordion:hover {
  border-color: var(--skarn-primary);
  /* 加粗仅向内：inset 内环模拟 2px 边框，不改变 border-width，零布局影响 */
  box-shadow: var(--skarn-shadow-hover), inset 0 0 0 1px var(--skarn-primary);
}
.skarn-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  list-style: none;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: var(--skarn-transition);
}
.skarn-accordion__summary::-webkit-details-marker {
  display: none;
}
.skarn-accordion__summary:hover {
  color: var(--skarn-primary);
}
.skarn-accordion__summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
.skarn-accordion__icon {
  font-size: 0.8rem;
  color: var(--skarn-text-muted);
  transition: var(--skarn-transition);
}
.skarn-accordion[open] .skarn-accordion__icon {
  transform: rotate(180deg);
  color: var(--skarn-primary);
}
/* 展开/收起动画：grid-template-rows 0fr → 1fr 纯 CSS 过渡，
 * 无需 JS、无需测量高度，Chrome 107+/Firefox 66+/Safari 16+ 均支持。 */
.skarn-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.skarn-accordion[open] .skarn-accordion__body {
  grid-template-rows: 1fr;
}
.skarn-accordion__content {
  min-height: 0; /* 允许行收缩到 0，否则无法折叠 */
  overflow: hidden;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--skarn-border);
  font-size: 0.9rem;
  color: var(--skarn-text-muted);
}

/* ================= 组件：通用折叠 (Collapse) ================= */
/* 供导航栏菜单、任意区块显隐使用（JS 切换 is-open）；带动画的折叠用 accordion */
.skarn-collapse {
  display: none;
}
.skarn-collapse.is-open {
  display: block;
}

/* ================= 组件：列表组 (List Group) ================= */
.skarn-list-group {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background-color: var(--skarn-surface);
  box-shadow: var(--skarn-shadow);
}
.skarn-list-group__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  line-height: 1.4; /* 单行居中对齐，换行时仍保阅读舒适 */
  color: var(--skarn-text-main);
  text-decoration: none;
  border: none;
  border-inline-start: 4px solid transparent; /* 预留选中左栏，零位移 */
  border-bottom: 1px solid var(--skarn-border);
  background: none;
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: var(--skarn-transition);
}
.skarn-list-group__item:last-child {
  border-bottom: none;
}
.skarn-list-group__item:hover {
  background-color: color-mix(in srgb, var(--skarn-primary) 5%, var(--skarn-surface));
}
.skarn-list-group__item.is-active {
  border-inline-start-color: var(--skarn-primary);
  background-color: color-mix(in srgb, var(--skarn-primary) 8%, var(--skarn-surface));
  color: var(--skarn-primary);
}
.skarn-list-group__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.skarn-list-group__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--skarn-primary);
}
/* 状态色变体 */
.skarn-list-group__item--secondary { border-inline-start-color: var(--skarn-secondary); }
.skarn-list-group__item--secondary.is-active {
  color: var(--skarn-secondary);
  background-color: color-mix(in srgb, var(--skarn-secondary) 8%, var(--skarn-surface));
}
.skarn-list-group__item--success { border-inline-start-color: var(--skarn-success); }
.skarn-list-group__item--success.is-active {
  color: var(--skarn-success);
  background-color: color-mix(in srgb, var(--skarn-success) 8%, var(--skarn-surface));
}
.skarn-list-group__item--warning { border-inline-start-color: var(--skarn-warning); }
.skarn-list-group__item--warning.is-active {
  color: var(--skarn-warning);
  background-color: color-mix(in srgb, var(--skarn-warning) 8%, var(--skarn-surface));
}
.skarn-list-group__item--danger { border-inline-start-color: var(--skarn-danger); }
.skarn-list-group__item--danger.is-active {
  color: var(--skarn-danger);
  background-color: color-mix(in srgb, var(--skarn-danger) 8%, var(--skarn-surface));
}
/* 无边：去外框与阴影，仅以底部分隔线界定 */
.skarn-list-group--flush {
  border: none;
  box-shadow: none;
}
/* 编号：等宽序号，中式奏折感 */
.skarn-list-group--numbered {
  counter-reset: skarn-list;
}
.skarn-list-group--numbered .skarn-list-group__item {
  counter-increment: skarn-list;
}
.skarn-list-group--numbered .skarn-list-group__item::before {
  content: counter(skarn-list, decimal-leading-zero) ".";
  font-family: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem;
  color: var(--skarn-text-muted);
  flex: none;
}

/* ================= 组件：关闭按钮 (Close) ================= */
.skarn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--skarn-text-muted);
  cursor: pointer;
  transition: var(--skarn-transition);
}
.skarn-close:hover {
  color: var(--skarn-primary);
  background-color: color-mix(in srgb, var(--skarn-primary) 8%, transparent);
}
.skarn-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--skarn-primary);
}

/* ================= 组件：加载圈 (Spinner) ================= */
/* 直角原则：方形直线边框，而非圆形。
 * 四面同色直线边框（主色）；均匀方框旋转时视觉静止（每 90° 与自身重合），
 * 故以呼吸淡入淡出表现加载节奏——克制、温润，动效可见。 */
.skarn-spinner {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  border: 3px solid var(--skarn-primary);
  vertical-align: middle;
  animation: skarn-breathe 1.2s ease-in-out infinite;
}
.skarn-spinner--sm { width: 1rem; height: 1rem; border-width: 2px; }
.skarn-spinner--lg { width: 2.5rem; height: 2.5rem; border-width: 4px; }
/* 生长变体：主色方块呼吸缩放 */
.skarn-spinner--grow {
  border: none;
  background-color: var(--skarn-primary);
  animation: skarn-grow 1.2s ease-in-out infinite;
}
@keyframes skarn-breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1); }
}
/* 主题色按钮内：边框/方块改用按钮文字色（on-primary），避免与按钮底色同色不可见 */
.skarn-btn--primary .skarn-spinner {
  border-color: var(--skarn-on-primary);
}
.skarn-btn--primary .skarn-spinner--grow {
  background-color: var(--skarn-on-primary);
}
@keyframes skarn-grow {
  0%, 100% { transform: scale(0.35); opacity: 0.4; }
  50% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .skarn-spinner { animation-duration: 2s; }
  /* 开关滑块取消回弹与底座顶撞，退化为平直短过渡 */
  .skarn-switch__knob { transition: transform 0.15s linear; }
  .skarn-switch__track.is-bumping { animation: none; }
  /* 单选框/复选框取消呼吸缩放、点按回弹、释放回弹与选中弹入/挑勾 */
  .skarn-radio:hover .skarn-radio__box,
  .skarn-radio:hover .skarn-radio__box::after,
  .skarn-checkbox:hover .skarn-checkbox__box { transform: none; }
  .skarn-radio:active .skarn-radio__box,
  .skarn-checkbox:active .skarn-checkbox__box,
  .skarn-radio__input:checked + .skarn-radio__box::after,
  .skarn-checkbox__input:checked + .skarn-checkbox__box .skarn-checkbox__check { animation: none; }
  /* 复选框挑勾退化为直接显现 */
  .skarn-checkbox__check,
  .skarn-checkbox__input:checked + .skarn-checkbox__box .skarn-checkbox__check { transition: opacity 0.15s, stroke-dashoffset 0.15s; }
  /* 滑块柄取消内外放大与回弹 */
  .skarn-slider::-webkit-slider-thumb,
  .skarn-slider::-moz-range-thumb { transition: var(--skarn-transition); transform: none; }
  .skarn-slider::-webkit-slider-thumb:hover,
  .skarn-slider::-webkit-slider-thumb:active,
  .skarn-slider::-moz-range-thumb:hover,
  .skarn-slider::-moz-range-thumb:active { background-size: 10px 10px; }
  .skarn-slider.is-releasing::-webkit-slider-thumb,
  .skarn-slider.is-releasing::-moz-range-thumb { animation: none; }
  /* 覆盖 hover 回弹曲线为平直过渡 */
  .skarn-radio:hover .skarn-radio__box,
  .skarn-checkbox:hover .skarn-checkbox__box,
  .skarn-radio__box,
  .skarn-checkbox__box { transition: var(--skarn-transition); }
}

/* ================= 组件：占位骨架 (Placeholder) ================= */
/* 加载态骨架，宽度由 w-* 工具类或内联宽度控制 */
.skarn-placeholder {
  display: inline-block;
  min-height: 1rem;
  width: 100%;
  background-color: color-mix(in srgb, var(--skarn-border) 55%, transparent);
  opacity: 0.75;
  cursor: wait;
}
.skarn-placeholder--sm { min-height: 0.5rem; }
.skarn-placeholder--lg { min-height: 1.5rem; }
.skarn-placeholder--glow {
  animation: skarn-placeholder-glow 1.6s ease-in-out infinite;
}
@keyframes skarn-placeholder-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

/* ================= 组件：通知 (Toast) ================= */
.skarn-toast {
  width: 100%;
  max-width: 320px;
  background-color: var(--skarn-surface);
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  box-shadow: var(--skarn-shadow-hover);
  opacity: 1;
  transition: var(--skarn-transition);
}
.skarn-toast.is-hiding {
  opacity: 0;
  transform: translateY(-8px);
}
.skarn-toast__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--skarn-border);
}
.skarn-toast__title {
  margin: 0;
  font-size: 0.95rem;
}
.skarn-toast__body {
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  color: var(--skarn-text-muted);
}
.skarn-toast__body p:last-child {
  margin-bottom: 0;
}
/* 通知容器：固定于视口四角/中线 */
.skarn-toast-container {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}
.skarn-toast-container > * {
  pointer-events: auto;
}
.skarn-toast-container--top-start   { top: 1rem; left: 1rem; }
.skarn-toast-container--top-center  { top: 1rem; left: 50%; transform: translateX(-50%); }
.skarn-toast-container--top-end     { top: 1rem; right: 1rem; }
.skarn-toast-container--bottom-start   { bottom: 1rem; left: 1rem; flex-direction: column-reverse; }
.skarn-toast-container--bottom-center  { bottom: 1rem; left: 50%; transform: translateX(-50%); flex-direction: column-reverse; }
.skarn-toast-container--bottom-end     { bottom: 1rem; right: 1rem; flex-direction: column-reverse; }

/* ================= 组件：轮播 (Carousel) ================= */
.skarn-carousel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background-color: var(--skarn-surface);
  box-shadow: var(--skarn-shadow);
  /* 允许纵向页面滚动，横向手势留给轮播滑动切换 */
  touch-action: pan-y;
  user-select: none;
}
.skarn-carousel__inner {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.skarn-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}
/* 淡化变体：淡入淡出替代滑动 */
.skarn-carousel--fade .skarn-carousel__inner {
  display: block;
}
.skarn-carousel--fade .skarn-carousel__slide {
  display: none;
}
.skarn-carousel--fade .skarn-carousel__slide.is-active {
  display: block;
  animation: skarn-carousel-fade 0.4s ease;
}
@keyframes skarn-carousel-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* 前后控制：方形按钮 */
.skarn-carousel__control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background-color: var(--skarn-surface);
  color: var(--skarn-text-main);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--skarn-shadow);
  transition: var(--skarn-transition);
}
.skarn-carousel__control:hover {
  color: var(--skarn-primary);
  border-color: var(--skarn-primary);
  box-shadow: var(--skarn-shadow-hover);
}
.skarn-carousel__control:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
.skarn-carousel__control--prev { left: 1rem; }
.skarn-carousel__control--next { right: 1rem; }
/* 指示条：短横线，选中染主色 */
.skarn-carousel__indicators {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}
.skarn-carousel__indicator {
  width: 1.5rem;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: color-mix(in srgb, var(--skarn-text-main) 28%, transparent);
  cursor: pointer;
  transition: var(--skarn-transition);
}
.skarn-carousel__indicator:hover {
  background-color: color-mix(in srgb, var(--skarn-text-main) 55%, transparent);
}
.skarn-carousel__indicator.is-active {
  background-color: var(--skarn-primary);
}

/* ================= 组件：抽屉 (Offcanvas) ================= */
/* 固定面板，四向滑入；结构与 Modal 同源，遮罩独立 */
.skarn-offcanvas {
  position: fixed;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  background-color: var(--skarn-surface);
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  box-shadow: var(--skarn-shadow-hover);
  visibility: hidden;
  transition: var(--skarn-transition);
}
.skarn-offcanvas--end {
  top: 0;
  right: 0;
  bottom: 0;
  width: 20rem; /* 320px，8px 节奏 */
  max-width: 100%;
  transform: translateX(100%);
}
.skarn-offcanvas--start {
  top: 0;
  left: 0;
  bottom: 0;
  width: 20rem;
  max-width: 100%;
  transform: translateX(-100%);
}
.skarn-offcanvas--top {
  top: 0;
  left: 0;
  right: 0;
  height: 15rem; /* 240px */
  max-height: 80vh;
  transform: translateY(-100%);
}
.skarn-offcanvas--bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 15rem;
  max-height: 80vh;
  transform: translateY(100%);
}
.skarn-offcanvas.is-open {
  transform: translate(0, 0);
  visibility: visible;
}
.skarn-offcanvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--skarn-border);
}
.skarn-offcanvas__title {
  margin: 0;
  font-size: 1.1rem;
}
.skarn-offcanvas__body {
  flex: 1;
  padding: 1.25rem;
  overflow-y: auto;
  font-size: 0.95rem;
  color: var(--skarn-text-muted);
}
.skarn-offcanvas__body p:last-child {
  margin-bottom: 0;
}
.skarn-offcanvas__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background-color: var(--skarn-overlay);
  opacity: 0;
  visibility: hidden;
  transition: var(--skarn-transition);
}
.skarn-offcanvas__backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* ================= 组件：模态弹窗 (Modal) ================= */
.skarn-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: var(--skarn-overlay);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: var(--skarn-transition);
}
.skarn-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.skarn-modal__dialog {
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 2rem;
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background-color: var(--skarn-surface);
  box-shadow: var(--skarn-shadow-hover);
  transform: translateY(8px);
  transition: var(--skarn-transition);
}
.skarn-modal.is-open .skarn-modal__dialog {
  transform: translateY(0);
}
/* 尺寸 */
.skarn-modal--sm .skarn-modal__dialog { max-width: 360px; }
.skarn-modal--lg .skarn-modal__dialog { max-width: 720px; }
.skarn-modal--xl .skarn-modal__dialog { max-width: 960px; }
/* 内容滚动：页眉页脚固定，仅主体滚动 */
.skarn-modal--scrollable .skarn-modal__dialog {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.skarn-modal--scrollable .skarn-modal__body {
  overflow-y: auto;
  padding-inline: 2rem;
  margin-inline: -2rem;
}
.skarn-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.skarn-modal__title {
  margin: 0;
  font-size: 1.25rem;
}
.skarn-modal__close {
  background: none;
  border: none;
  /* 加大命中区，避免误触 */
  padding: 0.375rem 0.5rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--skarn-text-muted);
  cursor: pointer;
  transition: var(--skarn-transition);
}
.skarn-modal__close:hover {
  color: var(--skarn-primary);
  background-color: color-mix(in srgb, var(--skarn-primary) 8%, transparent);
}
.skarn-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
.skarn-modal__body {
  font-size: 0.95rem;
  color: var(--skarn-text-muted);
}
.skarn-modal__body p:last-child {
  margin-bottom: 0;
}
.skarn-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* ================= 组件：导航栏 (Navbar) ================= */
/* 默认：表层底 + 下边框；--filled 主色实心；响应式折叠配合 JS */
.skarn-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--skarn-surface);
  border-bottom: 1px solid var(--skarn-border);
}
.skarn-navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1;
  color: var(--skarn-primary);
  text-decoration: none;
}
.skarn-navbar__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.skarn-navbar__link {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--skarn-text-muted);
  text-decoration: none;
  transition: var(--skarn-transition);
}
.skarn-navbar__link:hover {
  color: var(--skarn-primary);
}
.skarn-navbar__link.is-active {
  color: var(--skarn-primary);
}
.skarn-navbar__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
/* 折叠区：默认隐藏，桌面断点展开 */
.skarn-navbar__collapse {
  display: none;
  flex-direction: column;
  width: 100%;
}
.skarn-navbar__collapse.is-open {
  display: flex;
}
/* 汉堡按钮：纯 CSS 三横线 */
.skarn-navbar__toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background-color: var(--skarn-surface);
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  cursor: pointer;
  transition: var(--skarn-transition);
}
.skarn-navbar__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background-color: var(--skarn-text-main);
  transition: var(--skarn-transition);
}
.skarn-navbar__toggle:hover {
  border-color: var(--skarn-primary);
}
.skarn-navbar__toggle:hover span {
  background-color: var(--skarn-primary);
}
.skarn-navbar__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
/* 主色实心变体 */
.skarn-navbar--filled {
  background-color: var(--skarn-primary);
  border-bottom-color: var(--skarn-primary);
}
.skarn-navbar--filled .skarn-navbar__brand {
  color: var(--skarn-on-primary);
}
.skarn-navbar--filled .skarn-navbar__link {
  color: color-mix(in srgb, var(--skarn-on-primary) 72%, transparent);
}
.skarn-navbar--filled .skarn-navbar__link:hover,
.skarn-navbar--filled .skarn-navbar__link.is-active {
  color: var(--skarn-on-primary);
}
.skarn-navbar--filled .skarn-navbar__toggle {
  background-color: color-mix(in srgb, var(--skarn-primary-hover) 60%, var(--skarn-primary));
  border-color: color-mix(in srgb, var(--skarn-on-primary) 30%, transparent);
}
.skarn-navbar--filled .skarn-navbar__toggle span {
  background-color: var(--skarn-on-primary);
}
/* 响应式展开断点：--expand-md / --expand-lg / --expand-xl */
@media (min-width: 768px) {
  .skarn-navbar--expand-md .skarn-navbar__collapse {
    display: flex;
    flex-direction: row;
    width: auto;
  }
  .skarn-navbar--expand-md .skarn-navbar__toggle {
    display: none;
  }
}
@media (min-width: 992px) {
  .skarn-navbar--expand-lg .skarn-navbar__collapse {
    display: flex;
    flex-direction: row;
    width: auto;
  }
  .skarn-navbar--expand-lg .skarn-navbar__toggle {
    display: none;
  }
}
@media (min-width: 1200px) {
  .skarn-navbar--expand-xl .skarn-navbar__collapse {
    display: flex;
    flex-direction: row;
    width: auto;
  }
  .skarn-navbar--expand-xl .skarn-navbar__toggle {
    display: none;
  }
}