/* ============================================================================
   components.css — 设计系统的全部组件。页面只允许用这里的类，不许就地造样式。
   命名：block__element--modifier。
   ========================================================================== */

/* ─────────────────────────────── 容器 / 区块 ─────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s-5);
  position: relative;
  z-index: 1;
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding: var(--s-8) 0; }
.section--tight { padding: var(--s-6) 0; }
.section + .section { border-top: 1px solid var(--line); }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.section__title { margin: 0; font-size: var(--t-h2); }
.section__sub { margin: var(--s-1) 0 0; color: var(--fg-2); font-size: var(--t-sm); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--brand);
}

/* ─────────────────────────────── 顶栏 / 导航 ─────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: rgba(10, 11, 13, .82);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
.brand__mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(160deg, var(--brand), var(--brand-press));
  box-shadow: var(--metal-top), 0 2px 8px rgba(225, 29, 46, .28);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.brand__mark svg { width: 15px; height: 15px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 700; letter-spacing: -.01em; font-size: 15px; }
.brand__sub { font-size: 10.5px; color: var(--fg-3); letter-spacing: .1em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: var(--s-1); flex: 1 1 auto; }
.nav__link {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1);
  color: var(--fg-2);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav__link:hover { color: var(--fg); background: var(--surface-2); }
.nav__link[aria-current="page"] { color: var(--fg); background: var(--surface-3); }

.header-actions { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }

/* 搜索触发按钮：看起来像输入框，点了开面板 */
.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px var(--s-3) 7px var(--s-3);
  min-width: 168px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-2);
  color: var(--fg-3);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.search-trigger:hover { border-color: var(--line-strong); color: var(--fg-2); }
.search-trigger__kbd { margin-left: auto; display: inline-flex; gap: 2px; }
.search-trigger__kbd kbd { font-size: 10px; padding: 0 4px; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--fg-2);
  cursor: pointer;
  padding: 0;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.icon-btn:hover { color: var(--fg); border-color: var(--line-strong); }

/* 汉堡按钮只在窄屏出现 */
.burger { display: none; }

/* 移动端菜单：独立面板，不是把桌面导航缩小 */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: var(--s-4) var(--s-5) var(--s-8);
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: var(--s-1);
  animation: slide-down var(--dur-2) var(--ease);
}
.mobile-nav[data-open="true"] { display: flex; }
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-2);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
}
.mobile-nav__link:hover { background: var(--surface-1); }
.mobile-nav__link small { font-size: var(--t-xs); color: var(--fg-3); font-weight: 400; }
.mobile-nav__cta { margin-top: var(--s-5); }
@keyframes slide-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ─────────────────────────────── 按钮 ─────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 9px var(--s-4);
  border-radius: var(--r-2);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  box-shadow: var(--metal-top);
  color: var(--fg);
  font: 600 var(--t-sm)/1.2 var(--font);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn:hover { background: var(--surface-3); border-color: var(--line-strong); color: var(--fg); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.btn--primary {
  background: linear-gradient(180deg, var(--brand), var(--brand-press));
  border-color: var(--brand);
  color: var(--brand-ink);
  box-shadow: var(--metal-top), 0 2px 10px rgba(225, 29, 46, .22);
}
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.btn--primary:active { background: var(--brand-press); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--fg-2); box-shadow: none; }
.btn--ghost:hover { background: var(--surface-2); color: var(--fg); }

.btn--sm { padding: 5px var(--s-3); font-size: var(--t-xs); }
.btn--lg { padding: 13px var(--s-5); font-size: var(--t-body); }
.btn--block { width: 100%; }
.btn__icon { width: 15px; height: 15px; flex: 0 0 auto; }

.btn-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

/* ─────────────────────────────── 标签 / 徽章 ─────────────────────────────── */
.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip {
  padding: 5px var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-2);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
.chip:hover { color: var(--fg); border-color: var(--line-strong); }
.chip[aria-pressed="true"] {
  background: var(--brand-dim);
  border-color: var(--brand-line);
  color: var(--brand-hover);
}
.chip--static { cursor: default; }

