/* 信息差聚合平台 · Raycast 式设计系统（自预览版定版整体搬入）
   近黑底 #0c0d0f / 面板 #111214 / 文字 #f2f2f2·#d9d9d9 / 唯一主点缀红 #ff6363
   招牌阴影 inset 0 1px rgba(255,255,255,.10)，Inter + Geist Mono 数字。
   动效只有：Hero 光束 60s 亮度呼吸、背景光晕 52s 缓慢漂移、演示区轮换、一次性入场。
   严禁蓝色光晕 / 粒子 / K 线类元素。 */

:root {
  color-scheme: dark;
  --bg: #07080a;
  --panel: #111214;
  --panel-2: #17181a;
  --ink: #f2f2f2;
  --ink-2: #d9d9d9;
  --ink-3: #a9a9ae;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --glass-hi: rgba(255, 255, 255, .06);
  --accent: #ff6363;
  --accent-hover: #ff7474;
  --accent-deep: #e5484d;
  --accent-soft: rgba(255, 99, 99, .12);
  --red: #ff7a7a;
  --red-soft: rgba(255, 99, 99, .12);
  --red-bg: #452324;
  --amber: #d9a05b;
  --hl: inset 0 1px 0 rgba(255, 255, 255, .10);
  --shadow: 0 10px 28px rgba(0, 0, 0, .38);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, .55);
  --r-sm: 6px;
  --r: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { color-scheme: dark; scroll-behavior: smooth; }

body {
  font-family: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .15px;
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(255, 99, 99, .32); }

/* 背景：近黑底 + 两团极淡的红色/中性光晕以 52s 周期缓慢漂移（只动 background-position，
   元素常驻不消失）；无蓝光、无粒子 */
.ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(760px 460px at 16% -8%, rgba(255, 99, 99, .055), transparent 62%),
    radial-gradient(680px 460px at 88% 2%, rgba(255, 255, 255, .028), transparent 60%),
    radial-gradient(960px 720px at 50% 118%, rgba(255, 99, 99, .04), transparent 65%),
    linear-gradient(180deg, #0a0b0d, var(--bg) 340px);
  background-size: 150% 150%, 150% 150%, 150% 150%, 100% 100%;
  animation: ambientDrift 52s ease-in-out infinite alternate;
}
@keyframes ambientDrift {
  from { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  to   { background-position: 6% 4%, 94% 5%, 46% 96%, 0 0; }
}

/* ---------- 玻璃基元（预览版口径：面板本体 #111214 + 细描边 + 招牌高光） ---------- */
.glass {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--hl), var(--shadow);
}
.glass-strong {
  background: rgba(23, 24, 26, .96);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), var(--hl);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
}

