/* =========================================================
   Chroma · 配色网站
   UI 设计规范见 DESIGN-SPEC.md，后续所有新增 UI 必须遵循该规范。
   ========================================================= */

:root {
  /* ---- 品牌色 ---- */
  --accent: #FF4B4B;
  --accent-hover: #E63E3E;
  --accent-tint: #FFF5F5;      /* 强调色浅底（hover 背景） */
  --base: #FD4A4A;             /* 默认基准色（搜索框色点 / 初始状态） */

  /* ---- 中性色 ---- */
  --bg: #F5F5F7;               /* 页面 / 头部 / 浅灰底 */
  --bg-white: #FFFFFF;         /* 卡片 / 面板 / 输入框 */
  --bg-alt: #FAFAFA;           /* 卡片信息区 hover 背景 */
  --bg-soft: #F4F1EE;          /* 次级浅底（code / hint 卡片等） */
  --text: #111111;
  --text-muted: #666666;
  --text-soft: #767676;        /* 次级弱文本：提亮至 4.54:1 满足 WCAG AA 正文 */
  --border: #E5E5E5;
  --border-light: #EEEEEE;

  /* ---- 状态色（对比度等级等语义色） ---- */
  --success: #16A34A;          /* AAA 通过 */
  --ok: #65A30D;               /* AA 通过 */
  --info: #2563EB;             /* AA 级（原 --info 缺失，此处补全，供对比度徽章） */
  --warning: #CA8A04;          /* AA Large 通过 */
  --danger: #DC2626;           /* 未通过 */

  /* ---- 深色画布 ---- */
  --surface-dark: #161616;     /* 深色画布底 */
  --surface-dark-2: #202020;   /* 深色卡片底 */
  --border-dark: #333333;      /* 深色分隔线 */
  --text-on-dark: #FFFFFF;     /* 深底主文本 */
  --text-on-dark-muted: #AAAAAA; /* 深底次级文本 */

  /* ---- 玻璃态（渐变卡 / 图片上的浮层控件） ---- */
  --glass-bg: rgba(255,255,255,0.22);
  --glass-border: rgba(255,255,255,0.40);

  /* ---- 遮罩（色卡悬停浮层） ---- */
  --overlay-dark: rgba(0,0,0,0.75);
  --overlay-soft: rgba(0,0,0,0.55);

  /* ---- 输入状态 ---- */
  --swatch-empty: #D0D0D0;     /* 颜色无效时的空色点 */

  /* ---- 字体 ---- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-hero: 'Inter', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;  /* 大标题 / 卡片名（现代无衬线） */
  --font-mono: 'SF Mono', ui-monospace, 'Cascadia Code', Consolas, monospace; /* 色值等代码文本 */

  /* ---- 间距（4px 网格） ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ---- 圆角 ---- */
  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px;              /* 卡片统一圆角 */
  --r-full: 999px;           /* 胶囊按钮 / 标签 / 色点 */

  /* ---- 阴影 ---- */
  --sh-sm: 0 1px 3px rgba(0,0,0,0.05);   /* 卡片静态 */
  --sh-md: 0 4px 20px rgba(0,0,0,0.07); /* 悬停 / 下拉 */
  --sh-lg: 0 12px 40px rgba(0,0,0,0.10); /* Toast */

  /* ---- 动效 ---- */
  --t-fast: 150ms ease;
  --t-norm: 280ms ease;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);  /* 顺滑减速缓动（仪器读数感） */
  --reveal-dur: 520ms;
  --reveal-dist: 18px;                      /* 进场位移 */
  --reveal-step: 70ms;                      /* 同组元素错峰步长 */

  /* ---- 统一交互位移（hover 上移，规范 §7） ---- */
  --lift: -4px;               /* 卡片悬停上移统一值（替代散落的 -3px/-4px） */

  /* ---- 响应式断点（规范 §8，统一全站） ---- */
  --bp-sm: 640px;             /* 手机：网格单列、导航精简 */
  --bp-md: 900px;             /* 平板：网格降列 */
  --bp-lg: 1024px;            /* 桌面紧凑：两栏转单列 */
  --bp-xl: 1280px;            /* 容器最大宽 */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  background: var(--bg-white);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