.tag {
  display: inline-block;
  padding: 2px var(--s-2);
  border-radius: var(--r-1);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: var(--t-xs);
}
a.tag:hover { color: var(--fg); border-color: var(--line-strong); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--s-2);
  border-radius: var(--r-1);
  font-size: var(--t-xs);
  font-weight: 600;
  background: var(--surface-3);
  color: var(--fg-2);
  border: 1px solid var(--line);
}
.badge--nsfw { background: var(--danger-dim); color: var(--danger); border-color: rgba(248, 81, 73, .3); }
.badge--res, .badge--dur { background: rgba(0, 0, 0, .62); color: #fff; border-color: transparent; backdrop-filter: blur(6px); }
.badge--new { background: var(--brand-dim); color: var(--brand-hover); border-color: var(--brand-line); }
.badge--ok { background: var(--ok-dim); color: var(--ok); border-color: rgba(63, 185, 80, .3); }
.badge--warn { background: var(--warn-dim); color: var(--warn); border-color: rgba(210, 153, 34, .3); }

/* ─────────────────────────────── 卡片 ─────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--s-5);
}
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--metal-top);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-2), var(--metal-top);
}
.card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.card__thumb img,
.card__thumb video { width: 100%; height: 100%; object-fit: cover; }
.card__thumb img { transition: transform var(--dur-3) var(--ease), filter var(--dur-2) var(--ease); }
.card:hover .card__thumb img { transform: scale(1.03); filter: brightness(1.06); }
.card__badges { position: absolute; inset: auto var(--s-2) var(--s-2) var(--s-2); display: flex; gap: var(--s-2); align-items: flex-end; }
.card__badges--top { inset: var(--s-2) var(--s-2) auto var(--s-2); }
.card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card__title { margin: 0; font-size: var(--t-body); font-weight: 650; line-height: 1.35; }
.card__meta { margin: 0; color: var(--fg-3); font-size: var(--t-xs); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.card__tags { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.card__desc {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--t-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__foot { margin-top: auto; padding-top: var(--s-2); display: flex; gap: var(--s-2); }
.card--link { color: inherit; }

/* 预览图挂了 / 还没截图：给一块有交代的占位，不留白 */
.thumb-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: var(--s-2);
  text-align: center;
  padding: var(--s-4);
  background:
    linear-gradient(135deg, #14161b 0%, #0e1013 100%);
  color: var(--fg-3);
  font-size: var(--t-xs);
}
.thumb-fallback svg { width: 26px; height: 26px; opacity: .5; margin: 0 auto; }

/* ─────────────────────────────── 表单 ─────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label { font-size: var(--t-sm); color: var(--fg-2); font-weight: 600; }
.field__hint { font-size: var(--t-xs); color: var(--fg-3); }

.input, .select {
  width: 100%;
  padding: 10px var(--s-3);
  border-radius: var(--r-2);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--fg);
  font: inherit;
  font-size: var(--t-body);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.input::placeholder { color: var(--fg-3); }
.input:focus, .select:focus { outline: none; border-color: var(--brand-line); background: var(--surface-1); }

.switch { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--fg-2); cursor: pointer; }
.switch input { accent-color: var(--brand); width: 15px; height: 15px; }

/* ─────────────────────────────── 弹层 / 提示 ─────────────────────────────── */
.modal {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-4);
  padding: 0;
  background: var(--surface-raised);
  color: var(--fg);
  width: min(920px, calc(100vw - var(--s-5)));
  max-height: min(88vh, 900px);
  box-shadow: var(--sh-3), var(--metal-top);
  overflow: hidden;
}
.modal::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); }
.modal__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.modal__title { margin: 0; font-size: var(--t-h3); flex: 1; }
.modal__body { padding: var(--s-5); overflow-y: auto; max-height: calc(88vh - 130px); }
.modal__foot {
  display: flex; gap: var(--s-2); justify-content: flex-end;
  padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line);
  background: var(--surface-1); flex-wrap: wrap;
}
.modal--wide { width: min(1100px, calc(100vw - var(--s-5))); }

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%);
  z-index: 300;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-2);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  font-size: var(--t-sm);
  box-shadow: var(--sh-2);
  max-width: min(520px, calc(100vw - var(--s-5)));
  animation: toast-in var(--dur-2) var(--ease);
}
.toast[data-kind="err"] { border-color: rgba(248, 81, 73, .4); background: #2a1618; }
.toast[data-kind="ok"] { border-color: rgba(63, 185, 80, .35); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ─────────────────────────────── 视频播放器 ─────────────────────────────── */
.player {
  position: relative;
  background: #000;
  border-radius: var(--r-3);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
}
.player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.player__poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: pointer;
  border: 0; padding: 0; background: none;
}
.player__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.player__play span {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
  box-shadow: var(--sh-2);
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.player__poster:hover + .player__play span,
.player__poster:focus-visible + .player__play span { transform: scale(1.08); background: var(--brand); border-color: var(--brand); }
.player__play svg { width: 24px; height: 24px; color: #fff; margin-left: 3px; }
.player__state {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(0deg, rgba(0, 0, 0, .78), transparent);
  font-size: var(--t-xs); color: rgba(255, 255, 255, .8);
  pointer-events: none;
}

/* ─────────────────────────────── 状态（loading/empty/error/offline） ─────────────────────────────── */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
  padding: var(--s-8) var(--s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-3);
  background: var(--surface-1);
  color: var(--fg-2);
}
.state__icon { width: 34px; height: 34px; color: var(--fg-3); }
.state__title { margin: 0; font-size: var(--t-h3); color: var(--fg); }
.state__text { margin: 0; font-size: var(--t-sm); max-width: 46ch; }
.state--error { border-color: rgba(248, 81, 73, .35); }
.state--error .state__icon { color: var(--danger); }
.state--offline { border-style: solid; border-color: rgba(210, 153, 34, .35); }
.state--offline .state__icon { color: var(--warn); }

/* 骨架屏 */
.skeleton {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}
.skeleton__thumb { aspect-ratio: 16 / 9; }
.skeleton__line { height: 12px; margin: var(--s-3) var(--s-4); border-radius: var(--r-1); }
.skeleton__line--short { width: 45%; }
.sk-anim {
  background: linear-gradient(90deg, #14171c 25%, #1c2027 37%, #14171c 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ─────────────────────────────── Hero ─────────────────────────────── */
.hero { padding: var(--s-9) 0 var(--s-8); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
}
.hero__title {
  font-size: var(--t-hero);
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1.02;
  margin: 0 0 var(--s-4);
}
.hero__title span { display: block; color: var(--fg-3); font-weight: 600; }
.hero__lead { font-size: 17px; color: var(--fg-2); max-width: 52ch; margin-bottom: var(--s-5); }
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-5); }
.hero__facts {
  display: flex; gap: var(--s-5); flex-wrap: wrap;
  padding-top: var(--s-4); border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--fg-3);
}
.hero__fact b { display: block; color: var(--fg); font-size: var(--t-body); font-weight: 650; }
.hero__media { position: relative; }

/* ─────────────────────────────── 事实表 ─────────────────────────────── */
.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  font-size: var(--t-sm);
}
.facts dt { color: var(--fg-3); white-space: nowrap; }
.facts dd { margin: 0; color: var(--fg); word-break: break-word; }
.facts--mono dd { font-family: var(--mono); font-size: var(--t-xs); }

