/* ============================================================
   GPT-Image2 Prompt Gallery — Design System v2
   2026-09-20 改版
   核心原则：
     1. 图片是唯一主角 —— 界面压到最低存在感
     2. 数值必须有纪律 —— 圆角 4 档 / 按钮 3 档 / 间距全 4 倍数
     3. 科技感来自细节 —— 内高光 + 小圆角 + 字距收紧，不靠铺霓虹
   亮暗同源：两套主题是同一色相（青）家族的明暗变体
   ============================================================ */

:root {
  /* ---------- 色彩 · 亮色 ---------- */
  --bg:          #FBFBF9;
  --bg-soft:     #F4F4F1;
  --surface:     #FFFFFF;
  --surface-2:   #F4F4F1;
  --ink:         #14161A;
  --ink-2:       #565B66;
  --ink-3:       #7A808C;
  --line:        #E7E7E3;
  --line-2:      #F0F0EC;

  --accent:      #0E7490;
  --accent-2:    #0891B2;
  --accent-soft: #E0F4F9;
  --accent-solid:#0B6E85;
  --on-accent:   #FFFFFF;
  --lime:        #4D7C0F;
  --lime-soft:   #EEF7DC;

  --topbar-bg:   rgba(251, 251, 249, .82);
  --filterbar-bg:rgba(251, 251, 249, .90);
  --scrim:       rgba(20, 22, 26, .42);

  --glow-c1:     rgba(14, 116, 144, .17);
  --glow-c2:     rgba(127, 227, 245, .13);

  /* ---------- 间距（全 4 的倍数）---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- 圆角（4 档）---------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-full: 999px;

  /* ---------- 字体 ---------- */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---------- 字阶（8 档）---------- */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  clamp(28px, 5vw, 44px);

  /* ---------- 阴影 / 玻璃 ---------- */
  --shadow-s: 0 1px 2px rgba(20, 22, 26, .05), 0 1px 3px rgba(20, 22, 26, .04);
  --shadow-m: 0 4px 12px rgba(20, 22, 26, .07), 0 2px 4px rgba(20, 22, 26, .04);
  --shadow-l: 0 24px 60px rgba(20, 22, 26, .16), 0 8px 20px rgba(20, 22, 26, .08);
  --glow:     var(--shadow-m);
  --glow-hi:  none;

  /* ---------- 尺寸 ---------- */
  --topbar-h: 56px;
  --wrap:     1520px;

  /* ---------- 动效 ---------- */
  --t-fast: 160ms ease;
  --t-base: 200ms cubic-bezier(.2, .8, .3, 1);
  --t-slow: 240ms cubic-bezier(.2, .8, .3, 1);
}

[data-theme="dark"] {
  --bg:          #0A0C12;
  --bg-soft:     #0F121A;
  --surface:     #12151D;
  --surface-2:   #1A1E28;
  --ink:         #EAF2FA;
  --ink-2:       #A7B4C6;
  --ink-3:       #7E8CA0;
  --line:        #232935;
  --line-2:      #1A1F29;

  --accent:      #7FE3F5;
  --accent-2:    #A8ECFA;
  --accent-soft: #10303A;
  --accent-solid:#7FE3F5;
  --on-accent:   #06181D;
  --lime:        #CCFF6B;
  --lime-soft:   #26330F;

  --topbar-bg:   rgba(10, 12, 18, .82);
  --filterbar-bg:rgba(10, 12, 18, .90);
  --scrim:       rgba(0, 0, 0, .58);

  --glow-c1:     rgba(127, 227, 245, .11);
  --glow-c2:     rgba(204, 255, 107, .06);

  --shadow-s: 0 1px 2px rgba(0, 0, 0, .50);
  --shadow-m: 0 4px 14px rgba(0, 0, 0, .55);
  --shadow-l: 0 24px 60px rgba(0, 0, 0, .70);
  /* 玻璃拟态：外辉光 + 内高光（借鉴参考站手法，克制使用） */
  --glow:     0 0 0 1px rgba(127, 227, 245, .14), 0 8px 32px rgba(0, 0, 0, .60);
  --glow-hi:  inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ============================ RESET ============================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; }

::selection { background: var(--accent-solid); color: var(--on-accent); }