/* 统一键盘焦点态 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(255,75,75,0.18); }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-6); }


/* ---- 滑块（range）全局规范：无灰色描边，accent 色拇指 + 浅色轨道 ---- */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  border: none; outline: none; background: transparent;
  height: 20px; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--border-light);
  border: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  margin-top: -5px; cursor: pointer;
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--border-light);
  border: none;
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: pointer;
}
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* =========================================================
   ANNOUNCEMENT BAR
   ========================================================= */
.announcement {
  background: var(--bg);
  text-align: center; padding: 10px var(--sp-4);
  font-size: 0.78rem; color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
}
.announcement-pill {
  display: inline-block; background: var(--text); color: #fff;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: var(--r-full); margin-right: 8px;
  vertical-align: middle;
}
.announcement-text { vertical-align: middle; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--bg);
  border-bottom: 1px solid var(--border-light);
}
.header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-10); height: 70px;
}
.brand { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; }
.brand-logo { height: 34px; width: auto; display: block; }
/* beta 徽章：代表网站在测试阶段 */
.brand-beta {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  border-radius: 999px;
  line-height: 1.3;
  flex: none;
  user-select: none;
}

.nav {
  display: flex; justify-content: center;
  gap: var(--sp-20);
}
.nav-item { position: relative; }
.nav-item::after {
  /* 悬停桥：填补导航项与下拉菜单之间 8px 间隙，
     避免鼠标移入途中悬停状态丢失导致菜单消失 */
  content: '';
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 8px;
}
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.82rem; font-weight: 500; color: var(--text-muted);
  padding: 8px 4px; transition: color var(--t-fast); white-space: nowrap;
  letter-spacing: 0.01em;
}
.nav-link::after {
  /* 悬停 / 选中下划线：accent 色，从中心展开，克制且呼应品牌 */
  content: '';
  position: absolute; left: 50%; bottom: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: var(--accent);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform var(--t-fast);
}
.nav-link:hover { color: var(--text); }
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after,
.nav-link[aria-current="page"]::after { transform: translateX(-50%) scaleX(1); }
.nav-link.is-active,
.nav-link[aria-current="page"] { color: var(--accent); }

/* 汉堡开关：默认隐藏，移动端显示；关联 #navToggle 复选框实现无 JS 折叠 */
.nav-toggle-cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-toggle {
  display: none;
  order: 3;
  width: 42px; height: 42px; border-radius: var(--r-md);
  border: 1px solid var(--border-light); background: var(--bg-white);
  cursor: pointer; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px; transition: border-color var(--t-fast);
}
.nav-toggle:hover { border-color: var(--text-muted); }
.nav-toggle-bar {
  width: 18px; height: 2px; border-radius: 2px; background: var(--text);
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav-toggle-cb:focus-visible + .nav-toggle { outline: 2px solid var(--accent); outline-offset: 2px; }

.dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 140px; background: var(--bg-white); border: 1px solid var(--border-light);
  border-radius: var(--r-md); padding: 8px; box-shadow: var(--sh-md);
  opacity: 0; visibility: hidden; pointer-events: none;
  /* 收起时 visibility 延迟 120ms：离开后菜单短暂停留，便于移入点击 */
  transition:
    opacity var(--t-fast) 0ms,
    transform var(--t-fast) 0ms,
    visibility 0ms linear 120ms;
  z-index: 60;
}
.dropdown::before {
  content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: var(--bg-white); border-left: 1px solid var(--border-light);
  border-top: 1px solid var(--border-light);
}
.dropdown a {
  display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted);
  padding: 8px 12px; border-radius: var(--r-sm); transition: all var(--t-fast);
  white-space: nowrap;
}
.dropdown a:hover { background: var(--bg); color: var(--text); }
.dropdown-placeholder {
  display: block; font-size: 0.8rem; color: var(--text-soft);
  padding: 8px 12px; cursor: default; white-space: nowrap;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  /* 展开时无延迟，立即显示 */
  transition:
    opacity var(--t-fast) 0ms,
    transform var(--t-fast) 0ms,
    visibility 0ms linear 0ms;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 600; padding: 9px 18px;
  border-radius: var(--r-full); border: 1px solid transparent;
  transition: all var(--t-fast); cursor: pointer; white-space: nowrap;
}
.btn-outline { background: var(--bg-white); border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--text); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-block { width: 100%; }