/* ─────────────────────────────── 详情页 ─────────────────────────────── */
/* 标题在两栏之上（源码顺序 = 视觉顺序 = h1 → h2），窄屏时天然变成"标题先出现" */
.detail-head { margin-bottom: var(--s-5); }
.detail-head h1 { margin-bottom: var(--s-2); }
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: var(--s-6);
  align-items: start;
}

/* ─────────────────────────────── 面包屑 / 标签页 ─────────────────────────────── */
.breadcrumb { display: flex; gap: var(--s-2); align-items: center; font-size: var(--t-sm); color: var(--fg-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.breadcrumb a { color: var(--fg-3); }
.breadcrumb a:hover { color: var(--fg); }
.breadcrumb__sep { opacity: .5; }

.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); margin-bottom: var(--s-5); overflow-x: auto; }
.tabs__tab {
  padding: var(--s-3) var(--s-4);
  border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--fg-2);
  font: 600 var(--t-sm)/1 var(--font);
  cursor: pointer; white-space: nowrap;
}
.tabs__tab:hover { color: var(--fg); }
.tabs__tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--brand); }

/* ─────────────────────────────── 提示块（文档用） ─────────────────────────────── */
.callout {
  display: flex; gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--surface-1);
  margin: 0 0 var(--s-4);
  font-size: var(--t-sm);
}
.callout__icon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.callout--info { border-color: rgba(126, 160, 255, .3); background: var(--info-dim); }
.callout--info .callout__icon { color: var(--info); }
.callout--warn { border-color: rgba(210, 153, 34, .32); background: var(--warn-dim); }
.callout--warn .callout__icon { color: var(--warn); }
.callout--danger { border-color: rgba(248, 81, 73, .34); background: var(--danger-dim); }
.callout--danger .callout__icon { color: var(--danger); }
.callout--ok { border-color: rgba(63, 185, 80, .3); background: var(--ok-dim); }
.callout--ok .callout__icon { color: var(--ok); }
.callout b { color: var(--fg); }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.steps > li {
  position: relative;
  padding-left: var(--s-7);
  padding-bottom: var(--s-5);
  border-left: 1px solid var(--line);
  margin-left: 12px;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: -13px; top: -2px;
  width: 25px; height: 25px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--fg);
}
.steps > li b { color: var(--fg); }