/* 统一焦点环：用 outline 而非 box-shadow，避免被 overflow 裁剪 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* dialog 本体带 tabindex="-1"，只用于程序化落焦点（Tab 够不到），不画焦点环 */
.drawer__panel:focus,
.modal__panel:focus { outline: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: var(--r-full);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ============================ 图标系统 ============================ */
/* 全部为内联 SVG（sprite 引用），统一 1.6px 线宽、圆头圆角，
   替代原先的 ◐ ▦ ☰ ♡ ✕ 字符图标 —— 后者跨平台字形差异明显 */

.i {
  width: 18px; height: 18px; display: block; flex: 0 0 auto;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn.is-on .i, .card__fav.is-on .i { fill: currentColor; }

/* 主题按钮双图标：亮色显示月亮（点了转暗），暗色显示太阳 */
.i-sun { display: none; }
[data-theme="dark"] .i-sun { display: block; }
[data-theme="dark"] .i-moon { display: none; }

/* ============================ 按钮基元（3 档）============================ */

.mini-btn, .ghost-btn, .icon-btn, .loadmore button, .primary-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.mini-btn:hover, .ghost-btn:hover, .icon-btn:hover {
  border-color: var(--ink-3); color: var(--ink); background: var(--surface-2);
}
.mini-btn:disabled, .ghost-btn:disabled, .icon-btn:disabled,
.primary-btn:disabled, .loadmore button:disabled {
  opacity: .45; cursor: not-allowed;
}
.mini-btn:active, .ghost-btn:active, .icon-btn:active { transform: translateY(1px); }

/* sm — 28px */
.mini-btn { height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-xs); border-radius: var(--r-sm); }

/* md — 36px */
.ghost-btn { height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.icon-btn  { height: 36px; min-width: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.is-on { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); }

/* lg — 44px */
.loadmore button { height: 44px; padding: 0 var(--sp-8); border-radius: var(--r-full); font-size: var(--fs-base); box-shadow: var(--shadow-s); }
.loadmore button:hover { border-color: var(--ink-3); color: var(--ink); transform: translateY(-1px); }

/* ============================ TOPBAR ============================ */

.topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--topbar-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-2);
  box-shadow: var(--glow-hi);
}
.topbar__inner {
  max-width: var(--wrap); margin: 0 auto;
  height: var(--topbar-h); padding: 0 var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-6);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.brand__mark {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--accent-solid); color: var(--on-accent);
  display: grid; place-items: center;
  font-weight: 500; font-size: var(--fs-sm); letter-spacing: -.02em;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text b { font-size: var(--fs-base); font-weight: 500; letter-spacing: -.01em; }
.brand__text small { font-size: var(--fs-xs); color: var(--ink-3); }

.nav { display: flex; gap: var(--sp-1); margin-left: auto; }
.nav a, .nav button {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); font-size: var(--fs-base); color: var(--ink-2);
  text-decoration: none; transition: background var(--t-fast), color var(--t-fast);
  border: 1px solid transparent;
}
.nav a:hover, .nav button:hover { background: var(--surface-2); color: var(--ink); }
.nav button.is-on {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
}

.topbar__right { display: flex; gap: var(--sp-2); }

/* ============================ HERO ============================ */

.hero { position: relative; overflow: hidden; }
.hero__glow {
  position: absolute; inset: -40% 0 auto 50%; transform: translateX(-50%);
  width: 1100px; height: 620px; pointer-events: none;
  background:
    radial-gradient(closest-side, var(--glow-c1), transparent 70%),
    radial-gradient(closest-side, var(--glow-c2), transparent 70%);
  background-position: 32% 0, 70% 22%;
  background-size: 60% 90%, 55% 80%;
  background-repeat: no-repeat;
  filter: blur(10px);
}
.hero__inner {
  position: relative;
  max-width: 940px; margin: 0 auto;
  padding: 80px var(--sp-6) var(--sp-12);
  text-align: center;
}

.eyebrow {
  margin: 0 0 var(--sp-3); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}

.hero h1 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-3xl);
  line-height: 1.12; letter-spacing: -.02em; font-weight: 500;
}
.hero__sub {
  margin: 0 auto; max-width: 660px;
  font-size: var(--fs-md); color: var(--ink-2); line-height: 1.7;
}

.stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-2); margin: var(--sp-8) 0 var(--sp-6);
}
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); color: var(--ink-2); box-shadow: var(--shadow-s);
  display: flex; align-items: baseline; gap: var(--sp-1);
}
.stat b { color: var(--ink); font-size: var(--fs-md); font-weight: 500; font-variant-numeric: tabular-nums; }

