/* ==========================================================================
   北美万事屋 USWSW —— 品牌覆盖层
   方向：活力亲切（奶油黄 · 珊瑚橙 · 深棕），社区感与生活感优先。
   本文件在 anchanglu.css / portal.css / style.css 之后加载，只做两件事：
   1. 重映射设计令牌（换肤的主体，改这里即可影响全站组件）；
   2. 覆盖少数写死了深蓝渐变或白色文字的「深色面」组件（Hero / 顶栏 / 页脚 /
      频道栏 / 广告条），让它们跟随暖色体系。
   组件结构与类名完全沿用原主题，不新增模板依赖。
   ========================================================================== */

/* ---------- 1. 浅色令牌 ---------- */
:root {
  /* 结构棕：标题、链接、导航、主按钮（暖而不刺眼，替代原深蓝） */
  --brand-950: #2B1109;
  --brand-900: #3A1A0F;
  --brand-800: #4E2415;
  --brand-700: #6B3520;
  --brand-600: #8C4A2E;
  --brand-500: #B36A45;
  --brand-200: #F4D3BE;
  --brand-100: #FCE9DB;
  --brand-50: #FFF4EA;

  /* 行动珊瑚：CTA、悬停、强调（比原来的橙更柔、更「人情味」） */
  --accent-700: #B8371A;
  --accent-600: #DE4826;
  --accent-500: #F2542D;
  --accent-400: #FF7A52;
  --accent-100: #FFE7DE;
  --accent-50: #FFF3EE;

  /* 蜂蜜黄：荣誉、贴纸、徽标 */
  --gold-700: #B07A00;
  --gold-600: #E8A21A;
  --gold-400: #FFC857;
  --gold-100: #FFF3D6;

  /* 中性：把冷灰换成带暖调的米棕 */
  --ink-900: #24130B;
  --ink-800: #33200F;
  --ink-700: #4A3024;
  --ink-600: #66503F;
  --ink-500: #85705F;
  --ink-400: #A28F80;
  --ink-300: #C3B2A4;
  --line-strong: #E7D6C6;
  --line: #F0E2D4;
  --line-soft: #F7EDE3;
  --paper: #FFFFFF;
  --paper-2: #FFF9F1;
  --paper-3: #FCEFE1;

  /* 语义色：同样去冷，保留可读性 */
  --jade-700: #0F6B4F;
  --jade-600: #15805F;
  --jade-100: #E2F3EA;
  --danger-600: #C43A2B;
  --danger-100: #FCE9E4;
  --info-600: #1565A8;
  --info-100: #E7F1FB;

  /* 角色令牌：实心面与深色面统一走暖棕 / 珊瑚 */
  --brand-deep-950: #2B1109;
  --brand-deep-900: #3A1A0F;
  --brand-deep-800: #4E2415;
  --brand-deep-700: #6B3520;
  --brand-deep-600: #8C4A2E;
  --brand-surface: #4E2415;
  --brand-surface-hover: #6B3520;
  --brand-surface-fg: #FFF9F1;
  --brand-surface-fg-soft: #F4D3BE;
  --accent-surface-1: #FF7A52;
  --accent-surface-2: #E8441F;
  --jade-surface: #15805F;
  --jade-surface-hover: #0F6B4F;
  --danger-surface: #C43A2B;
  --gold-surface-1: #FFF0C8;
  --gold-surface-2: #FFC857;
  --gold-surface-fg: #3A1A0F;
  --gold-surface-fg-soft: #6B4400;
  --solid-ink: #33200F;
  --solid-ink-soft: #4A3024;
  --on-solid: #FFF9F1;
  --on-brand-soft: rgba(255, 249, 241, .9);
  --elevated: #FFFFFF;
  --elevated-blur: rgba(255, 253, 249, .97);
  --scrim-photo: rgba(255, 255, 255, .94);
  --overlay: rgba(43, 17, 9, .46);
  --tint-info-border: #CBE2F6;
  --tint-info-fg: #0F4F86;
  --tint-jade-border: #BFE3D3;
  --tint-danger-border: #F4CDC5;

  /* 圆角更圆、阴影更暖：这是「亲切感」的主要来源 */
  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --sh-1: 0 1px 2px rgba(74, 36, 21, .06), 0 1px 1px rgba(74, 36, 21, .04);
  --sh-2: 0 2px 10px rgba(74, 36, 21, .07), 0 1px 2px rgba(74, 36, 21, .04);
  --sh-3: 0 10px 26px rgba(74, 36, 21, .10), 0 2px 6px rgba(74, 36, 21, .05);
  --sh-4: 0 20px 50px rgba(43, 17, 9, .16);
  --sh-brand: 0 10px 24px rgba(78, 36, 21, .22);
  --sh-accent: 0 10px 24px rgba(242, 84, 45, .28);

  /* Hero 专用令牌：浅色与暗色只换这组值，组件规则写一次 */
  --hero-bg:
    radial-gradient(760px 420px at 88% -12%, rgba(255, 200, 87, .62), transparent 64%),
    radial-gradient(620px 380px at 6% 0%, rgba(242, 84, 45, .14), transparent 62%),
    linear-gradient(168deg, #FFFBF5 0%, #FDF1E4 52%, #FBE3D0 100%);
  --hero-ink: #2B1109;
  --hero-muted: #6B5445;
  --hero-accent: #DE4826;
  --hero-highlight: rgba(255, 200, 87, .68);
  --hero-dot: rgba(120, 72, 40, .10);
  --hero-eyebrow-bg: rgba(255, 255, 255, .76);
  --hero-eyebrow-border: rgba(242, 84, 45, .24);
  --hero-eyebrow-fg: #B8371A;
  --hero-aside-bg: #FFFFFF;
  --hero-aside-border: #F0E2D4;
  --hero-aside-shadow: 0 20px 46px rgba(74, 36, 21, .14);
  --hero-stat: #3A1A0F;
  --hero-stat-label: #85705F;
  --hero-list: #4A3024;

  /* 皮肤可复用的整块背景与光斑：浅色/暗色/各套皮肤只换这几个值 */
  --page-glow-1: rgba(255, 200, 87, .12);
  --page-glow-2: rgba(242, 84, 45, .05);
  --footer-bg: linear-gradient(160deg, #2B1109 0%, #3A1A0F 58%, #4E2415 100%);
  --rail-head-bg: linear-gradient(135deg, var(--gold-100), var(--paper-3));
  --rail-head-fg: var(--brand-900);
  --banner-glow: rgba(255, 200, 87, .24);
}

/* ---------- 2. 全局氛围 ---------- */
body {
  background-color: var(--paper-2);
  background-image:
    radial-gradient(900px 480px at 100% 0%, var(--page-glow-1), transparent 60%),
    radial-gradient(760px 420px at 0% 8%, var(--page-glow-2), transparent 58%);
  background-repeat: no-repeat;
}

::selection { background: var(--accent-100); color: var(--accent-700); }

:focus-visible { outline-color: var(--accent-500); }

h1, h2, h3, h4, h5 { color: var(--ink-900); }

/* ---------- 3. 顶栏与主导航 ---------- */
.topbar {
  background: linear-gradient(90deg, var(--brand-deep-950), var(--brand-deep-800));
  color: rgba(255, 249, 241, .76);
  font-size: 12.5px;
}
.topbar__links a { color: rgba(255, 249, 241, .78); }
.topbar__links a:hover { color: var(--gold-400); }
.topbar__note strong { color: var(--gold-400); }

.mainbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(74, 36, 21, .06);
}

.brand { gap: 11px; }
.brand__mark {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 5px 12px rgba(242, 84, 45, .28));
}
.brand__name {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  color: var(--brand-900);
  letter-spacing: .01em;
}
.brand__sub {
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: .02em;
  text-transform: none;
}

