/* ==========================================================================
   火种集 · 低投资创业想法库
   设计令牌 → 基础排版 → 顶部导航 → Hero → 筛选器 → 卡片网格 → 详情弹窗 → 页脚 → 响应式
   ========================================================================== */

:root {
  /* 品牌与语义色 */
  --brand:        #FF6A1F;
  --brand-dark:   #D9500A;
  --brand-soft:   #FFF1E8;
  --ink:          #17140F;
  --ink-2:        #4A443C;
  --muted:        #867D72;
  --bg:           #FAF8F5;
  --card:         #FFFFFF;
  --line:         #EAE4DC;
  --line-strong:  #DCD4C9;
  --dark:         #16130F;
  --dark-2:       #221D17;

  /* 形状与阴影 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --sh-1: 0 1px 2px rgba(23, 20, 15, .05), 0 1px 3px rgba(23, 20, 15, .04);
  --sh-2: 0 4px 12px rgba(23, 20, 15, .07), 0 2px 4px rgba(23, 20, 15, .04);
  --sh-3: 0 18px 40px -12px rgba(23, 20, 15, .22), 0 6px 16px -8px rgba(23, 20, 15, .12);
  --sh-brand: 0 10px 30px -10px rgba(255, 106, 31, .55);

  /* 版式 */
  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB",
          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", system-ui, sans-serif;
  --maxw: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
p { margin: 0; }
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

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

/* ---------------------------------------------------------------- 顶部导航 */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 248, 245, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav-in {
  display: flex; align-items: center; gap: 16px;
  height: 62px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(145deg, #FFB703, var(--brand) 55%, var(--brand-dark));
  box-shadow: var(--sh-brand);
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
}
.brand-sub {
  font-size: 11.5px; font-weight: 500; color: var(--muted);
  padding-left: 11px; margin-left: 2px; border-left: 1px solid var(--line-strong);
  letter-spacing: 0;
}
.nav-spacer { flex: 1; }
.nav-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nav-count b { color: var(--ink); font-weight: 700; }

.btn-saved {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--card); font-size: 13.5px; font-weight: 600;
  transition: all .2s var(--ease);
}
.btn-saved:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-saved[aria-pressed="true"] {
  background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark);
}
.btn-saved .n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.btn-saved .n[hidden] { display: none; }

/* --------------------------------------------------------------------- Hero */