.search { position: relative; max-width: 560px; margin: 0 auto; display: flex; align-items: center; }
.search svg {
  position: absolute; left: var(--sp-4); width: 18px; height: 18px;
  fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round;
  pointer-events: none;
}
.search input {
  width: 100%; height: 52px; padding: 0 var(--sp-12) 0 var(--sp-12);
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink);
  font-size: var(--fs-md); font-family: inherit;
  box-shadow: var(--shadow-s);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search__clear {
  position: absolute; right: var(--sp-3); width: 28px; height: 28px;
  border-radius: var(--r-full); background: var(--surface-2);
  color: var(--ink-3); display: grid; place-items: center;
}
.search__clear::before { content: ""; position: absolute; inset: -8px; border-radius: var(--r-full); }
.search__clear svg { position: static; width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; }
.search__clear:hover { background: var(--line); color: var(--ink); }

/* ============================ WORKSPACE ============================ */

.workspace { padding: var(--sp-8) 0 var(--sp-4); }
.workspace__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-6); }

.filterbar {
  position: sticky; top: var(--topbar-h); z-index: 40;
  background: var(--filterbar-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: var(--sp-3) 0 var(--sp-3); margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-2);
}

.chips { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-3); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-full); padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); color: var(--ink-2);
  white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  display: flex; align-items: center; gap: var(--sp-2);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); background: var(--surface-2); }
.chip em { font-style: normal; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip.is-on {
  background: var(--accent-solid); border-color: var(--accent-solid);
  color: var(--on-accent); font-weight: 500;
}
.chip.is-on em { color: var(--on-accent); opacity: .75; }

.filterbar__row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.select { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); }
.select select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-sm); height: 36px; padding: 0 var(--sp-8) 0 var(--sp-3);
  font-size: var(--fs-sm); font-family: inherit; color: var(--ink);
  cursor: pointer; outline: none;
  transition: border-color var(--t-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A808C' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.select select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.viewtoggle { margin-left: auto; display: flex; gap: var(--sp-1); }
.viewtoggle button {
  width: 36px; height: 36px; border: 1px solid var(--line);
  background: var(--surface); border-radius: var(--r-sm); color: var(--ink-3);
  display: grid; place-items: center; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.viewtoggle button svg { width: 18px; height: 18px; }
.viewtoggle button:hover { border-color: var(--ink-3); color: var(--ink); }
.viewtoggle button.is-on { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); }

.resultmeta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-sm); color: var(--ink-3); padding: var(--sp-1) 0 var(--sp-4);
}
.resultmeta b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500; }

/* ============================ GRID / CARDS ============================ */

.grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
}
.grid.is-list { grid-template-columns: 1fr; gap: var(--sp-3); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  text-align: left; padding: 0; display: flex; flex-direction: column;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  position: relative; cursor: pointer;
}
.card:hover, .card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--glow);
  border-color: var(--accent-soft);
}

.card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-soft); }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms cubic-bezier(.2, .8, .3, 1), opacity 400ms;
  opacity: 0;
}
.card__media img.is-loaded { opacity: 1; }
.card:hover .card__media img { transform: scale(1.03); }

.card__badge {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  background: rgba(12, 14, 18, .68); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .02em;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.card__hot {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  background: var(--accent-solid); color: var(--on-accent);
  font-size: var(--fs-xs); font-weight: 500; padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-full); letter-spacing: .02em;
}