.mainnav__link { border-radius: var(--r-md); color: var(--ink-700); }
.mainnav__link:hover { background: var(--accent-50); color: var(--accent-700); }
.mainnav__link--active { color: var(--accent-700); }
.mainnav__link--active::after {
  height: 3px;
  left: 9px;
  right: 9px;
  background: linear-gradient(90deg, var(--accent-500), var(--gold-400));
  border-radius: var(--r-pill);
}
.mainnav__link--hot { color: var(--accent-600); }
.mainnav__link--hot:hover { background: var(--accent-50); color: var(--accent-700); }

.city-switch__btn {
  background: var(--paper-2);
  border-color: var(--line);
  border-radius: var(--r-md);
  color: var(--ink-700);
}
.city-switch__btn:hover { border-color: var(--accent-400); color: var(--accent-700); }
.city-switch__btn svg { color: var(--accent-500); }
.city-switch__panel { border-radius: var(--r-lg); box-shadow: var(--sh-4); }
.chip { border-radius: var(--r-pill); }
.chip:hover { border-color: var(--accent-400); color: var(--accent-700); }
.chip--active { background: var(--brand-surface); border-color: var(--brand-surface); color: var(--brand-surface-fg); }
.chip--active:hover { color: var(--brand-surface-fg); }

/* ---------- 4. 按钮 ---------- */
.btn { border-radius: var(--r-md); font-weight: 700; }
.btn--sm { border-radius: var(--r-sm); }
.btn--ghost:hover {
  border-color: var(--accent-400);
  color: var(--accent-700);
  background: var(--accent-50);
}
.btn--quiet { background: var(--accent-50); color: var(--accent-700); }
.btn--quiet:hover { background: var(--accent-100); color: var(--accent-700); }
.btn--link { color: var(--accent-600); }
.btn--link:hover { color: var(--accent-700); }

