/* ============================================
   ChillType — Warm Minimal UI
   Design Tokens: modify here → reflected everywhere
   ============================================ */

/* ============================================================
   🎨 DESIGN TOKENS — 设计令牌
   Modify values here. All components reference these variables.
   修改此处即可全局生效，无需逐行查找。
   ============================================================ */

:root {
  /* --- 🖌️ Background 背景 --- */
  --bg:             #FAF8F5;   /* 页面底色 */
  --bg-rgb:         250, 248, 245;  /* bg RGB 分量，供 rgba() 使用 */
  --bg-alt:         #F2F1ED;   /* 次级底色 (交替区域) */
  --surface:        #ffffff;   /* 卡片/面板底色 */
  --surface-hover:  #f7f7f4;   /* 卡片悬停 */

  /* --- 🔤 Text 文字 --- */
  --text:           #1a1a18;   /* 正文 */
  --text-secondary: #5c5c57;   /* 次要文字 */
  --text-muted:     #8a8a84;   /* 弱化文字 */
  --text-inverse:   #ffffff;   /* 深色/彩色背景上的反白文字 */

  /* --- 📏 Border 边框 --- */
  --border:         #e4e4df;   /* 默认边框 */
  --border-strong:  #d0d0c9;   /* 强调边框 */

  /* --- 🎯 Accent 强调色 (品牌蓝) --- */
  --accent:         #0033cc;   /* 主强调色 */
  --accent-hover:   #002aab;   /* 悬停 */
  --accent-soft:    rgba(0, 51, 204, 0.08);  /* 柔和背景 */
  --accent-contrast:#ffffff;   /* accent 背景上的文字色 */

  /* --- ✅ Semantic 语义色 --- */
  --success:        #1b7a3d;   /* 成功/免费 */
  --success-soft:   #e8f5ec;   /* 成功背景 */
  --warning:        #e65100;   /* 需授权/警告 */
  --warning-soft:   #fff3e0;   /* 需授权背景 */
  --danger:         #b42318;   /* 危险/错误 */
  --danger-soft:    rgba(180, 35, 24, 0.08);  /* 危险背景 */

  /* --- 🔠 Typography 字体 --- */
  --font-sans:      "GWM Sans UI", sans-serif;
  --font-display:   "GWM Sans UI", "Chill Round M", sans-serif;
  --font-body:      "GWM Sans UI", sans-serif;
  --font-mono:      "SF Mono", ui-monospace, Menlo, monospace;

  /* --- 🪟 Floating panels (dropdowns) 浮层 ---
     Live on the page surface, never the card face, so card-level
     token overrides (themed-bg inversion) must not reach them. */
  --panel-bg:         #ffffff;
  --panel-text:       #1a1a18;
  --panel-text-secondary: #5c5c57;
  --panel-border:     #e4e4df;
  --panel-hover:      #f2f1ed;

  /* --- 📐 Corner radius — 圆角（连续曲线 / 连续曲率规范）---
     统一采用「连续曲率过渡」的圆角体系：所有圆角走下方令牌，
     几何上由 continuous-corners.js 引擎以超椭圆（superellipse, n=4）
     重绘拐角，使直线段与弧在切点处曲率连续（G2），无突变。
     令牌按 4px 基准递进，覆盖 胶囊 / 控件 / 卡片 / 弹窗 全场景：
       · 2xs 4   → 圆点、勾选标记、滑块端点
       · xs  6   → 极小控件内边距
       · sm   8  → 小按钮、输入框、标签页
       · md  12  → 标准按钮、胶囊、菜单项
       · lg  16  → 卡片、面板、弹窗内表面
       · xl  24  → 大面板、详情卡
       · pill 999 → 全圆（圆形控件曲率本就恒定，属连续曲线）
     圆形元素（border-radius:50%）曲率恒定、已连续，引擎自动跳过不重绘。
     不要在组件里写死 px 圆角，一律引用令牌，保证全站一致。 */
  --radius-2xs:    4px;
  --radius-xs:     6px;
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-pill:   999px;
  /* 连续曲率指数（超椭圆 n）：越大拐角越「方中带圆」，越小越近半圆。
     仅 continuous-corners.js 读取；可逐元素用 --cc-n 覆盖。 */
  --cc-n:          4;
  --header-h:      56px;     /* 导航栏高度 */

  /* --- 🌓 Shadow 阴影 --- */
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:      0 12px 40px rgba(0,0,0,0.08);

  /* ============================================================
     🧩 STANDARD CONTROL SPEC — 标准控件规范
     所有胶囊 / 滑轨 / 颜色选择器统一遵循以下尺度：
     · 胶囊按钮：未选中无描边，仅容器保留轻描边；选中态用背景色
       区分（surface 底 + 文字主色），不额外加描边框。
     · 滑轨：轨道高度 2px、长度 90px（窄屏 56px / 段落行宽 120px
       为受控例外）；滑块统一为 10px 圆形。
     · 颜色选择：未选中无描边，仅选中态显示 2px 描边；hover 仅
       轻微放大（1.05），不叠加阴影，减弱 Pick 特效。
     ============================================================ */
}

/* ============================================================
   🌙 DARK THEME — 暗色主题覆盖
   ============================================================ */
[data-theme="dark"] {
  --bg:             #141414;
  --bg-rgb:         20, 20, 20;
  --bg-alt:         #1a1a1a;
  --surface:        #1e1e1e;
  --surface-hover:  #252525;
  --text:           #f0ede8;
  --text-secondary: #a8a8a0;
  --text-muted:     #6e6e68;
  --text-inverse:   #111110;
  --border:         #2a2a26;
  --border-strong:  #3a3a34;
  --accent:         #4d7cff;
  --accent-hover:   #6b94ff;
  --accent-soft:    rgba(77, 124, 255, 0.16);
  --success:        #3ecf6e;
  --success-soft:   rgba(62, 207, 110, 0.12);
  --warning:        #ff9800;
  --warning-soft:   rgba(255, 152, 0, 0.12);
  --danger:         #f97066;
  --danger-soft:    rgba(249, 112, 102, 0.12);
  --panel-bg:       #1e1e1e;
  --panel-text:     #f0ede8;
  --panel-text-secondary: #a8a8a0;
  --panel-border:   #2a2a26;
  --panel-hover:    #252525;
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg:      0 12px 40px rgba(0,0,0,0.4);
}

/* ============================================================
   🌀 CONTINUOUS-CURVE CORNERS — 连续曲率圆角
   圆角由 continuous-corners.js 引擎以超椭圆（superellipse, n=4）重绘，
   使直线段与拐角在切点处曲率连续（G2），消除离散 border-radius 弧的
   曲率突变。引擎给参与元素加 .cc 类：
     · 外 box-shadow 会被 clip-path 裁掉 → 改用 drop-shadow 跟随超椭圆；
     · 焦点环改 outline（不被 clip-path 裁切）；
     · 玻璃(backdrop-filter)/弹窗宿主 由引擎跳过，保留令牌圆角。
   ============================================================ */
.cc {
  filter: drop-shadow(var(--cc-shadow, 0 0 0 rgba(0, 0, 0, 0)));
}
.cc:hover {
  filter: drop-shadow(var(--cc-shadow-hover, var(--cc-shadow, 0 0 0 rgba(0, 0, 0, 0))));
}
.cc:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-weight: 400;
  font-synthesis: none;
  overflow-x: clip;
  min-height: 100vh;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; font-family: inherit; background: none; color: inherit; padding: 0; margin: 0; }
input, select, textarea { font-family: inherit; color: inherit; }

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  padding: 10px 20px;
  background: var(--accent);
  color: var(--text-inverse);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-md);
  z-index: 10000;
  transition: top 160ms ease;
}
.skip-link:focus {
  top: 8px;
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: var(--radius-md);
  border: none;
  transition: all 160ms ease-out;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--accent);
  color: var(--text-inverse);
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--surface-hover); }

.btn-text {
  background: transparent;
  color: var(--accent);
  padding: 8px 10px;
}
.btn-text:hover { background: var(--accent-soft); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.btn-ghost:hover { background: var(--accent-soft); color: var(--text); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--text); }

.btn-sm { padding: 6px 14px; font-size: 13px; min-height: 32px; border-radius: var(--radius-sm); }
.btn-lg { padding: 12px 28px; font-size: 16px; min-height: 48px; border-radius: var(--radius-md); }

/* ============ Tag / Eyebrow ============ */
.tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  color: var(--text-muted);
}

.tag-accent {
  background: var(--accent-soft);
  color: var(--accent);
}

.tag-free {
  background: var(--success-soft);
  color: var(--success);
}

.tag-licensed {
  background: var(--warning-soft, #fff3e0);
  color: var(--warning, #e65100);
}

/* Variable-font badge — neutral info chip, follows the same soft-token recipe */
.tag-variable {
  background: var(--bg-alt);
  color: var(--text-secondary);
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  background: var(--success-soft);
  color: var(--success);
}
.live-badge::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--success);
}