.card__fav {
  position: absolute; bottom: var(--sp-2); right: var(--sp-2);
  width: 34px; height: 34px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .94); color: #565B66;
  display: grid; place-items: center; border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast);
  z-index: 2;
}
/* 触控热区补足到 44x44（WCAG 2.5.8） */
.card__fav::before { content: ""; position: absolute; inset: -5px; border-radius: var(--r-full); }
.card__fav svg { width: 17px; height: 17px; }
.card__fav:hover { color: var(--accent); }
.card__fav.is-on { opacity: 1; transform: none; color: #E11D48; }
.card__fav.is-on svg { fill: currentColor; }
.card:hover .card__fav, .card:focus-within .card__fav { opacity: 1; transform: none; }
/* 触屏设备没有 hover —— 常驻显示 */
@media (hover: none) {
  .card__fav { opacity: 1; transform: none; }
  .card:hover { transform: none; }
  .card:hover .card__media img { transform: none; }
}

/* 卡片上的「看大图」入口：直接进灯箱，不经过详情抽屉。
   - 压在照片上 → 用与 .card__badge 同一套深色玻璃（不跟着主题走，因为它背后永远是图）；
   - 常驻可见，不做 hover 才现 —— 否则「卡片能直开大图」这件事根本发现不了；
   - 与右下角的白底收藏按钮分居两角，任何卡宽下都不重叠。 */
.card__zoom {
  position: absolute; bottom: var(--sp-2); left: var(--sp-2);
  width: 34px; height: 34px; border-radius: var(--r-full);
  background: rgba(12, 14, 18, .62); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .18);
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 8px rgba(0, 0, 0, .22);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  z-index: 2;
}
/* 触控热区补足到 44×44（WCAG 2.5.8） */
.card__zoom::before { content: ""; position: absolute; inset: -5px; border-radius: var(--r-full); }
.card__zoom svg { width: 17px; height: 17px; }
.card__zoom:hover { background: rgba(12, 14, 18, .86); border-color: rgba(255, 255, 255, .34); }
.card__zoom:active { transform: scale(.94); }
/* 焦点环：底是深玻璃，用亮青才在任意照片上都有对比（亮色主题的 --accent 是深青，会糊掉） */
.card__zoom:focus-visible { outline-color: #7FE3F5; outline-offset: 3px; }

.card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card__title {
  font-size: var(--fs-base); font-weight: 500; letter-spacing: -.01em;
  line-height: 1.45; margin: 0;
}
/* 标题本身是 <button>，作为键盘入口。整卡的点击热区不靠伪元素铺满，
   而是走 #grid 上的事件委托 —— 因为 button 的 overflow:hidden 会把
   铺满全卡的 ::after 一并裁掉（实测踩过）。 */
.card__opener {
  display: block; width: 100%; text-align: left; padding: 0;
  font: inherit; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card__prompt {
  margin: 0; font-size: var(--fs-xs); line-height: 1.65; color: var(--ink-2);
  font-family: var(--mono);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.card__foot {
  margin-top: auto; padding-top: var(--sp-1);
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--ink-3);
}
.card__cat {
  background: var(--surface-2); border-radius: var(--r-sm); padding: 2px var(--sp-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%;
}
.card__src { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 列表视图 */
.grid.is-list .card { flex-direction: row; align-items: stretch; }
.grid.is-list .card__media { aspect-ratio: auto; width: 148px; flex: 0 0 148px; }
.grid.is-list .card__body { padding: var(--sp-4) var(--sp-6); }
.grid.is-list .card__prompt { -webkit-line-clamp: 3; }
/* ⚠️ 这里曾经写成 `position: static; margin-left: auto`，想把收藏按钮排进列表行的末尾 ——
   但它在 DOM 里属于 .card__media（窄缩略图 + overflow:hidden），静态流会被 img 的 100% 高度
   顶到盒子外，整颗按钮被裁掉：既看不见也点不到（回归脚本实测 insideMedia=false 抓到）。
   保持绝对定位、压在缩略图右下角，与左下角的「看大图」分居两角。 */
.grid.is-list .card__fav { opacity: 1; transform: none; width: 30px; height: 30px; }
.grid.is-list .card__fav::before { inset: -7px; }

/* 骨架屏 */
.card__skel {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--bg-soft) 30%, var(--surface-2) 50%, var(--bg-soft) 70%);
  background-size: 220% 100%; animation: skel 1.3s infinite linear;
}
@keyframes skel { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ============================ EMPTY / LOADMORE ============================ */

.empty { text-align: center; padding: var(--sp-16) var(--sp-6); color: var(--ink-3); }
.empty svg { width: 56px; height: 56px; margin: 0 auto var(--sp-4); display: block;
  stroke: var(--line); stroke-width: 1.4; fill: none; }
.empty p { margin: 0 0 var(--sp-4); font-size: var(--fs-base); line-height: 1.7; }

.loadmore { display: flex; justify-content: center; padding: var(--sp-8) 0 var(--sp-4); }
.loadmore button[hidden] { display: none; }

/* ============================ TEMPLATES ============================ */

.tpl {
  padding: var(--sp-16) 0 90px; background: var(--bg-soft);
  border-top: 1px solid var(--line-2); margin-top: var(--sp-12);
}
.tpl__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-6); }
.tpl h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-2xl); letter-spacing: -.02em; font-weight: 500; }
.tpl__sub { margin: 0 0 var(--sp-8); color: var(--ink-2); max-width: 640px; font-size: var(--fs-base); }

.tplgrid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(304px, 1fr)); }
.tplcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4); display: flex; gap: var(--sp-3); text-align: left;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  align-items: flex-start;
}
.tplcard:hover { transform: translateY(-2px); box-shadow: var(--glow); border-color: var(--accent-soft); }
.tplcard__cover { width: 62px; height: 62px; border-radius: var(--r-sm); object-fit: cover; flex: 0 0 62px; background: var(--bg-soft); }
.tplcard__t { font-size: var(--fs-base); font-weight: 500; margin: 0 0 var(--sp-1); letter-spacing: -.01em; }
.tplcard__d {
  font-size: var(--fs-xs); color: var(--ink-2); margin: 0; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tplcard__tags { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-2); }