/* ---------- 5. Hero：奶油底 + 珊瑚 / 蜂蜜光斑 ---------- */
.hero {
  background: var(--hero-bg);
  color: var(--hero-ink);
}
.hero::after {
  opacity: 1;
  background-image: radial-gradient(var(--hero-dot) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .35) 62%, transparent 100%);
  mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .35) 62%, transparent 100%);
}

/* Hero 与其它区块共用容器内边距：原样式把左右内边距归零，
   会让首屏内容比下方栅格往左偏一个 gutter，窄屏直接贴边。 */
.hero__inner { padding-left: var(--gutter); padding-right: var(--gutter); }

.hero__eyebrow {
  background: var(--hero-eyebrow-bg);
  border-color: var(--hero-eyebrow-border);
  color: var(--hero-eyebrow-fg);
  box-shadow: var(--sh-1);
  backdrop-filter: blur(4px);
}
.hero__eyebrow svg { color: var(--accent-500); }

.hero h1 { color: var(--hero-ink); font-size: 42px; }
.hero h1 em {
  color: var(--hero-accent);
  padding: 0 .06em;
  background: linear-gradient(transparent 62%, var(--hero-highlight) 62%);
  border-radius: 4px;
}
.hero__lede { color: var(--hero-muted); }

.hero__stat strong { color: var(--hero-stat); }
.hero__stat span { color: var(--hero-stat-label); }

.hero__aside {
  padding: 24px;
  background: var(--hero-aside-bg);
  border: 1px solid var(--hero-aside-border);
  border-radius: var(--r-xl);
  box-shadow: var(--hero-aside-shadow);
  backdrop-filter: none;
}
/* 「3 分钟」贴纸：用伪元素，避免为装饰改模板 */
.hero__aside::before {
  content: "3 分钟";
  position: absolute;
  top: -12px;
  right: 20px;
  padding: 3px 13px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--gold-surface-fg);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: var(--sh-2);
}
.hero__aside { position: relative; }
.hero__aside h3 { color: var(--hero-ink); }
.hero__aside p { color: var(--hero-muted); }
.hero__aside-list li { color: var(--hero-list); }
.hero__aside-list svg { color: var(--accent-500); }

/* 搜索框：白色浮起卡片 */
.searchbox {
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 16px 40px rgba(74, 36, 21, .12);
}
.searchbox input,
.searchbox select {
  background: var(--paper-2);
  border-color: var(--line);
  border-radius: var(--r-md);
}
.searchbox input:focus,
.searchbox select:focus {
  border-color: var(--accent-500);
  background: var(--paper);
  box-shadow: 0 0 0 4px var(--accent-100);
}
.searchbox__submit { border-radius: var(--r-md); }
.searchbox__hot a { background: var(--paper-3); color: var(--ink-600); }
.searchbox__hot a:hover { background: var(--accent-100); color: var(--accent-700); }

/* ---------- 6. 信任条与区块标题 ---------- */
.trust-bar {
  background: var(--paper);
  border-top: 2px solid var(--gold-400);
  border-bottom: 1px solid var(--line);
}
.trust-bar__num { color: var(--accent-600); }
.trust-bar__label { color: var(--ink-500); }

.section-head__title h2::before {
  width: 6px;
  height: 22px;
  background: linear-gradient(180deg, var(--accent-500), var(--gold-400));
  border-radius: var(--r-pill);
}
.section-head__more { color: var(--accent-600); }
.section-head__more:hover { color: var(--accent-700); }