/* ─────────────────────────────── 命令面板（Ctrl+K） ─────────────────────────────── */
.palette {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: 0;
  background: var(--surface-raised);
  color: var(--fg);
  width: min(640px, calc(100vw - var(--s-4)));
  margin: 12vh auto auto;
  box-shadow: var(--sh-3), var(--metal-top);
  overflow: hidden;
}
.palette::backdrop { background: rgba(0, 0, 0, .68); backdrop-filter: blur(3px); }
.palette__input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  padding: var(--s-4) var(--s-5);
}
.palette__input:focus { outline: none; }
.palette__list { max-height: min(52vh, 460px); overflow-y: auto; padding: var(--s-2); margin: 0; list-style: none; }
.palette__item {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border: 0; border-radius: var(--r-2);
  background: none; color: var(--fg);
  font: inherit; text-align: left;
  cursor: pointer;
}
.palette__item[aria-selected="true"], .palette__item:hover { background: var(--surface-3); }
.palette__item img, .palette__item .palette__ic {
  width: 38px; height: 24px; border-radius: var(--r-1); object-fit: cover;
  background: var(--surface-2); flex: 0 0 auto;
}
.palette__ic { display: grid; place-items: center; color: var(--fg-3); }
.palette__main { flex: 1; min-width: 0; }
.palette__name { display: block; font-size: var(--t-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__sub { display: block; font-size: var(--t-xs); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__kind { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.palette__foot {
  display: flex; gap: var(--s-4); align-items: center;
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--surface-1);
  font-size: var(--t-xs); color: var(--fg-3);
  flex-wrap: wrap;
}
.palette__foot kbd { font-size: 10px; }

/* ─────────────────────────────── 页脚 ─────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: var(--s-9);
  padding: var(--s-7) 0 var(--s-6);
  background: var(--surface-1);
  position: relative;
  z-index: 1;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  margin-bottom: var(--s-6);
}
.site-footer__title { color: var(--fg); font-size: var(--t-sm); margin-bottom: var(--s-3); }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: var(--s-2); }
.site-footer__col a { color: var(--fg-2); font-size: var(--t-sm); }
.site-footer__col a:hover { color: var(--fg); }
.site-footer__bottom {
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  padding-top: var(--s-5); border-top: 1px solid var(--line);
  color: var(--fg-3); font-size: var(--t-xs);
}

/* ─────────────────────────────── 文档页 ─────────────────────────────── */
.docs-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--s-7); }
.docs-nav { position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; }
.docs-nav__title { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--s-3); }
.docs-nav ul { list-style: none; padding: 0; margin: 0; }
.docs-nav li { margin-bottom: 2px; }
.docs-nav a {
  display: block;
  padding: 6px var(--s-3);
  border-radius: var(--r-1);
  color: var(--fg-2);
  font-size: var(--t-sm);
  border-left: 2px solid transparent;
}
.docs-nav a:hover { color: var(--fg); background: var(--surface-1); }
.docs-nav a[aria-current="page"] { color: var(--fg); background: var(--surface-2); border-left-color: var(--brand); }

.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: var(--s-5); }
.prose ul, .prose ol { margin-bottom: var(--s-4); }
.prose > :last-child { margin-bottom: 0; }

/* ─────────────────────────────── 工具类 ─────────────────────────────── */
.muted { color: var(--fg-3); }
.small { font-size: var(--t-sm); }
.mono { font-family: var(--mono); font-size: var(--t-xs); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--tight { gap: var(--s-2); }
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }
.hidden, [hidden] { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─────────────────────────────── 响应式 ───────────────────────────────
   断点：1100（窄桌面/平板横）· 900（平板）· 640（手机）
   刻意不做"整体缩小"：每个断点都重新排关键结构。 */

@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero { padding: var(--s-7) 0 var(--s-6); }
  .hero__media { order: -1; }
  .docs-layout { grid-template-columns: 1fr; gap: var(--s-5); }
  .docs-nav { position: static; }
  .docs-nav ul { display: flex; flex-wrap: wrap; gap: var(--s-1); }
  .docs-nav a { border-left: 0; border: 1px solid var(--line); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: inline-grid; }
  .search-trigger { min-width: 0; }
  .search-trigger__text, .search-trigger__kbd { display: none; }
  .search-trigger { padding: 8px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-4); }
  .detail-layout { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  :root { --s-5: 18px; --s-6: 24px; --s-7: 32px; --s-8: 44px; --s-9: 56px; }
  .wrap { padding: 0 var(--s-4); }
  .grid { grid-template-columns: 1fr; }
  .section__head { flex-direction: column; align-items: flex-start; }
  .hero__facts { gap: var(--s-4); }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .modal, .palette { width: 100vw; max-width: 100vw; margin: 0; border-radius: var(--r-3) var(--r-3) 0 0; max-height: 92vh; position: fixed; inset: auto 0 0 0; }
  .palette { inset: var(--header-h) 0 0 0; margin: 0; border-radius: 0; max-height: none; }
  .modal__body { max-height: calc(92vh - 130px); }
  .btn { padding: 10px var(--s-4); }
  .hero__cta .btn { flex: 1 1 100%; }
  table { font-size: var(--t-xs); }
  th, td { padding: var(--s-2); }
  .facts { grid-template-columns: 1fr; gap: 2px var(--s-3); }
  .facts dt { margin-top: var(--s-2); }
}