.gallery-refresh { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.gallery-refresh svg { margin-right: 6px; }

/* hidden compat inputs */
[hidden] { display: none !important; }

/* 滚动 reveal（由 app.js IntersectionObserver 触发 .is-in） */
.reveal {
  opacity: 0; transform: translateY(var(--reveal-dist));
  transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* 子页面进场：加载即播（首屏内容少，无需滚动触发），同组元素错峰 */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(var(--reveal-dist)); }
  to   { opacity: 1; transform: none; }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
body.page-tool .container > * {
  animation: riseIn var(--reveal-dur) var(--ease) both;
}
body.page-tool .container > *:nth-child(1) { animation-delay: 0ms; }
body.page-tool .container > *:nth-child(2) { animation-delay: var(--reveal-step); }
body.page-tool .container > *:nth-child(3) { animation-delay: calc(var(--reveal-step) * 2); }
body.page-tool .container > *:nth-child(4) { animation-delay: calc(var(--reveal-step) * 3); }
body.page-tool .container > *:nth-child(5) { animation-delay: calc(var(--reveal-step) * 4); }
body.page-tool .container > *:nth-child(n+6) { animation-delay: calc(var(--reveal-step) * 5); }
/* 工具库卡片：每张错峰上浮 */
body.page-tool .tool-card { animation: riseIn var(--reveal-dur) var(--ease) both; }
body.page-tool .tool-card:nth-child(1) { animation-delay: 60ms; }
body.page-tool .tool-card:nth-child(2) { animation-delay: 120ms; }
body.page-tool .tool-card:nth-child(3) { animation-delay: 180ms; }
body.page-tool .tool-card:nth-child(4) { animation-delay: 240ms; }
body.page-tool .tool-card:nth-child(5) { animation-delay: 300ms; }
body.page-tool .tool-card:nth-child(6) { animation-delay: 360ms; }

/* 按钮点击微反馈（与 hover 过渡一致） */
.btn:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  padding: var(--sp-20) 0 var(--sp-12); text-align: center; background: var(--bg);
}
/* 签名元素：随基准色实时变化的柔和色光晕（hero 是活的 demo） */
.hero::before {
  content: ""; position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
  width: min(820px, 92vw); height: 460px; border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 40%, var(--hero-aura, rgba(255,75,75,0.22)), transparent 72%);
  filter: blur(40px); opacity: 0.9; pointer-events: none; z-index: 0;
  transition: background var(--t-norm);
}
.hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.hero-title {
  font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 1.1;
  color: var(--text); margin: 0 0 var(--sp-4);
}
/* 标题中"配色"两字：与 logo.svg 渐变完全一致
   logo 规格：linearGradient x1=32 y1=0 x2=32 y2=64（垂直 180°），
   stop #FF4B4B → stop offset=1 #FF8177（全程线性） */
.hero-title-accent {
  background: linear-gradient(180deg, #FF4B4B 0%, #FF8177 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block;
  padding: 0 0.05em;
}
.hero-sub {
  color: var(--text-muted); font-size: 1rem; margin: 0 auto var(--sp-8);
  max-width: 560px; line-height: 1.7;
}

/* search bar */
.hero-search {
  display: flex; align-items: center; gap: 2px;
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 6px 6px 6px 14px;
  box-shadow: var(--sh-md); max-width: 640px; margin: 0 auto var(--sp-6);
  transition: border-color var(--t-fast);
}
.hero-search:focus-within { border-color: var(--accent); }
.search-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--base); margin-right: 10px; border: 2px solid var(--bg-white);
  box-shadow: var(--sh-sm);
}
.hero-search-input {
  flex: 1; min-width: 0; border: none; outline: none;
  font-family: var(--font-sans); font-size: 1rem; color: var(--text);
  background: transparent;
}
.hero-search-input::placeholder { color: var(--text-soft); }
.hero-search-btn {
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  cursor: pointer; transition: background var(--t-fast); flex: none;
  margin-left: 6px;
}
.hero-search-btn:hover { background: var(--accent-hover); }
.picker-dot {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  position: relative; flex: none; cursor: pointer;
  border: 1px solid var(--border);
}
.picker-dot input[type="color"] {
  position: absolute; inset: -8px; width: 48px; height: 48px;
  border: none; padding: 0; background: none; cursor: pointer;
}