/* ---------- 7. 卡片与门户容器 ---------- */
.cat-card {
  border-radius: var(--r-lg);
  border-color: var(--line);
  box-shadow: var(--sh-1);
}
.cat-card:hover {
  border-color: var(--accent-400);
  box-shadow: var(--sh-3);
  transform: translateY(-3px);
}
.cat-card__icon {
  border-radius: var(--r-md);
  background: var(--accent-50);
  color: var(--accent-600);
}
.cat-card:hover .cat-card__icon { background: var(--accent-100); color: var(--accent-700); }

.listing-card {
  border-radius: var(--r-lg);
  border-color: var(--line);
  box-shadow: var(--sh-1);
}
.listing-card:hover { border-color: var(--accent-400); box-shadow: var(--sh-3); }
.listing-card--featured { border-color: var(--accent-400); box-shadow: 0 0 0 1px var(--accent-400), var(--sh-2); }
.listing-card__media { background: var(--paper-3); }
.listing-card__title a:hover { color: var(--accent-700); }
.listing-card__coupon { border-radius: var(--r-md); }
/* 底部两枚按钮：品类名占满剩余宽度并单行省略，「查看详情」保持自身宽度，
   避免长品类名把卡片撑破或把按钮挤成三行。 */
.listing-card__foot { flex-wrap: nowrap; }
.listing-card__foot .btn { min-width: 0; white-space: nowrap; }
.listing-card__foot .btn:first-child { flex: 1 1 auto; display: block; overflow: hidden; text-overflow: ellipsis; }
.listing-card__foot .btn:last-child { flex: 0 0 auto; }

.pblock { border-radius: var(--r-xl); border-color: var(--line); box-shadow: var(--sh-2); }
.panel { border-radius: var(--r-lg); }
.filter-panel { border-radius: var(--r-lg); }
.seo-block { border-radius: var(--r-xl); }