.tplcard__tags span {
  font-size: var(--fs-xs); color: var(--accent); background: var(--accent-soft);
  padding: 2px var(--sp-2); border-radius: var(--r-sm);
}

/* ============================ DRAWER ============================ */

.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none; }
.drawer__scrim {
  position: absolute; inset: 0; background: var(--scrim);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fade var(--t-slow) ease;
}
@keyframes fade { from { opacity: 0; } }

/* 抽屉改为「浮层卡片」而非贴边整屏：
   原实现 top/bottom:0 + width 760px + 图片 width:100%，
   一张方图在 760 宽下就是 760 高，光图就吃掉整屏 → 观感过大、必须大量滚动。
   现收窄到 620 并四周留边，图片限高居中，其余内容紧凑排列。 */
.drawer__panel {
  position: absolute;
  top: 0; bottom: 0; right: var(--sp-6);
  /* 垂直居中 + 高度上限：高屏上也不会拉成一整条（margin-block:auto 配合上下定位做居中） */
  margin-block: auto;
  height: min(860px, calc(100% - var(--sp-12)));
  width: min(620px, calc(100% - var(--sp-12)));
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--glow);
  display: flex; flex-direction: column;
  animation: slidein 280ms cubic-bezier(.2, .8, .3, 1);
}
@keyframes slidein { from { transform: translateX(32px); opacity: .4; } }

.drawer__bar {
  flex: 0 0 auto; height: 48px; padding: 0 var(--sp-2) 0 var(--sp-4);
  border-bottom: 1px solid var(--line-2);
  box-shadow: var(--glow-hi);
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface);
}
.drawer__idx { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.drawer__bar-actions { margin-left: auto; display: flex; gap: var(--sp-1); }

.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-4) var(--sp-8); }

/* 图片限高 + 居中：figure 贴合图片自身宽度（fit-content），不做 100% 拉满，也不裁切作品 */
.drawer__fig {
  position: relative;
  width: fit-content; max-width: 100%; margin: 0 auto var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-soft); border: 1px solid var(--line-2);
  padding: var(--sp-2);
  display: grid; place-items: center;
}
.drawer__fig img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 40vh;
  border-radius: var(--r-sm);
  cursor: zoom-in;
}
/* 放大入口：常驻显示（手机上无 hover，且它同时是「这里能放大」的视觉提示）。
   与卡片收藏按钮同一套观感，但用主题色而非硬编码白，保证暗色下也成立。 */
.drawer__zoom {
  position: absolute; right: var(--sp-2); bottom: var(--sp-2);
  width: 34px; height: 34px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); display: grid; place-items: center;
  box-shadow: var(--shadow-m);
  opacity: .88;
  transition: opacity var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
/* 触控热区补足到 44×44（WCAG 2.5.8），不靠视觉尺寸硬撑 */
.drawer__zoom::before { content: ""; position: absolute; inset: -5px; border-radius: var(--r-full); }
.drawer__zoom svg { width: 17px; height: 17px; }
.drawer__zoom:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }

.drawer__body h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); letter-spacing: -.01em; font-weight: 500; }
.drawer__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.tag {
  font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--r-full);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2);
}
.tag--cat { background: var(--accent-solid); color: var(--on-accent); border-color: var(--accent-solid); }

.promptblock { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--sp-4); }
.promptblock__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);
  background: var(--surface-2); border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.promptblock__acts { margin-left: auto; display: flex; gap: var(--sp-2); }
.promptblock pre {
  margin: 0; padding: var(--sp-3); background: var(--surface);
  font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
  max-height: 300px; overflow-y: auto; color: var(--ink);
}
.promptblock pre .var {
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--r-sm); padding: 1px var(--sp-1); font-weight: 500;
}

.drawer__meta { display: grid; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--sp-4); }
.drawer__meta a { color: var(--accent); text-decoration: none; }
.drawer__meta a:hover { text-decoration: underline; }
.drawer__meta .row { display: flex; gap: var(--sp-3); }
.drawer__meta .k { flex: 0 0 72px; color: var(--ink-3); }