/* preview chips */
.preview-chips {
  display: flex; justify-content: center; gap: var(--sp-2);
  flex-wrap: wrap; margin-top: var(--sp-4);
}
.chip, .chip-static {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 7px 14px;
  font-size: 0.82rem; transition: border-color var(--t-fast);
}
.chip { cursor: pointer; }
.chip:hover { border-color: var(--text); }
.chip-label { color: var(--text-soft); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.chip-value { font-family: var(--font-mono); font-weight: 600; color: var(--text); }

/* =========================================================
   MAIN (white area)
   ========================================================= */
.main-white { background: var(--bg-white); }
.section { padding: var(--sp-16) 0; }
.section + .section { border-top: 1px solid var(--border-light); }

.section-head { max-width: 640px; margin: 0 auto var(--sp-10); text-align: center; }
.section-title {
  font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 var(--sp-2);
}
.about-logo-inline {
  height: 1.1em; width: auto; vertical-align: middle;
  display: inline-block; margin-bottom: 0.08em; margin-left: 0.18em;
}
.section-desc { color: var(--text-muted); font-size: 0.95rem; margin: 0; }

/* =========================================================
   CARD SYSTEM（配色方案 / 画廊 / 工具卡通用）
   ========================================================= */
.palette-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6);
}
/* 卡片表面：白底 + 1px 浅边框 + --r-xl + --sh-sm，hover 上移 4px + 阴影加深 */
.palette-card, .gallery-card {
  background: var(--bg-white); border: 1px solid var(--border-light);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-sm); transition: transform var(--t-norm), box-shadow var(--t-norm);
  cursor: pointer;
}
.palette-card:hover, .gallery-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
/* 色块行：悬停展开（flex 1 → 2） */
.palette-preview-bar, .gallery-color { flex: 1; position: relative; cursor: pointer; transition: flex var(--t-fast); }
.palette-preview:hover .palette-preview-bar { flex: 1; }
.palette-preview:hover .palette-preview-bar:hover,
.palette-preview-bar:hover, .gallery-color:hover { flex: 2; }
/* 色块 HEX 浮层（配色方案 / 画廊通用） */
.palette-preview-bar::after,
.gallery-color::after {
  content: attr(data-hex);
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--overlay-dark); color: #fff; font-size: 0.72rem; font-weight: 600;
  padding: 4px 8px; border-radius: var(--r-sm); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast);
  font-family: var(--font-mono); z-index: 5;
}
.palette-preview-bar:hover::after,
.gallery-color:hover::after { opacity: 1; }
/* 信息区：hover 背景 --bg-alt */
.palette-info, .gallery-info { padding: var(--sp-4) var(--sp-5) var(--sp-5); cursor: pointer; transition: background var(--t-fast); }
.palette-info:hover, .gallery-info:hover { background: var(--bg-alt); }
.palette-name, .gallery-name {
  font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem;
  line-height: 1.3; margin: 0 0 var(--sp-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.palette-meta, .gallery-tags { color: var(--text-soft); font-size: 0.78rem; }
.palette-preview {
  height: 180px; display: flex; border-bottom: 1px solid var(--border-light);
  position: relative;
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-6);
}
.gallery-tabs {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.gallery-tabs::-webkit-scrollbar { display: none; }
.gallery-tab {
  flex: none; border: 1px solid var(--border); background: var(--bg-white);
  color: var(--text-muted); font-size: 0.82rem; font-weight: 600;
  padding: 8px 18px; border-radius: var(--r-full); cursor: pointer;
  transition: all var(--t-fast); white-space: nowrap;
}
.gallery-tab:hover { border-color: var(--text); color: var(--text); }
.gallery-tab.is-active { background: var(--text); color: #fff; border-color: var(--text); }

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
/* .gallery-card / .gallery-color / .gallery-info / .gallery-name / .gallery-tags 已并入上方 CARD SYSTEM */

/* =========================================================
   GRADIENT PREVIEW
   ========================================================= */
.gradient-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.gradient-card {
  position: relative; height: 130px; border-radius: var(--r-xl);
  border: 1px solid var(--border-light); box-shadow: var(--sh-sm);
  cursor: pointer; overflow: hidden;
  transition: transform var(--t-norm), box-shadow var(--t-norm);
}
.gradient-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.gradient-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(to top, var(--overlay-soft), rgba(0,0,0,0));
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.gradient-card:hover .gradient-overlay { opacity: 1; transform: translateY(0); }
.gradient-name { color: #fff; font-size: 0.82rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.gradient-copy {
  color: #fff; font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  padding: 2px 8px; border-radius: var(--r-full); backdrop-filter: blur(2px);
}
.gallery-colors { display: flex; height: 120px; border-bottom: 1px solid var(--border-light); }
/* .gallery-color 基础 / 悬停展开 / HEX 浮层已并入 CARD SYSTEM */

/* =========================================================
   ABOUT
   ========================================================= */
.about-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.about-main { min-width: 0; }
.about-p { color: var(--text-muted); font-size: 0.98rem; line-height: 1.7; margin: 0 0 var(--sp-6); }
.about-p strong { color: var(--text); }
.about-lead {
  font-size: 1.18rem; line-height: 1.55; font-weight: 600; color: var(--text);
  margin: 0 0 var(--sp-5); letter-spacing: -0.01em;
}
.about-lead .lead-accent { color: var(--accent); }
.about-list {
  list-style: none; padding: var(--sp-6) 0 0; margin: var(--sp-6) auto 0;
  border-top: 1px solid var(--border-light); display: grid; gap: var(--sp-3);
  max-width: 560px; justify-items: center;
}
.about-list li { display: flex; align-items: flex-start; justify-content: center; gap: var(--sp-3); font-size: 0.92rem; line-height: 1.55; text-align: left; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 0.5em; }
.about-card {
  background: var(--bg-white); border: 1px solid var(--border-light);
  border-radius: var(--r-xl); padding: var(--sp-6); box-shadow: var(--sh-sm);
}

/* =========================================================
   TOAST
   ========================================================= */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--text); color: #fff; padding: 12px 20px; border-radius: var(--r-full);
  font-size: 0.9rem; font-weight: 500; box-shadow: var(--sh-lg);
  opacity: 0; pointer-events: none; transition: all var(--t-norm); z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); border: 1px solid var(--accent);
  color: #fff; box-shadow: var(--sh-md); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--t-norm), transform var(--t-norm),
    visibility var(--t-norm), background var(--t-fast), border-color var(--t-fast);
}
.back-to-top:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* =========================================================
   FLOAT SEARCH（右下角快速搜索）
   ========================================================= */