/* ============ Header ============ */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(var(--bg-rgb), 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: none;
}

header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1400px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1001;
  flex-shrink: 0;
}
.logo-link .logo-mask {
  display: inline-block;
  height: 28px;
  width: auto;
}
[data-theme="dark"] .logo-link img { filter: brightness(0) invert(1); opacity: 0.92; }

.logo-wordmark {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

nav#main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

nav a.nav-link,
.nav-dropdown > button.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  transition: color 160ms ease, background 160ms ease;
}

nav a.nav-link:hover,
.nav-dropdown > button.nav-link:hover,
nav a.nav-link.active,
.nav-dropdown > button.nav-link.active {
  color: var(--text);
  background: var(--bg-alt);
  font-weight: 600;
}

.nav-dropdown { position: relative; }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px;
  z-index: 1100;
  box-shadow: var(--shadow-lg);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { display: block; }

.nav-dropdown-menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  font-size: 14px;
  border-radius: var(--radius-sm);
  color: var(--text);
}
.nav-dropdown-menu a:hover { background: var(--bg-alt); }
.nav-dropdown-menu .font-en {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

.search-btn,
.theme-cycle,
.accent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.search-btn:hover,
.theme-cycle:hover,
.accent-btn:hover {
  color: var(--text);
  background: var(--bg-alt);
}

/* Unified icon spec — refined line icons, consistent size & weight across the
   whole UI. Every small UI icon shares 16px size + 1.6 stroke so nothing looks
   oversized or stylistically mismatched. Size/stroke are set here in CSS so they
   override the inline attributes on the SVGs and keep the markup DRY. */
svg.search-icon,
.catalog-sample .sample-icon,
.size-control .size-icon,
.view-btn svg,
.search-btn svg,
.theme-cycle svg,
.accent-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg.search-icon,
.catalog-sample .sample-icon,
.size-control .size-icon {
  color: var(--text-muted);
}

/* Hide the browser's native search decorations so only our icon shows */
input[type="search"] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Theme Switcher — Single Circle Icon */
.appearance-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--text-secondary);
  transition: all 160ms ease;
  border: 1px solid transparent;
}
.appearance-switch:hover {
  color: var(--text);
  background: var(--bg-alt);
  border-color: var(--border);
}
.appearance-switch svg {
  width: 18px;
  height: 18px;
}

/* Language Switcher — Segmented Control */
.lang-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
}
.lang-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  transition: all 160ms ease;
}
.lang-seg:hover {
  color: var(--text);
}
.lang-seg.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 1001;
}
.mobile-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text);
}

/* ============ Pages ============ */
.page { display: none; min-height: calc(100vh - var(--header-h)); }
.page.active { display: block; }

.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section-head { margin-bottom: 40px; }
.section-head.center { text-align: center; }
.section-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.section-head h2,
.section-head h3 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 12px;
}
.section-head p {
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.5;
  max-width: 560px;
}
.section-head.center p { margin-left: auto; margin-right: auto; }

/* ============ Hero ============ */
.hero {
  padding: 96px 0 72px;
  text-align: center;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  max-width: 720px;
  margin: 0 auto;
}
.hero-brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: var(--text);
}
.hero h1 .accent { color: var(--accent); }
.hero .subtitle {
  font-size: clamp(17px, 2vw, 19px);
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 52ch;
  line-height: 1.5;
  margin-left: auto;
  margin-right: auto;
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Matrix Showcase */
.matrix-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  text-align: center;
  padding: 72px 24px;
  margin-top: 48px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.matrix-card:hover {
  box-shadow: var(--shadow-lg, var(--shadow-md));
  transform: translateY(-3px);
}
.matrix-specimen {
  font-family: 'ChillMatrixBlack', var(--font-display);
  font-weight: 400;
  font-size: clamp(64px, 13vw, 160px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}
.matrix-label {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.matrix-desc {
  margin: 12px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: nowrap;
}
.matrix-cta {
  display: inline-block;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.matrix-card:hover .matrix-cta {
  text-decoration: underline;
}

/* WIP Spotlight */
.wip-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.wip-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.wip-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.wip-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.wip-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin-bottom: 6px;
}
.wip-title-en {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.wip-desc {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
  font-size: 17px;
  max-width: 44ch;
}
.wip-meta {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.wip-specimen {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.wip-specimen img {
  display: block;
  width: 100%;
  height: auto;
}

/* Font Cards */
.featured-grid,
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.font-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: var(--shadow-sm);
}
.font-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.font-card .card-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.font-card .card-specimen {
  font-size: 1.5rem;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  word-break: break-word;
  min-height: 2em;
}
.font-card .card-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}
.font-card .card-meta {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.font-card .card-price {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: normal;
}

/* List view (compact rows) */
.catalog-grid.view-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.font-row {
  display: block;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  box-shadow: var(--shadow-sm);
}
.font-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.font-row .row-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.font-row .row-titleline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.font-row .row-titleline .folder-name { font-size: 16px; font-weight: 500; line-height: 1.3; }
.font-row .row-titleline .folder-meta { font-size: 13px; color: var(--text-secondary); }
.font-row .row-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.font-row .row-count { font-size: 13px; color: var(--text-secondary); }
.font-row .row-specimen {
  margin-top: 8px;
  padding: 2px 0;
  font-size: var(--catalog-specimen-size, 20px);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .font-row .row-topline { flex-direction: column; align-items: flex-start; gap: 6px; }
  .font-row .row-side { flex-wrap: wrap; }
}

/* Folder-style card (from fonts/ directory) */
.font-folder-card {
  position: relative;
}
.folder-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.folder-corner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.folder-corner .folder-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: normal;
  text-align: right;
}
.folder-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.folder-meta {
  font-size: 12px;
  color: var(--text-secondary);
}
.folder-specimen {
  font-size: var(--catalog-specimen-size, 22px);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  min-height: 1.8em;
  word-break: break-word;
  color: var(--text);
}
.folder-weights {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.weight-chip {
  display: inline-block;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  color: var(--text-secondary);
  border: none;
}
.folder-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.folder-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: normal;
  text-align: right;
}
.row-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: normal;
  text-align: right;
}
.section-cta {
  text-align: center;
  margin-top: 40px;
}

/* Catalog */
.catalog-header {
  padding: 48px 0 24px;
  border-bottom: 1px solid var(--border);
}
.catalog-header h2 {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 500;
  line-height: 1.15;
}
.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0;
  margin-bottom: 16px;
}
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  color: var(--text-secondary);
  border: none;
  transition: all 160ms ease;
}
.filter-btn svg {
  flex-shrink: 0;
}
.filter-btn:hover { color: var(--text); background: var(--surface-hover); }
.filter-btn.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.filter-dropdown {
  position: relative;
  display: inline-flex;
}
.filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 168px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.filter-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.filter-option:hover { background: var(--accent-soft); color: var(--text); }
.filter-option.active { background: var(--accent-soft); color: var(--accent); }
.catalog-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  background: var(--surface);
  min-width: 200px;
}
.catalog-search input {
  border: none; outline: none; background: transparent;
  width: 100%; font-size: 14px;
}
.catalog-search input::placeholder { color: var(--text-muted); }

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* View mode toggle — segmented control, identical to the language switcher */
.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
}
.view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.view-btn svg { width: 16px; height: 16px; display: block; }
.view-btn:hover { color: var(--text); }
.view-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.view-btn.active:hover { background: var(--surface); color: var(--text); }

/* Unified sample-text input — drives the preview text for every font */
.catalog-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.catalog-sample {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  background: var(--surface);
  flex: 1;
  min-width: 0;
}
/* sample-icon sizing/color handled by the unified icon spec */
.catalog-sample input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
}
.catalog-sample input::placeholder { color: var(--text-muted); }
.catalog-sample .sample-clear {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}
.catalog-sample .sample-clear:hover { color: var(--text); }