.drawer__cta { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.primary-btn {
  flex: 1; min-width: 168px; height: 44px; border-radius: var(--r-sm);
  background: var(--accent-solid); border-color: var(--accent-solid);
  color: var(--on-accent); font-size: var(--fs-base); font-weight: 500;
}
.primary-btn:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
/* 注：CTA 区原有的「GitHub 源案例」次按钮已移除，对应 .drawer__cta .ghost-btn 规则一并删除 */

/* ============================ LIGHTBOX（大图预览）============================
   设计前提：看图时环境必须压暗，否则屏幕其余部分的光会干扰对画面明暗的判断。
   因此本组件在亮暗两套主题下都用「深底 + 浅字」—— 所以色值不走 --surface / --ink，
   而是在组件作用域内定义一组局部 token（仍是变量，便于统一调参与对比度兜底）。
   注意 z-index：抽屉 90 / 模板弹窗 95 < 灯箱 120 < toast 200
   ============================================================================ */
.lightbox {
  --lb-scrim:   rgba(8, 10, 14, .94);
  --lb-bar:     rgba(16, 19, 26, .88);
  --lb-ink:     #F1F5FA;
  --lb-ink-2:   #A2AEBF;
  --lb-line:    rgba(255, 255, 255, .15);
  --lb-fill:    rgba(255, 255, 255, .09);
  --lb-fill-hi: rgba(255, 255, 255, .20);
  /* 翻页按钮浮在图片之上，底色必须自带遮光 —— 用白色半透明的话，
     碰到亮色画面（实测：黄白底的手举牌）按钮会整个糊进图里看不见。 */
  --lb-nav-bg:    rgba(10, 13, 18, .62);
  --lb-nav-bg-hi: rgba(10, 13, 18, .80);
  --lb-focus:   #7FE3F5;   /* 深底上的焦点环：不能用亮色主题的深青 --accent */

  position: fixed; inset: 0; z-index: 120;
}
.lightbox[hidden] { display: none; }

.lightbox__scrim {
  position: absolute; inset: 0; background: var(--lb-scrim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade var(--t-slow) ease;
}

.lightbox__panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  animation: lbfade 240ms cubic-bezier(.2, .8, .3, 1);
}
@keyframes lbfade { from { opacity: 0; } }
/* 本体只用于程序化落焦点（tabindex="-1"），不画焦点环 */
.lightbox__panel:focus { outline: none; }

/* ---------- 顶栏 ---------- */
.lightbox__bar {
  flex: 0 0 auto; height: 52px;
  padding: 0 var(--sp-3) 0 var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--lb-bar); color: var(--lb-ink);
  border-bottom: 1px solid var(--lb-line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lightbox__count {
  font-size: var(--fs-xs); color: var(--lb-ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lightbox__cap {
  flex: 1; min-width: 0;
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lightbox__pct {
  margin-left: auto; font-size: var(--fs-xs); color: var(--lb-ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lightbox__acts { display: flex; gap: var(--sp-1); margin-left: auto; }
.lightbox__pct + .lightbox__acts { margin-left: 0; }

.lb-btn {
  position: relative;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--lb-fill); border: 1px solid var(--lb-line);
  color: var(--lb-ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.lb-btn::before { content: ""; position: absolute; inset: -4px; }   /* 补到 44px 热区 */
.lb-btn .i { width: 18px; height: 18px; }
.lb-btn:hover:not(:disabled) { background: var(--lb-fill-hi); border-color: rgba(255, 255, 255, .30); }
.lb-btn:active:not(:disabled) { transform: scale(.94); }
.lb-btn:disabled { opacity: .32; cursor: not-allowed; }
.lb-btn:focus-visible { outline: 2px solid var(--lb-focus); outline-offset: 2px; }

/* ---------- 舞台 ---------- */
.lightbox__stage {
  position: relative; flex: 1; min-height: 0;
  overflow: hidden;
  touch-action: none;          /* 手势全部由脚本接管，禁掉浏览器默认的滚动/双击缩放 */
  cursor: zoom-in;
}
/* ⚠️ 图片必须用「绝对定位 + inset:0 + margin:auto」居中，不能用 grid/flex 居中：
   grid 的隐式行高会按内容撑开，此时 max-height 的百分比没有确定的参照，
   等价于失效 —— 实测一张 580×1200 的竖图会被上下裁掉。 */
.lightbox__img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  user-select: none; -webkit-user-drag: none;
  transform-origin: center center;
  will-change: transform;
  opacity: 0; transition: opacity 220ms ease;
}
.lightbox__img.is-ready { opacity: 1; }
.lightbox.is-zoomed .lightbox__stage { cursor: grab; }
.lightbox.is-grabbing .lightbox__stage { cursor: grabbing; }

.lightbox__spin {
  position: absolute; left: 50%; top: 50%;
  width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: var(--r-full);
  border: 2px solid rgba(255, 255, 255, .22);
  border-top-color: var(--lb-ink);
  animation: lbspin 800ms linear infinite;
}
.lightbox__spin[hidden] { display: none; }
@keyframes lbspin { to { transform: rotate(1turn); } }

/* ---------- 左右翻页 ---------- */
.lightbox__nav {
  position: absolute; top: calc(50% + 26px); transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: var(--r-full);
  background: var(--lb-nav-bg); border: 1px solid var(--lb-line);
  color: var(--lb-ink); display: grid; place-items: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  transition: background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
  z-index: 2;
}
.lightbox__nav--prev { left: var(--sp-4); }
.lightbox__nav--next { right: var(--sp-4); }
.lightbox__nav .i { width: 22px; height: 22px; }
.lightbox__nav:hover:not(:disabled) { background: var(--lb-nav-bg-hi); border-color: rgba(255, 255, 255, .30); }
.lightbox__nav:disabled { opacity: .26; cursor: not-allowed; }
.lightbox__nav:focus-visible { outline: 2px solid var(--lb-focus); outline-offset: 2px; }

/* ============================ MODAL ============================ */

.modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: var(--sp-6); }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal__panel {
  position: relative; width: min(660px, 100%); max-height: 84vh;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--glow); display: flex; flex-direction: column; overflow: hidden;
  animation: pop var(--t-slow) cubic-bezier(.2, .8, .3, 1);
}
@keyframes pop { from { transform: scale(.97) translateY(8px); opacity: 0; } }
.modal__bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--line-2); box-shadow: var(--glow-hi);
}
.modal__bar strong { font-size: var(--fs-md); letter-spacing: -.01em; font-weight: 500; }
.modal__bar .icon-btn { margin-left: auto; }
.modal__body { padding: var(--sp-6) var(--sp-6) var(--sp-8); overflow-y: auto; font-size: var(--fs-base); color: var(--ink-2); }
.modal__body h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.modal__body section { margin-bottom: var(--sp-6); }
.modal__body ul { margin: 0; padding-left: var(--sp-6); }
.modal__body li { margin-bottom: var(--sp-2); line-height: 1.65; }
.modal__body .cover { width: 100%; border-radius: var(--r-md); margin-bottom: var(--sp-4); }
.modal__body .ex { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.modal__body .ex button {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm);
  padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); color: var(--ink-2);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.modal__body .ex button:hover { border-color: var(--accent); color: var(--accent); }

/* ============================ TOAST ============================ */

.toast {
  position: fixed; left: 50%; bottom: var(--sp-8); transform: translateX(-50%);
  background: var(--ink); color: var(--bg); font-size: var(--fs-sm); font-weight: 500;
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-full);
  box-shadow: var(--shadow-l), var(--glow-hi);
  z-index: 200; animation: toastin var(--t-slow) cubic-bezier(.2, .8, .3, 1);
}
.toast[hidden] { display: none; }
@keyframes toastin { from { transform: translate(-50%, 12px); opacity: 0; } }

/* ============================ FOOTER ============================ */

.footer { border-top: 1px solid var(--line-2); background: var(--bg); }
.footer__inner {
  max-width: var(--wrap); margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-12);
  font-size: var(--fs-sm); color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
}
.footer__inner p { margin: 0; }
.footer__inner a { color: var(--ink-2); transition: color var(--t-fast); }
.footer__inner a:hover { color: var(--accent); }

/* ============================ RESPONSIVE ============================ */
/* 移动优先：先保 320px 可用，再逐级增强 */

/* ≥1400px 桌面：大屏放宽栅格，两侧不留过多空白 */
@media (min-width: 1400px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
}

/* ≤1399px 笔记本 */
@media (max-width: 1399px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); }
}