.float-search {
  position: fixed; right: var(--sp-6); bottom: calc(var(--sp-6) + 52px); z-index: 90;
  display: flex; align-items: center; gap: 2px;
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 5px 6px 5px 12px;
  box-shadow: var(--sh-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--t-norm), transform var(--t-norm), visibility var(--t-norm),
    border-color var(--t-fast);
}
.float-search:focus-within { border-color: var(--accent); }
.float-search.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.float-search-dot {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: var(--base); margin-right: 8px; border: 2px solid var(--bg-white);
  box-shadow: var(--sh-sm);
}
.float-search-input {
  width: 84px; border: none; outline: none;
  font-family: var(--font-sans); font-size: 0.85rem; color: var(--text);
  background: transparent;
}
.float-search-input::placeholder { color: var(--text-soft); }
.float-search-btn {
  width: 32px; height: 32px; border-radius: 50%; border: none; margin-left: 4px;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  cursor: pointer; transition: background var(--t-fast); flex: none;
}
.float-search-btn:hover { background: var(--accent-hover); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  /* palette-grid 基态即 3 列，此处仅收敛 gallery/gradient 4 列 → 3 列 */
  .gallery-grid, .gradient-grid { grid-template-columns: repeat(3, 1fr); }
  /* 中屏：导航保持居中且等距分布，链接点击热区更舒适 */
  .header-inner { gap: var(--sp-8); }
  .nav { justify-content: center; flex-wrap: wrap; max-width: none; min-width: 0; overflow: visible; gap: var(--sp-12); }
  .nav-link { padding: 10px 14px; }
  .dropdown { display: none; }
}