/* Detail Page */
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
  padding: 6px 0;
}
.detail-back:hover { color: var(--text); }
.detail-hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
.detail-info h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 8px;
}
.detail-info .designer {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.detail-info .detail-desc {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 17px;
}
.detail-features { list-style: none; margin-bottom: 20px; }
.detail-features li {
  padding: 6px 0;
  font-size: 15px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.detail-features li::before {
  content: "\2192 ";
  color: var(--accent);
}
.detail-price {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 1.5;
}
.detail-price .price-tier {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-size: 16px;
  margin-bottom: 4px;
}
.detail-price .price-tier span { color: var(--text-muted); font-weight: 500; }
.detail-price .price-tier b { color: var(--text); font-weight: 600; }
.detail-price .price-free { color: var(--success); }
.detail-price .price-paid { color: var(--text); }
.detail-preview-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 28px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.detail-preview-box .big {
  font-size: 3.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.detail-preview-box .family {
  font-size: 1.15rem;
  font-weight: 400;
  margin-top: 8px;
}
.detail-preview-box .meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}
.specimen-area { margin-top: 48px; padding-bottom: 48px; }
/* Reserve space while the full webfont streams in, so swapping the subset
   for the full font doesn't shift the layout (CLS fix). */
[data-font-loading] { min-height: 240px; }
.specimen-area > h4 {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 16px;
}
.bg-switcher { display: flex; gap: 8px; margin-bottom: 16px; }
.bg-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease;
  box-sizing: border-box;
}
.bg-dot:hover { transform: scale(1.05); }
.bg-dot.active { border-color: var(--accent); border-width: 1.5px; }
.bg-dot.white { background: #fff; }
.bg-dot.black { background: #1a1a1a; }
.bg-dot.gray { background: #6b6b6b; }
.bg-dot.blue { background: var(--accent); }
.specimen-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 40px 28px;
  min-height: 180px;
  transition: background 300ms ease, color 300ms ease;
}
.specimen-panel.bg-white { background: #fff; color: #1a1a1a; }
.specimen-panel.bg-black { background: #1a1a1a; color: var(--text-inverse); border-color: #1a1a1a; }
.specimen-panel.bg-gray { background: #6b6b6b; color: var(--text-inverse); border-color: #6b6b6b; }
.specimen-panel.bg-blue { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.specimen-panel.bg-red { background: #CC0020; color: #ffffff; border-color: #CC0020; }
.specimen-panel.bg-terracotta { background: #c0653f; color: #ffffff; border-color: #c0653f; }
.specimen-panel.bg-green { background: #c7edcc; color: #1a1a1a; border-color: #c7edcc; }
.specimen-panel .size-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
  margin-bottom: 8px;
}
.specimen-panel .specimen-lg {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-synthesis: none;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  word-break: break-word;
}
.specimen-panel .specimen-md {
  font-size: 1.15rem;
  font-synthesis: none;
  line-height: 1.6;
  margin-bottom: 20px;
  opacity: 0.9;
}
.specimen-panel .specimen-charset {
  font-size: 0.9rem;
  font-synthesis: none;
  line-height: 1.8;
  opacity: 0.6;
  word-break: break-all;
}

/* ── Compare mode (detail page) ── */
.specimen-compare-btn {
  margin-left: auto;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all 160ms ease;
}
.specimen-compare-btn:hover { color: var(--text); border-color: var(--border-strong); }
.specimen-compare-btn.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.compare-area {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px dashed var(--border-strong);
}
.compare-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  margin-bottom: 16px;
}
.compare-head .specimen-compare-btn { margin-left: 0; padding: 4px 10px; font-size: 14px; }
.compare-select {
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 5px 10px;
  outline: none;
  max-width: 260px;
}
.compare-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  width: 100%;
  max-width: 420px;
  padding: 28px;
  margin: 20px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modal h3 { font-size: 21px; margin-bottom: 18px; }
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  transition: border-color 160ms ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn { flex: 1; }

/* Contact (license inquiry) modal */
.contact-desc {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 4px;
}

/* WeChat QR modal */
.modal--wechat {
  max-width: 320px;
  padding: 20px;
  text-align: center;
}
.wechat-qr-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

/* About */
.page-about .section {
  padding-top: 68px;   /* let the pinned logo start exactly at the sticky top (no gap to scroll through first) */
}
.about-logo-pin {
}
.about-logo-sticky {
  position: sticky;
  top: 80px;
  z-index: 5;
  background: var(--bg);
}
.about-text {
  will-change: transform;
  padding-bottom: 24px;
}
.about-logo-wrap {
  margin: 0 auto;
  padding: 14px 24px 32px;
}
.about-logo-big {
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
  transform-origin: top center;
  will-change: transform;
}
.about-logo-big img {
  width: 100%;
  height: auto;
  display: block;
}
.about-hero {
  margin-top: 5.2em;
  padding: 0 0 32px;
  max-width: 680px;
}
.about-hero h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 16px;
}
.about-hero .lead {
  font-size: 19px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.about-body {
  max-width: 680px;
  padding-bottom: 48px;
}
.about-body p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
  font-size: 17px;
}
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 48px 0;
}
.about-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: all 200ms ease;
}
.about-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.about-card h4 {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 6px;
}
.about-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}
/* License / Custom / Tools pages */
.page-intro {
  padding: 56px 0 32px;
  max-width: 600px;
}
.page-intro h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 12px;
}
.page-intro p { color: var(--text-secondary); line-height: 1.6; font-size: 17px; }

.license-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto 64px;
}
.license-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: all 200ms ease;
}
.license-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.license-card h3 {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 8px;
}
.license-card .price {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 12px;
}
.license-card .price span {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}
.license-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 20px;
  flex: 1;
}
.license-card ul {
  list-style: none;
  margin-bottom: 20px;
}
.license-card li {
  font-size: 14px;
  color: var(--text-secondary);
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.license-card li::before { content: "\2713 "; color: var(--success); }

.custom-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
.custom-step h4 {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 6px;
}
.custom-step p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.tool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: var(--shadow-sm);
}
.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: var(--surface-hover);
}
.tool-card h3 {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 6px;
}
.tool-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Showcase */
.showcase-section {
  padding: 64px 0;
}
.showcase-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.showcase-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease;
}
.showcase-panel:hover {
  box-shadow: var(--shadow-md);
}
.showcase-panel.flash {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.showcase-panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 10px;
}
.showcase-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.showcase-panel-title h4 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* ── Controls Bar (weight + size + lang in one row) ── */
.showcase-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.showcase-size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 160ms ease;
  padding: 0;
}
.showcase-size-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.weight-switcher {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--bg-alt);
  padding: 3px;
  border-radius: var(--radius-pill);
}
.weight-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}
.size-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 2px;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  outline: none;
}
.size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
/* size-icon sizing/color handled by the unified icon spec */
.size-control .size-slider {
  width: 70px;
}
.showcase-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--bg-alt);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.lang-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}
/* Language a font cannot render — greyed out and non-interactive so the
   user can never select a script that would only paint tofu boxes. */
.lang-tab.disabled {
  color: var(--text-muted);
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Specimen Frame ── */
.specimen-frame {
  border: none;
  border-radius: 0;
  padding: 32px 28px 14px;
  margin-bottom: 10px;
}
.specimen-display {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 16px 0;
  min-height: 72px;
  overflow: hidden;
  word-break: break-word;
  color: var(--text);
}
.specimen-display .specimen-text {
  font-synthesis: none;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Specimen actions (copy + reset) */
.specimen-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.specimen-action-btn {
  padding: 4px 13px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 160ms ease;
}
.specimen-action-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.specimen-action-btn.copied {
  color: var(--success);
  border-color: var(--success);
  background: var(--success-soft);
}

/* ── Charset (always visible) ── */
.showcase-panel .charset-section {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.showcase-panel .charset-section .charset-label {
  flex: none;
  padding-top: 0;
  margin-bottom: 0;
  width: auto;
}
.showcase-panel .charset-section .charset-content {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  width: auto;
}
.showcase-panel .charset-section .charset-download-btn,
.showcase-panel .charset-section .charset-license-btn {
  flex: none;
  margin-top: 0;
}
.charset-content {
  margin-top: 4px;
}
.showcase-panel .specimen-charset-row {
  padding: 0;
  font-size: 20px;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.2;
  color: var(--text-muted);
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.specimen-display .specimen-text.editable,
.specimen-lg.editable {
  outline: none;
  cursor: text;
  border-radius: var(--radius-sm);
}
.specimen-display .specimen-text.editable:focus,
.specimen-lg.editable:focus {
  outline: 0;
  box-shadow: none;
}
/* Belt-and-suspenders: kill the browser's default focus ring on any
   contenteditable element. Some WebKit builds re-apply it via
   -webkit-focus-ring-color even after `outline: none`. */
[contenteditable]:focus,
[contenteditable]:focus-visible {
  outline: 0 !important;
  box-shadow: none;
}
.specimen-display .specimen-text.editable:empty::before,
.specimen-lg.editable:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

/* OpenType Feature Toggles (detail page) */
.ot-features {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ot-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 4px;
}
.ot-btn {
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  transition: all 160ms ease;
}
.ot-btn:hover { color: var(--text); border-color: var(--border-strong); }
.ot-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* Specimen toolbar (detail page) */
.specimen-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}
.edit-hint {
  font-size: 12px;
  color: var(--text-muted);
}
.specimen-reset-btn {
  padding: 4px 13px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 160ms ease;
}
.specimen-reset-btn:hover { color: var(--text); border-color: var(--border-strong); }
.detail-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.detail-controls .weight-btn.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* Loading indicator */
.loading-placeholder {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.loading-placeholder::before {
  content: "";
  display: block;
  width: 20px; height: 20px;
  margin: 0 auto 12px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Search Overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}
.search-overlay.open { display: flex; }
.search-panel {
  width: min(520px, calc(100% - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.search-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 17px;
}
.search-results { max-height: 340px; overflow-y: auto; }
.search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 150ms ease;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--accent-soft); }
.search-result .name { font-weight: 500; }
.search-result .meta { font-size: 12px; color: var(--text-muted); }
.search-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 32px;
  background: var(--bg-alt);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 8px;
}
.footer-brand-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 26ch;
}
.footer-col h5 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 4px 0;
  transition: color 150ms ease;
}
.footer-col a:hover { color: var(--text); }
.footer-wechat {
  display: block;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 4px 0;
  transition: color 150ms ease;
}
.footer-wechat:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-inverse);
  z-index: 5000;
  pointer-events: none;
  background: var(--text);
  opacity: 0;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms ease;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast.success { background: var(--success); }