/* 频道定位栏：蜂蜜色栏头 + 珊瑚贴纸式 CTA */
.rail__card { border-radius: var(--r-lg); }
.rail__head {
  background: var(--rail-head-bg);
  color: var(--rail-head-fg);
}
.rail__head svg { color: var(--accent-600); }
.rail__link.is-active {
  background: var(--accent-50);
  border-left-color: var(--accent-500);
  color: var(--accent-700);
}
.rail__link.is-active .rail__icon { color: var(--accent-600); }
.rail__link.is-active .rail__count { background: var(--paper); color: var(--accent-700); }
.rail__card--cta {
  border-color: transparent;
  background: linear-gradient(150deg, var(--accent-surface-1), var(--accent-surface-2));
}
.rail__cta strong { color: #fff; }
.rail__cta p { color: rgba(255, 255, 255, .86); }

/* 门户其他卡片统一圆角 */
.tl-step__card,
.box-group,
.nw-item,
.scene-card,
.tool-card,
.evt-item { border-radius: var(--r-lg); border-color: var(--line); }
.tl-step__marker { background: var(--accent-surface-2); }
.tl-step__title a:hover,
.box-chip--live:hover,
.gl-list a:hover,
.nw-item__title a:hover,
.scene-card__title a:hover,
.tool-card__title a:hover { color: var(--accent-700); }
.gl-list a:hover { background: var(--accent-50); }
.nw-item__city { background: var(--accent-50); color: var(--accent-700); }

/* 广告条：跟随皮肤的深色面 + 角部光斑，比纯珊瑚更稳，也不与页脚撞色 */
.ad-banner {
  background-image:
    radial-gradient(420px 220px at 92% -10%, var(--banner-glow), transparent 66%),
    linear-gradient(120deg, var(--brand-deep-900), var(--brand-deep-700) 62%, var(--brand-deep-600));
  box-shadow: var(--sh-3);
}
.ad-banner__kicker { color: var(--gold-400); }

/* 工具页深色面跟着换暖棕 */
.tool-panel__head { background: linear-gradient(135deg, var(--brand-deep-900), var(--brand-deep-700)); }
.fx__out { background: linear-gradient(135deg, var(--brand-deep-900), var(--brand-deep-700)); }
.tool-panel__head .muted { color: rgba(255, 249, 241, .74); }

/* ---------- 8. 页脚 ---------- */
.site-footer {
  background: var(--footer-bg);
  color: rgba(255, 249, 241, .7);
}
.site-footer h3 { color: #FFF3E4; }
.site-footer a { color: rgba(255, 249, 241, .7); }
.site-footer a:hover { color: var(--gold-400); }
.site-footer__brand .brand__name { color: #FFF9F1; }
.site-footer__brand .brand__sub { color: rgba(255, 249, 241, .45); }
.site-footer__legal { border-top-color: rgba(255, 249, 241, .12); }
.site-footer__disclaimer { border-top-color: rgba(255, 249, 241, .1); }

/* ---------- 9. 暗色模式令牌（暖黑 espresso） ---------- */
html[data-theme="dark"] {
  color-scheme: dark;

  --ink-900: #FBEDE2;
  --ink-800: #F3DFD0;
  --ink-700: #E0C6B3;
  --ink-600: #C4A995;
  --ink-500: #A98F7C;
  --ink-400: #8E7565;
  --ink-300: #6E5749;
  --line-strong: #463026;
  --line: #38251C;
  --line-soft: #2C1C15;
  --paper: #1E1410;
  --paper-2: #150D0A;
  --paper-3: #2A1B14;

  --brand-900: #FFE9D8;
  --brand-800: #FFD6BE;
  --brand-700: #F5B695;
  --brand-600: #E89B78;
  --brand-500: #CE805C;
  --brand-200: #5A3727;
  --brand-100: #3D2419;
  --brand-50: #2B1811;

  --brand-surface: #7A3A22;
  --brand-surface-hover: #91462A;
  --brand-surface-fg: #FFF9F1;
  --brand-surface-fg-soft: rgba(255, 249, 241, .78);

  --accent-700: #FFB393;
  --accent-600: #FF9471;
  --accent-100: #3A1F14;
  --accent-50: #2A160F;
  --gold-700: #FFD88F;
  --gold-100: #3A2A10;
  --jade-700: #6FDDB0;
  --jade-600: #43C795;
  --jade-100: #16352A;
  --danger-600: #FF9B8C;
  --danger-100: #3D1C16;
  --info-600: #7BC5F0;
  --info-100: #14293A;

  --elevated: #251812;
  --elevated-blur: rgba(30, 20, 16, .94);
  --scrim-photo: rgba(30, 20, 16, .86);
  --overlay: rgba(0, 0, 0, .64);
  --solid-ink: #33200F;
  --solid-ink-soft: #4A3024;
  --tint-info-border: #1E3A4D;
  --tint-info-fg: #7BC5F0;
  --tint-jade-border: #235043;
  --tint-danger-border: #4A2620;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 2px 10px rgba(0, 0, 0, .45);
  --sh-3: 0 10px 26px rgba(0, 0, 0, .5);
  --sh-4: 0 20px 50px rgba(0, 0, 0, .6);

  --hero-bg:
    radial-gradient(720px 400px at 88% -12%, rgba(255, 200, 87, .16), transparent 64%),
    radial-gradient(600px 360px at 4% 0%, rgba(242, 84, 45, .22), transparent 62%),
    linear-gradient(165deg, #1A110D 0%, #241510 55%, #2E1A12 100%);
  --hero-ink: #FFF6EC;
  --hero-muted: #D9C2B0;
  --hero-accent: #FF9B78;
  --hero-highlight: rgba(255, 200, 87, .20);
  --hero-dot: rgba(255, 214, 180, .1);
  --hero-eyebrow-bg: rgba(255, 255, 255, .06);
  --hero-eyebrow-border: rgba(255, 200, 87, .28);
  --hero-eyebrow-fg: #FFD88F;
  --hero-aside-bg: #251812;
  --hero-aside-border: #3D2419;
  --hero-aside-shadow: 0 20px 46px rgba(0, 0, 0, .5);
  --hero-stat: #FFF0E2;
  --hero-stat-label: #B79C89;
  --hero-list: #E8D3C4;
  --page-glow-1: rgba(255, 200, 87, .05);
  --page-glow-2: rgba(242, 84, 45, .06);
  --footer-bg: linear-gradient(160deg, #2B1109 0%, #3A1A0F 58%, #4E2415 100%);
  --rail-head-bg: linear-gradient(135deg, #3A2418, #4A2C1A);
  --banner-glow: rgba(255, 200, 87, .16);
  --rail-head-fg: var(--gold-400);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;

    --ink-900: #FBEDE2;
    --ink-800: #F3DFD0;
    --ink-700: #E0C6B3;
    --ink-600: #C4A995;
    --ink-500: #A98F7C;
    --ink-400: #8E7565;
    --ink-300: #6E5749;
    --line-strong: #463026;
    --line: #38251C;
    --line-soft: #2C1C15;
    --paper: #1E1410;
    --paper-2: #150D0A;
    --paper-3: #2A1B14;

    --brand-900: #FFE9D8;
    --brand-800: #FFD6BE;
    --brand-700: #F5B695;
    --brand-600: #E89B78;
    --brand-500: #CE805C;
    --brand-200: #5A3727;
    --brand-100: #3D2419;
    --brand-50: #2B1811;

    --brand-surface: #7A3A22;
    --brand-surface-hover: #91462A;
    --brand-surface-fg: #FFF9F1;
    --brand-surface-fg-soft: rgba(255, 249, 241, .78);

    --accent-700: #FFB393;
    --accent-600: #FF9471;
    --accent-100: #3A1F14;
    --accent-50: #2A160F;
    --gold-700: #FFD88F;
    --gold-100: #3A2A10;
    --jade-700: #6FDDB0;
    --jade-600: #43C795;
    --jade-100: #16352A;
    --danger-600: #FF9B8C;
    --danger-100: #3D1C16;
    --info-600: #7BC5F0;
    --info-100: #14293A;

    --elevated: #251812;
    --elevated-blur: rgba(30, 20, 16, .94);
    --scrim-photo: rgba(30, 20, 16, .86);
    --overlay: rgba(0, 0, 0, .64);
    --solid-ink: #33200F;
    --solid-ink-soft: #4A3024;
    --tint-info-border: #1E3A4D;
    --tint-info-fg: #7BC5F0;
    --tint-jade-border: #235043;
    --tint-danger-border: #4A2620;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
    --sh-2: 0 2px 10px rgba(0, 0, 0, .45);
    --sh-3: 0 10px 26px rgba(0, 0, 0, .5);
    --sh-4: 0 20px 50px rgba(0, 0, 0, .6);

    --hero-bg:
      radial-gradient(720px 400px at 88% -12%, rgba(255, 200, 87, .16), transparent 64%),
      radial-gradient(600px 360px at 4% 0%, rgba(242, 84, 45, .22), transparent 62%),
      linear-gradient(165deg, #1A110D 0%, #241510 55%, #2E1A12 100%);
    --hero-ink: #FFF6EC;
    --hero-muted: #D9C2B0;
    --hero-accent: #FF9B78;
    --hero-highlight: rgba(255, 200, 87, .20);
    --hero-dot: rgba(255, 214, 180, .1);
    --hero-eyebrow-bg: rgba(255, 255, 255, .06);
    --hero-eyebrow-border: rgba(255, 200, 87, .28);
    --hero-eyebrow-fg: #FFD88F;
    --hero-aside-bg: #251812;
    --hero-aside-border: #3D2419;
    --hero-aside-shadow: 0 20px 46px rgba(0, 0, 0, .5);
    --hero-stat: #FFF0E2;
    --hero-stat-label: #B79C89;
    --hero-list: #E8D3C4;
    --page-glow-1: rgba(255, 200, 87, .05);
    --page-glow-2: rgba(242, 84, 45, .06);
    --footer-bg: linear-gradient(160deg, #2B1109 0%, #3A1A0F 58%, #4E2415 100%);
    --rail-head-bg: linear-gradient(135deg, #3A2418, #4A2C1A);
    --rail-head-fg: var(--gold-400);
  }
}

/* ---------- 10. 窄屏 ---------- */
@media (max-width: 900px) {
  .hero h1 { font-size: 34px; }
  .hero__eyebrow { font-size: 12px; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 29px; }
  /* 「先问万事屋」整体换行，避免只剩最后一个字掉到下一行 */
  .hero h1 em { display: inline-block; white-space: nowrap; }
  .hero__inner { padding-top: 38px; padding-bottom: 32px; }
  .searchbox { padding: 10px; border-radius: var(--r-lg); }
  .brand__mark { width: 38px; height: 38px; }
  .brand__name { font-size: 19px; }
  .brand__sub { font-size: 10px; }
  .pblock { border-radius: var(--r-lg); }
  .hero__aside::before { right: 14px; }
}