@media (max-width: 680px) {
  .container { padding: 0 var(--sp-4); }
  .header-inner { flex-wrap: wrap; align-items: center; height: auto; padding: 10px 0; gap: var(--sp-3); }
  .brand { position: static; transform: none; order: 1; }
  .nav-toggle { display: inline-flex; order: 2; margin-left: auto; }
  .brand-logo { height: 28px; }
  /* 折叠面板：默认收起，汉堡勾选后平滑展开 */
  .nav {
    order: 4; flex-basis: 100%;
    flex-direction: column; align-items: stretch;
    gap: var(--sp-2); max-width: none; margin: 0;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height var(--t-norm), opacity var(--t-fast);
    border-top: 1px solid transparent;
  }
  .nav-toggle-cb:checked ~ .nav {
    max-height: 420px; opacity: 1; padding-top: var(--sp-3);
    border-top-color: var(--border-light);
  }
  /* 汉堡变 X */
  .nav-toggle-cb:checked + .nav-toggle .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle-cb:checked + .nav-toggle .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-toggle-cb:checked + .nav-toggle .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* 移动端下拉改为常显内联，避免 hover 不可靠 */
  .nav-item::after { display: none; }
  .nav-link { justify-content: space-between; padding: 12px 14px; border-radius: var(--r-sm); }
  .nav-link::after { display: none; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; box-shadow: none; border: none; border-radius: 0;
    background: transparent; padding: 2px 0 6px 14px; min-width: 0;
    transition: none;
  }
  .dropdown::before { display: none; }
  .dropdown a { padding: 10px 14px; }
  .palette-grid, .gallery-grid, .gradient-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .section { padding: var(--sp-10) 0; }
  .hero { padding: var(--sp-8) 0 var(--sp-8); }
  .section-head { max-width: none; margin-bottom: var(--sp-6); }
  .gallery-toolbar { gap: var(--sp-3); }
  .gallery-refresh { width: auto; flex: none; }
  .gallery-tabs { margin-bottom: 0; }
  .gallery-tab { padding: 7px 14px; }
  .hero-search { padding: 6px 6px 6px 12px; }
  .hero-search-btn { width: 42px; height: 42px; }
  .hero-search-input { font-size: 0.95rem; }
  .chip-value { font-size: 0.75rem; }
  .palette-preview { height: 150px; }
  .preview-chips { gap: 6px; }
  .back-to-top { right: var(--sp-4); bottom: var(--sp-4); width: 40px; height: 40px; }
  .float-search { right: var(--sp-4); bottom: calc(var(--sp-4) + 48px); }
}

@media (max-width: 640px) {
  .palette-grid, .gallery-grid, .gradient-grid { grid-template-columns: 1fr; }
  .gallery-grid { gap: var(--sp-4); }
  .palette-preview { height: 130px; }
  .gallery-colors { height: 90px; }
  .hero-title { font-size: 2rem; }
  .hero-sub { font-size: 0.92rem; }
  .chip, .chip-static { padding: 6px 10px; font-size: 0.78rem; }
  .preview-chips { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; transition: none !important; animation: none !important; }
}