.toast.info { background: var(--accent); }
.toast.error { background: var(--danger); }

/* Keyboard focus */
.font-card:focus-visible,
.search-result:focus-visible,
.tool-card:focus-visible,
.about-card:focus-visible,
.license-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
.font-card:focus-visible { border-radius: var(--radius-lg); }

/* CJK Letter-spacing fix */
html[lang="zh"] .hero h1,
html[lang="zh"] .wip-title,
html[lang="zh"] .specimen-display .specimen-text,
html[lang="zh"] .display-1,
html[lang="zh"] .display-2,
html[lang="zh"] .display-3 {
  letter-spacing: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .detail-hero { grid-template-columns: 1fr; gap: 32px; }
  .wip-layout { grid-template-columns: 1fr; gap: 32px; }
  .license-grid { grid-template-columns: 1fr; }
  .custom-steps { grid-template-columns: 1fr 1fr; }
  .tools-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .featured-grid,
  .catalog-grid { grid-template-columns: 1fr; }
  .container { padding: 0 20px; }
  .section { padding: 56px 0; }
}

@media (max-width: 720px) {
  nav#main-nav {
    position: fixed;
    top: 0; right: -100%;
    width: min(280px, 84%);
    height: 100vh;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface);
    border-left: 1px solid var(--border);
    padding: 64px 14px 20px;
    gap: 2px;
    transition: right 200ms ease;
    overflow-y: auto;
  }
  nav#main-nav.open { right: 0; }
  nav#main-nav .nav-link,
  nav#main-nav .nav-dropdown > button.nav-link {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
  }
  .nav-dropdown-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    background: var(--bg);
    margin: 0 0 4px;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .nav-actions {
    margin-left: 0;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
  }
  .mobile-toggle { display: flex; }
  .hero { padding: 56px 0 56px; }
  .custom-steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .showcase-controls-bar { flex-direction: column; align-items: stretch; }
  .showcase-size-group { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============ Print ============ */
@media print {
  header, footer, .skip-link,
  .search-overlay, .toast, .error-banner,
  .modal-overlay,
  .mobile-toggle, .nav-actions,
  .bg-switcher, .specimen-actions, .specimen-toolbar, .ot-features,
  .detail-controls,
  .btn { display: none !important; }

  body { background: #fff; color: #000; font-size: 12pt; }
  .page { display: block !important; min-height: auto; }
  .page.active { display: block !important; }
  .container { max-width: 100%; padding: 0 16pt; }

  .specimen-panel {
    border: 1px solid #ccc;
    background: #fff !important;
    color: #000 !important;
    page-break-inside: avoid;
  }
  .specimen-panel .specimen-lg { font-size: 24pt !important; }
  .specimen-panel .specimen-md { font-size: 11pt !important; }
  .specimen-panel .specimen-charset { font-size: 9pt !important; }

  .font-card, .showcase-panel, .license-card,
  .about-card, .tool-card, .custom-step {
    box-shadow: none !important;
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }

  a { color: #000; text-decoration: underline; }
  h1, h2, h3, h4 { page-break-after: avoid; }
}

/* ============================================================
   🎛️ TYPOGRAPHY ENGINE — 排版引擎 UI
   ============================================================ */

/* Toggle button */
.typo-engine-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: all 160ms ease;
}
.typo-engine-toggle:hover {
  color: var(--text);
  background: var(--bg-alt);
  border-color: var(--border-strong);
}
.typo-engine-toggle-icon {
  font-size: 14px;
}

.typo-engine-section {
  margin-top: 14px;
  margin-bottom: 14px;
}

/* Collapsible panel */
.typo-engine-panel {
  overflow: hidden;
  transition: max-height 300ms ease, opacity 300ms ease, margin 300ms ease;
  max-height: 600px;
  opacity: 1;
  margin-top: 6px;
}
.typo-engine-panel.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

/* Controls container */
.typo-engine-controls {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
}

/* Control group */
.typo-control-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  background: var(--bg-alt);
  border: none;
  border-radius: var(--radius-pill);
}
.typo-control-group.typo-slider-group {
  gap: 4px;
}
.typo-control-group.typo-mode-switcher {
  flex-basis: 100%;
  margin-bottom: 4px;
}
.typo-control-group.typo-reset-group {
  flex-basis: 100%;
  justify-content: flex-end;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Label */
.typo-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 0;
}

/* Mode switcher buttons */
.typo-mode-btns {
  display: inline-flex;
  gap: 4px;
  background: var(--bg);
  padding: 3px;
  border-radius: var(--radius-pill);
}
.typo-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
}
.typo-mode-btn:hover { color: var(--text); }
.typo-mode-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.typo-mode-icon {
  font-size: 13px;
  line-height: 1;
}
.typo-mode-label {
  font-size: 11px;
}

/* Segmented control */
.typo-segmented {
  display: inline-flex;
  gap: 2px;
}
.typo-seg-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
}
.typo-seg-btn:hover { color: var(--text); }
.typo-seg-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* Slider */
.typo-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 2px;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  outline: none;
  cursor: pointer;
}
.typo-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 120ms ease;
}
.typo-slider:active::-webkit-slider-thumb { transform: scale(1.15); }
.typo-slider::-moz-range-thumb {
  width: 10px; height: 10px; border: none; border-radius: 50%;
  background: var(--accent); cursor: pointer;
}
.typo-val {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  white-space: nowrap;
}