.hero {
  position: relative; overflow: hidden;
  background: var(--dark);
  color: #FFF6EE;
  padding: 72px 0 84px;
  margin-bottom: -34px;
}
.hero::before {
  content: ''; position: absolute; inset: -40% -10% auto -10%; height: 150%;
  background:
    radial-gradient(46% 58% at 18% 12%, rgba(255, 106, 31, .40), transparent 68%),
    radial-gradient(40% 52% at 84% 4%,  rgba(255, 183, 3, .26), transparent 66%),
    radial-gradient(52% 60% at 62% 96%, rgba(217, 80, 10, .30), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  pointer-events: none;
}
.hero-in { position: relative; z-index: 2; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: #FFD9BE;
  backdrop-filter: blur(6px);
}
.hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #34D399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .22);
}
.hero h1 {
  margin: 20px 0 0;
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.16;
  max-width: 26ch;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(96deg, #FFB703 6%, #FF8A3D 48%, #FF6A1F 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero p.lead {
  margin-top: 18px; max-width: 56ch;
  font-size: clamp(14.5px, 1.5vw, 17px); line-height: 1.75;
  color: rgba(255, 246, 238, .74);
}

/* 搜索框 */
.searchbar {
  margin-top: 30px; max-width: 620px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.searchbar:focus-within {
  border-color: rgba(255, 138, 61, .85);
  background: rgba(255, 255, 255, .11);
  box-shadow: 0 0 0 4px rgba(255, 106, 31, .16);
}
.searchbar svg { flex: none; opacity: .5; }
.searchbar input {
  flex: 1; min-width: 0; height: 40px;
  background: none; border: none; outline: none;
  color: #FFF6EE; font-size: 15px;
}
.searchbar input::placeholder { color: rgba(255, 246, 238, .42); }
.searchbar .kbd {
  flex: none; margin-right: 8px; padding: 3px 8px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 11px; color: rgba(255, 246, 238, .5); font-weight: 600;
}

/* Hero 统计 */
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 12px 34px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.hero-stat .v {
  font-family: var(--font-num);
  font-size: 27px; font-weight: 800; letter-spacing: -.03em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.hero-stat .v small { font-size: 14px; font-weight: 700; opacity: .72; margin-left: 2px; }
.hero-stat .k { font-size: 12.5px; color: rgba(255, 246, 238, .55); margin-top: 1px; }

/* ------------------------------------------------------------------ 工具栏 */

.toolbar {
  position: sticky; top: 62px; z-index: 50;
  background: rgba(250, 248, 245, .9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  margin-bottom: 30px;
}
.chips {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 2px; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 33px; padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
  transition: all .18s var(--ease);
}
.chip:hover { border-color: var(--ink-2); color: var(--ink); transform: translateY(-1px); }
.chip .ic { font-size: 13px; line-height: 1; }
.chip .ct {
  font-size: 11px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; padding-left: 1px;
}
.chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.chip[aria-pressed="true"] .ct { color: rgba(255, 255, 255, .6); }
.chip.dot-cat[aria-pressed="true"] {
  background: var(--c); border-color: var(--c); color: #fff;
  box-shadow: 0 6px 16px -8px var(--c);
}

.toolbar-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px;
}
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: #F1EDE7; border-radius: 999px;
}
.seg button {
  height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  transition: all .18s var(--ease); white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--card); color: var(--ink);
  box-shadow: var(--sh-1);
}
.toolbar .spacer { flex: 1; }
.result-count {
  font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.result-count b { color: var(--ink); font-weight: 700; }

select.sort {
  height: 34px; padding: 0 30px 0 12px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--card) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23867D72' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  appearance: none; -webkit-appearance: none; outline: none; cursor: pointer;
}
select.sort:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.btn-reset {
  height: 34px; padding: 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  border: 1px dashed var(--line-strong); background: transparent;
  transition: all .18s var(--ease);
}
.btn-reset:hover { color: var(--brand-dark); border-color: var(--brand); border-style: solid; }

/* ------------------------------------------------------------------ 卡片网格 */

.grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
  padding-bottom: 80px;
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 20px 16px;
  box-shadow: var(--sh-1);
  cursor: pointer;
  overflow: hidden;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--c);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: transparent;
}
.card:hover::before { transform: scaleX(1); }
.card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 23px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--c); background: color-mix(in srgb, var(--c) 11%, #fff);
  white-space: nowrap;
}
.pill-hot {
  color: #B45309; background: linear-gradient(135deg, #FFF4D6, #FFE7B0);
}
@supports not (background: color-mix(in srgb, red 10%, #fff)) {
  .pill { background: #F4F1EC; }
}
.card-top .spacer { flex: 1; }

.fav {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--line-strong);
  transition: all .2s var(--ease);
}
.fav:hover { background: var(--brand-soft); color: var(--brand); }
.fav svg { transition: transform .2s var(--ease); }
.fav:hover svg { transform: scale(1.14); }
.fav[aria-pressed="true"] { color: var(--brand); }
.fav[aria-pressed="true"] svg { fill: currentColor; }

.card h3 {
  font-size: 17.5px; font-weight: 700; letter-spacing: -.015em;
  line-height: 1.4; margin-bottom: 7px;
}

mark {
  background: linear-gradient(180deg, transparent 58%, #FFE0A3 58%);
  color: inherit; padding: 0 1px; border-radius: 2px;
}
.card .tagline {
  font-size: 13.5px; color: var(--muted); line-height: 1.62;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 44px;
}

.meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 15px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--line);
}
.meta div { min-width: 0; }
.meta .k { font-size: 10.5px; color: var(--muted); letter-spacing: .03em; }
.meta .v {
  font-family: var(--font-num);
  font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meta .v.rev { color: #0F9D58; }

.tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 13px;
}
.tag {
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: #F5F2ED; border-radius: 5px; padding: 3px 7px;
  white-space: nowrap;
}

.card-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.diff { display: inline-flex; align-items: center; gap: 5px; }
.diff .bars { display: inline-flex; gap: 2px; }
.diff .bars i {
  width: 3px; height: 11px; border-radius: 1.5px; background: var(--line-strong);
  display: block;
}
.diff .bars i.on { background: var(--brand); }
.card-foot .spacer { flex: 1; }
.card-foot .more { font-weight: 700; color: var(--brand-dark); font-size: 12.5px; }
.card:hover .card-foot .more { text-decoration: underline; }

/* 空状态 */
.empty {
  grid-column: 1 / -1;
  text-align: center; padding: 90px 20px 110px;
}
.empty .ic { font-size: 46px; line-height: 1; opacity: .35; }
.empty h3 { margin: 18px 0 8px; font-size: 18px; }
.empty p { color: var(--muted); font-size: 14px; margin-bottom: 20px; }

/* ------------------------------------------------------------------ 详情弹窗 */

dialog.detail {
  width: min(760px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0; border: none; border-radius: var(--r-xl);
  background: var(--card); color: var(--ink);
  box-shadow: 0 40px 90px -20px rgba(23, 20, 15, .45);
  overflow: hidden;
}
dialog.detail::backdrop {
  background: rgba(23, 20, 15, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
dialog.detail[open] { animation: pop .28s var(--ease); }
@keyframes pop {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.d-head {
  position: relative;
  padding: 26px 28px 22px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 13%, #fff), #fff 78%);
  border-bottom: 1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 10%, #fff)) {
  .d-head { background: #FBF8F4; }
}
.d-head .bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--c); }
.d-head .row { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; }
.d-close {
  position: absolute; top: 18px; right: 18px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: var(--muted);
  background: rgba(255, 255, 255, .7); border: 1px solid var(--line);
  transition: all .18s var(--ease);
}
.d-close:hover { background: #fff; color: var(--ink); transform: rotate(90deg); }
.d-head h2 { font-size: clamp(20px, 2.4vw, 25px); letter-spacing: -.025em; padding-right: 40px; }
.d-head .tagline { margin-top: 9px; font-size: 14.5px; color: var(--ink-2); line-height: 1.65; }

.d-body { padding: 22px 28px 28px; overflow-y: auto; max-height: calc(88vh - 190px); }

.facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 26px;
}
.fact {
  background: #FAF8F5; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 13px;
}
.fact .k { font-size: 10.5px; color: var(--muted); letter-spacing: .03em; margin-bottom: 3px; }
.fact .v {
  font-family: var(--font-num); font-size: 16px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.25;
}
.fact .v.green { color: #0F9D58; }

.scores { margin-bottom: 26px; display: grid; gap: 9px; }
.score { display: grid; grid-template-columns: 68px 1fr 26px; align-items: center; gap: 11px; }
.score .k { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.score .track { height: 7px; border-radius: 4px; background: #F1EDE7; overflow: hidden; }
.score .fill {
  display: block;                 /* span 默认是行内元素，必须块级化，否则宽高和 transform 都不生效 */
  height: 100%; border-radius: 4px; background: var(--c);
  transform-origin: left; animation: grow .55s var(--ease) both;
}
@keyframes grow { from { transform: scaleX(0); } }
.score .n {
  font-family: var(--font-num); font-size: 12.5px; font-weight: 800;
  color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums;
}

.sec { margin-bottom: 24px; }
.sec:last-child { margin-bottom: 0; }
.sec-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  color: var(--ink); text-transform: uppercase;
  margin-bottom: 11px;
}
.sec-h::before {
  content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--c);
}
.sec p { font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 10px; }
.steps li {
  position: relative; counter-increment: s;
  padding: 12px 14px 12px 46px;
  background: #FAF8F5; border-radius: var(--r-md);
  font-size: 14px; line-height: 1.7; color: var(--ink-2);
  border: 1px solid var(--line);
}
.steps li::before {
  content: counter(s);
  position: absolute; left: 13px; top: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c); color: #fff;
  font-family: var(--font-num); font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
}

.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bullets li {
  position: relative; padding-left: 22px;
  font-size: 14.5px; line-height: 1.75; color: var(--ink-2);
}
.bullets li::before {
  content: ''; position: absolute; left: 6px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c);
}
.bullets.warn li::before {
  background: none; content: '!';
  left: 3px; top: 3px; width: 15px; height: 15px;
  border-radius: 4px; background: #FEF3C7; color: #B45309;
  font-size: 11px; font-weight: 900; display: grid; place-items: center;
  line-height: 1;
}
.bullets.warn li { padding-left: 25px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }

.d-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 28px;
  border-top: 1px solid var(--line);
  background: #FCFBF9;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 13.5px; font-weight: 700;
  transition: all .2s var(--ease);
}
.btn-primary:hover { background: var(--brand); box-shadow: var(--sh-brand); }
.btn-primary[aria-pressed="true"] { background: var(--brand); }
.btn-ghost {
  height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-strong); font-size: 13.5px; font-weight: 600;
  color: var(--ink-2); transition: all .2s var(--ease);
}
.btn-ghost:hover { border-color: var(--ink-2); color: var(--ink); }

/* ---------------------------------------------------------------------- 页脚 */

.foot {
  border-top: 1px solid var(--line);
  background: var(--card);
  padding: 44px 0 40px;
}
.foot-in { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
.foot-brand { flex: 1; min-width: 260px; }
.foot-brand p { margin-top: 10px; font-size: 13px; color: var(--muted); max-width: 46ch; line-height: 1.8; }
.foot h4 { font-size: 12px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin-bottom: 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { font-size: 13px; color: var(--ink-2); padding: 3px 0; }
.foot code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px; background: #F5F2ED; padding: 2px 6px; border-radius: 5px;
}
.copyright {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 10px;
}

/* ------------------------------------------------------------------ 响应式 */

/* 桌面宽屏：分类标签太多时改为换行显示，一次看全 12 个赛道 */
@media (min-width: 1120px) {
  .chips { flex-wrap: wrap; overflow: visible; }
  .toolbar .chips#cost-chips { flex-wrap: nowrap; }
}

@media (max-width: 860px) {
  .wrap { padding: 0 18px; }
  .hero { padding: 52px 0 60px; }
  .toolbar { top: 62px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .d-head, .d-body, .d-foot { padding-left: 20px; padding-right: 20px; }
  .d-body { max-height: calc(88vh - 200px); }
  dialog.detail { width: calc(100vw - 20px); max-height: 92vh; border-radius: 20px; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .brand-sub { display: none; }
  .nav-count { display: none; }
  .hero h1 { max-width: none; }
  .hero-stats { gap: 10px 22px; }
  .hero-stat .v { font-size: 22px; }
  .toolbar-row { gap: 8px; }
  .seg { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .score { grid-template-columns: 58px 1fr 22px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* 打印：给用户一份可带走的清单 */
@media print {
  .nav, .toolbar, .hero::before, .hero::after, .foot, .fav, .d-close, .d-foot,
  .tabbar, .sheet-wrap, .toasts { display: none !important; }
  .hero { background: #fff; color: #000; padding: 20px 0; margin: 0; }
  .hero h1 em { -webkit-text-fill-color: #000; color: #000; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* ==========================================================================
   App 模式：安全区、安装引导、底部操作栏、筛选面板、轻提示
   ========================================================================== */

:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --tabbar-h: 58px;
}

/* 触摸端不要高亮、不要双击缩放、不要长按弹菜单 */
button, .card, .chip, .tab, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.chip, .tab, .btn-saved, .btn-icon, .card h3, .card .tagline, .brand { -webkit-user-select: none; user-select: none; }

/* 刘海屏：顶部导航让出状态栏高度 */
.nav-in {
  height: auto;
  min-height: 62px;
  padding-top: var(--safe-t);
  padding-left: max(24px, var(--safe-l));
  padding-right: max(24px, var(--safe-r));
}
.toolbar { top: calc(62px + var(--safe-t)); }

/* 图标按钮与离线徽标 */
.btn-icon {
  flex: none; width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-2);
  transition: all .2s var(--ease);
}
.btn-icon:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-icon[hidden] { display: none; }

.net-badge {
  flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px;
  background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A;
}
.net-badge[hidden] { display: none; }

/* 已安装 / 全屏运行时，顶栏改为深色，与状态栏和 Hero 连成一片 */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .nav { background: rgba(22, 19, 15, .92); }
  .nav.is-stuck { border-bottom-color: rgba(255, 255, 255, .09); }
  .brand { color: #FFF6EE; }
  .brand-sub { color: rgba(255, 246, 238, .48); border-left-color: rgba(255, 255, 255, .16); }
  .nav-count { color: rgba(255, 246, 238, .62); }
  .nav-count b { color: #fff; }
  .btn-saved, .btn-icon {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .18);
    color: #FFF6EE;
  }
  .btn-saved:hover, .btn-icon:hover { border-color: var(--brand); color: #FFD9BE; }
  .btn-saved[aria-pressed="true"] {
    background: rgba(255, 106, 31, .24); border-color: var(--brand); color: #FFD9BE;
  }
  /* 已安装就别再提示安装了 */
  #install-btn { display: none !important; }
}

/* ---------------------------------------------------------- 底部操作栏 */

.tabbar { display: none; }

@media (max-width: 860px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: grid; grid-template-columns: repeat(3, 1fr);
    padding: 6px max(8px, var(--safe-l)) calc(6px + var(--safe-b)) max(8px, var(--safe-r));
    background: rgba(252, 251, 249, .94);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--line);
  }

  /* 手机上筛选和排序都收进底部面板了，顶部工具栏只留「找到 N 个想法」和清除按钮 */
  .toolbar { padding: 9px 0; }
  .toolbar .chips,
  .toolbar select.sort,
  .toolbar .spacer { display: none; }
  .toolbar-row { margin-top: 0; justify-content: space-between; }
  .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 46px; border-radius: 12px;
    color: var(--muted); font-size: 11px; font-weight: 600;
    transition: color .18s var(--ease), background .18s var(--ease);
  }
  .tab:active { background: rgba(23, 20, 15, .06); }
  .tab[aria-pressed="true"], .tab[aria-expanded="true"] { color: var(--brand-dark); }
  .tab[aria-pressed="true"] svg { fill: currentColor; }
  .tab-ic { position: relative; display: grid; place-items: center; }
  .tab .badge {
    position: absolute; top: -5px; right: -11px;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: var(--brand); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .tab .badge[hidden] { display: none; }

  /* 给底部栏和系统手势条留出空间 */
  body { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
  .grid { padding-bottom: 26px; }
  .foot { padding-bottom: calc(30px + var(--safe-b)); }
}

@media (min-width: 861px) {
  .tabbar, .sheet-wrap { display: none !important; }
}

/* ------------------------------------------------------------ 筛选面板 */

.sheet-wrap { position: fixed; inset: 0; z-index: 90; }
.sheet-wrap[hidden] { display: none; }

.sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(23, 20, 15, .46);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: sheetFade .22s var(--ease);
}
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  max-height: min(86vh, 760px);
  background: var(--card);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 50px -12px rgba(23, 20, 15, .3);
  padding-bottom: var(--safe-b);
  animation: sheetUp .3s var(--ease);
}
.sheet-wrap.closing .sheet-backdrop { animation: sheetFade .2s var(--ease) reverse; }
.sheet-wrap.closing .sheet { animation: sheetUp .22s var(--ease) reverse; }

@keyframes sheetFade { from { opacity: 0; } }
@keyframes sheetUp { from { transform: translateY(100%); } }

.sheet-grip {
  width: 40px; height: 4px; border-radius: 999px; background: var(--line-strong);
  margin: 9px auto 0; flex: none; cursor: grab;
}
.sheet-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px 14px; flex: none;
  border-bottom: 1px solid var(--line);
}
.sheet-head h2 { font-size: 16.5px; letter-spacing: -.015em; flex: 1; }
.sheet-head .d-close { position: static; background: #F5F2ED; }

.sheet-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px 8px;
}
.sheet-sec { margin-bottom: 24px; }
.sheet-sec:last-child { margin-bottom: 8px; }
.sheet-sec > h3 {
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--muted); text-transform: uppercase;
  margin-bottom: 11px;
}
.sheet-sec > h3 .hint {
  font-weight: 500; letter-spacing: 0; text-transform: none;
  font-size: 11.5px; color: var(--line-strong); margin-left: 5px;
}
.sheet-sec .chips { overflow: visible; flex-wrap: wrap; }
.sheet-sec .chip { height: 36px; padding: 0 14px; }

/* 排序：竖排选项，点一下即选，带对勾 */
.opt-list { display: grid; gap: 7px; }
.opt {
  display: flex; align-items: center; gap: 11px;
  min-height: 46px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: #FCFBF9; font-size: 14px; font-weight: 600; color: var(--ink-2);
  text-align: left; transition: all .18s var(--ease);
}
.opt .tick {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); flex: none;
  display: grid; place-items: center; color: transparent;
}
.opt[aria-pressed="true"] {
  border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark);
}
.opt[aria-pressed="true"] .tick {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

.sheet-foot {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 13px 20px 16px;
  border-top: 1px solid var(--line);
  background: #FCFBF9;
}
.sheet-foot .btn-ghost { flex: none; }
.sheet-foot .btn-primary { flex: 1; justify-content: center; }

/* 面板打开时锁住背景滚动 */
body.sheet-open { overflow: hidden; }

/* 搜索框被底部「搜索」按钮唤起的脉冲提示 */
.searchbar.nudge {
  border-color: #FF8A3D;
  animation: pulseGlow .9s var(--ease);
}
@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0 0 rgba(255, 106, 31, .55); }
  100% { box-shadow: 0 0 0 15px rgba(255, 106, 31, 0); }
}

/* -------------------------------------------------------------- 轻提示 */

.toasts {
  position: fixed; z-index: 95;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px);
  width: min(440px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 9px;
  pointer-events: none;
}
.toasts:empty { display: none; }

.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--ink); color: #FFF6EE;
  box-shadow: var(--sh-3);
  font-size: 13.5px; line-height: 1.5;
  animation: toastIn .3s var(--ease);
}
.toast.out { animation: toastIn .22s var(--ease) reverse forwards; }
.toast .msg { flex: 1; min-width: 0; }
.toast .msg b { color: #FFB703; }
.toast .act {
  flex: none; padding: 7px 13px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
}
.toast .act:hover { background: #FF8A3D; }
.toast .x {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: rgba(255, 246, 238, .55);
}
.toast .x:hover { background: rgba(255, 255, 255, .1); color: #fff; }

@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }

/* 桌面端的提示条浮在底部居中，不压到底部栏（桌面没有底部栏） */
@media (min-width: 861px) {
  .toasts { bottom: calc(18px + var(--safe-b)); }
}

/* ------------------------------------------- 手机端详情页改为整屏上滑 */

@media (max-width: 860px) {
  dialog.detail {
    width: 100vw; max-width: 100vw;
    height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0;
    padding-bottom: var(--safe-b);
  }
  dialog.detail[open] { display: flex; flex-direction: column; animation: sheetUp .30s var(--ease); }
  #d-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }

  dialog.detail .d-head { padding-top: calc(22px + var(--safe-t)); flex: none; }
  dialog.detail .d-body {
    flex: 1; min-height: 0; max-height: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  dialog.detail .d-foot { flex: none; }
  dialog.detail .d-close { top: calc(16px + var(--safe-t)); }
  dialog.detail .d-foot .btn-primary { flex: 1; justify-content: center; }

  /* 手机端卡片不再用 hover 抬升，改用按下反馈 */
  .card:hover { transform: none; box-shadow: var(--sh-1); border-color: var(--line); }
  .card:hover::before { transform: scaleX(0); }
  .card:active { transform: scale(.985); background: #FCFBF9; }
  .card:active::before { transform: scaleX(1); }
  .fav { width: 34px; height: 34px; }
}

/* 横屏手机：底部栏别占太多 */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  :root { --tabbar-h: 48px; }
  .tab { min-height: 40px; }
  .tab span:last-child { display: none; }
}