/* ≤1023px 平板 */
@media (max-width: 1023px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--sp-3); }
  .tplgrid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  /* 平板宽度不够留 24px 边，收到 16px */
  .drawer__panel {
    right: var(--sp-4);
    height: calc(100% - var(--sp-8));
    width: min(620px, calc(100% - var(--sp-8)));
  }
}

/* ≤759px 手机 */
@media (max-width: 759px) {
  .topbar__inner { padding: 0 var(--sp-4); gap: var(--sp-3); }
  .brand__text { display: none; }
  .nav a, .nav button { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
  .hero__inner { padding: var(--sp-12) var(--sp-4) var(--sp-8); }
  .workspace__inner, .tpl__inner, .footer__inner { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .workspace { padding-top: var(--sp-6); }

  /* 筛选行收成单行横向滚动。
     加上「语言」后是 4 个下拉 + 重置 + 视图按钮，允许换行会折成 3 行，
     把 sticky 的筛选栏顶到约 180px 高、遮住手机上半屏（截图实测确认）。 */
  .filterbar { padding: var(--sp-2) 0; }
  .filterbar__row {
    flex-wrap: nowrap; overflow-x: auto; gap: var(--sp-2);
    padding-bottom: var(--sp-2);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .filterbar__row::-webkit-scrollbar { display: none; }
  .filterbar__row > * { flex: 0 0 auto; }
  .viewtoggle { margin-left: 0; }
  .chips { padding-bottom: var(--sp-2); }

  .grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--sp-3); }
  .grid.is-list { grid-template-columns: 1fr; }
  .grid.is-list .card__media { width: 104px; flex-basis: 104px; }
  .grid.is-list .card__body { padding: var(--sp-3) var(--sp-4); }
  .card__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); gap: var(--sp-1); }
  .card__prompt { display: none; }
  .card__fav { opacity: 1; transform: none; }
  /* 手机：抽屉回到贴边整屏（留边反而浪费本就窄的宽度），内部再压一档间距 */
  .drawer__panel {
    top: 0; right: 0; bottom: 0;
    margin-block: 0;
    height: auto; width: 100%; border-radius: 0;
  }
  .drawer__bar { height: 52px; padding: 0 var(--sp-1) 0 var(--sp-3); }
  .drawer__body { padding: var(--sp-3) var(--sp-3) var(--sp-8); }
  .drawer__fig { margin-bottom: var(--sp-3); }
  .drawer__fig img { max-height: 36vh; }
  .drawer__tags { margin-bottom: var(--sp-3); }
  .promptblock { margin-bottom: var(--sp-3); }
  .promptblock pre { max-height: 240px; padding: var(--sp-3); }
  .drawer__meta { margin-bottom: var(--sp-3); }
  .viewtoggle { margin-left: 0; }
  /* 灯箱：手机上顶栏压到 48px，标题让位（宽度不够三个信息同排），
     翻页按钮贴着屏幕边，让图片可用区域尽量大 */
  .lightbox__bar { height: 48px; padding: 0 var(--sp-2) 0 var(--sp-3); gap: var(--sp-2); }
  .lightbox__cap { display: none; }
  .lb-btn { width: 34px; height: 34px; }
  .lb-btn::before { inset: -5px; }   /* 34 + 10 = 44px 热区 */
  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__nav--prev { left: var(--sp-2); }
  .lightbox__nav--next { right: var(--sp-2); }
  .lightbox__nav .i { width: 20px; height: 20px; }
  .drawer__zoom { width: 32px; height: 32px; }
  /* 窄屏卡片只有 158–175px 宽，34px 的圆钮占比过大 —— 视觉缩到 32px，
     热区靠 ::before 补回 44×44 */
  .card__zoom { width: 32px; height: 32px; }
  .card__zoom::before { inset: -6px; }

  .modal { padding: var(--sp-3); }
  .tpl { padding: var(--sp-12) 0 var(--sp-16); }
  .footer__inner { padding-bottom: var(--sp-8); }
}