/* Reset button */
.typo-reset-btn {
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 160ms ease;
}
.typo-reset-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg);
}
.typo-mode-btn:focus-visible,
.typo-seg-btn:focus-visible,
.typo-reset-btn:focus-visible,
.typo-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Waterfall display ── */
.waterfall-display {
  overflow: hidden;
  font-synthesis: none;
}
.waterfall-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  word-break: break-word;
  /* Skip rendering rows scrolled out of view (perf for large waterfalls). */
  content-visibility: auto;
  contain-intrinsic-size: auto 44px;
}
.waterfall-row:last-child { border-bottom: none; }
.waterfall-size-label {
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  min-width: 30px;
  text-align: right;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.waterfall-text {
  flex: 1;
  min-width: 0;
}

/* ── Paragraph display ── */
.paragraph-display {
  max-width: 680px;
  font-synthesis: none;
}
.para-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.para-measure-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}
.para-measure-label .typo-slider { width: 120px; }
.para-contrast {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.para-contrast.c-aaa { color: #1b7a3d; background: #e8f5ec; }
.para-contrast.c-aa  { color: #8a6d00; background: #fbf3d6; }
.para-contrast.c-fail { color: #b42318; background: rgba(180, 35, 24, 0.1); }
.paragraph-display[style*="vertical-rl"] {
  max-height: 460px;
  max-width: 100%;
  overflow-y: auto;
  /* breathing room so the scrollbar doesn't crowd the rightmost column */
  padding-right: 6px;
}
/* In vertical mode the heading's -0.02em tracking would overlap stacked
   glyphs; reset it so the column reads cleanly. */
.paragraph-display[style*="vertical-rl"] .para-heading,
.paragraph-display[style*="vertical-rl"] .para-subheading {
  letter-spacing: 0;
}
/* Vertical CJK reads best when columns are justified to fill the measure. */
.paragraph-display[style*="vertical-rl"] .para-body .para-block {
  text-align: justify;
}
.para-heading {
  margin-bottom: 16px;
  font-synthesis: none;
}
.para-subheading {
  margin-bottom: 20px;
  font-synthesis: none;
}
.para-body {
  font-synthesis: none;
}
.para-body .para-block {
  margin: 0;
  padding: 0;
}
.para-caption {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-synthesis: none;
}

/* ── Glyph map display ── */
.glyphmap-display {
  font-synthesis: none;
}
.glyphmap-section {
  margin-bottom: 16px;
}
.glyphmap-section:last-child { margin-bottom: 0; }
.glyphmap-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.glyph-cell {
  width: 38px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  transition: all 160ms ease;
}
.glyph-cell:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: scale(1.1);
}
.glyph-char {
  line-height: 1;
}
.glyphmap-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.glyphmap-search-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.glyphmap-search-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.glyphmap-search {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text);
}
.glyphmap-coverage {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.glyphmap-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 16px 0;
}

/* Responsive tweaks for typo engine */
@media (max-width: 720px) {
  .typo-engine-controls {
    gap: 8px 12px;
    padding: 12px 14px;
  }
  .typo-control-group {
    flex-basis: auto;
  }
  .typo-control-group.typo-mode-switcher {
    flex-basis: 100%;
  }
  .typo-slider { width: 56px; }
  .typo-mode-label { display: none; }
  .typo-mode-btn { padding: 6px 10px; }
  .waterfall-display { padding: 16px 14px; }
  .paragraph-display { padding: 24px 18px; }
  .glyphmap-grid { gap: 3px; }
  .glyph-cell { width: 32px; height: 36px; }
  .ws-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   🎛️ TYPOGRAPHY ENGINE — Enhanced Professional Styles
   ============================================================ */

/* ── Waterfall header/footer ── */
.waterfall-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.waterfall-family {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.waterfall-weight {
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.waterfall-row-alt {
  background: var(--bg-alt);
}
.waterfall-size-unit {
  font-size: 9px;
  opacity: 0.6;
  margin-left: 1px;
}
.waterfall-footer {
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

/* ── Weight Spectrum display ── */
.weightspectrum-display {
  font-synthesis: none;
  /* Keep the comparison grid horizontally readable even when the page is in
     vertical writing mode — only the specimen samples go vertical. */
  writing-mode: horizontal-tb;
}
.ws-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.ws-family {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
.ws-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}
.ws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.ws-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 160ms ease;
  font-synthesis: none;
}
.ws-item:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.ws-item.ws-active {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.ws-weight-num {
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-bottom: 2px;
}
.ws-weight-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.ws-sample {
  font-synthesis: none;
  word-break: break-word;
  /* Bound the specimen height so vertical (top-to-bottom) samples stay tidy
     inside the compact grid item instead of overflowing the card. */
  min-height: 44px;
  max-height: 168px;
  overflow: hidden;
}
.ws-sample[style*="vertical-rl"] {
  align-self: center;
  margin: 0 auto;
  max-width: 1.6em;
}

/* ── Glyph map hex labels ── */
.glyph-hex {
  display: block;
  font-size: 7px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-align: center;
  margin-top: 1px;
  letter-spacing: 0;
  opacity: 0.6;
}
.glyph-cell {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.glyph-cell:hover .glyph-hex {
  opacity: 1;
  color: var(--accent);
}
.glyphmap-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

/* ── Lazy font loading indicator ──
   Shown on a preview while the FULL font streams in (subset already paints). */
[data-font-loading] { position: relative; }
[data-font-loading]::after {
  content: "";
  position: absolute;
  top: 10px; right: 10px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: fontSpin 0.7s linear infinite;
  pointer-events: none;
}
@keyframes fontSpin { to { transform: rotate(360deg); } }

/* ── Paragraph metadata ── */
.para-meta {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ── Responsive tweaks for enhanced modes ── */
@media (max-width: 720px) {
  .ws-grid { grid-template-columns: repeat(2, 1fr); }
  .ws-item { padding: 10px 8px; }
  .ws-sample { font-size: 20px !important; }
  .waterfall-header { flex-direction: column; gap: 4px; align-items: flex-start; }
  .glyph-hex { display: none; }
}

/* ============================================================
   ⱥ OpenType Feature Display — 排版引擎 OpenType 模式
   ============================================================ */

/* ── Header ── */
.ot-display {
  font-synthesis: none;
}
.ot-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.ot-family {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
.ot-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Category ── */
.ot-category {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ot-category:last-child { margin-bottom: 0; }
.ot-cat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-alt);
  transition: background 150ms ease;
}
.ot-cat-header:hover {
  background: var(--bg-hover);
}
.ot-cat-caret {
  display: inline-block;
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 200ms ease;
  line-height: 1;
}
.ot-cat-caret.open {
  transform: rotate(90deg);
}
.ot-cat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  flex: 1;
}
.ot-cat-count {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}
.ot-cat-body {
  overflow: hidden;
  transition: max-height 300ms ease, opacity 200ms ease;
  max-height: 2000px;
  opacity: 1;
  padding: 0 12px;
}
.ot-cat-body.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0 12px;
}
.ot-detecting {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.ot-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Feature row ── */
.ot-feature-row {
  display: flex;
  gap: 14px;
  margin-bottom: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.ot-feature-row:last-child { border-bottom: none; margin-bottom: 0; }

.ot-feature-info {
  min-width: 140px;
  flex-shrink: 0;
  padding-top: 4px;
}
.ot-feature-key {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  margin-right: 6px;
}
.ot-feature-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ── Compare block ── */
.ot-compare {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 0 12px;
  flex: 1;
  min-width: 0;
  align-items: baseline;
}
.ot-compare-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 0;
  text-align: center;
}
.ot-compare-text {
  font-synthesis: none;
  word-break: break-word;
  color: var(--text);
  padding: 4px 0;
}

/* ── Responsive ── */
@media (max-width: 720px) {
  .ot-feature-row {
    flex-direction: column;
    gap: 8px;
  }
  .ot-compare {
    grid-template-columns: auto 1fr;
  }
  .ot-feature-info { min-width: 0; }
}

/* ── Weight switcher (pill segmented) ── */
.weight-switcher {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--bg-alt);
  padding: 3px;
  border-radius: var(--radius-pill);
}
.weight-btn {
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.weight-btn:hover { color: var(--text); background: var(--surface-hover); }
/* .weight-btn.active follows the shared selected-chip rule above:
   var(--surface) fill + var(--text) label */

/* ── Color swatches ── */
.color-swatches {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease;
  box-sizing: border-box;
}
.color-swatch:hover { transform: scale(1.05); }
.color-swatch.active { border-color: var(--text); border-width: 1.5px; }
.color-swatch.bg-white { background: #ffffff; }
.color-swatch.bg-gray { background: #6b6b6b; }
.color-swatch.bg-black { background: #1a1a1a; }
.color-swatch.bg-blue { background: #0033cc; }
.color-swatch.bg-red { background: #CC0020; }
.color-swatch.bg-terracotta { background: #c0653f; }
.color-swatch.bg-green { background: #c7edcc; }
/* Dark theme: the white swatch renders as the warm paper surface the card
   actually uses, so the dot always matches the preview background. */
[data-theme="dark"] .color-swatch.bg-white { background: #f2f1ed; }

/* ── Language tabs (inline style) ── */
.showcase-tabs {
  display: inline-flex;
  gap: 2px;
  margin-left: 12px;
}
.lang-tab {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.lang-tab:hover { color: var(--text); background: var(--bg-alt); }
.lang-tab.active { background: var(--surface); color: var(--text); box-shadow: none; }
.lang-tab.disabled { opacity: 0.35; cursor: not-allowed; }

/* ─ OpenType dropdown ── */
.ot-dropdown {
  position: relative;
  display: inline-flex;
}
.ot-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  height: 100%;
  font-size: 10px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--bg-alt);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.ot-trigger-label { line-height: 1; }
.ot-trigger-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.ot-dropdown-trigger[aria-expanded="true"] .ot-trigger-caret {
  transform: rotate(180deg);
}
.ot-dropdown-trigger:hover { background: var(--surface-hover); color: var(--text); }
.ot-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 180px;
  max-width: 280px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px;
  box-shadow: var(--shadow-md);
  max-height: 320px;
  overflow-y: auto;
}
.ot-feature-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--panel-text-secondary);
  cursor: pointer;
}
.ot-feature-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
  opacity: 0;
}
.ot-feature-btn.active .ot-feature-check { opacity: 1; }
.ot-feature-name {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text);
}
.ot-feature-desc {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.ot-feature-btn:hover { background: var(--surface-hover); color: var(--text); }
.ot-feature-btn.active { color: var(--accent); }

/* ── Size control enhancements ── */
.size-control .size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

/* ── Detail page hero ── */
.d-hero {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
  padding: 32px 0 16px;
}
.d-hero-left {
  min-width: 0;
}
.d-preview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  font-size: 26px;
  line-height: 1.5;
  text-align: center;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 900px) {
  .d-hero {
    grid-template-columns: 1fr;
  }
  .d-preview-card {
    order: -1;
    max-width: 100%;
  }
}
.d-hero-main {
  margin-bottom: 16px;
}
.d-title {
  font-size: clamp(3.2rem, 12vw, 9rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
  word-break: break-word;
  margin-bottom: 36px;
}
.d-desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 0 20px 0;
}
.d-hero .btn {
  margin-top: 16px;
}

/* ── Showcase panel (detail) ── */
.showcase-panel.d-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 16px 32px;
  margin-top: 8px;
}
.showcase-panel.d-detail .specimen-area {
  margin-top: 16px;
  padding-bottom: 0;
}
.showcase-panel.d-detail .specimen-text {
  min-height: 240px;
  padding: 32px 0;
}
.showcase-panel.d-detail.themed-bg {
  border-color: transparent;
}
.showcase-panel.d-detail {
  transition: background 350ms ease, color 350ms ease, border-color 350ms ease;
}
/* Controls inside the detail panel must use the system font, not the specimen font */
.showcase-panel.d-detail button,
.showcase-panel.d-detail input,
.showcase-panel.d-detail label,
.showcase-panel.d-detail span:not(.gc-char),
.showcase-panel.d-detail select {
  font-family: var(--font-body) !important;
}

/* ── Controls bar ── */
.showcase-controls-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.showcase-size-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 36px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.showcase-size-btn {
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.size-control {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}
.size-control label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  white-space: nowrap;
}
.size-value {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ── Inline typo controls ── */
.inline-typo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.typo-control-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  border: none;
}
.typo-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  white-space: nowrap;
}
.typo-slider {
  width: 70px;
}
.typo-val {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 36px;
  font-variant-numeric: tabular-nums;
}
.typo-segmented {
  display: inline-flex;
  gap: 2px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
}
.typo-seg-btn {
  font-family: var(--font-body);
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.typo-seg-btn.active {
  color: var(--accent);
}

/* ── Color swatches ── */
.typo-color-group {
  gap: 0;
  padding: 0 12px;
}
.color-swatches {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* ── Panel actions (weight + lang) ── */
.d-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}
.d-panel-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.d-panel-actions .showcase-tabs {
  margin-left: auto;
}

/* ── Specimen frame (detail page) ── */
.showcase-panel.d-detail .specimen-frame {
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 8px;
  background: transparent;
}
.specimen-display {
  min-height: 120px;
}
.specimen-text {
  font-size: 70px;
  line-height: 1.2;
  outline: none;
  word-break: break-word;
}
.specimen-text:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  opacity: 0.5;
}

/* ── Charset section ── */
.charset-section {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: flex-start;
}
.charset-section--browser {
  /* Stack: title → glyph rows. Overrides the base nowrap/center row so the
     charset label sits above the (wrapping) glyph tiles. */
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
.showcase-panel.d-detail .charset-section {
  margin-top: 12px;
}
.showcase-panel .charset-section--browser .charset-label {
  flex: none;
  width: 100%;
  margin-bottom: 0;
}
.showcase-panel .charset-section--browser .charset-content {
  /* Block (not flex): the homepage card rule `.charset-content{display:flex}`
     would shrink each gc-section to min-content and stack glyphs vertically. */
  display: block;
  flex: none;
  width: 100%;
  margin-top: 0;
}
.charset-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  width: 100%;
}
.charset-content {
  flex: 1;
  min-width: 0;
  width: 100%;
}
.gc-section {
  margin-bottom: 20px;
}
.gc-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
}
.gc-grid {
  /* Glyph tiles wrap automatically within the card (never overflow the
     card frame) */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 6px;
}
.gc-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: var(--radius-sm);
  transition: border-color 150ms ease, transform 150ms ease;
  overflow: hidden;
}
.gc-cell:hover {
  border-color: var(--accent);
  transform: scale(1.05);
}
.gc-char {
  font-size: 30px;
  line-height: 1;
  color: var(--text);
}
.gc-hex {
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}
.gc-cell:hover .gc-hex {
  opacity: 0.85;
}

/* ============================================================
   🎨 ACCENT THEMES — 主题色覆盖 (7 色，亮/暗模式)
   ============================================================ */
[data-accent="terracotta-red"] {
  --accent:         #cc3300;
  --accent-hover:   #a82a00;
  --accent-soft:    rgba(204, 51, 0, 0.08);
}
[data-theme="dark"][data-accent="terracotta-red"] {
  --accent:         #ff7043;
  --accent-hover:   #ff8a65;
  --accent-soft:    rgba(255, 112, 67, 0.16);
}
[data-accent="terracotta"] {
  --accent:         #c96442;
  --accent-hover:   #a94f31;
  --accent-soft:    rgba(201, 100, 66, 0.08);
}
[data-theme="dark"][data-accent="terracotta"] {
  --accent:         #e08d6b;
  --accent-hover:   #eaa387;
  --accent-soft:    rgba(224, 141, 107, 0.16);
}
[data-accent="lime"] {
  --accent:         #ccff00;
  --accent-hover:   #b3e000;
  --accent-soft:    rgba(204, 255, 0, 0.10);
  --accent-contrast:#1a1a1a;
}
[data-theme="dark"][data-accent="lime"] {
  --accent:         #c2f500;
  --accent-hover:   #d4ff2e;
  --accent-soft:    rgba(204, 255, 0, 0.16);
  --accent-contrast:#1a1a1a;
}
[data-accent="amber"] {
  --accent:         #ffcc00;
  --accent-hover:   #e6b800;
  --accent-soft:    rgba(255, 204, 0, 0.10);
  --accent-contrast:#1a1a1a;
}
[data-theme="dark"][data-accent="amber"] {
  --accent:         #f5c400;
  --accent-hover:   #ffd633;
  --accent-soft:    rgba(255, 204, 0, 0.16);
  --accent-contrast:#1a1a1a;
}
[data-accent="vivid-orange"] {
  --accent:         #ff6400;
  --accent-hover:   #d95500;
  --accent-soft:    rgba(255, 100, 0, 0.10);
  --accent-contrast:#1a1a1a;
}
[data-theme="dark"][data-accent="vivid-orange"] {
  --accent:         #ff7a1f;
  --accent-hover:   #ff9452;
  --accent-soft:    rgba(255, 122, 31, 0.16);
  --accent-contrast:#1a1a1a;
}
[data-accent="mint"] {
  --accent:         #bce5c0;
  --accent-hover:   #9ed1a5;
  --accent-soft:    rgba(188, 229, 192, 0.12);
  --accent-contrast:#1a1a1a;
}
[data-theme="dark"][data-accent="mint"] {
  --accent:         #cfeacf;
  --accent-hover:   #dff5df;
  --accent-soft:    rgba(207, 234, 207, 0.16);
  --accent-contrast:#1a1a1a;
}

/* [hidden] must always win over explicit display (dropdowns, panels) */
[hidden] { display: none !important; }

/* ── Accent panel (top bar palette) ── */
.accent-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.accent-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease;
  box-sizing: border-box;
}
.accent-swatch:hover { transform: scale(1.05); }
.accent-swatch.active { border-color: var(--text); border-width: 1.5px; }
.accent-swatch.sw-blue { background: #0033cc; }
.accent-swatch.sw-terracotta-red { background: #cc3300; }
.accent-swatch.sw-terracotta { background: #c96442; }
.accent-swatch.sw-lime { background: #ccff00; }
.accent-swatch.sw-amber { background: #ffcc00; }
.accent-swatch.sw-vivid-orange { background: #ff6400; }
.accent-swatch.sw-mint { background: #bce5c0; }

/* ── Flat style: shadows removed ── */
:root, [data-theme="dark"] {
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* ── Logo follows accent via mask (JS syncs mask file + ratio) ── */
.logo-link .logo-mask {
  display: inline-block;
  background: var(--accent);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
[data-theme="dark"] .logo-link .logo-mask {
  background: #ffffff;
}

/* ── Homepage card: free badge + charset download/license buttons ── */
.showcase-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.showcase-panel-title .tag-free {
  flex: none;
}
.charset-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.specimen-charset-row {
  flex: 1;
  min-width: 0;
  line-height: 1.8;
  word-break: break-all;
}
.charset-download-btn,
.charset-license-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease;
}
.charset-download-btn,
.charset-license-btn {
  color: var(--btn-fg, #fff);
  background: var(--btn-fill, var(--accent));
}
.charset-download-btn {
  border: none;
}
.charset-license-btn {
  background: transparent;
  border: 1px solid var(--btn-stroke, var(--accent));
  color: var(--btn-fg, var(--accent));
}
.charset-download-btn:hover,
.charset-license-btn:hover {
  background: var(--accent-hover, var(--accent));
  color: var(--accent-contrast, #fff);
  border-color: var(--accent-hover, var(--accent));
}

/* ── Buttons on coloured specimen cards: white glass to stay visible
   against any accent colour (accent-on-accent was invisible on blue). ── */
.showcase-panel.themed-bg .charset-download-btn,
.showcase-panel.themed-bg .charset-license-btn {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
}
.showcase-panel.themed-bg .charset-download-btn:hover,
.showcase-panel.themed-bg .charset-license-btn:hover {
  background: rgba(255, 255, 255, 0.32);
}
/* Light green card: deep buttons on the pale surface */
.showcase-panel.themed-bg-light .charset-download-btn,
.showcase-panel.themed-bg-light .charset-license-btn {
  color: #1a1a1a;
  background: rgba(26, 26, 26, 0.08);
  border-color: rgba(26, 26, 26, 0.2);
}
.showcase-panel.themed-bg-light .charset-download-btn:hover,
.showcase-panel.themed-bg-light .charset-license-btn:hover {
  background: rgba(26, 26, 26, 0.18);
}

/* ── List view: expand button + collapsible style list ── */
.row-expand {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: transform 180ms ease, color 150ms ease, border-color 150ms ease;
}
.row-expand:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.font-row.is-expanded .row-expand svg {
  transform: rotate(180deg);
}
.row-expand svg {
  transition: transform 180ms ease;
}
.row-styles {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.row-style-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.row-style-label {
  flex: none;
  width: 110px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.row-style-preview {
  flex: 1;
  min-width: 0;
  font-size: calc(var(--catalog-specimen-size, 20px) * 0.75);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Custom page step icons (theme-colored, left-aligned) ── */
.custom-step .step-icon {
  width: 100%;
  height: 164px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--accent);
  margin-bottom: 12px;
}
.custom-step .step-icon svg {
  width: 100%;
  height: 100%;
  max-width: 220px;
  display: block;
}
.custom-step .num {
  font-size: 30px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

/* ============================================
   Spec card control bar — two rows:
   (1) weight pills + language tabs
   (2) size + tracking + line-height + alignment + OpenType mode + swatches
   Shared by homepage showcase cards and catalog folder cards.
   ============================================ */
.spec-header-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.spec-bar-row2 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0;
}
/* Variable-font axis sliders (wght / wdth) — shown ONLY for variable fonts.
   The groups live INSIDE .spec-bar-row2 (before the size capsule), so they
   reuse the row-2 pill styles (.spec-bar-row2 .spec-slider-group) and the
   shared .spec-slider track width — no separate container styling needed. */
.var-controls {
  display: contents;
}
.spec-card-controls {
  margin: 2px 0 14px;
}
/* Each slider group (size / tracking / line-height) is its own pill —
   unified height & look across all row-2 capsules */
.spec-bar-row2 .showcase-size-group,
.spec-bar-row2 .spec-slider-group,
.spec-bar-row2 .spec-align-group,
.spec-bar-row2 .spec-swatches-wrap,
.spec-bar-row2 .ot-dropdown-trigger,
.spec-bar-row2 .typo-control-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  border: none;
  box-sizing: border-box;
}

/* Color swatches: 16px dots inside the 24px capsule leave exactly 4px on
   every side — left/right padding equals the top/bottom breathing room.
   Home cards and the detail page share identical capsule geometry. */
.spec-bar-row2 .spec-swatches-wrap,
.spec-bar-row2 .typo-color-group {
  padding: 0 4px;
}
.spec-bar-row2 .typo-color-group .color-swatch {
  width: 16px;
  height: 16px;
  border-width: 1.5px;
}
.spec-bar-row2 .color-swatches {
  gap: 5px;
}

/* Only size capsule has circular ± buttons on both edges → tight */
.spec-bar-row2 .showcase-size-group {
  padding: 0 4px;
}
/* Align capsule: text label on left (wide), icon buttons on right (tight) */
.spec-bar-row2 .spec-align-group {
  padding: 0 4px 0 8px;
}
.spec-bar-row2 .showcase-size-group .size-control {
  gap: 5px;
  padding: 0;
}
.spec-bar-row2 .showcase-size-group .showcase-size-btn {
  width: 18px;
  height: 18px;
  font-size: 10px;
  border-radius: 50%;
}
.spec-bar-row2 .showcase-size-group .size-slider {
  width: 70px;
}

/* Alignment segmented buttons inside a row-2 pill: match homepage
   .spec-align-btn look (18px targets, surface chip when active) */
.spec-bar-row2 .typo-seg-btn {
  width: 18px;
  height: 18px;
  font-size: 10px;
}
.spec-bar-row2 .typo-seg-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.spec-bar-row2 .typo-seg-btn.active {
  background: var(--surface);
  color: var(--accent);
}

/* Detail page two-row control bar: same row-1/row-2 rhythm as homepage cards */
.d-controls {
  margin: 0;
}
.d-controls .showcase-panel-header {
  margin-bottom: 6px;
}

/* Segmented pills inside the card bar: selected = white chip (reference spec).
   Unified 24px capsule height — same as the row-2 sliders/alignment pills.
   3px padding keeps the inner pill at 18px (24 − 2×3). */
.spec-header-row .weight-switcher,
.spec-header-row .showcase-tabs {
  background: var(--bg-alt);
  border: none;
  height: 24px;
  padding: 3px;
  box-sizing: border-box;
}
.spec-header-row .showcase-tabs {
  margin-left: 0;
}
.spec-header-row .weight-btn,
.spec-header-row .lang-tab {
  height: 100%;
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 10px;
  line-height: 1;
}
.spec-header-row .weight-btn.active,
.spec-header-row .lang-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}
.spec-header-row .lang-tab:hover { background: var(--surface-hover); }

/* Row-2 groups */
.spec-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  white-space: nowrap;
  background: var(--bg-alt);
  border: none;
  border-radius: var(--radius-pill);
}
.spec-group > label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.spec-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 2px;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  outline: none;
}
.spec-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.spec-val {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Alignment icon segmented control — sits inside .spec-group, no own container */
.spec-align-btns {
  display: inline-flex;
  gap: 2px;
}
.spec-align-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.spec-align-btn:hover { background: var(--surface-hover); color: var(--text); }
.spec-align-btn.active { background: var(--surface); color: var(--text); }

/* OpenType feature dropdown (reuses the detail-page .ot-dropdown component) */
.spec-bar-row2 .ot-dropdown-trigger {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
}
.spec-bar-row2 .ot-dropdown-trigger:hover {
  color: var(--text);
  background: var(--surface-hover);
}
.spec-bar-row2 .ot-menu {
  z-index: 120;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Background swatches (16px, active ring via border) */
.spec-swatches-wrap .color-swatches {
  gap: 5px;
}
.spec-swatches-wrap .color-swatch {
  width: 16px;
  height: 16px;
  border-width: 1.5px;
}
.spec-swatches-wrap .color-swatch.active {
  border-width: 1.5px;
}

/* Non-white specimen backgrounds: keep inline action buttons legible */
.specimen-frame.themed-bg .specimen-action-btn {
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.35);
}
.specimen-frame.themed-bg .specimen-action-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.specimen-frame.themed-bg-light .specimen-action-btn {
  color: var(--text-secondary);
  border-color: var(--border);
}
.specimen-frame.themed-bg-light .specimen-action-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

/* ============================================================
   ✨ INSPIRE — 灵感页（Apple HIG + flat + 主题色，图标统一 16px/1.8）
   ============================================================ */
.inspire-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
  /* the base .showcase-tabs adds a grey capsule + border — drop both */
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
}
/* Compact segmented style: grey pill container,
   active option on white, inactive options transparent grey text. */
.inspire-tablist {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
}
.inspire-tablist .lang-tab {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  min-height: 30px;
  padding: 0 16px;
  font-size: 13px;
  border-radius: var(--radius-pill);
  box-shadow: none;
}
.inspire-tablist .lang-tab:hover { color: var(--text); }
.inspire-tablist .lang-tab.active {
  background: rgba(255, 255, 255, 0.5);
  color: var(--text);
  box-shadow: none;
}
.inspire-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.inspire-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.inspire-search-wrap .search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.inspire-search {
  width: 220px;
  min-height: 36px;
  padding: 8px 14px 8px 34px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.inspire-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.inspire-search::placeholder { color: var(--text-muted); }
.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.tool-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.tool-btn .ico,
.tool-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke-width: 1.8;
}
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.dropdown-item {
  font-family: var(--font-body);
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.dropdown-item:hover { background: var(--bg-alt); color: var(--text); }
.dropdown-item.active { color: var(--accent); background: var(--accent-soft); }
.inspire-panel { display: none; }
.inspire-panel.active { display: block; }
.inspire-empty {
  display: none;
  text-align: center;
  padding: 64px 0;
  color: var(--text-muted);
  font-size: 14px;
}
.inspire-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.inspire-grid--type {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.color-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 150ms ease, background 150ms ease;
}
.color-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.swatch {
  height: 160px;
  display: flex;
  align-items: flex-end;
  padding: 12px 14px;
  cursor: pointer;
  transition: filter 150ms ease;
}
.swatch:hover { filter: brightness(1.04); }
.swatch-hex {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.color-card .body { padding: 12px 14px 14px; }
.crow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.cname {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.crow-right { display: flex; align-items: center; gap: 8px; }
.cdark {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ccat {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}
.csub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.cvals {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cv {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}
.cv span { color: var(--text-muted); }
.cv b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.color-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 0;
  color: var(--text-muted);
  font-size: 14px;
}
.type-card {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 150ms ease;
}
.type-card:hover {
  border-color: var(--border-strong);
}
.type-card__preview .scene {
  height: 200px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
}
/* Per-category subtle material patterns (kept low-contrast, no motion) */
.type-card__preview .scene.pat-soft {
  background-image: radial-gradient(rgba(var(--card-rgb, 99, 102, 241), 0.12) 2px, transparent 2.4px);
  background-size: 18px 18px;
}
.type-card__preview .scene.pat-pixel {
  background-image: radial-gradient(rgba(var(--card-rgb, 99, 102, 241), 0.18) 1.4px, transparent 1.6px);
  background-size: 11px 11px;
}
.type-card__preview .scene.pat-grid {
  background-image:
    linear-gradient(rgba(var(--card-rgb, 99, 102, 241), 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--card-rgb, 99, 102, 241), 0.09) 1px, transparent 1px);
  background-size: 16px 16px;
}
.type-card__preview .scene.pat-matrix {
  background-image:
    linear-gradient(rgba(var(--card-rgb, 99, 102, 241), 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--card-rgb, 99, 102, 241), 0.12) 1px, transparent 1px);
  background-size: 9px 9px;
}
.type-card__preview .scene.pat-scan {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(var(--card-rgb, 99, 102, 241), 0.10) 3px, rgba(var(--card-rgb, 99, 102, 241), 0.10) 4px);
}
.type-card__preview .scene.pat-line {
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent 18px, rgba(var(--card-rgb, 99, 102, 241), 0.10) 18px, rgba(var(--card-rgb, 99, 102, 241), 0.10) 19px);
}
.type-card__preview .scene.pat-paper {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 22px, rgba(var(--card-rgb, 99, 102, 241), 0.10) 22px, rgba(var(--card-rgb, 99, 102, 241), 0.10) 23px);
}
.type-card__body { padding: 14px 16px; }
.type-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.type-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-alt);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}
.type-card__title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.type-card__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.type-card__title-row .type-card__title { margin-bottom: 0; }
.type-card__title-row .type-card__tags { margin-bottom: 0; }
.type-card__font {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}
.inspire-feature { margin-bottom: 20px; }
.inspire-feature .type-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
}
.inspire-feature .type-card__preview .scene { height: 100%; min-height: 240px; }
@media (max-width: 720px) {
  .inspire-feature .type-card { grid-template-columns: 1fr; }
  .inspire-search { width: 100%; }
}

/* ============================================================
   🌗 THEMED-BG CONTROL ADAPTATION
   深色/彩色背景(blue/black/red/terracotta) 与 浅色背景(green)：
   只覆盖作用域 token（文字反白、胶囊底、语义固有色提亮），
   控件基础规则（--bg-alt 胶囊底、--surface 选中态、--success/
   --warning 徽标与按钮）自动适配，无需逐控件覆盖。
   ============================================================ */

/* ── Deep/coloured backgrounds: invert text, brighten system colours ── */
.showcase-panel.themed-bg {
  --text: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.85);
  --text-muted: rgba(255, 255, 255, 0.68);
  --bg-alt: rgba(255, 255, 255, 0.14);
  --surface-hover: rgba(255, 255, 255, 0.2);
  --border: rgba(255, 255, 255, 0.18);
  --border-strong: rgba(255, 255, 255, 0.4);
  --success: #4fd67f;
  --success-soft: rgba(79, 214, 127, 0.22);
  --warning: #ffb866;
  --warning-soft: rgba(255, 184, 102, 0.22);
}
/* ── Light mint/green background: deep text, light chips ── */
.showcase-panel.themed-bg-light {
  --text: #1a1a1a;
  --text-secondary: rgba(26, 26, 26, 0.82);
  --text-muted: rgba(26, 26, 26, 0.62);
  --bg-alt: rgba(26, 26, 26, 0.08);
  --surface-hover: rgba(26, 26, 26, 0.12);
  --border: rgba(26, 26, 26, 0.15);
  --border-strong: rgba(26, 26, 26, 0.35);
}
/* Selected chips on coloured cards: light glass + card text. Kept out of
   --surface so the OpenType dropdown keeps the page surface. */
.showcase-panel.themed-bg .weight-btn.active,
.showcase-panel.themed-bg .lang-tab.active,
.showcase-panel.themed-bg .spec-align-btn.active,
.showcase-panel.themed-bg .typo-seg-btn.active {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}
/* Slider thumbs must stay visible on any card face */
.showcase-panel.themed-bg .size-slider::-webkit-slider-thumb,
.showcase-panel.themed-bg .spec-slider::-webkit-slider-thumb,
.showcase-panel.themed-bg .typo-slider::-webkit-slider-thumb {
  background: rgba(255, 255, 255, 0.95);
}
.showcase-panel.themed-bg-light .size-slider::-webkit-slider-thumb,
.showcase-panel.themed-bg-light .spec-slider::-webkit-slider-thumb,
.showcase-panel.themed-bg-light .typo-slider::-webkit-slider-thumb {
  background: #1a1a1a;
}
/* Color swatch selected ring */
.showcase-panel.themed-bg .color-swatch.active {
  border-color: #fff;
  border-width: 1.5px;
}
.showcase-panel.themed-bg-light .color-swatch.active {
  border-color: #1a1a1a;
  border-width: 1.5px;
}
/* Selected chips on light coloured cards: 70% white so they blend with the card */
.showcase-panel.themed-bg-light .weight-btn.active,
.showcase-panel.themed-bg-light .lang-tab.active,
.showcase-panel.themed-bg-light .spec-align-btn.active,
.showcase-panel.themed-bg-light .typo-seg-btn.active {
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
}
/* Detail page primary download button inside the themed card */
.showcase-panel.themed-bg .btn-primary {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.showcase-panel.themed-bg .btn-primary:hover {
  background: rgba(255, 255, 255, 0.36);
}

/* Coloured cards: OpenType panel uses a SOLID surface (no translucent adaptation) */
.showcase-panel.themed-bg .ot-menu,
.showcase-panel.themed-bg-light .ot-menu {
  background: var(--panel-bg);
  border-color: var(--panel-border);
}
.showcase-panel.themed-bg .ot-feature-name { color: var(--panel-text); }
.showcase-panel.themed-bg .ot-feature-desc { color: var(--panel-text-secondary); }
.showcase-panel.themed-bg .ot-feature-btn:hover { background: var(--panel-hover); color: var(--panel-text); }


/* ── Dark theme: the "white" specimen card becomes a warm paper surface
   (keeps the paper metaphor, drops the glare of pure #fff on near-black).
   Controls/labels inside it must re-adapt to a LIGHT surface, so every
   token they read — including the semantic success/warning badge colours —
   is overridden here (badges otherwise keep dark-theme values and become
   nearly invisible on the paper card). The accent is re-inked to the dark
   text colour so slider thumbs / active accents match the ink-on-paper
   control palette instead of the page-level neon accent. */
[data-theme="dark"] .showcase-panel:not(.themed-bg) {
  --accent: #1a1a18;
  --accent-soft: rgba(26, 24, 24, 0.12);
  --bg-alt: #eae8e3;
  --surface: #f2f1ed;
  --surface-hover: #e7e5df;
  --text: #1a1a18;
  --text-secondary: #5c5c57;
  --text-muted: #7a7a74;
  --border: #e2e1db;
  --border-strong: #c9c8c2;
  --success: #1b7a3d;
  --success-soft: #e8f5ec;
  --warning: #b34700;
  --warning-soft: #fff3e0;
}

/* ── Catalog specimen panel (home page) themed support ── */
.specimen-panel:not(.bg-white) {
  transition: background 350ms ease, color 350ms ease, border-color 350ms ease;
}
.specimen-panel.bg-gray,
.specimen-panel.bg-black,
.specimen-panel.bg-blue,
.specimen-panel.bg-red,
.specimen-panel.bg-terracotta {
  color: #ffffff;
}
.specimen-panel.bg-gray .size-label,
.specimen-panel.bg-black .size-label,
.specimen-panel.bg-blue .size-label,
.specimen-panel.bg-red .size-label,
.specimen-panel.bg-terracotta .size-label {
  opacity: 0.7;
  color: #fff;
}

/* ============================================
   INSPIRATION — PALETTE OPTIMIZER TOOL
   ============================================ */
.palette-tool {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.palette-tool-head { display: flex; flex-direction: column; gap: 4px; }
.palette-tool-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.palette-tool-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.palette-tool-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.palette-field { display: flex; flex-direction: column; gap: 8px; }
.palette-field-color { flex-direction: row; align-items: center; gap: 10px; }
.palette-field label {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.palette-color-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: border-color 0.15s ease;
}
.palette-color-input.invalid { border-color: #d33; }
.palette-color-input input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.palette-color-input input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.palette-color-input input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(0,0,0,0.12); border-radius: 50%; }
.palette-color-input input[type="color"]::-moz-color-swatch { border: 1px solid rgba(0,0,0,0.12); border-radius: 50%; }
.palette-color-input input[type="text"] {
  width: 84px;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  outline: none;
}
.palette-field-tint {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.palette-field-tint .spec-slider { width: 160px; flex: none; }
.palette-tint-val { font-family: var(--font-mono); color: var(--text); }
.palette-field-preview {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.palette-preview-label { font-size: 12px; color: var(--text-secondary); }
.palette-preview-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: inset 0 0 0 2px var(--surface);
}
.palette-arrow { width: 14px; height: 14px; color: var(--text-muted); }
.palette-schemes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.palette-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.palette-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.palette-card-swatch { height: 120px; }
.palette-card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.palette-card-body h4 { margin: 0; font-size: 14px; font-weight: 700; }
.palette-card-body p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.palette-vals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.palette-val {
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11.5px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.palette-val:hover { border-color: var(--border-strong); background: var(--surface-hover); }
@media (max-width: 640px) {
  .palette-tool-controls { flex-direction: column; align-items: stretch; }
  .palette-field-preview { padding-bottom: 0; }
}