/* ---------- 顶栏（品牌条：logo 贴图本体 + 站名两行字） ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 8, 10, .82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 10px 28px;
  display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
/* Logo：原图抠图贴图本体（/logo-mark.png，RGBA 透明底）——不重绘、不改色、不套框 */
.brand-mark { width: 34px; height: 34px; flex: none; display: grid; place-items: center; }
.brand-mark img { width: 34px; height: 34px; display: block; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-size: 14.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.brand-text small { font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
.tabs { display: flex; gap: 2px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; padding: 7px 13px; border-radius: var(--r);
  white-space: nowrap; transition: background .15s, color .15s;
}
.tab:hover { background: var(--glass-hi); color: var(--ink); }
.tab.active {
  color: #fff; font-weight: 600; background: var(--red-bg);
  border-color: rgba(255, 99, 99, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.auth-area { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.auth-user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.auth-user .avatar {
  width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center;
  background: var(--red-bg); color: #ffb3b3; font-weight: 900; font-size: 13px;
  text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* ---------- 按钮（预览版 .btn 口径） ---------- */
.btn {
  appearance: none; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 500; padding: 8px 18px; border-radius: var(--r);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  box-shadow: var(--hl), 0 1px 2px rgba(0, 0, 0, .35);
  transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: rgba(255, 255, 255, .26); background: var(--panel-2); }
.btn:active { transform: scale(.98); }
.btn.primary {
  background: var(--accent); border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn.primary:hover { background: var(--accent-hover); border-color: transparent; }
.btn.primary:disabled { opacity: .65; cursor: wait; }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--glass-hi); border-color: transparent; }
.btn.lg { padding: 12px 26px; font-size: 15px; }
.btn.block { width: 100%; padding: 12px; }

/* ---------- 布局 ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px 40px; position: relative; z-index: 1; }
.page { display: none; }
.page.active { display: block; animation: pageIn .28s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page-head { padding-top: 40px; }
.page-head h2 { font-size: 26px; font-weight: 700; letter-spacing: .01em; }
.page-sub { color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.section-title { font-size: 20px; font-weight: 700; margin: 72px 0 16px; letter-spacing: .01em; }

/* ---------- Hero：海报式居中，静态斜射光束渲染图在文字与窗口之后 ---------- */
.hero { position: relative; padding: 118px 0 20px; text-align: center; }
@media (max-width: 640px) { .hero { padding: 92px 0 12px; } }
/* 光束层：预览版同图（/hero-art.webp）满幅 cover，四边渐隐融进近黑底；
   光束位置/形状/角度完全不动，桌面端只有亮度以约 60s 周期极缓慢呼吸，移动端纯静态 */
.hero-art {
  position: absolute; z-index: 0; top: -96px; bottom: -150px;
  left: calc(50% - 50vw); width: 100vw; pointer-events: none; overflow: hidden;
}
.hero-art::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/hero-art.webp") center / cover no-repeat;
}
@media (min-width: 641px) {
  .hero-art::before { animation: heroBreathe 60s ease-in-out infinite alternate; }
}
@keyframes heroBreathe {
  from { filter: brightness(1.06) saturate(1.06) hue-rotate(0deg); }
  to   { filter: brightness(.68) saturate(.82) hue-rotate(-7deg); }
}
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 8, 10, .62) 0%, rgba(7, 8, 10, 0) 15%, rgba(7, 8, 10, 0) 85%, rgba(7, 8, 10, .62) 100%),
    linear-gradient(180deg, rgba(7, 8, 10, .6) 0%, rgba(7, 8, 10, 0) 24%, rgba(7, 8, 10, .16) 56%, var(--bg) 98%);
}
.hero-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
.hero-kicker {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .34em; color: rgba(255, 255, 255, .55);
  margin: 0 0 30px; text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
  animation: riseIn .9s cubic-bezier(.22, .61, .21, 1) both;
}
.hero-kicker::before, .hero-kicker::after {
  content: ""; width: 34px; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4));
}
.hero-kicker::after { background: linear-gradient(90deg, rgba(255, 255, 255, .4), transparent); }
.hero-kicker .kdot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
.hero h1 { margin: 0 0 28px; font-weight: 800; color: #fff; text-shadow: 0 2px 34px rgba(0, 0, 0, .5); animation: riseIn .9s cubic-bezier(.22, .61, .21, 1) both; }
.hero h1 .h1-main { display: block; font-size: clamp(72px, 11.5vw, 118px); line-height: 1.04; letter-spacing: .04em; font-weight: 900; }
.hero h1 .h1-sub { display: block; margin-top: 20px; font-size: clamp(30px, 4.8vw, 50px); line-height: 1.15; font-weight: 700; letter-spacing: .34em; text-indent: .34em; color: #a6a6ab; }
@media (max-width: 640px) { .hero h1 .h1-sub { letter-spacing: .26em; text-indent: .26em; margin-top: 16px; } }
.hero h1 .h1-main .u { position: relative; display: inline-block; }
.hero h1 .h1-main .u::after {
  content: ""; position: absolute; left: 3%; right: 3%; bottom: 2px; height: .09em; min-height: 5px;
  border-radius: 99px; background: var(--accent); box-shadow: 0 2px 18px rgba(255, 99, 99, .55);
}
.hero p.lede {
  font-size: 16.5px; line-height: 1.75; color: rgba(255, 255, 255, .85);
  max-width: 600px; margin: 0 auto 38px; text-shadow: 0 1px 18px rgba(0, 0, 0, .55);
  animation: riseIn .9s cubic-bezier(.22, .61, .21, 1) .12s both;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; animation: riseIn .9s cubic-bezier(.22, .61, .21, 1) .24s both; }
.pill-btn {
  appearance: none; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px;
  background: rgba(14, 15, 17, .55); border: 1px solid rgba(255, 255, 255, .24); color: #fff;
  font-size: 15px; font-weight: 600;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 12px 32px rgba(0, 0, 0, .4);
  transition: border-color .2s, background .2s, transform .2s;
}
.pill-btn:hover { border-color: rgba(255, 255, 255, .45); background: rgba(18, 19, 22, .72); transform: translateY(-1px); }
.pill-btn .arr { font-weight: 400; color: rgba(255, 255, 255, .75); }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 产品窗口基元 ---------- */
.win {
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--hl), 0 32px 72px rgba(0, 0, 0, .55);
  overflow: hidden; text-align: left; font-weight: 400;
}
.win-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.win-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.win-dot.r { background: #ff5f57; }
.win-dot.y { background: #febc2e; }
.win-dot.g { background: #28c840; }
.win-title { margin-left: 8px; font-size: 12px; color: var(--ink-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-more { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.win-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); background: rgba(255, 255, 255, .02); }

/* ---------- Hero「今日推荐」窗口 ---------- */
.hero-visual { position: relative; z-index: 1; max-width: 1020px; margin: 84px auto 0; text-align: left; animation: riseIn 1s cubic-bezier(.22, .61, .21, 1) .38s both; }
.hero-visual::before {
  content: ""; position: absolute; inset: -46px -70px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 99, 99, .16), rgba(255, 99, 99, 0) 70%);
  opacity: .7;
}
.reco-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 20px 4px; }
.reco-head .reco-title { font-size: 19px; font-weight: 800; letter-spacing: .01em; color: #fff; }
.reco-head .reco-date { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; font-family: var(--mono); }
.reco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 14px 20px 20px; }
.reco-card {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  display: flex; flex-direction: column; gap: 7px; min-width: 0; text-align: left;
  animation: rowIn .6s ease-out both;
}
.reco-card:nth-child(2) { animation-delay: .08s; }
.reco-card:nth-child(3) { animation-delay: .16s; }
.reco-card:nth-child(4) { animation-delay: .24s; }
.reco-card.top { border-color: rgba(255, 99, 99, .38); background: linear-gradient(180deg, rgba(255, 99, 99, .13), rgba(255, 99, 99, .04)); }
.reco-board { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reco-name { font-size: 15.5px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.reco-name.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.reco-price { font-family: var(--mono); font-size: 30px; font-weight: 700; line-height: 1.1; color: #ff9d9d; margin-top: auto; }
.reco-price small { font-size: 12px; color: var(--ink-2); font-family: "Noto Sans SC", sans-serif; font-weight: 400; }
.reco-price.light { color: #fff; }
.reco-info { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
.hero-cap { font-size: 12px; color: var(--ink-3); margin-top: 14px; text-align: center; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 统计横带：大字排版，无卡片 ---------- */
.stat-band { position: relative; z-index: 3; max-width: 1060px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.stat-band .stat b { display: block; font-size: clamp(34px, 4.4vw, 52px); font-weight: 700; font-family: var(--mono); line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
.stat-band .stat span { font-size: 12.5px; color: var(--ink-3); display: block; line-height: 1.65; margin-top: 10px; }

/* ---------- 产品演示区：活窗口 + 玻璃 dock + 联动标题 ---------- */
.demo { position: relative; z-index: 3; margin-top: 40px; text-align: left; }
.demo::before {
  content: ""; position: absolute; z-index: -2; top: -40px; bottom: -40px;
  left: calc(50% - 50vw); width: 100vw; background: #000;
}
.demo-glow {
  position: absolute; z-index: -1; left: 50%; top: 215px; transform: translate(-50%, -50%);
  width: min(920px, 100vw); height: 540px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 72, 72, .30), rgba(255, 99, 99, .10) 46%, rgba(255, 99, 99, 0) 72%);
  opacity: .72; transition: opacity .38s ease;
}
.demo.switching .demo-glow { opacity: 1; }
.demo-stage { max-width: 1020px; margin: 0 auto; }
.demo-panes { display: grid; }
.demo-pane { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .38s ease, visibility 0s linear .38s; }
.demo-pane.active { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.demo-search {
  display: flex; align-items: center; gap: 10px; margin: 14px 16px 4px; padding: 11px 14px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: #0a0b0d;
  font-size: 14px; color: var(--ink);
}
.demo-search svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.demo-typed { font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-search .placeholder { color: var(--ink-3); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caret { width: 2px; height: 18px; background: var(--accent); flex: none; animation: caretBlink 1.05s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
.demo-split { display: grid; grid-template-columns: minmax(0, 1fr) 302px; min-height: 316px; }
.demo-list { padding: 10px 10px 14px; border-right: 1px solid var(--line); min-width: 0; }
.demo-preview { padding: 20px; background: rgba(255, 255, 255, .02); min-width: 0; }
.drow {
  display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 10px;
  border: 1px solid transparent; transition: background .3s ease, border-color .3s ease, opacity .3s ease;
}
.drow img { width: 19px; height: 19px; flex: none; }
.drow .dmain { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.drow .dn { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.drow .dv { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow .dp { margin-left: auto; text-align: right; flex: none; }
.drow .dp b { font-family: var(--mono); font-weight: 600; font-size: 16px; }
.drow .dp b small { font-weight: 600; font-size: 12px; color: var(--ink-2); }
.drow .dp span { display: block; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.drow.sel { background: var(--red-bg); border-color: rgba(255, 99, 99, .35); }
.drow.dim { opacity: .30; }
.drow .drank {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 6px; background: var(--glass-hi); color: var(--ink-2);
  font-size: 11.5px; font-weight: 700; font-family: var(--mono); flex: none;
}
.drow.sel .drank { background: var(--accent); color: #fff; }
.drow .dtitle { flex: 1; min-width: 0; }
.drow .dtitle .dt { display: block; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow .dtitle .dm { display: block; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.pv-lab { font-size: 13px; color: var(--ink-3); letter-spacing: .07em; }
.pv-name { font-size: 16.5px; font-weight: 700; margin: 5px 0 0; line-height: 1.4; }
.pv-sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.pv-price { font-family: var(--mono); font-size: 31px; font-weight: 700; color: #ff9d9d; line-height: 1.15; margin-top: 8px; }
.pv-price small { font-size: 13px; color: var(--ink-2); font-family: "Noto Sans SC", sans-serif; font-weight: 400; }
.pv-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.pv-rows > div { display: flex; justify-content: space-between; gap: 14px; }
.pv-rows span { color: var(--ink-3); flex: none; }
.pv-rows b { font-weight: 600; text-align: right; }
.pv-desc { color: var(--ink-2); font-size: 13px; line-height: 1.75; margin-top: 10px; }
.pv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.pv-chips .mchip { display: inline-flex; align-items: center; gap: 4px; background: var(--glass-hi); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; font-size: 12px; color: var(--ink-2); }
.pv-chips .mchip b { color: var(--ink); }
.demo-dockwrap { margin-top: 28px; display: flex; justify-content: center; }
.demo-dock {
  display: flex; gap: 14px; justify-content: center; align-items: flex-end; max-width: 100%;
  padding: 16px; border-radius: 30px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 44px rgba(0, 0, 0, .35);
}
.dock-tile {
  width: 74px; height: 74px; border-radius: 20px; cursor: pointer; flex: none;
  border: 1px solid rgba(255, 255, 255, .12); color: #c9c9cd;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 30px rgba(0, 0, 0, .4);
  display: grid; place-items: center;
  transition: transform .25s ease-out, color .25s, border-color .25s;
}
.dock-tile svg { width: 30px; height: 30px; }
.dock-tile:hover { transform: translateY(-4px); color: #fff; border-color: rgba(255, 255, 255, .3); }
.dock-tile.is-on { width: 88px; height: 88px; color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .05)); }
.dock-tile.is-on svg { width: 34px; height: 34px; }
.demo-tile { position: relative; }
.demo-tile .tip {
  position: absolute; left: 50%; bottom: calc(100% + 18px); transform: translate(-50%, 5px);
  background: rgba(23, 24, 26, .96); border: 1px solid var(--line-strong); color: #fff;
  font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.demo-tile.is-on .tip { opacity: 1; transform: translate(-50%, 0); }
.demo-head {
  max-width: 880px; margin: 28px auto 0; text-align: center;
  font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; line-height: 1.42; letter-spacing: -.01em; color: #fff;
  transition: opacity .3s ease;
}
.demo-head .dim { color: #a3a3a3; }
.demo-head.out { opacity: 0; }
.demo-cta { display: flex; justify-content: center; margin-top: 24px; }

/* ---------- 三栏模块卡 ---------- */
.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.module-card { overflow: hidden; cursor: pointer; transition: transform .35s ease-out, border-color .35s ease-out, box-shadow .35s ease-out; }
.module-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .2); box-shadow: var(--hl), 0 16px 36px rgba(0, 0, 0, .4); }
.module-body { padding: 22px; }
.tag {
  display: inline-block; font-size: 12px; font-weight: 500; color: var(--ink-2);
  background: var(--glass-hi); border: 1px solid var(--line);
  padding: 4px 11px; border-radius: 6px; margin-bottom: 12px;
}
.module-body h3 { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.module-body p { color: var(--ink-2); font-size: 13.5px; line-height: 1.75; }
.module-link { display: inline-block; margin-top: 14px; color: #ff9d9d; font-size: 14px; font-weight: 600; }

/* ---------- 收藏条 ---------- */
.fav-strip { margin-top: 30px; padding: 20px 22px; }
.fav-strip h3 { font-size: 16px; margin-bottom: 10px; }
.fav-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fav-chip {
  font-size: 13px; color: var(--ink-2); background: var(--glass-hi);
  border: 1px solid var(--line); padding: 5px 12px; border-radius: 6px;
}
.fav-chip b { color: var(--accent); font-weight: 600; margin-right: 6px; }
.fav-empty { color: var(--ink-3); font-size: 13.5px; }

/* ---------- 筛选 / 搜索 ---------- */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 14px; }
.chip {
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  font: inherit; font-size: 13.5px; font-weight: 500; padding: 8px 15px; border-radius: var(--r);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { background: var(--glass-hi); color: var(--ink); }
.chip .cnt { color: var(--ink-3); margin-left: 6px; font-family: var(--mono); font-size: 12px; }
.chip.active { background: var(--red-bg); border-color: rgba(255, 99, 99, .35); color: #ff9d9d; font-weight: 700; }
.chip.active .cnt { color: #ff9d9d; }
.search-bar {
  display: flex; align-items: center; gap: 9px; max-width: 440px;
  border: 1px solid var(--line-strong); border-radius: var(--r); padding: 4px 13px;
  background: #0a0b0d; color: var(--ink-3); transition: border-color .15s, box-shadow .15s;
}
.search-bar:focus-within { border-color: rgba(255, 255, 255, .3); box-shadow: 0 0 0 3px rgba(255, 255, 255, .07); }
.search-bar input {
  flex: 1; background: transparent; border: 0; outline: 0; color: var(--ink);
  font: inherit; font-size: 13.5px; padding: 9px 0; min-width: 0;
}
.search-bar input::placeholder { color: var(--ink-3); }

/* ---------- 价格表 ---------- */
.table-card { margin-top: 16px; padding: 6px 0 10px; overflow-x: auto; border-radius: var(--r-lg); }
.price-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 13.5px; }
.price-table th {
  text-align: left; font-size: 12px; color: var(--ink-3); font-weight: 500;
  padding: 14px 18px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.price-table td { padding: 11px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; transition: background .2s ease-out; }
.price-table tbody tr:hover td { background: rgba(255, 255, 255, .03); }
.price-table tbody tr:last-child td { border-bottom: 0; }
.model-name { font-weight: 700; font-size: 14px; white-space: nowrap; }
.model-vendor { color: var(--ink-3); font-size: 12px; }
.price-main { color: var(--accent); font-size: 15.5px; font-weight: 700; font-family: var(--mono); white-space: nowrap; }
.price-main small { font-size: 12px; color: var(--ink-3); font-weight: 500; font-family: "Noto Sans SC", sans-serif; }
td .price-main small { font-size: 12px; }
.price-sub { color: var(--ink-2); font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.mult-badge {
  display: inline-block; font-size: 12px; color: var(--ink-2); background: var(--glass-hi);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px;
  font-family: var(--mono); white-space: nowrap;
}
.shop-name { color: var(--ink-2); font-size: 13.5px; white-space: nowrap; }
a.shop-link { text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, .28); transition: color .2s, border-color .2s; }
a.shop-link:hover { color: var(--accent); border-color: var(--accent); }
.table-note { color: var(--ink-3); font-size: 12.5px; padding: 12px 18px 4px; line-height: 1.7; }
.empty-note { color: var(--ink-2); font-size: 14px; padding: 26px 18px; text-align: center; }

/* ---------- 收藏星 ---------- */
.star-btn {
  appearance: none; border: 1px solid var(--line); background: var(--panel); color: var(--ink-3);
  width: 31px; height: 31px; border-radius: var(--r); cursor: pointer; font-size: 14px; line-height: 1;
  display: grid; place-items: center; flex-shrink: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.star-btn:hover { border-color: rgba(255, 255, 255, .26); color: var(--ink); }
.star-btn.on { color: var(--accent); border-color: rgba(255, 99, 99, .45); background: var(--accent-soft); }

/* ---------- 会员卡 ---------- */
.member-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.member-card { padding: 18px; position: relative; transition: transform .35s ease-out, border-color .35s ease-out, box-shadow .35s ease-out; }
.member-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .2); box-shadow: var(--hl), 0 16px 36px rgba(0, 0, 0, .4); }
.member-top { display: flex; align-items: flex-start; gap: 11px; }
.prod-mark {
  width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; flex-shrink: 0;
  background: var(--panel-2); border: 1px solid var(--line); box-shadow: var(--hl);
  font-weight: 700; font-size: 12.5px; color: var(--ink-2); letter-spacing: .02em;
}
.member-top h3 { font-size: 15px; font-weight: 700; line-height: 1.3; }
.member-top .plan { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.member-top .star-btn { margin-left: auto; }
.member-price { margin-top: 14px; display: flex; align-items: baseline; gap: 8px; }
.member-price .amount { font-size: 27px; font-weight: 700; color: var(--accent); font-family: var(--mono); letter-spacing: -.01em; }
.member-price .qi { color: var(--ink-3); font-size: 12px; }
.member-meta { margin-top: 6px; color: var(--ink-3); font-size: 12.5px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.member-meta b { color: var(--ink); }
.save-badge { color: #ff9d9d; font-weight: 700; }
.stock-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .09); margin-top: 12px; overflow: hidden; }
.stock-bar i { display: block; height: 100%; background: rgba(255, 255, 255, .55); border-radius: 3px; }
.member-foot { margin-top: 10px; color: var(--ink-3); font-size: 12.5px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* ---------- 整卡可点购买：hover 时卡片底部浮现提示条 ---------- */
.member-card--buy, .reco-card--buy, .intel-card--buy { cursor: pointer; overflow: hidden; }
.reco-card--buy, .intel-card--buy { position: relative; }
.member-card--buy:focus-visible, .reco-card--buy:focus-visible, .intel-card--buy:focus-visible { outline: 2px solid rgba(255, 99, 99, .65); outline-offset: 2px; }
.buy-hint {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 9px 16px; text-align: center; pointer-events: none;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #fff;
  background: linear-gradient(180deg, rgba(255, 99, 99, .88), rgba(238, 74, 74, .96));
  box-shadow: 0 -6px 18px rgba(255, 99, 99, .22);
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
[data-buy]:hover .buy-hint, [data-buy]:focus-visible .buy-hint { opacity: 1; transform: none; }
/* API 表格整行可点：行内浮现提示（绝对定位浮层，不撑高行） */
.api-row--buy { cursor: pointer; }
.api-row--buy td:first-child { position: relative; }
.price-table tbody tr.api-row--buy:hover td { background: rgba(255, 99, 99, .05); }
.api-row--buy:focus-visible { outline: 2px solid rgba(255, 99, 99, .65); outline-offset: -2px; }
.row-hint {
  position: absolute; left: 18px; bottom: -9px; z-index: 3; pointer-events: none;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #fff;
  background: linear-gradient(180deg, rgba(255, 99, 99, .92), rgba(238, 74, 74, .97));
  box-shadow: 0 4px 14px rgba(255, 99, 99, .35);
  opacity: 0; transform: translateY(3px); transition: opacity .22s ease, transform .22s ease;
}
tr.api-row--buy:hover .row-hint, tr.api-row--buy:focus-visible .row-hint { opacity: 1; transform: none; }
/* 触屏无 hover：提示条常驻半透明显示，保证入口可见；整卡可点兜底 */
@media (hover: none) {
  .buy-hint { opacity: 1; transform: none; background: linear-gradient(180deg, rgba(255, 99, 99, .55), rgba(238, 74, 74, .68)); }
}

/* ---------- 情报 ---------- */
.intel-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.intel-card { display: flex; gap: 16px; padding: 18px 20px; align-items: flex-start; }
.intel-rank {
  display: inline-grid; place-items: center; min-width: 23px; height: 23px; padding: 0 6px; flex-shrink: 0;
  border-radius: 6px; background: var(--glass-hi); color: var(--ink-2);
  font-weight: 700; font-size: 12.5px; font-family: var(--mono);
}
.intel-card:first-child .intel-rank { background: var(--accent); color: #fff; }
.intel-main { flex: 1; min-width: 0; }
.intel-main h3 { font-size: 15px; font-weight: 700; line-height: 1.5; }
.intel-main h3 a.intel-link { color: inherit; text-decoration: none; }
.intel-main h3 a.intel-link:hover { color: var(--accent); text-decoration: underline; }
.intel-meta { margin-top: 5px; color: var(--ink-3); font-size: 12px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.intel-meta .board { color: var(--ink-2); font-weight: 600; }
.intel-metrics { margin-top: 7px; color: var(--ink-3); font-size: 12px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.intel-metrics span { display: inline-flex; align-items: center; gap: 4px; background: var(--glass-hi); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.intel-metrics b { color: var(--ink); font-weight: 600; font-family: var(--mono); }

/* ---------- 页脚 ---------- */
.footer { max-width: 1240px; margin: 72px auto 0; padding: 26px 28px 40px; color: var(--ink-3); font-size: 12.5px; border-top: 1px solid var(--line); line-height: 1.7; }
.footer .dim { color: var(--ink-3); margin-top: 6px; }

/* ---------- 弹窗 ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.modal-backdrop[hidden] { display: none !important; }
.modal { width: 100%; max-width: 430px; padding: 28px; position: relative; max-height: 88vh; overflow-y: auto; }
.modal-close {
  position: absolute; top: 12px; right: 14px; border: 0; background: transparent; color: var(--ink-3);
  font-size: 19px; cursor: pointer; line-height: 1; padding: 2px;
}
.modal-close:hover { color: var(--ink); }
.modal-tabs { display: flex; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; margin-bottom: 20px; background: rgba(255, 255, 255, .03); }
.modal-tab { flex: 1; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-weight: 500; font-size: 14px; padding: 9px; cursor: pointer; }
.modal-tab.active { background: var(--accent); color: #fff; font-weight: 600; }
.modal label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 15px; }
.modal input {
  display: block; width: 100%; margin-top: 6px; padding: 11px 13px; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .045); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 400; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.modal input::placeholder { color: var(--ink-3); }
.modal input:focus { border-color: rgba(255, 255, 255, .32); box-shadow: 0 0 0 3px rgba(255, 255, 255, .07); }
.form-error { color: var(--red); font-size: 13.5px; margin-bottom: 12px; }
.form-hint { color: var(--ink-3); font-size: 12.5px; margin-top: 14px; text-align: center; line-height: 1.7; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 120;
  background: rgba(23, 24, 26, .96); border: 1px solid rgba(255, 255, 255, .12); color: var(--ink);
  padding: 11px 20px; border-radius: var(--r-md); font-size: 13.5px; font-weight: 500;
  box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px); text-align: center;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1020px) {
  .reco-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .module-grid, .member-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .reco-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  /* 移动端顶栏：两行收成一个紧凑整体——品牌行压紧，页签行等分分段、细线分隔 */
  .nav-inner { flex-wrap: wrap; padding: 8px 0 0; gap: 8px 10px; }
  .brand { gap: 8px; margin-left: 14px; }
  .brand-mark, .brand-mark img { width: 28px; height: 28px; }
  .brand-text strong { font-size: 15px; }
  .brand-text small { display: none; }
  .auth-area { margin-left: auto; margin-right: 14px; gap: 2px; }
  .auth-area .btn { padding: 7px 13px; font-size: 13.5px; border-radius: 8px; }
  .auth-area .btn.ghost { padding: 7px 8px; }
  .tabs { order: 3; width: 100%; margin: 2px 0 0; padding: 6px 10px 8px; gap: 4px; border-top: 1px solid var(--line); }
  .tabs .tab { flex: 1 1 0; text-align: center; padding: 7px 2px; font-size: 13.5px; border-radius: 8px; }
  .wrap { padding: 0 16px 32px; }
  .footer { padding: 26px 16px 40px; }
}
@media (max-width: 760px) {
  .demo-split { grid-template-columns: 1fr; min-height: 0; }
  .demo-list { border-right: 0; }
  /* 手机端演示窗口只保留价格列表：右侧详情区不渲染占高（与预览版同口径） */
  .demo-preview { display: none; }
  .demo .win-bar { padding: 9px 12px; }
  .demo-search { margin: 10px 12px 2px; padding: 9px 12px; font-size: 13.5px; }
  .demo-list { padding: 6px 6px 8px; }
  .demo-list .drow { padding: 7px 8px; gap: 9px; }
  .demo-list .drow .dp b { font-size: 15px; }
  #demoApiList .drow:nth-child(n+5), #demoVipList .drow:nth-child(n+5) { display: none; }
  .demo .win-foot { padding: 8px 12px; font-size: 11.5px; }
  .demo-dockwrap { margin-top: 18px; }
  .demo-head { margin-top: 20px; font-size: 23px; line-height: 1.4; }
  .demo-cta { margin-top: 16px; }
  .demo { margin-top: 44px; }
}
@media (max-width: 720px) {
  .stat-band { grid-template-columns: 1fr 1fr; gap: 28px 20px; margin-top: 40px; }
}
@media (max-width: 640px) {
  .hero { padding: 64px 0 12px; }
  .hero-art { top: -70px; bottom: -110px; }
  .hero h1 .h1-main { font-size: clamp(40px, 12.5vw, 56px); }
  .hero p.lede { font-size: 15px; margin-bottom: 30px; }
  .hero-kicker { font-size: 10.5px; letter-spacing: .26em; margin-bottom: 24px; }
  .hero-kicker::before, .hero-kicker::after { width: 22px; }
  .hero-visual { margin-top: 52px; }
  .reco-head { padding: 14px 14px 2px; }
  .reco-grid { gap: 10px; padding: 12px 14px 14px; }
  .reco-card { padding: 13px; }
  .reco-price { font-size: 23px; }
  .reco-name { font-size: 13.5px; }
  .dock-tile { width: 58px; height: 58px; border-radius: 16px; }
  .dock-tile svg { width: 24px; height: 24px; }
  .dock-tile.is-on { width: 68px; height: 68px; }
  .dock-tile.is-on svg { width: 27px; height: 27px; }
  .demo-dock { gap: 10px; padding: 12px; border-radius: 24px; }
  .module-grid, .member-grid { grid-template-columns: 1fr; }
  .section-title { margin-top: 52px; }
  .pill-btn { padding: 12px 22px; font-size: 14px; }
}
@media (max-width: 400px) {
  .reco-grid { grid-template-columns: 1fr; }
}

/* ---------- 减动效：停掉呼吸/漂移/轮换，演示三块静态纵排，内容一条不少 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .demo-panes { display: block; }
  .demo-pane { opacity: 1 !important; visibility: visible !important; transition: none !important; margin-bottom: 20px; }
  .demo-pane:last-child { margin-bottom: 0; }
  .caret { animation: none !important; }
  .demo-head { transition: none !important; }
}

/* ---------- 预览版首页专属区块（自预览版定版整段搬入：顶条 / 品牌墙 / 三大模块大视觉） ---------- */
.top-strip { height: 10px; border-bottom: 1px solid var(--line); background: rgba(7, 8, 10, .6); }
.btn.big { padding: 12px 26px; font-size: 15px; border-radius: 8px; }

/* 品牌 Logo 墙：错落散布（居中流式换行、大间距漫布，非栅格） */
.logo-band { position: relative; z-index: 3; margin: 52px auto 0; max-width: 1060px; }
.logo-track { display: block; }
.logo-group { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px 52px; }
.logo-item { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13.5px; font-weight: 500; white-space: nowrap; opacity: .78; }
.logo-item img { width: 20px; height: 20px; flex: none; }
@media (max-width: 640px) {
  .logo-band { margin-top: 38px; }
  .logo-group { gap: 26px 34px; }
  .logo-item { font-size: 12px; gap: 6px; }
  .logo-item img { width: 17px; height: 17px; }
}

/* 三个模块入口：大视觉区块，一屏一个焦点 */
.features { max-width: 1080px; margin: 150px auto 0; display: flex; flex-direction: column; gap: 150px; text-align: left; }
@media (max-width: 640px) { .features { gap: 96px; margin-top: 104px; } }
.feature { display: grid; grid-template-columns: 1.18fr .82fr; gap: 60px; align-items: center; }
.feature.flip .f-visual { order: 2; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; gap: 30px; } .feature.flip .f-visual { order: 0; } }
.f-visual { position: relative; z-index: 3; }
.f-visual::before {
  content: ""; position: absolute; inset: 16% -8% -10%; pointer-events: none;
  background: radial-gradient(52% 62% at 50% 50%, rgba(255, 99, 99, .10), transparent 70%);
}
.f-photo { position: relative; width: 100%; height: 350px; object-fit: cover; display: block; border-radius: var(--r-lg); border: 1px solid var(--line-strong); box-shadow: var(--hl), 0 32px 72px rgba(0, 0, 0, .55); }
@media (max-width: 640px) { .f-photo { height: 230px; } }
.f-badge {
  position: absolute; left: 16px; bottom: 16px; z-index: 2; font-size: 12px; font-weight: 600; color: var(--ink);
  background: rgba(14, 15, 16, .82); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 11px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.features .f-text { position: relative; z-index: 3; }
.feature h3 { font-size: clamp(27px, 3.4vw, 38px); font-weight: 700; margin: 0 0 20px; line-height: 1.35; letter-spacing: -.01em; }
.feature p { margin: 0 0 22px; color: var(--ink-2); font-size: 15px; line-height: 1.85; max-width: 400px; }

/* ---------- 移动端修正：触屏常驻提示条不压字（卡片底部预留提示条高度） ---------- */
@media (hover: none) {
  .reco-card.reco-card--buy, .member-card.member-card--buy, .intel-card.intel-card--buy { padding-bottom: 48px; }
}

/* ---------- 全量分类/检索补全 ---------- */
.more-row { display: flex; justify-content: center; margin-top: 16px; }
.member-card.noprice { opacity: .62; }
.noprice-line { margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; }
.chip-row.sub { margin-top: -6px; }
.chip-row.sub .chip { font-size: 12.5px; padding: 5px 10px; }
.chip-row.sub:empty { display: none; }
.chip.more { border-style: dashed; color: var(--ink-2); }
@media (max-width: 640px) {
  .chip { font-size: 13px; padding: 6px 11px; }
  .chip .cnt { font-size: 11px; margin-left: 4px; }
  .chip-row { gap: 6px; margin: 14px 0 10px; }
}