/* ≤419px 小屏：固定两列，把每个像素用满 */
@media (max-width: 419px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .card__title { font-size: var(--fs-sm); }
  .stat { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
  .stat b { font-size: var(--fs-base); }
  .hero h1 { letter-spacing: -.01em; }
  .topbar__inner { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .nav a, .nav button { padding: var(--sp-2); }
  .topbar__right { gap: var(--sp-1); }
  .icon-btn { padding: 0 var(--sp-2); }
  .drawer__fig img { max-height: 30vh; }
  .drawer__body h2 { font-size: var(--fs-base); }
}

/* ≤359px 极窄屏（320px 档）：导航做减法，优先保「案例 + 收藏」。
   模板区仍在页面里，向下滚动可达 —— 这里只是防止导航栏溢出 */
@media (max-width: 359px) {
  .nav a[href="#templates"] { display: none; }
}

/* ============================ 无障碍降级 ============================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  .card:hover { transform: none; }
  .card:hover .card__media img { transform: none; }
  .card__skel { animation: none; background: var(--bg-soft); }
}

/* 高对比度模式兜底 */
@media (prefers-contrast: more) {
  :root { --line: #B4B2A9; --ink-3: #565B66; }
  [data-theme="dark"] { --line: #4A5468; --ink-3: #A7B4C6; }
  .card { border-width: 1.5px; }
  /* 灯箱本来就是深底，这里把描边与次级文字一并提亮，保证 ≥3:1 / ≥4.5:1 */
  .lightbox {
    --lb-line:  rgba(255, 255, 255, .46);
    --lb-fill:  rgba(255, 255, 255, .18);
    --lb-ink-2: #CBD5E1;
  }
}