:root {
  color-scheme: light;
  --paper: #f4f6f8;
  --paper-deep: #e9edf1;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --ink: #1f2933;
  --ink-soft: #52606d;
  --ink-faint: #7b8794;
  --line: #e1e6eb;
  --line-strong: #c9d1d9;
  --accent: #e8653e;
  --accent-deep: #b94227;
  --accent-wash: #fce8e4;
  --navy: #26384a;
  --surface-deep: #26384a;
  --surface-deep-hover: #30495d;
  --ink-on-deep: #f4f7f9;
  --ink-on-deep-muted: #c6d0d9;
  --line-on-deep: rgba(232, 239, 244, .2);
  --accent-on-deep: #b94227;
  --ink-on-accent: #ffffff;
  --directory-glass-bg: rgba(246, 248, 250, .13);
  --directory-glass-border: rgba(255, 255, 255, .58);
  --directory-sidebar-border: rgba(91, 111, 132, .4);
  --directory-sidebar-shadow: 0 8px 26px rgba(18, 34, 54, .16), 0 2px 8px rgba(18, 34, 54, .08), inset 0 1px 0 rgba(255, 255, 255, .72);
  --directory-sidebar-hover-shadow: 0 10px 30px rgba(18, 34, 54, .2), 0 2px 10px rgba(18, 34, 54, .1), inset 0 1px 0 rgba(255, 255, 255, .78);
  --directory-glow-teal: rgba(112, 181, 194, .27);
  --directory-glow-accent: color-mix(in srgb, var(--accent) 17%, transparent);
  --directory-glow-blue: rgba(137, 157, 201, .22);
  --page-aurora-teal: rgba(74, 184, 199, .2);
  --page-aurora-violet: rgba(133, 126, 226, .13);
  --page-aurora-warm: rgba(245, 133, 102, .12);
  --page-aurora-blue: rgba(73, 132, 240, .24);
  --hero-glass-bg: rgba(236, 243, 253, .78);
  --hero-grid-line: rgba(69, 105, 168, .13);
  --hero-beam-soft: rgba(75, 126, 232, .28);
  --hero-beam-strong: rgba(60, 111, 230, .58);
  --header-glass: rgba(255, 255, 255, .62);
  --footer-glass: rgba(255, 255, 255, .56);
  --footer-glass-border: rgba(255, 255, 255, .78);
  --footer-canvas: #ffffff;
  --footer-ink: #253642;
  --footer-ink-muted: #53636e;
  --footer-laser-core: rgba(232, 101, 62, .3);
  --footer-laser-halo: rgba(232, 101, 62, .12);
  --shadow-soft: 0 16px 48px rgba(31, 41, 51, .07);
  --shadow-card: 0 3px 12px rgba(31, 41, 51, .06);
  --shadow-card-hover: 0 14px 30px rgba(31, 41, 51, .12), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 7%, transparent);
  --radius-card: 16px;
  --radius-pill: 999px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: Georgia, "Times New Roman", "Songti SC", serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #27343f;
  --paper-deep: #202b34;
  --surface: #31404c;
  --surface-strong: #394a57;
  --ink: #f2f5f7;
  --ink-soft: #c6d0d8;
  --ink-faint: #9aa8b3;
  --line: #465661;
  --line-strong: #61717c;
  --accent: #f27a65;
  --accent-deep: #ffb0a0;
  --accent-wash: #5a3733;
  --navy: #e9eef1;
  --surface-deep: #17232d;
  --surface-deep-hover: #22323f;
  --ink-on-deep: #f2f5f7;
  --ink-on-deep-muted: #bac7d1;
  --line-on-deep: #3f5260;
  --accent-on-deep: #ffb0a0;
  --ink-on-accent: #26343e;
  --directory-glass-bg: rgba(31, 43, 53, .18);
  --directory-glass-border: rgba(178, 197, 207, .2);
  --directory-sidebar-border: rgba(205, 221, 231, .4);
  --directory-sidebar-shadow: 0 8px 26px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .16);
  --directory-sidebar-hover-shadow: 0 10px 30px rgba(0, 0, 0, .38), 0 2px 10px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .2);
  --directory-glow-teal: rgba(71, 147, 158, .24);
  --directory-glow-accent: color-mix(in srgb, var(--accent) 16%, transparent);
  --directory-glow-blue: rgba(102, 124, 174, .2);
  --page-aurora-teal: rgba(54, 166, 180, .24);
  --page-aurora-violet: rgba(111, 100, 204, .19);
  --page-aurora-warm: rgba(242, 122, 101, .14);
  --page-aurora-blue: rgba(54, 119, 232, .28);
  --hero-glass-bg: rgba(25, 39, 53, .78);
  --hero-grid-line: rgba(160, 192, 234, .13);
  --hero-beam-soft: rgba(67, 116, 207, .3);
  --hero-beam-strong: rgba(76, 132, 245, .58);
  --header-glass: rgba(27, 41, 52, .76);
  --footer-glass: rgba(37, 52, 63, .62);
  --footer-glass-border: rgba(196, 214, 223, .28);
  --footer-ink: #f2f5f7;
  --footer-ink-muted: #c6d0d8;
  --shadow-soft: 0 16px 48px rgba(4, 10, 16, .22);
  --shadow-card: 0 5px 16px rgba(4, 10, 16, .18);
  --shadow-card-hover: 0 15px 32px rgba(4, 10, 16, .3), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 12%, transparent);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; transition: background-color .25s ease, color .25s ease; }
body.directory-page { position: relative; isolation: isolate; overflow-x: clip; background: var(--paper); }
body.directory-page { --header-glass: rgba(255, 255, 255, .24); }
:root[data-theme="dark"] body.directory-page { --header-glass: rgba(25, 39, 53, .32); }
body.directory-page::after { content: none; }
body.directory-page::before { position: fixed; inset: 0; z-index: -1; background:
    radial-gradient(ellipse 56% 40% at 6% -4%, var(--page-aurora-warm), transparent 82%),
    radial-gradient(ellipse 56% 40% at 6% -4%, var(--page-aurora-warm), transparent 82%),
    radial-gradient(ellipse 56% 40% at 6% -4%, var(--page-aurora-warm), transparent 82%),
    radial-gradient(ellipse 48% 40% at 100% 2%, var(--page-aurora-blue), transparent 80%),
    radial-gradient(ellipse 48% 40% at 100% 2%, var(--page-aurora-blue), transparent 80%),
    radial-gradient(ellipse 54% 42% at 96% 40%, var(--page-aurora-violet), transparent 82%),
    radial-gradient(ellipse 54% 42% at 96% 40%, var(--page-aurora-violet), transparent 82%),
    radial-gradient(ellipse 48% 40% at 0% 46%, var(--page-aurora-teal), transparent 82%),
    radial-gradient(ellipse 48% 40% at 0% 46%, var(--page-aurora-teal), transparent 82%),
    radial-gradient(ellipse 40% 32% at 26% 82%, var(--page-aurora-teal), transparent 80%),
    radial-gradient(ellipse 40% 32% at 26% 82%, var(--page-aurora-teal), transparent 80%),
    radial-gradient(ellipse 40% 32% at 78% 88%, var(--page-aurora-warm), transparent 80%),
    radial-gradient(ellipse 74% 42% at 50% 118%, var(--page-aurora-violet), transparent 82%);
  content: ""; filter: saturate(125%); pointer-events: none; }
@keyframes header-aurora-drift { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, 0, 0) scale(1.08); } }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, white); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 10px 14px; border-radius: 8px; background: var(--ink); color: var(--surface-strong); transition: top .2s ease; }
.skip-link:focus { top: 12px; }

svg { display: block; width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.topbar { position: sticky; top: 0; z-index: 30; isolation: isolate; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); background: var(--header-glass); box-shadow: 0 12px 36px rgba(25, 34, 42, .09), inset 0 1px 0 rgba(255, 255, 255, .62); -webkit-backdrop-filter: saturate(140%) blur(7px); backdrop-filter: saturate(140%) blur(7px); transition: background-color .24s ease, box-shadow .24s ease, border-color .24s ease; }
.topbar::before { position: absolute; inset: -115% 0; z-index: -1; background: radial-gradient(ellipse 32% 85% at 16% 50%, var(--page-aurora-teal), transparent 76%), radial-gradient(ellipse 34% 85% at 82% 50%, var(--page-aurora-violet), transparent 78%); content: ""; filter: blur(24px); opacity: .86; pointer-events: none; transform: translate3d(-2%, 0, 0); animation: header-aurora-drift 18s ease-in-out infinite alternate; transition: opacity .25s ease, filter .25s ease; }
.topbar::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--page-aurora-teal) 78%, white), color-mix(in srgb, var(--accent) 38%, white), color-mix(in srgb, var(--page-aurora-violet) 78%, white), transparent); content: ""; opacity: .8; pointer-events: none; }
.topbar:hover::before, .topbar:focus-within::before { filter: blur(20px); opacity: 1; }
.topbar-inner { display: flex; align-items: center; gap: 28px; width: min(1240px, calc(100% - 48px)); min-height: 76px; margin: 0 auto; }
body.directory-page .topbar { top: 7px; margin: 7px 8px 0; border: 1px solid color-mix(in srgb, var(--surface) 64%, transparent); border-radius: 16px; background-color: var(--header-glass); background-image: none; box-shadow: 0 8px 26px rgba(18, 34, 54, .16), 0 2px 8px rgba(18, 34, 54, .08); }
body.directory-page .topbar::before { display: none; }
body.directory-page .topbar::after { display: none; }
body.directory-page .topbar-inner { position: relative; z-index: 1; width: min(1680px, calc(100% - 40px)); min-height: 66px; gap: clamp(10px, 1.5vw, 24px); }
body.directory-page .topbar:hover, body.directory-page .topbar:focus-within { background-color: color-mix(in srgb, var(--header-glass) 82%, transparent); box-shadow: 0 10px 30px rgba(18, 34, 54, .2), 0 2px 10px rgba(18, 34, 54, .1); }
/* 宽屏品牌右移（用户红框示意）：品牌脱流绝对定位右移 156px 落到导航容器起点，topnav 等宽补偿保持导航与右侧图标不动；中窄屏不启用避免与导航内容重叠 */
@media (min-width: 1680px) {
  .topbar .brand { position: absolute; left: 156px; top: 50%; transform: translateY(-50%); }
  .topbar .topnav { padding-left: 156px; pointer-events: none; }
  .topnav-link { pointer-events: auto; }
}
/* 顶部标题栏沉浸态：未滚动且未停靠时透明，融进 hero 深空背景；滚动/停靠后恢复玻璃胶囊 */
body.directory-page { --topbar-h: 80px; }
body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled) { background-color: transparent; border-color: transparent; box-shadow: none; }
body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled):hover, body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled):focus-within { background-color: transparent; box-shadow: none; }
body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled) .brand-copy strong { background: linear-gradient(112deg, #ffffff 30%, #bcd4ff 68%, #8fb4ff 96%); -webkit-background-clip: text; background-clip: text; }
body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled) .topnav-link { color: rgba(224, 235, 255, .74); }
body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled) .topnav-link:hover { color: #ffffff; }
body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled) .topnav-link.is-active { color: #ffffff; }
body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled) .icon-button, body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled) .search-shortcut { color: rgba(224, 235, 255, .82); }
/* hero 深空背景上探到沉浸顶栏底下（负 margin 上移 + padding 补偿，内容位置不变） */
body.directory-page .hero { margin-top: calc(-1 * var(--topbar-h)); padding-top: var(--topbar-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 220px; }
body.directory-page .brand { min-width: 132px; gap: 10px; }
/* 品牌 logo 的细白描边 / 深色顶栏下的可辨识轮廓。
   用 SVG filter 的 feMorphology(dilate) 做**各向同性的 alpha 膨胀** —— 沿图案轮廓一次均匀外扩 1px。
   早先试过 8 个亚像素 drop-shadow 拼一圈，但每个方向的偏移都要各自过一遍抗锯齿栅格化，
   同一张图在不同方向的取整结果不同（左/上落成实心、右下斜笔几乎看不见），所以看起来宽窄不一；
   feMorphology 是单次形态学膨胀，方向和圆角一视同仁，四边宽度自然一致。
   filter 定义在 5 个页面的 body 顶部 <svg class="brand-outline-defs"> 里（index/detail/outbound/report/admin）。 */
.brand-outline-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.brand-mark { display: block; width: 48px; height: 48px; object-fit: contain; filter: url(#k1BrandOutline) drop-shadow(0 6px 14px color-mix(in srgb, #2563eb 38%, transparent)); transition: transform .22s ease, filter .22s ease; }
.brand:hover .brand-mark { transform: translateY(-2px) rotate(-4deg); filter: url(#k1BrandOutline) drop-shadow(0 10px 20px color-mix(in srgb, #2563eb 46%, transparent)); }
.brand-copy { display: grid; gap: 0; line-height: 1.25; }
.brand-copy strong { background: linear-gradient(112deg, var(--ink) 34%, var(--accent) 70%, var(--accent-deep) 96%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 33px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.brand-copy small { color: var(--ink-faint); font-size: 12.5px; letter-spacing: .02em; }
.topnav { display: flex; align-items: center; gap: 26px; margin-left: auto; color: var(--ink-soft); font-size: 13px; }
.topnav a { padding: 10px 0; transition: color .2s ease; }
.topnav a:hover { color: var(--accent-deep); }
body.directory-page .topnav { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: clamp(3px, 1vw, 16px); min-width: 0; margin: 0; overflow-x: auto; color: var(--ink-soft); font-size: 12px; scrollbar-width: none; }
body.directory-page .topnav::-webkit-scrollbar { display: none; }
body.directory-page .topnav-link { position: relative; display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 9px; border-radius: 10px; color: var(--ink-soft); white-space: nowrap; transition: color .2s ease, background-color .2s ease; }
body.directory-page .topnav-link:hover { color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 6%, transparent); }
body.directory-page .topnav-link.is-active { color: var(--accent-deep); }
body.directory-page .topnav-link::after { position: absolute; right: 10px; bottom: 1px; left: 10px; height: 2px; border-radius: 2px; background: var(--accent); content: ""; opacity: 0; transform: scaleX(.25); transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1); }
body.directory-page .topnav-link:hover::after { opacity: .42; transform: scaleX(.68); }
body.directory-page .topnav-link.is-active::after { opacity: 1; transform: scaleX(1); }
body.directory-page .topnav-icon, body.directory-page .topnav-search-icon { display: block; width: 16px; height: 16px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--topnav-icon-mask, url('./icons/lucide/search.svg')) center / contain no-repeat; mask: var(--topnav-icon-mask, url('./icons/lucide/search.svg')) center / contain no-repeat; }
body.directory-page .search-shortcut { flex: 0 0 40px; }
.top-actions { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
body.directory-page .top-actions { flex: 0 0 auto; gap: 6px; margin-left: 0; }
.icon-button, .outline-button, .dark-button, .text-button { min-height: 44px; border-radius: var(--radius-pill); transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.icon-button { display: grid; width: 44px; place-items: center; background: transparent; color: var(--ink-soft); }
.icon-button svg { width: 23px; height: 23px; }
.icon-button:hover { background: var(--paper-deep); color: var(--ink); box-shadow: 0 5px 16px rgba(25, 34, 42, .09); transform: translateY(-1px); }
.outline-button { padding: 0 15px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-size: 13px; }
.outline-button:hover { border-color: var(--accent); color: var(--accent-deep); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 16%, transparent); transform: translateY(-1px); }
.button-plus { margin-left: 5px; color: var(--accent); font-size: 18px; vertical-align: -1px; }
.weather-chip { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; padding: 0 13px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 62%, transparent); color: var(--ink-soft); cursor: default; user-select: none; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.weather-chip:hover { background: var(--paper-deep); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 70%, transparent); }
.weather-icon { display: block; width: 17px; height: 17px; flex: 0 0 auto; background: var(--accent); -webkit-mask: var(--weather-icon-mask, url('./icons/lucide/cloudy.svg')) center / contain no-repeat; mask: var(--weather-icon-mask, url('./icons/lucide/cloudy.svg')) center / contain no-repeat; }
.weather-chip strong { color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.weather-chip em { overflow: hidden; max-width: 110px; color: var(--ink-faint); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.weather-chip[aria-expanded="true"] { background: var(--paper-deep); color: var(--ink); }
.weather-pop { position: fixed; z-index: 60; width: 510px; max-width: calc(100vw - 16px); max-height: calc(100vh - 90px); overflow-y: auto; padding: 27px; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-soft); opacity: 0; transform: translateY(-6px) scale(.98); transition: opacity .18s ease, transform .18s ease; }
.weather-pop.is-open { opacity: 1; transform: none; }
.wp-now { display: flex; align-items: center; gap: 21px; }
.wp-icon { display: block; width: 69px; height: 69px; flex: 0 0 auto; background: var(--accent); -webkit-mask: var(--weather-icon-mask) center / contain no-repeat; mask: var(--weather-icon-mask) center / contain no-repeat; }
.wp-now-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.wp-now-main strong { font-size: 45px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.wp-now-main span { color: var(--ink-soft); font-size: 19px; }
.wp-now-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.wp-city-trigger { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: transparent; color: var(--accent-deep); font: inherit; font-weight: 600; cursor: pointer; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); transition: border-bottom-color .18s ease; }
.wp-city-trigger:hover { border-bottom-color: var(--accent); border-bottom-style: solid; }
.wp-city-trigger .wp-btn-ico { width: 15px; height: 15px; }
.wp-auto-chip { padding: 2px 9px; border: 1px dashed color-mix(in srgb, var(--line-strong) 72%, transparent); border-radius: var(--radius-pill); background: transparent; color: var(--ink-faint); font-size: 14px; font-family: inherit; cursor: pointer; transition: border-color .18s ease, color .18s ease; }
.wp-auto-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.wp-now-side { display: grid; gap: 4px; justify-items: end; color: var(--ink-faint); font-size: 18px; }
.wp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 21px; }
.wp-grid div { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-radius: 14px; background: var(--paper-deep); }
.wp-grid span { color: var(--ink-faint); font-size: 18px; }
.wp-grid strong { color: var(--ink); font-size: 19px; }
.wp-sub { margin-top: 21px; color: var(--ink-faint); font-size: 18px; }
.wp-hours { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-top: 9px; }
.wp-hour { display: grid; justify-items: center; gap: 6px; padding: 10px 0; border-radius: 14px; }
.wp-hour:hover { background: var(--paper-deep); }
.wp-hour span { color: var(--ink-faint); font-size: 16px; }
.wp-hour strong { font-size: 19px; }
.wp-icon-s { display: block; width: 25px; height: 25px; background: var(--ink-soft); -webkit-mask: var(--weather-icon-mask) center / contain no-repeat; mask: var(--weather-icon-mask) center / contain no-repeat; }
.wp-pop { color: var(--page-aurora-blue); font-size: 15px; font-weight: 600; }
.wp-days { display: grid; gap: 3px; margin-top: 9px; }
.wp-day { display: flex; align-items: center; gap: 15px; padding: 9px 12px; border-radius: 14px; }
.wp-day:hover { background: var(--paper-deep); }
.wp-day-label { width: 57px; color: var(--ink-soft); font-size: 18px; }
.wp-day-pop { width: 51px; color: var(--page-aurora-blue); font-size: 15px; font-weight: 600; }
.wp-day-range { display: flex; flex: 1; align-items: center; gap: 12px; }
.wp-day-range b { min-width: 39px; color: var(--ink); font-size: 18px; text-align: right; }
.wp-bar { position: relative; display: block; flex: 1; height: 6px; border-radius: 6px; background: var(--paper-deep); overflow: hidden; }
.wp-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: linear-gradient(90deg, #7cb7c4, var(--accent)); }
.wp-foot { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 21px; padding-top: 15px; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.wp-foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.wp-foot-note { color: var(--ink-faint); font-size: 16px; text-align: right; }
.wp-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34.5px; padding: 0 15px; border: 1px solid color-mix(in srgb, var(--line) 82%, transparent); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-soft); font-size: 16px; font-family: inherit; font-weight: 600; cursor: pointer; transition: border-color .18s ease, color .18s ease, background-color .18s ease; }
.wp-btn:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-wash); }
.wp-btn-ghost { border-style: dashed; color: var(--ink-faint); }
.wp-btn-ico { display: block; width: 17px; height: 17px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--weather-icon-mask) center / contain no-repeat; mask: var(--weather-icon-mask) center / contain no-repeat; }
.weather-icon.is-busy { animation: wp-pulse 1.1s ease-in-out infinite; }
@keyframes wp-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* 城市选择视图 */
.wp-city-menu { margin-top: 18px; }
.wp-city-menu > label { display: block; margin-bottom: 8px; color: var(--ink-soft); font-size: 14px; }
.wp-city-menu select { width: 100%; min-height: 48px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.wp-city-menu .choices { margin-bottom: 0; color: var(--ink); font-size: 16px; }
.wp-city-menu .choices__inner { min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-deep); font-size: 16px; }
.wp-city-menu .is-focused .choices__inner, .wp-city-menu .is-open .choices__inner { border-color: var(--accent); }
.wp-city-menu .choices__list--dropdown { z-index: 3; border-color: var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 28px #16243820; }
.wp-city-menu .choices__list--dropdown .choices__list { max-height: 200px; }
.wp-city-menu .choices__input { color: var(--ink); background: var(--surface); font-size: 16px; }
.wp-city-menu .choices__list--dropdown .choices__item--selectable.is-highlighted { background: var(--accent-wash); color: var(--accent-deep); }
.wp-city-menu .choices[data-type*=select-one]::after { border-top-color: var(--ink-soft); }
.wp-city-menu .choices[data-type*=select-one].is-open::after { border-bottom-color: var(--ink-soft); }
.wp-city-head { display: flex; align-items: center; gap: 12px; }
.wp-city-head strong { color: var(--ink); font-size: 21px; letter-spacing: -.01em; }
.wp-city-cur { margin-left: auto; color: var(--ink-faint); font-size: 16px; }
.wp-back { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--line) 82%, transparent); border-radius: 50%; background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: border-color .18s ease, color .18s ease; }
.wp-back:hover { border-color: var(--accent); color: var(--accent-deep); }
.wp-back .wp-btn-ico { transform: rotate(90deg); }
.wp-search { display: flex; align-items: center; gap: 10.5px; margin-top: 18px; padding: 0 16px; min-height: 48px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 14px; background: var(--paper-deep); transition: border-color .18s ease, background-color .18s ease; }
.wp-search:focus-within { border-color: color-mix(in srgb, var(--accent) 52%, transparent); background: var(--surface); }
.wp-search-ico { display: block; width: 19px; height: 19px; flex: 0 0 auto; background: var(--ink-faint); -webkit-mask: var(--weather-icon-mask) center / contain no-repeat; mask: var(--weather-icon-mask) center / contain no-repeat; }
.wp-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 18px; font-family: inherit; outline: none; }
.wp-search input::-webkit-search-cancel-button { cursor: pointer; }
.wp-quick-wrap { display: flex; align-items: flex-start; gap: 12px; margin-top: 15px; }
.wp-quick-label { flex: 0 0 auto; padding-top: 7px; color: var(--ink-faint); font-size: 16px; }
.wp-quick-list { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-quick { padding: 6px 13.5px; border: 1px solid color-mix(in srgb, var(--line) 82%, transparent); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-soft); font-size: 16px; font-family: inherit; cursor: pointer; transition: border-color .18s ease, color .18s ease, background-color .18s ease; }
.wp-quick:hover, .wp-quick.is-on { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-wash); }
.wp-city-list { display: grid; align-content: start; gap: 3px; margin-top: 15px; max-height: 288px; overflow-y: auto; overscroll-behavior: contain; }
.wp-city-item { display: flex; align-items: baseline; gap: 10.5px; padding: 12px 15px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; font-family: inherit; transition: background-color .16s ease; }
.wp-city-item:hover { background: var(--paper-deep); }
.wp-city-name { color: var(--ink); font-size: 18px; font-weight: 600; }
.wp-city-sub { overflow: hidden; color: var(--ink-faint); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.wp-city-hint { margin: 0; padding: 15px; color: var(--ink-faint); font-size: 16px; text-align: center; }
.wp-city-note { margin-top: 15px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); color: var(--ink-faint); font-size: 15px; line-height: 1.5; }
.topbar-search-slot { display: none; min-width: 0; overflow: visible; }
.topbar.has-docked-search .topbar-inner { gap: clamp(8px, 1.2vw, 14px); }
body.directory-page .topbar.has-docked-search .topnav, body.directory-page .topbar.has-docked-search .search-shortcut { display: none; }
body.directory-page .topbar.has-docked-search .brand { min-width: 0; }
.topbar.has-docked-search .topbar-search-slot { display: block; flex: 0 1 clamp(184px, 38vw, 500px); margin-left: auto; }
.topbar.has-docked-search .top-actions { flex: 0 0 auto; margin-left: 0; }
.mode-select { display: none; position: relative; flex: 0 0 auto; }
.mode-select-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--surface) 76%, transparent); color: var(--ink); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.mode-select-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.mode-select-chevron { width: 12px; height: 12px; background: var(--ink-faint); -webkit-mask: url('./icons/lucide/chevron-down.svg') center / contain no-repeat; mask: url('./icons/lucide/chevron-down.svg') center / contain no-repeat; transition: transform .2s ease; }
.mode-select.is-open .mode-select-chevron { transform: rotate(180deg); }
.mode-select-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 136px; margin: 0; padding: 5px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 16px 40px rgba(15, 24, 40, .16); }
.mode-select-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: 8px; color: var(--ink-soft); font-size: 13px; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.mode-select-option:hover { color: var(--ink); background: color-mix(in srgb, var(--page-aurora-blue) 14%, transparent); }
.mode-select-option.is-active { color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.mode-select-option.is-active::after { content: '✓'; font-size: 12px; }
.topbar.has-docked-search .mode-select { display: block; }
.topbar-search-slot .search-box { min-height: 46px; gap: 6px; padding: 0 6px 0 8px; border-radius: 12px; box-shadow: 0 5px 18px rgba(25, 34, 42, .08); }
.topbar-search-slot .search-box svg { width: 18px; height: 18px; }
.topbar-search-slot .search-box input { font-size: 13px; }
.topbar-search-slot .search-box kbd { display: none; }
.topbar-search-slot .search-submit { min-height: 36px; padding: 0 12px; border-radius: 9px; }
.hero-search-stage.search-is-docked .search-modes { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-5px); }
.search-modes { transition: opacity .2s ease, transform .24s ease, background-color .2s ease, visibility .2s ease; }
.search-dock-placeholder { width: 100%; flex: 0 0 auto; }

.hero { position: relative; display: grid; min-height: 460px; overflow: hidden; border-bottom: 0; background: transparent; transition: background-color .25s ease; }
.hero::before { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(var(--hero-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid-line) 1px, transparent 1px); background-size: 104px 52px; content: ""; opacity: .82; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, #000 0%, #000 48%, transparent 100%); mask-composite: intersect; }
body.directory-page .hero::before { display: none; }
.hero::after { display: none; }
/* hero 深空 + 旋转地球：纯 CSS 贴图循环（transform 合成层动画，零依赖） */
.hero { --hero-grid-line: rgba(255, 255, 255, .045); background: linear-gradient(180deg, #03050d 0%, #050a1a 26%, rgba(8, 18, 40, .9) 42%, rgba(8, 18, 40, .66) 58%, rgba(8, 18, 40, .45) 72%, rgba(8, 18, 40, .36) 86%, rgba(8, 18, 40, .32) 100%); }
.hero-space { position: absolute; inset: 0; z-index: 0; background: url("assets/stars.jpg?v=3") repeat; mix-blend-mode: screen; opacity: .95; -webkit-mask-image: linear-gradient(180deg, #000 26%, rgba(0, 0, 0, .62) 58%, rgba(0, 0, 0, .22) 82%, rgba(0, 0, 0, .06) 94%, transparent 100%); mask-image: linear-gradient(180deg, #000 26%, rgba(0, 0, 0, .62) 58%, rgba(0, 0, 0, .22) 82%, rgba(0, 0, 0, .06) 94%, transparent 100%); pointer-events: none; }
.hero-globe { --globe-size: 1560px; --globe-rise: 382px; position: absolute; top: calc(100% - var(--globe-rise)); left: 50%; z-index: 0; width: var(--globe-size); height: var(--globe-size); transform: translateX(-50%); -webkit-mask-image: linear-gradient(180deg, #000 40px, rgba(0, 0, 0, .6) calc(var(--globe-rise) * .4), rgba(0, 0, 0, .22) calc(var(--globe-rise) * .72), rgba(0, 0, 0, .05) calc(var(--globe-rise) * .92), transparent calc(var(--globe-rise) - 1px)); mask-image: linear-gradient(180deg, #000 40px, rgba(0, 0, 0, .6) calc(var(--globe-rise) * .4), rgba(0, 0, 0, .22) calc(var(--globe-rise) * .72), rgba(0, 0, 0, .05) calc(var(--globe-rise) * .92), transparent calc(var(--globe-rise) - 1px)); pointer-events: none; }
/* three.js 写实地球画布：铺满圆形容器，由 WebGPU/WebGL 输出球面光影 */
.hero-globe canvas { position: absolute; top: 50%; left: 50%; z-index: 0; display: block; width: 110%; height: 110%; transform: translate(-50%, -50%); }
/* 深空上的搜索组件对比度适配 */
.hero .search-modes { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero .search-mode { color: rgba(255, 255, 255, .72); }
.hero .search-mode:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.hero .search-mode.is-active { background: var(--accent); color: #fff; }
.hero .search-box { background: color-mix(in srgb, var(--surface) 90%, transparent); }
/* 白天主题：hero 由深空夜景切换为白昼天空（浅蓝渐变、无星空、日间配色地球），文字组件同步换深色 */
:root:not([data-theme="dark"]) .hero { background: linear-gradient(180deg, #d9e7fb 0%, #c7dcf6 32%, rgba(174, 203, 240, .55) 56%, rgba(196, 219, 245, .22) 80%, rgba(230, 240, 251, 0) 100%); }
:root:not([data-theme="dark"]) .hero-space { display: none; }
:root:not([data-theme="dark"]) .hero .search-modes { border-color: rgba(35, 66, 116, .18); background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root:not([data-theme="dark"]) .hero .search-mode { color: rgba(38, 58, 88, .74); }
:root:not([data-theme="dark"]) .hero .search-mode:hover { color: #16283f; background: rgba(255, 255, 255, .75); }
:root:not([data-theme="dark"]) .hero .search-mode.is-active { background: var(--accent); color: #fff; }
:root:not([data-theme="dark"]) body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled) .brand-copy strong { background: linear-gradient(112deg, #23364e 30%, #2f5fb8 68%, #274f9f 96%); -webkit-background-clip: text; background-clip: text; }
:root:not([data-theme="dark"]) body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled) .topnav-link { color: rgba(35, 56, 86, .74); }
:root:not([data-theme="dark"]) body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled) .topnav-link:hover, :root:not([data-theme="dark"]) body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled) .topnav-link.is-active { color: #16283f; }
:root:not([data-theme="dark"]) body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled) .icon-button, :root:not([data-theme="dark"]) body.directory-page .topbar:not(.has-docked-search):not(.is-scrolled) .search-shortcut { color: rgba(35, 56, 86, .82); }
@media (max-width: 760px) { .hero-globe { --globe-size: 920px; --globe-rise: 320px; } }
@keyframes hero-light-pass { from { transform: translate3d(-28%, 0, 0) skewX(-16deg); } to { transform: translate3d(42%, 0, 0) skewX(-16deg); } }
.hero-search-stage { position: relative; z-index: 1; width: min(780px, calc(100% - 48px)); margin: 0 auto; padding: 58px 0 55px; }
.search-modes { display: flex; justify-content: center; gap: 5px; margin-bottom: 14px; padding: 4px; border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--surface) 22%, transparent); box-shadow: 0 10px 32px rgba(25, 34, 42, .08), inset 0 1px 0 color-mix(in srgb, var(--surface) 42%, transparent); -webkit-backdrop-filter: blur(4px) saturate(125%); backdrop-filter: blur(4px) saturate(125%); }
/* 当前搜索引擎横版 logo：模式切换条左端，无边框直接展示 */
.search-mode-logo { display: grid; width: 122px; height: 44px; flex: 0 0 auto; place-items: center; margin-right: 6px; padding-right: 8px; border-right: 1px solid rgba(255, 255, 255, .16); }
.search-mode-logo img { height: 26px; width: auto; object-fit: contain; }
.search-logo-brand { padding: 3px 5px; border-radius: 8px 8px 8px 3px; background: linear-gradient(135deg, #ffa06b, #ff5a3c 55%, #e63b2e); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: -.04em; text-shadow: 0 1px 2px rgba(122, 40, 12, .35); }
.search-logo-icon { width: 20px; height: 20px; background: rgba(255, 255, 255, .85); -webkit-mask: var(--logo-mask) center / contain no-repeat; mask: var(--logo-mask) center / contain no-repeat; }
.search-mode { min-height: 44px; padding: 0 15px; border-radius: 9px; background: transparent; color: var(--ink-soft); font-size: 12px; white-space: nowrap; transition: color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.search-mode:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 72%, transparent); }
.search-mode.is-active { background: var(--accent); color: #fff; box-shadow: 0 5px 15px color-mix(in srgb, var(--accent) 22%, transparent); }
.search-mode:active { transform: scale(.97); }
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 100px; width: min(1240px, calc(100% - 48px)); min-height: 470px; margin: 0 auto; padding: 82px 0 76px; }
.hero-copy { position: relative; z-index: 1; max-width: 740px; }
.eyebrow, .section-kicker { margin: 0; color: var(--accent-deep); font-size: 10px; font-weight: 800; letter-spacing: .18em; line-height: 1.4; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { max-width: 800px; margin: 20px 0 20px; color: var(--ink); font-size: clamp(44px, 6.2vw, 78px); font-weight: 600; letter-spacing: -.065em; line-height: 1.03; }
.hero h1 em { color: var(--accent-deep); font-family: var(--font-display); font-size: .93em; font-style: italic; font-weight: 400; letter-spacing: -.055em; }
.hero-description { max-width: 490px; margin-bottom: 34px; color: var(--ink-soft); font-size: 17px; line-height: 1.8; }
.hero-search-wrap { width: min(540px, 100%); }
.search-box { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 0 10px 0 20px; border: 1px solid var(--line-strong); border-radius: 17px; background: color-mix(in srgb, var(--surface) 36%, transparent); box-shadow: 0 18px 48px rgba(25, 34, 42, .12); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 14px 40px color-mix(in srgb, var(--accent) 15%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent); transform: translateY(-1px); }
.search-box > span { color: var(--accent); }
.search-box svg { width: 21px; height: 21px; }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 15px; }
.search-box input::placeholder { color: var(--ink-faint); }
.directory-page .search-box input::placeholder { color: var(--ink-soft); }
.search-submit { min-height: 48px; padding: 0 17px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.search-submit:hover { background: var(--accent-deep); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 26%, transparent); transform: translateY(-1px); }
.search-submit:active { transform: scale(.97); }
.search-shortcuts { display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 0 5px; color: var(--ink-faint); font-size: 11px; }
.search-shortcuts button { min-height: 30px; padding: 0 8px; border-radius: 7px; background: transparent; color: var(--accent-deep); font-size: 11px; }
.search-shortcuts button:hover { background: var(--accent-wash); }
kbd { display: inline-grid; min-width: 24px; height: 23px; place-items: center; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--paper-deep); color: var(--ink-faint); font-family: var(--font-sans); font-size: 11px; }
.search-hint { margin: 11px 0 0 4px; color: var(--ink-faint); font-size: 11px; }
.search-hint kbd { height: 20px; min-width: 20px; padding: 0 4px; margin: 0 3px; font-size: 10px; }
.hero-note { align-self: end; max-width: 285px; margin-bottom: 4px; padding: 22px 0 3px 26px; border-left: 1px solid var(--line-strong); }
.note-line { display: block; width: 32px; height: 2px; margin-bottom: 20px; background: var(--accent); }
.note-label { margin-bottom: 13px; color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.note-quote { margin-bottom: 29px; color: var(--ink-soft); font-family: var(--font-display); font-size: 19px; line-height: 1.55; }
.note-meta { display: flex; align-items: center; gap: 7px; color: var(--ink-faint); font-size: 11px; }
.note-date { margin-left: auto; font-variant-numeric: tabular-nums; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #55a875; box-shadow: 0 0 0 4px color-mix(in srgb, #55a875 15%, transparent); }
.hero > .hero-glow { display: none; }
.api-search-results { width: min(1240px, calc(100% - 48px)); margin: 34px auto -10px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-soft); scroll-margin-top: 96px; }
.api-search-results[hidden] { display: none; }
.api-results-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 17px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.api-results-heading h2 { margin: 7px 0 0; font-size: 22px; letter-spacing: -.04em; }
.api-results-heading h2 small { color: var(--ink-faint); font-size: 12px; font-weight: 500; }
.api-results-count { color: var(--ink-faint); font-size: 11px; }
.api-result-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.api-result-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.api-result-card:hover { border-color: var(--accent); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.api-result-poster { display: grid; width: 48px; height: 64px; place-items: center; overflow: hidden; border-radius: 8px; background: var(--paper-deep); color: var(--accent-deep); font-size: 15px; font-weight: 800; }
.api-result-poster img { width: 100%; height: 100%; object-fit: cover; }
.api-result-copy { display: grid; min-width: 0; align-content: start; gap: 4px; }
.api-result-copy strong, .api-result-copy small, .api-result-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-result-copy strong { color: var(--ink); font-size: 12px; }
.api-result-copy small { color: var(--accent-deep); font-size: 9px; }
.api-result-copy em { display: -webkit-box; color: var(--ink-faint); font-size: 10px; font-style: normal; line-height: 1.45; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.api-results-loading, .api-results-empty { margin: 0; color: var(--ink-soft); font-size: 13px; }
.api-results-fallback-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.api-results-fallback { display: inline-flex; min-height: 40px; align-items: center; padding: 0 13px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }

#directoryContent { overflow-anchor: none; }
.directory-section { position: relative; padding: 54px 0 78px; border-top: 0; background: transparent; }
/* 深色模式：页面一侧的暗色延续（极淡半透明，让色变跨过边界继续稀释，非实色补丁） */
:root[data-theme="dark"] .directory-section::before { content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: 0; height: 240px; background: linear-gradient(180deg, rgba(8, 18, 40, .34) 0%, rgba(8, 18, 40, .17) 45%, rgba(8, 18, 40, 0) 100%); pointer-events: none; }
.directory-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 219px minmax(0, 1fr); gap: 30px; width: min(1400px, calc(100% - 48px)); margin: 0 auto; }
.directory-content { min-width: 0; }
.directory-sidebar { --directory-scale: .9; position: sticky; top: 92px; align-self: start; min-width: 0; max-height: none; overflow: visible; zoom: var(--directory-scale); }
.sidebar-heading h2 { margin: 8px 0 27px; color: var(--ink); font-size: 23px; letter-spacing: -.04em; }
.category-nav { position: relative; display: grid; max-height: calc(100vh - 120px); gap: 4.6px; padding: 11.5px 10.5px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; border: 1px solid var(--directory-sidebar-border); border-radius: 16px; background: color-mix(in srgb, var(--header-glass) 32%, transparent); box-shadow: var(--directory-sidebar-shadow); -webkit-backdrop-filter: saturate(140%) blur(7px); backdrop-filter: saturate(140%) blur(7px); }
.category-nav::before { position: absolute; top: 0; left: 0; z-index: 0; width: var(--category-indicator-width, 0px); height: var(--category-indicator-height, 48px); border-radius: 11.5px; background: color-mix(in srgb, var(--accent) 36%, var(--surface)); box-shadow: 0 7px 20px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent); content: ""; opacity: 0; pointer-events: none; transform: translate3d(var(--category-indicator-x, 0px), var(--category-indicator-y, 0px), 0); transition: transform .44s cubic-bezier(.16,1,.3,1), opacity .18s ease; }
.category-nav.has-active-indicator::before { opacity: 1; }
.category-link { position: relative; z-index: 1; display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 10.5px; width: 100%; min-height: 48px; padding: 0 12.5px; border-radius: 11.5px; background: transparent; color: var(--ink); text-align: left; font-size: 17.3px; transition: background-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease; }
.category-link:hover { background: color-mix(in srgb, var(--accent) 8%, var(--paper-deep)); color: var(--ink); transform: translateX(2px); }
.category-link.is-active { background: transparent; color: var(--ink); box-shadow: none; }
.category-link.is-active > span { color: var(--accent-deep); font-weight: 650; }
.category-link b { color: var(--ink-soft); font-size: 13.8px; font-weight: 600; }
.category-link.is-active b { color: var(--ink-soft); }
.category-icon { display: grid; width: 34.5px; height: 34.5px; place-items: center; border-radius: 10.5px; background: transparent; color: var(--ink-soft); transition: transform .22s ease, box-shadow .22s ease, color .22s ease; }
.category-link.is-active .category-icon { background: transparent; color: var(--ink); box-shadow: none; }
.category-icon-accent { color: var(--ink-soft); }
.category-icon::before { content: ""; display: block; width: 20.7px; height: 20.7px; background: currentColor; -webkit-mask: var(--category-icon-mask) center / contain no-repeat; mask: var(--category-icon-mask) center / contain no-repeat; }
.sidebar-footnote { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); }
.tiny-rule { display: block; width: 24px; height: 2px; margin-bottom: 13px; background: var(--accent); }
.sidebar-footnote p { max-width: 170px; margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.directory-heading { display: flex; align-items: end; justify-content: space-between; gap: 18.4px; margin-bottom: 21.9px; padding-bottom: 17.3px; border-bottom: 1px solid var(--line); }
.directory-heading h2 { margin: 10.4px 0 0; font-size: 36.8px; letter-spacing: -.055em; }
.site-section { padding: 13.8px 0 28.8px; scroll-margin-top: 96px; }
.site-section + .site-section { border-top: 1px solid var(--line); }
.site-section-heading { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: flex-start; gap: 23px; min-width: 0; margin-bottom: 12.7px; }
.site-section-heading h3 { margin: 0; font-size: 20.7px; letter-spacing: -.04em; }
.site-section-heading p { max-width: 356.5px; margin: 0; color: var(--ink-faint); font-size: 13.8px; line-height: 1.5; text-align: right; }
.section-arrow { display: grid; width: 39.1px; height: 39.1px; flex: 0 0 auto; place-items: center; margin-left: auto; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink-soft); transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.section-arrow:hover { border-color: var(--accent); color: var(--accent); transform: translateX(2px); }
.section-arrow svg { width: 20.7px; height: 20.7px; stroke-width: 2; }
.site-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10.4px; }
.site-card.is-folded { display: none; }
.section-expand { display: flex; align-items: center; gap: 16px; justify-content: flex-end; margin-top: 15px; }
.section-expand::before { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--line-strong) 72%, transparent)); content: ""; transition: opacity .24s ease; }
.section-expand.is-expanded::before { opacity: .38; }
.section-expand-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 124px; padding: 8px 18px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-pill); background: var(--accent-wash); color: var(--accent-deep); font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .01em; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 12%, transparent); transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .22s ease, transform .18s ease; }
.section-expand-btn::after { width: 15px; height: 15px; flex: 0 0 auto; background: currentColor; -webkit-mask: url('./icons/lucide/chevron-down.svg') center / contain no-repeat; mask: url('./icons/lucide/chevron-down.svg') center / contain no-repeat; content: ""; transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.section-expand-btn:hover { border-color: color-mix(in srgb, var(--accent) 52%, transparent); background: color-mix(in srgb, var(--accent) 26%, var(--surface)); color: var(--accent); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 22%, transparent); transform: translateY(-1px); }
.section-expand-btn:hover::after { transform: translateY(1px); }
.section-expand-btn:active { box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(0); }
.section-expand-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 3px; }
.section-expand.is-expanded .section-expand-btn { border-color: color-mix(in srgb, var(--line-strong) 78%, transparent); background: transparent; color: var(--ink-soft); box-shadow: none; }
.section-expand.is-expanded .section-expand-btn:hover { border-color: color-mix(in srgb, var(--accent) 42%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }
.section-expand.is-expanded .section-expand-btn::after { transform: rotate(180deg); }
.section-expand.is-expanded .section-expand-btn:hover::after { transform: rotate(180deg) translateY(1px); }
:root[data-theme="dark"] .section-expand-btn { border-color: color-mix(in srgb, var(--accent) 44%, transparent); background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-deep); box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 16%, transparent); }
:root[data-theme="dark"] .section-expand-btn:hover { border-color: color-mix(in srgb, var(--accent) 74%, transparent); background: color-mix(in srgb, var(--accent) 34%, transparent); color: #ffffff; box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 30%, transparent); }
:root[data-theme="dark"] .section-expand.is-expanded .section-expand-btn { border-color: color-mix(in srgb, var(--line-strong) 92%, transparent); background: color-mix(in srgb, var(--surface) 48%, transparent); color: var(--ink-soft); box-shadow: none; }
:root[data-theme="dark"] .section-expand.is-expanded .section-expand-btn:hover { border-color: color-mix(in srgb, var(--accent) 54%, transparent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-deep); }
:root[data-theme="dark"] .section-expand::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--line-strong) 62%, transparent)); }
.site-card { position: relative; isolation: isolate; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); zoom: .9; transition: border-color .22s ease, box-shadow .24s ease, transform .18s cubic-bezier(.2,.8,.2,1); }
.site-card::before { position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), color-mix(in srgb, var(--accent) 30%, transparent) 0%, color-mix(in srgb, var(--accent) 18%, transparent) 17%, transparent 66%); -webkit-mask: radial-gradient(150% 150% at var(--pointer-x, 50%) var(--pointer-y, 50%), #000 0 26%, transparent 64%); mask: radial-gradient(150% 150% at var(--pointer-x, 50%) var(--pointer-y, 50%), #000 0 26%, transparent 64%); content: ""; opacity: 0; pointer-events: none; transform: scale(.08); transform-origin: var(--pointer-x, 50%) var(--pointer-y, 50%); transition: opacity .2s ease; }
.site-card.is-pointer-active::before { opacity: .82; transform: scale(1); }
.site-card.is-pointer-active::before, .site-card.is-contact-rippling::before { will-change: transform, opacity; }
.site-card.is-pointer-active::after, .site-card.is-contact-rippling::after { will-change: opacity, transform; }
.site-card.is-contact-rippling::before { animation: site-card-contact-ripple .76s cubic-bezier(.16,1,.3,1) both; }
@keyframes site-card-contact-ripple { 0% { opacity: .98; transform: scale(.05); } 24% { opacity: .86; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.28); } }
@property --site-card-glint-angle { syntax: "<angle>"; inherits: false; initial-value: -80deg; }
.site-card::after { position: absolute; inset: 0; z-index: 2; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--site-card-glint-angle), transparent 0deg 282deg, color-mix(in srgb, var(--accent) 40%, white) 306deg, var(--accent) 326deg, white 338deg, transparent 354deg 360deg); content: ""; opacity: 0; pointer-events: none; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; transition: opacity .22s ease; }
.site-card.is-pointer-active::after { opacity: .62; }
.site-card.is-contact-rippling::after { animation: site-card-edge-glint .82s cubic-bezier(.2,.8,.2,1) both; }
@keyframes site-card-edge-glint { 0% { --site-card-glint-angle: -80deg; opacity: 0; } 20% { opacity: 1; } 100% { --site-card-glint-angle: 280deg; opacity: 0; } }
.site-card.scroll-reveal { transition: border-color .22s ease, box-shadow .24s ease, transform .24s ease; }
.site-card.scroll-reveal.is-reveal-pending { opacity: .42; filter: blur(9px) saturate(.84); }
@keyframes site-card-reveal { from { opacity: .42; filter: blur(9px) saturate(.84); } to { opacity: 1; filter: blur(0) saturate(1); } }
.site-card.scroll-reveal.is-revealed { animation: site-card-reveal .48s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms) both; }
.site-card:focus-within { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); box-shadow: var(--shadow-card-hover); }
.site-card:active { transform: translateY(-1px) scale(.995); transition-duration: .1s; }
.site-card-main { position: relative; z-index: 1; display: grid; grid-template-columns: 57.5px minmax(0, 1fr); align-items: center; gap: 9.2px; min-height: 92px; padding: 12.7px 11.5px 8.1px; transition: background-color .2s ease; }
.site-mark { position: relative; display: grid; width: 57.5px; height: 57.5px; place-items: center; background: #fff; color: var(--ink-soft); font-size: 17.3px; font-weight: 800; letter-spacing: -.04em; }
.site-mark img { display: block; width: 100%; height: 100%; padding: 2.3px; box-sizing: border-box; object-fit: contain; transition: transform .24s ease, filter .24s ease; }
.site-mark img[data-site-logo-id="ann"] { width: 100%; height: auto; padding: 0; object-fit: contain; }
.site-mark img[data-site-logo-id="qidian"] { border-radius: 10px; }
.site-mark-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-soft); }
.site-mark img[hidden], .site-mark-fallback[hidden] { display: none !important; }
.site-mark .site-mark-fallback img, .detail-brand-mark span img, .detail-title-brand span img, .detail-related-fallback img { display: block; width: 100%; height: 100%; padding: 0; object-fit: cover; }
/* 悬停反馈：logo 上浮 + 一圈品牌色柔光 + 一次向外扩散的光环。
   颜色由 logo-ring.js 从 logo 取色注入（--k1-ring-1）；取色还没算出来时用中性灰兜底，
   **绝不回退主题色** —— 站点主题色是橙红，蓝 logo 一悬停先闪一圈橙光，非常刺眼。
   这里不再用 conic-gradient 旋转：光带绕方框跑时，长边上的角度分布远比短边稀疏，
   一条边会被整段染色，看上去就是两块色块在跳，无论怎么调参数都治不好。 */
.site-mark { --k1-ring-a: var(--k1-ring-1, #8d97a6); transition: transform .34s cubic-bezier(.34,1.42,.64,1), box-shadow .34s ease; }
:root[data-theme="dark"] .site-mark { --k1-ring-a: color-mix(in srgb, var(--k1-ring-1, #aab3c0) 88%, #ffffff); }
.site-mark::after {
  position: absolute;
  inset: -1px;
  z-index: 2;
  border: 1.5px solid color-mix(in srgb, var(--k1-ring-a) 66%, transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
}
.site-mark::before {
  position: absolute;
  inset: -1px;
  z-index: 3;
  padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--k1-ring-a) 98%, transparent) 0%,
    color-mix(in srgb, var(--k1-ring-a) 82%, transparent) 52%,
    color-mix(in srgb, var(--k1-ring-a) 54%, transparent) 100%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.site-card.is-pointer-active .site-mark::before { opacity: 1; }
.site-card.is-pointer-active .site-mark {
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--k1-ring-a) 10%, transparent),
    0 8px 16px -10px rgba(15, 23, 42, .34);
}
.site-card.is-pointer-active .site-mark::after { animation: k1-logo-halo .8s cubic-bezier(.2,.72,.28,1) both; }
@media (hover: hover) {
  .site-card:hover .site-mark::before { opacity: 1; }
  .site-card:hover .site-mark {
    transform: translateY(-2px) scale(1.045);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--k1-ring-a) 10%, transparent),
      0 8px 16px -10px rgba(15, 23, 42, .34);
  }
  .site-card:hover .site-mark::after { animation: k1-logo-halo .8s cubic-bezier(.2,.72,.28,1) both; }
}
:root[data-theme="dark"] .site-card.is-pointer-active .site-mark { box-shadow: 0 0 0 4px color-mix(in srgb, var(--k1-ring-a) 12%, transparent), 0 8px 16px -10px rgba(0, 0, 0, .62); }
@media (hover: hover) {
  :root[data-theme="dark"] .site-card:hover .site-mark { box-shadow: 0 0 0 4px color-mix(in srgb, var(--k1-ring-a) 12%, transparent), 0 8px 16px -10px rgba(0, 0, 0, .62); }
}
@keyframes k1-logo-halo { 0% { opacity: .62; transform: scale(1); } 100% { opacity: 0; transform: scale(1.26); } }
@media (prefers-reduced-motion: reduce) {
  /* 站点全局规则会把动画压成 0.01ms；这条悬停反馈单独放行，否则 logo 会硬跳一下 */
  .site-mark { transition-duration: .26s !important; }
  .site-card.is-pointer-active .site-mark::after,
  .site-card:hover .site-mark::after {
    animation-name: k1-logo-halo !important;
    animation-duration: .8s !important;
    animation-timing-function: cubic-bezier(.2,.72,.28,1) !important;
    animation-iteration-count: 1 !important;
    animation-fill-mode: both !important;
  }
}
.detail-related-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.site-dialog-logo-image { width: 66px; height: 66px; background: #fff; }
.site-dialog-logo-image img { display: block; width: 100%; height: 100%; padding: 3px; box-sizing: border-box; border-radius: inherit; object-fit: contain; }
.site-card-copy { display: grid; min-width: 0; gap: 2.3px; }
.site-card-copy strong { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.site-card-copy small { display: -webkit-box; overflow: hidden; min-height: 53.4px; color: var(--ink-soft); font-size: 12.7px; font-weight: 400; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.site-card-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 5.8px; min-height: 40.5px; padding: 3.7px 8.1px; border-top: 1px solid var(--line); }
.tag-carousel { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 3.5px; }
.tag-list { display: flex; width: 100%; min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; gap: 4.6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-inline: contain; scroll-behavior: smooth; touch-action: pan-x; }
.tag-list::-webkit-scrollbar { display: none; }
.tag-list span { min-width: 0; max-width: 100%; flex: 0 0 auto; overflow: hidden; padding: 3.5px 8.1px; border: 1px solid transparent; border-radius: 4.6px; background: var(--paper-deep); color: var(--ink-soft); font-size: 11.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.tag-list span::before { margin-right: 4.6px; color: var(--ink-faint); content: '#'; }
.tag-list:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.favorite-button { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: transparent; color: var(--ink-faint); transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.favorite-button:hover, .favorite-button.is-favorite { background: var(--accent-wash); color: var(--accent-deep); transform: scale(1.05); }
.favorite-button svg { width: 14px; height: 14px; }
.section-tabs { display: flex; width: fit-content; max-width: min(100%, 598px); min-width: 0; flex: 0 1 auto; gap: 3.5px; margin: 0; padding: 4.6px; overflow-x: auto; border: 2px solid color-mix(in srgb, var(--line-strong) 88%, var(--ink-soft) 12%); border-radius: 11.5px; background: color-mix(in srgb, var(--surface) 22%, transparent); -webkit-backdrop-filter: blur(4px) saturate(125%); backdrop-filter: blur(4px) saturate(125%); scrollbar-width: thin; }
.section-tab { min-height: 41.4px; padding: 0 15px; border-radius: 4.6px; background: transparent; color: var(--ink-faint); font-size: 13.8px; white-space: nowrap; transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.section-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.section-tab.is-active { background: var(--accent); color: #fff; box-shadow: 0 5px 12px color-mix(in srgb, var(--accent) 24%, transparent); }
.section-tab:active { transform: scale(.97); }
.subcategory-empty { grid-column: 1 / -1; margin: 0; padding: 17px 15px; border: 1px dashed var(--line); border-radius: 10px; color: var(--ink-faint); font-size: 12px; }
.empty-state { display: grid; place-items: center; padding: 72px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius-card); text-align: center; }
.empty-state[hidden] { display: none; }
.empty-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 14px; border-radius: 14px; background: var(--paper-deep); color: var(--ink-faint); }
.empty-icon svg { width: 22px; height: 22px; }
.empty-state h3 { margin: 0 0 5px; font-size: 17px; }
.empty-state p { margin: 0 0 17px; color: var(--ink-faint); font-size: 13px; }
.text-button { padding: 0 9px; background: transparent; color: var(--accent-deep); font-size: 13px; }
.text-button:hover { text-decoration: underline; }

.about-section { padding: 0 0 100px; }
.about-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; width: min(1000px, calc(100% - 48px)); margin: 0 auto; padding: 54px 58px; border-radius: 24px; background: var(--navy); color: var(--paper); box-shadow: var(--shadow-soft); }
.about-card .section-kicker { color: var(--accent); }
.about-card h2 { margin: 14px 0 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.065em; line-height: 1.05; }
.about-copy { max-width: 430px; }
.about-copy p { color: color-mix(in srgb, var(--paper) 78%, transparent); font-size: 15px; line-height: 1.8; }
.about-copy .about-small { color: color-mix(in srgb, var(--paper) 55%, transparent); font-size: 12px; }
.dark-button { padding: 0 17px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.dark-button:hover { background: var(--accent-deep); transform: translateY(-1px); }
.about-card .dark-button { margin-top: 7px; }
.site-footer { position: relative; isolation: isolate; display: grid; min-height: 220px; align-items: center; padding: 48px 0 52px; overflow: hidden; background: transparent; }
.footer-inner { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; width: min(1240px, calc(100% - 48px)); min-height: 86px; margin: 0 auto; padding: 0 24px; overflow: visible; border: 1px solid var(--footer-glass-border); border-radius: 22px; background: var(--footer-glass); color: var(--footer-ink); font-size: 11px; box-shadow: 0 20px 52px rgba(26, 48, 38, .13), 0 5px 18px rgba(26, 48, 38, .08), inset 0 1px 0 rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(9px) saturate(135%); backdrop-filter: blur(9px) saturate(135%); transition: border-color .28s ease, box-shadow .28s ease, background-color .28s ease; }
.footer-inner::after { position: absolute; top: 0; right: 26px; left: 26px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.96), color-mix(in srgb, var(--footer-laser-halo) 70%, white), transparent); content: ""; opacity: .82; pointer-events: none; }
.site-footer:hover .footer-inner { border-color: color-mix(in srgb, var(--accent) 24%, var(--footer-glass-border)); box-shadow: 0 22px 56px rgba(26, 48, 38, .13), inset 0 1px 0 rgba(255, 255, 255, .96); }
.footer-separator { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }
.footer-inner a { margin-left: auto; color: var(--footer-ink); }
.footer-inner a + a { margin-left: 0; }
.footer-inner a { transition: color .2s ease, text-shadow .2s ease; }
.footer-inner a:hover { color: var(--accent-deep); text-shadow: none; }

.submit-dialog { width: min(520px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-strong); color: var(--ink); box-shadow: 0 28px 90px rgba(0, 0, 0, .22); }
.submit-dialog::backdrop { background: rgba(15, 22, 26, .5); backdrop-filter: blur(4px); }
.submit-form { position: relative; padding: 33px; }
.dialog-close { position: absolute; top: 18px; right: 18px; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--paper-deep); color: var(--ink-soft); }
.dialog-close:hover { color: var(--ink); }
.dialog-close::before { content: ''; width: 16px; height: 16px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='black' stroke-linecap='round' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; }
.submit-form h2 { margin: 10px 0 9px; font-size: 30px; letter-spacing: -.055em; }
.dialog-intro { max-width: 410px; margin-bottom: 25px; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.form-field { display: grid; gap: 7px; margin-top: 14px; color: var(--ink-soft); font-size: 12px; }
.form-field input, .form-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; outline: 0; padding: 11px 12px; background: var(--paper); color: var(--ink); font-size: 13px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 25px; }
.provider-dialog { width: min(500px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-strong); color: var(--ink); box-shadow: 0 28px 90px rgba(0, 0, 0, .22); }
.provider-dialog::backdrop { background: rgba(15, 22, 26, .5); backdrop-filter: blur(5px); }
.provider-dialog-shell { position: relative; padding: 33px; }
.provider-dialog-kicker { margin: 8px 0 10px; color: var(--accent-deep); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.provider-dialog h2 { margin: 0 0 9px; font-size: 30px; letter-spacing: -.055em; }
.provider-options { display: grid; gap: 9px; margin-top: 20px; }
.provider-option { display: grid; grid-template-columns: 42px minmax(0, 1fr) 22px; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); color: var(--ink); text-align: left; transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.provider-option:hover { border-color: var(--accent); background: var(--paper-deep); box-shadow: 0 10px 24px rgba(25, 34, 42, .08); transform: translateY(-2px); }
.provider-option:active { transform: scale(.985); }
.provider-option-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--accent-wash); color: var(--accent-deep); font-size: 16px; font-weight: 800; }
.provider-option-copy { display: grid; min-width: 0; gap: 4px; }
.provider-option-copy strong { font-size: 14px; }
.provider-option-copy small { overflow: hidden; color: var(--ink-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.provider-option-arrow { color: var(--accent-deep); font-size: 18px; }
.dark-button:active, .outline-button:active, .category-link:active, .favorite-button:active { transform: scale(.97); }
.site-dialog { width: min(560px, calc(100% - 32px)); max-height: min(720px, calc(100% - 32px)); padding: 0; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--surface-strong) 86%, transparent); color: var(--ink); box-shadow: 0 32px 100px rgba(15, 22, 26, .25); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .18s ease, transform .18s ease; }
.site-dialog.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.site-dialog::backdrop { background: rgba(15, 22, 26, .58); backdrop-filter: blur(12px); }
.site-dialog-shell { position: relative; padding: 30px; overflow: auto; }
.site-dialog-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-dialog-status { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-faint); font-size: 11px; }
.site-dialog-brand { display: flex; align-items: center; gap: 18px; margin-top: 25px; }
.site-dialog-category { margin: 0 0 4px; color: var(--accent-deep); font-size: 11px; font-weight: 700; }
.site-dialog-brand h2 { margin: 0; font-size: 30px; letter-spacing: -.055em; line-height: 1.1; }
.site-dialog-brand a { display: inline-block; margin-top: 7px; color: var(--ink-faint); font-size: 12px; transition: color .2s ease; }
.site-dialog-brand a:hover { color: var(--accent-deep); }
.site-dialog-description { margin: 25px 0 16px; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.site-dialog-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.site-dialog-tags span { padding: 5px 9px; border-radius: var(--radius-pill); background: var(--paper-deep); color: var(--ink-soft); font-size: 11px; }
.site-dialog-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 24px; padding: 13px; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: 15px; background: color-mix(in srgb, var(--paper-deep) 50%, transparent); }
.site-dialog-stats div { display: grid; gap: 4px; min-width: 0; }
.site-dialog-stats span { color: var(--ink-faint); font-size: 10px; }
.site-dialog-stats strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.site-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.site-dialog-mirror { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.site-dialog-hint { margin: 14px 0 0; color: var(--ink-faint); font-size: 10px; text-align: right; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 100; max-width: min(360px, calc(100% - 44px)); padding: 12px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--ink); color: var(--paper); font-size: 12px; box-shadow: var(--shadow-soft); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

/* Independent site detail page, used when WebStack's details_page option is enabled. */
.detail-page { background: var(--paper); }
.detail-back { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.site-detail-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0 74px; }
.detail-breadcrumb { display: flex; align-items: center; gap: 9px; min-height: 27px; margin-bottom: 19px; color: var(--ink-faint); font-size: 11px; }
.detail-breadcrumb a:hover { color: var(--accent-deep); }
.detail-breadcrumb strong { color: var(--ink-soft); font-weight: 600; }
.detail-hero-card { display: grid; grid-template-columns: minmax(0, 1fr) 245px; gap: 18px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-soft); }
.detail-main-info { min-width: 0; }
.detail-brand-row { display: flex; align-items: center; gap: 16px; }
.detail-logo { position: relative; display: grid; width: 72px; height: 72px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 20px; background: var(--paper-deep); color: var(--ink-soft); font-size: 22px; font-weight: 700; box-shadow: 0 10px 24px rgba(25, 34, 42, .12); }
.detail-logo img { position: relative; z-index: 1; width: 100%; height: 100%; padding: 5px; box-sizing: border-box; object-fit: contain; background: #fff; }
.detail-logo b { position: absolute; inset: 0; display: grid; place-items: center; }
.detail-category { display: block; margin-bottom: 5px; color: var(--accent-deep); font-size: 11px; font-weight: 700; }
.detail-brand-row h1 { margin: 0; color: var(--ink); font-size: clamp(27px, 4vw, 40px); letter-spacing: -.06em; line-height: 1.08; }
.detail-domain { display: inline-block; margin-top: 7px; color: var(--ink-faint); font-size: 12px; }
.detail-domain:hover { color: var(--accent-deep); }
.detail-description { max-width: 680px; margin: 26px 0 18px; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.detail-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--paper-deep) 55%, transparent); }
.detail-stats div { display: grid; gap: 3px; min-width: 0; }
.detail-stats span { color: var(--ink-faint); font-size: 10px; }
.detail-stats strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.detail-action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 19px; }
.detail-primary, .detail-secondary, .detail-favorite { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 12px; transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.detail-primary { background: var(--accent); color: #fff; font-weight: 700; }
.detail-primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.detail-secondary, .detail-favorite { border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft); }
.detail-secondary:hover, .detail-favorite:hover, .detail-favorite.is-active { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-deep); }
.detail-primary svg, .detail-secondary svg, .detail-favorite svg { width: 15px; height: 15px; }
.detail-favorite.is-favorite-pulse { animation: favorite-button-pop .5s cubic-bezier(.2,.8,.2,1); }
.detail-favorite.is-favorite-pulse svg { animation: favorite-collect-pop .5s cubic-bezier(.2,.8,.2,1); }
@keyframes favorite-button-pop { 0% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); } 38% { filter: drop-shadow(0 5px 8px color-mix(in srgb, var(--accent) 34%, transparent)); transform: scale(1.075); } 72% { transform: scale(.98); } 100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); } }
@keyframes favorite-collect-pop {
  0% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
  38% { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 48%, transparent)); transform: scale(1.32) rotate(-8deg); }
  72% { transform: scale(.92) rotate(4deg); }
  100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
}
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.detail-tags span { padding: 4px 8px; border-radius: var(--radius-pill); background: var(--paper-deep); color: var(--ink-faint); font-size: 10px; }
/* 服务器与访问：左边「你的网络」是实测（会动），右边「服务器」是静态归属。
   文字只留三层 —— 结论一句、细节一行、脚注一行，其余全部砍掉。 */
.detail-srv { margin-top: 20px; padding: 15px 16px 13px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--paper-deep) 52%, transparent); }
.detail-srv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.detail-srv-head h2 { margin: 0; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.detail-srv-badge { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.detail-srv-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.detail-srv-badge.is-ok { background: rgba(46,125,91,.14); color: #1c5c41; }
.detail-srv-badge.is-warn { background: rgba(176,106,18,.16); color: #845308; }
.detail-srv-badge.is-bad { background: rgba(180,55,47,.14); color: #8d2b24; }
.detail-srv-badge.is-mute { background: var(--paper-deep); color: var(--ink-faint); }
.detail-srv-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.detail-srv-panel { position: relative; display: grid; gap: 3px; align-content: start; min-width: 0; padding: 10px 12px 11px; overflow: hidden; border-radius: 11px; background: color-mix(in srgb, var(--paper) 82%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 76%, transparent); transition: background .25s ease, box-shadow .25s ease; }
.detail-srv-label { display: flex; align-items: center; gap: 5px; color: var(--ink-faint); font-size: 10.5px; letter-spacing: .04em; }
.detail-srv-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); }
.detail-srv-dot.is-static { background: var(--line-strong); }
.detail-srv-title { overflow: hidden; color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.detail-srv-meta { color: var(--ink-faint); font-size: 11.5px; line-height: 1.5; word-break: break-word; }
.detail-srv-meta code { padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 7%, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; }
.detail-srv-muted { color: var(--ink-faint); }
/* 重测：右上角小圆钮，悬停转 180° */
.detail-srv-retry { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); cursor: pointer; opacity: .9; transition: color .18s ease, background .18s ease, opacity .18s ease, transform .38s cubic-bezier(.2,.7,.28,1); }
.detail-srv-retry svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.detail-srv-retry:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); opacity: 1; transform: rotate(180deg); }
.detail-srv-retry:disabled { opacity: .3; cursor: default; transform: none; }
.detail-srv-alert { display: flex; margin: 9px 0 0; padding: 7px 10px; border-radius: 8px; background: rgba(176,106,18,.09); color: #7a4e08; font-size: 11.5px; line-height: 1.55; }
.detail-srv-alert[hidden] { display: none; }
.detail-srv-foot { margin: 9px 0 0; color: var(--ink-faint); font-size: 10.5px; line-height: 1.5; opacity: .82; }
/* 实测面板的状态色 */
.detail-srv-panel--net[data-state="ok"] { background: color-mix(in srgb, #2f7d5c 7%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #2f7d5c 24%, transparent); }
.detail-srv-panel--net[data-state="ok"] .detail-srv-dot { background: #2f7d5c; box-shadow: 0 0 0 3px rgba(46,125,91,.16); }
.detail-srv-panel--net[data-state="ok"] .detail-srv-title { color: #1c5c41; }
.detail-srv-panel--net[data-state="fail"] { background: color-mix(in srgb, #b4372f 6%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #b4372f 22%, transparent); }
.detail-srv-panel--net[data-state="fail"] .detail-srv-dot { background: #b4372f; box-shadow: 0 0 0 3px rgba(180,55,47,.15); }
.detail-srv-panel--net[data-state="fail"] .detail-srv-title { color: #8d2b24; }
.detail-srv-panel--net[data-state="checking"] .detail-srv-dot,
.detail-srv-panel--net[data-state="slow"] .detail-srv-dot { width: 6px; height: 6px; background: #6d8ea8; animation: srvPulse 1.5s ease-out infinite; }
@keyframes srvPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(109,142,168,.5); }
  55% { box-shadow: 0 0 0 6px rgba(109,142,168,0); }
}
/* 检测中：面板底部一条光带左右扫过（只占 40% 宽，走起来才看得见） */
.detail-srv-panel--net { --srv-scan: rgba(56,104,142,.92); }
:root[data-theme="dark"] .detail-srv-panel--net { --srv-scan: rgba(172,220,246,1); }
.detail-srv-panel--net::after { position: absolute; bottom: 0; left: 0; width: 40%; height: 3px; content: ''; background: linear-gradient(90deg, transparent, var(--srv-scan), transparent); box-shadow: 0 0 14px 2px var(--srv-scan); opacity: 0; transform: translateX(-100%); pointer-events: none; }
.detail-srv-panel--net[data-state="checking"]::after,
.detail-srv-panel--net[data-state="slow"]::after { opacity: 1; animation: srvScan 1.7s ease-in-out infinite; }
@keyframes srvScan { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
:root[data-theme="dark"] .detail-srv-badge.is-ok { background: rgba(127,209,168,.18); color: #a7e6c5; }
:root[data-theme="dark"] .detail-srv-badge.is-warn { background: rgba(240,184,102,.18); color: #f6cd93; }
:root[data-theme="dark"] .detail-srv-badge.is-bad { background: rgba(240,138,128,.18); color: #f8b7af; }
:root[data-theme="dark"] .detail-srv-panel { background: color-mix(in srgb, var(--paper) 68%, transparent); }
:root[data-theme="dark"] .detail-srv-panel--net[data-state="ok"] .detail-srv-title { color: #a7e6c5; }
:root[data-theme="dark"] .detail-srv-panel--net[data-state="ok"] .detail-srv-dot { background: #7fd1a8; box-shadow: 0 0 0 3px rgba(127,209,168,.2); }
:root[data-theme="dark"] .detail-srv-panel--net[data-state="fail"] .detail-srv-title { color: #f8b7af; }
:root[data-theme="dark"] .detail-srv-panel--net[data-state="fail"] .detail-srv-dot { background: #f08a80; box-shadow: 0 0 0 3px rgba(240,138,128,.2); }
:root[data-theme="dark"] .detail-srv-alert { background: rgba(240,184,102,.12); color: #efc78c; }
@media (prefers-reduced-motion: reduce) {
  /* 站内全局规则会把动画压成 0.01ms；这两处是点名要的状态反馈，单独放行 */
  .detail-srv-panel--net[data-state="checking"] .detail-srv-dot,
  .detail-srv-panel--net[data-state="slow"] .detail-srv-dot { animation: srvPulse 1.5s ease-out infinite !important; }
  .detail-srv-panel--net[data-state="checking"]::after,
  .detail-srv-panel--net[data-state="slow"]::after { animation: srvScan 1.7s ease-in-out infinite !important; }
}
.detail-side-card { display: block; min-height: 100%; }
.detail-side-preview { position: relative; display: flex; min-height: 350px; height: 100%; align-items: end; padding: 18px; overflow: hidden; border-radius: 14px; background: linear-gradient(145deg, #1b2f3c, #314e5f); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); isolation: isolate; }
.detail-side-preview::after { position: absolute; inset: 0; z-index: -1; content: ''; background: linear-gradient(180deg, rgba(11,26,37,.06) 20%, rgba(11,26,37,.88) 100%); }
.detail-side-preview > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(2); transform-origin: left top; }
.detail-side-brand { position: absolute; inset: 0; z-index: -2; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 20px; background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface) 62%, transparent)); color: var(--ink); text-align: center; }
.detail-side-preview.is-fallback [data-media-fallback-card] { display: grid; }
.detail-side-brand .detail-brand-mark { width: 82px; height: 82px; flex-basis: 82px; font-size: 32px; }
.detail-side-brand strong { font-size: 23px; letter-spacing: -.05em; }
.detail-side-brand small { color: rgba(25,34,42,.62); }
.detail-side-preview.is-fallback { background: linear-gradient(145deg, #1b2f3c, #314e5f); }
.detail-side-fallback { display: none; position: absolute; inset: 0; z-index: -2; place-items: center; color: rgba(255,255,255,.16); font-size: 58px; }
.detail-side-preview.is-fallback .detail-side-fallback { display: grid; }
.detail-side-overlay-row { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.detail-side-overlay-row strong { min-width: 0; overflow: hidden; font-size: 19px; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.detail-side-overlay-row button { margin-top: 0; }
.detail-side-preview button { display: inline-flex; align-items: center; gap: 5px; width: fit-content; min-height: 36px; margin-top: 9px; padding: 0 11px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; transition: transform .2s ease, background-color .2s ease; }
.detail-side-preview button:hover { background: var(--accent-deep); transform: translateY(-1px); }
.detail-side-preview svg { width: 14px; height: 14px; }
.detail-side-stat { display: flex; align-items: baseline; justify-content: space-between; padding: 15px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.detail-side-stat strong { color: var(--accent-deep); font-size: 25px; letter-spacing: -.05em; }
.detail-side-stat span { color: var(--ink-faint); font-size: 10px; }
.detail-columns { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; margin-top: 18px; }
.detail-content-card, .detail-related-card { min-width: 0; padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 8px 26px rgba(25, 34, 42, .04); }
.detail-section-title { display: flex; align-items: end; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.detail-section-title h2 { margin: 6px 0 0; color: var(--ink); font-size: 21px; letter-spacing: -.05em; }
.detail-section-title small { color: var(--ink-faint); font-size: 10px; }
.detail-section-label { display: block; color: var(--accent-deep); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.detail-intro { margin: 19px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.9; }
.detail-feature-copy { display: grid; gap: 8px; margin-top: 16px; }
.detail-feature-copy p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.9; }
.detail-facts { display: grid; gap: 10px; margin: 18px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--paper-deep) 62%, transparent); }
.detail-facts div { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.detail-facts dt { flex: 0 0 44px; color: var(--ink-faint); font-size: 12.5px; }
.detail-facts dd { min-width: 0; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; word-break: break-word; }
.detail-feature-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
.detail-feature-item { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.detail-feature-image { position: relative; display: block; overflow: hidden; background: linear-gradient(135deg, #eef2f4, #dce5e9); }
.detail-feature-image img { display: block; width: 100%; height: auto; object-fit: contain; }
.detail-feature-shot-left .detail-feature-image > img,
.detail-feature-shot-center .detail-feature-image > img { transform: none; }
.detail-feature-image.is-fallback { display: flex; min-height: 220px; align-items: stretch; background: linear-gradient(145deg, #26384a, #466676); }
.detail-feature-fallback { display: none; color: #fff; font-size: 42px; font-weight: 700; }
.detail-feature-image.is-fallback .detail-feature-fallback { display: none; }
.detail-feature-image.is-fallback [data-media-fallback-card] { display: flex; flex: 1 1 auto; width: 100%; min-height: 220px; }
.detail-feature-brand { padding: 18px; background: linear-gradient(145deg, #eef3f5, #dce7eb); }
.detail-brand-visual { display: flex; width: 100%; min-height: 220px; align-items: center; gap: 16px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface) 62%, transparent)); box-shadow: 0 14px 28px rgba(27,48,60,.08); }
.detail-brand-mark { position: relative; display: grid; width: 70px; height: 70px; flex: 0 0 70px; place-items: center; background: #fff; color: var(--ink-soft); font-size: 28px; font-weight: 800; }
.detail-brand-mark img { display: block; width: 100%; height: 100%; padding: 3px; box-sizing: border-box; object-fit: contain; }
.detail-brand-mark span { position: absolute; inset: 0; display: grid; place-items: center; }
.detail-brand-mark span[hidden], .detail-title-brand span[hidden] { display: none !important; }
.detail-brand-copy { display: grid; min-width: 0; gap: 5px; }
.detail-brand-copy small, .detail-side-brand small { color: var(--ink-faint); font-size: 10px; }
.detail-brand-copy strong { color: var(--ink); font-size: 20px; letter-spacing: -.04em; }
.detail-brand-copy span { overflow: hidden; color: var(--ink-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.detail-feature-visual { display: flex; min-height: 220px; flex-direction: column; justify-content: space-between; padding: 16px; }
.detail-feature-visual-accent { background: linear-gradient(145deg, #243e4c, #4b7180); color: #fff; }
.detail-feature-visual-soft { background: linear-gradient(145deg, #f3f0ea, #e7edf0); }
.feature-visual-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.feature-visual-top span { max-width: 120px; color: rgba(255,255,255,.7); font-size: 10px; }
.feature-visual-top b { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; background: rgba(255,255,255,.12); font-size: 16px; }
.feature-visual-lines { display: grid; gap: 8px; margin: 20px 0; }
.feature-visual-lines i { display: block; height: 8px; border-radius: 99px; background: rgba(255,255,255,.22); }
.feature-visual-lines i:first-child { width: 76%; background: var(--accent); }
.feature-visual-lines i:nth-child(2) { width: 92%; }.feature-visual-lines i:nth-child(3) { width: 58%; }
.feature-chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.feature-chip-row span { padding: 5px 7px; border-radius: 6px; background: rgba(255,255,255,.7); color: var(--ink-soft); font-size: 9px; }
.feature-visual-chart { display: flex; align-items: end; gap: 6px; height: 82px; margin: 20px 0 10px; }
.feature-visual-chart i { flex: 1; min-height: 24px; border-radius: 5px 5px 2px 2px; background: var(--accent); opacity: .65; }.feature-visual-chart i:nth-child(2) { height: 48%; }.feature-visual-chart i:nth-child(3) { height: 83%; }.feature-visual-chart i:nth-child(4) { height: 62%; }.feature-visual-chart i:nth-child(5) { height: 100%; }
.detail-content-card > p { margin: 20px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.85; }
.detail-placeholder { min-height: 235px; margin-top: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.placeholder-toolbar { display: flex; align-items: center; gap: 5px; height: 33px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--ink-faint); font-size: 10px; }
.placeholder-toolbar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.placeholder-toolbar span { margin-left: 7px; }
.placeholder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 22px; }
.placeholder-grid b { min-height: 72px; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--paper)), var(--paper-deep)); }
.placeholder-grid b:nth-child(2n) { background: linear-gradient(135deg, color-mix(in srgb, #4e91ab 18%, var(--paper)), var(--paper-deep)); }
.detail-related-list { display: grid; gap: 7px; margin-top: 16px; }
.detail-related-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) 14px; align-items: center; gap: 9px; min-width: 0; padding: 9px; border-radius: 10px; background: var(--paper); transition: background-color .2s ease, transform .2s ease; }
.detail-related-item:hover { background: var(--paper-deep); transform: translateX(2px); }
.detail-related-logo { position: relative; display: grid; width: 32px; height: 32px; place-items: center; background: #fff; color: var(--ink-soft); }
.detail-related-logo img { display: block; width: 100%; height: 100%; padding: 2px; box-sizing: border-box; object-fit: contain; }
.detail-related-logo img[hidden], .detail-brand-mark img[hidden], .detail-title-brand img[hidden] { display: none !important; }
.detail-related-fallback { display: grid; width: 100%; height: 100%; place-items: center; color: var(--ink); font-size: 11px; font-weight: 800; }
.detail-related-fallback[hidden] { display: none !important; }
.detail-related-item span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.detail-related-item strong, .detail-related-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-related-item strong { color: var(--ink); font-size: 11px; }
.detail-related-item small { color: var(--ink-faint); font-size: 9px; }
.detail-related-item > svg { width: 13px; height: 13px; color: var(--ink-faint); }

@media (max-width: 900px) {
  .topnav { display: none; }
  body.directory-page .topbar-inner { width: calc(100% - 28px); gap: 8px; }
  body.directory-page .brand { min-width: 118px; }
  body.directory-page .topnav { justify-content: flex-start; gap: 2px; }
  body.directory-page .topnav-icon { display: none; }
  body.directory-page .topnav-link { padding: 0 6px; font-size: 11px; }
  body.directory-page #topnav [data-category="anime"] { display: none; }
  .hero-search-stage { padding: 66px 0 62px; }
  .search-modes { justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; }
  .search-mode { flex: 0 0 auto; }
  .hero-inner { grid-template-columns: 1fr; gap: 38px; min-height: auto; padding: 65px 0 58px; }
  .hero-note { max-width: 420px; justify-self: start; }
  .directory-layout { grid-template-columns: 1fr; gap: 34px; }
  .directory-sidebar { position: sticky; top: 77px; z-index: 25; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; max-height: none; overflow: visible; padding: 8px 12px 8px; border: 1px solid var(--directory-sidebar-border); border-radius: 15px; background: var(--directory-glass-bg); box-shadow: var(--directory-sidebar-shadow); -webkit-backdrop-filter: blur(6px) saturate(125%); backdrop-filter: blur(6px) saturate(125%); zoom: 1; }
  .sidebar-heading { zoom: .9; }
  .sidebar-heading h2 { margin-bottom: 0; }
  .sidebar-footnote { display: none; }
  .category-nav { display: flex; overflow-x: auto; gap: 6px; padding: 0 0 5px; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding-bottom: 5px; scrollbar-width: thin; zoom: var(--directory-scale); }
  .category-nav:not(.has-horizontal-overflow) { overflow-x: hidden; scrollbar-width: none; }
  .category-nav:not(.has-horizontal-overflow)::-webkit-scrollbar { display: none; }
  .category-link { grid-template-columns: 34px auto auto; width: auto; min-width: max-content; gap: 9px; min-height: 42px; padding: 0 9px; font-size: 15px; }
  .category-icon { width: 30px; height: 30px; border-radius: 9px; }
  .category-icon::before { width: 18px; height: 18px; }
  .category-link b { font-size: 12px; }
  .site-section { scroll-margin-top: 168px; }
  .site-detail-shell { width: min(100% - 32px, 780px); }
  .detail-hero-card { grid-template-columns: 1fr; }
  .detail-side-card { grid-template-columns: minmax(0, 1fr) 180px; }
  .detail-columns { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .site-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .api-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .site-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .topbar-inner, .hero-inner, .directory-layout, .footer-inner { width: min(100% - 32px, 1240px); }
  .topbar-inner { min-height: 68px; gap: 12px; }
  body.directory-page .topbar { top: 5px; margin: 5px 5px 0; border-radius: 14px; }
  body.directory-page { --topbar-h: 70px; }
  body.directory-page .topbar-inner { width: calc(100% - 20px); min-height: 60px; gap: 8px; }
  body.directory-page .brand { min-width: 0; }
  body.directory-page .topnav { display: none; }
  body.directory-page .top-actions { margin-left: auto; }
  .weather-chip em { display: none; }
  .weather-chip { padding: 0 10px; }
  /* 窄屏天气卡片：铺满视口宽度，压缩字号与小时列数，避免内容溢出被裁 */
  .weather-pop { width: auto; left: 8px !important; right: 8px; padding: 18px; border-radius: 18px; }
  .wp-now { gap: 15px; }
  .wp-now-main strong { font-size: 37px; }
  .wp-now-main span { font-size: 16px; }
  .wp-icon { width: 55px; height: 55px; }
  .wp-grid { gap: 9px; margin-top: 16px; }
  .wp-grid div { padding: 9px 13px; }
  .wp-grid span { font-size: 15px; }
  .wp-grid strong { font-size: 16px; }
  .wp-sub { margin-top: 16px; font-size: 16px; }
  .wp-hours { grid-template-columns: repeat(4, 1fr); }
  .wp-foot-note { font-size: 14px; }
  .wp-city-list { max-height: 252px; }
  .brand { min-width: 0; }
  .brand-copy small { display: none; }
  .top-actions { margin-left: auto; }
  .outline-button { padding: 0 11px; font-size: 12px; }
  .hero-inner { padding: 52px 0 48px; }
  .hero-search-stage { width: min(100% - 32px, 780px); padding: 49px 0 45px; }
  .hero h1 { font-size: clamp(41px, 12vw, 60px); }
  .hero-description { font-size: 15px; }
  .hero-note { padding-left: 18px; }
  .directory-section { padding: 58px 0 66px; }
  .directory-layout { gap: 26px; }
  .directory-sidebar { display: block; padding: 8px 10px 6px; }
  .sidebar-heading { display: flex; align-items: baseline; justify-content: space-between; }
  .sidebar-heading h2 { margin: 6px 0 12px; font-size: 21px; }
  .category-nav { margin-right: -16px; }
  .category-link { min-height: 42px; font-size: 14px; }
  .directory-heading { display: block; }
  .directory-heading h2 { font-size: 28px; }
  .search-box { min-height: 60px; padding-left: 15px; }
  .search-submit { min-height: 44px; padding: 0 13px; }
  .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .api-search-results { width: min(100% - 32px, 1240px); padding: 18px; }
  .api-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-tabs { max-width: min(100%, 520px); flex: 1 1 0; margin: 0; }
  .site-section { scroll-margin-top: 168px; }
  .site-section-heading { align-items: center; gap: 7px; }
  .site-section-heading p { display: none; }
  .about-section { padding-bottom: 66px; }
  .about-card { display: block; width: min(100% - 32px, 1000px); padding: 34px 26px; }
  .about-copy { margin-top: 28px; }
  .footer-inner { min-height: 74px; flex-wrap: wrap; gap: 7px 10px; }
  .footer-inner a { width: 100%; margin-left: 0; }
  .submit-form { padding: 28px 22px 24px; }
  .provider-dialog-shell { padding: 28px 22px 24px; }
  .site-dialog-shell { padding: 25px 20px 22px; }
  .site-dialog-brand h2 { font-size: 26px; }
  .site-dialog-stats { gap: 6px; padding: 10px; }
  .site-detail-shell { padding-top: 20px; }
  .detail-hero-card { padding: 20px; border-radius: 15px; }
  .detail-content-card, .detail-related-card { padding: 19px; border-radius: 15px; }
  .detail-side-card { grid-template-columns: 1fr; }
  .detail-feature-grid { grid-template-columns: 1fr; }
  .detail-feature-shot { grid-column: auto; }
  .detail-brand-row h1 { font-size: 29px; }
  .detail-stats { grid-template-columns: 1fr; }
  .detail-placeholder { min-height: 190px; }
}

@media (max-width: 480px) {
  .site-grid { grid-template-columns: 1fr; }
  .api-result-grid { grid-template-columns: 1fr; }
  .detail-feature-grid { grid-template-columns: 1fr; }
  .detail-feature-shot { grid-column: auto; }
}

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

/* Detail header follows the compact editorial layout from the reference page. */
.detail-hero-card { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.detail-title-row { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.detail-title-content { min-width: 0; }
.detail-title-heading { display: flex; min-width: 0; align-items: center; gap: 13px; }
.detail-title-brand { position: relative; display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; background: #fff; color: var(--ink-soft); font-size: 19px; font-weight: 800; }
.detail-title-brand img { display: block; width: 100%; height: 100%; padding: 3px; box-sizing: border-box; object-fit: contain; }
.detail-title-brand span { position: absolute; inset: 0; display: grid; place-items: center; }
.detail-title-row h1 { margin: 0; color: var(--ink); font-size: clamp(30px, 4vw, 38px); letter-spacing: -.06em; line-height: 1.12; }
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; color: var(--ink-faint); font-size: 12px; }
.detail-meta span { display: inline-flex; align-items: center; gap: 5px; }
.detail-meta svg { width: 15px; height: 15px; color: var(--ink-faint); }
.detail-description { max-width: 720px; margin: 53px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.8; }
.detail-collected-line { display: flex; align-items: baseline; gap: 14px; margin-top: 21px; color: var(--ink-soft); font-size: 14px; }
.detail-collected-line span { color: var(--ink-soft); }
.detail-collected-line strong { color: var(--ink-soft); font-weight: 500; }
.detail-header-favorite { min-height: 42px; padding: 0 15px; border: 0; border-radius: 8px; background: var(--accent-wash); color: var(--accent-deep); font-size: 15px; }
.detail-header-favorite svg { width: 18px; height: 18px; }
.detail-header-favorite:hover, .detail-header-favorite.is-active { background: color-mix(in srgb, var(--accent) 18%, var(--paper)); color: var(--accent-deep); }
.detail-action-row { margin-top: 26px; }
.detail-mobile-action { position: relative; display: inline-flex; }
.detail-qr-popover { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 20; display: grid; width: 190px; gap: 8px; justify-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 16px 38px rgba(20, 29, 42, .2); opacity: 0; pointer-events: none; transform: translate(-50%, -5px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; visibility: hidden; }
.detail-qr-popover::before { position: absolute; top: -7px; left: 50%; width: 13px; height: 13px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--surface); content: ''; transform: translateX(-50%) rotate(45deg); }
.detail-qr-popover img { display: block; width: 168px; height: 168px; border-radius: 5px; background: #fff; }
.detail-qr-popover small { color: var(--ink-faint); font-size: 11px; white-space: nowrap; }
.detail-mobile-action:hover .detail-qr-popover,
.detail-mobile-action:focus-within .detail-qr-popover,
.detail-mobile-action.is-open .detail-qr-popover { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); visibility: visible; }
.detail-primary { min-width: 174px; border-radius: 7px; background: #f43f4d; }
.detail-primary:hover { background: #df3040; }
.detail-secondary { border-color: #f43f4d; border-radius: 7px; color: #f43f4d; }
.detail-secondary:hover { border-color: #f43f4d; background: var(--accent-wash); color: #df3040; }
.detail-mirror-action.is-open .detail-secondary { border-color: #f43f4d; background: var(--accent-wash); color: #df3040; }
.detail-mirror-menu { position: absolute; top: calc(100% + 10px); left: 50%; z-index: 22; display: grid; min-width: 178px; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 16px 38px rgba(20, 29, 42, .2); transform: translateX(-50%); }
.detail-mirror-menu[hidden] { display: none; }
.detail-mirror-menu::before { position: absolute; top: -7px; left: 50%; width: 13px; height: 13px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--surface); content: ''; transform: translateX(-50%) rotate(45deg); }
.detail-mirror-menu a { display: grid; gap: 1px; padding: 8px 11px; border-radius: 8px; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background-color .16s ease, color .16s ease; }
.detail-mirror-menu a:hover { background: var(--accent-wash); color: var(--accent-deep); }
.detail-mirror-menu a strong { font-size: 12.5px; font-weight: 600; }
.detail-mirror-menu a small { color: var(--ink-faint); font-size: 11px; }
.detail-mirror-menu a:hover small { color: inherit; }
.detail-mirror-chev { display: inline-flex; transition: transform .18s ease; }
.detail-mirror-chev svg { width: 12px; height: 12px; }
.detail-mirror-action.is-open .detail-mirror-chev,
.site-dialog-mirror.is-open .detail-mirror-chev { transform: rotate(180deg); }
.detail-safety-button { position: relative; display: inline-flex; width: 54px; min-height: 44px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0; border: 1px solid #f43f4d; border-radius: 7px; background: transparent; color: #f43f4d; transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.detail-safety-button svg { width: 18px; height: 18px; }
.detail-safety-button:hover { border-color: #f43f4d; background: var(--accent-wash); color: #df3040; transform: translateY(-1px); }
.detail-safety-button::after { position: absolute; top: calc(100% + 8px); left: 50%; z-index: 25; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 6px; background: var(--ink); color: var(--paper); content: attr(data-tooltip); font-size: 11px; font-weight: 500; line-height: 1.4; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, -3px); transition: opacity .16s ease, transform .16s ease; }
.detail-safety-button:hover::after, .detail-safety-button:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.detail-tags { margin-top: 17px; }
.detail-tags span { border-radius: 7px; }

@media (hover: hover) and (pointer: fine) {
  .category-link:hover .category-icon { box-shadow: none; color: var(--ink); transform: translateY(-1px); }
  .topbar .icon-button:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 14%, transparent); }
}
.site-card.is-pointer-active { border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); box-shadow: var(--shadow-card-hover), 0 0 22px color-mix(in srgb, var(--accent) 16%, transparent); transform: translateY(-3px); }
.site-card.is-pointer-active .site-card-main { background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%); }
.site-card.is-pointer-active .site-mark img { filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--accent) 24%, transparent)); transform: scale(1.06); }

button:not(:disabled):active { filter: brightness(.96); }
.detail-primary:hover { box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 24%, transparent); }
.detail-secondary:hover, .detail-favorite:hover { box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 12%, transparent); }
.detail-safety-button:hover { box-shadow: 0 6px 15px color-mix(in srgb, var(--accent) 18%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .site-card:hover, .site-card:active, .site-card.is-pointer-active, .search-box:focus-within, .category-icon { transform: none !important; }
  .site-card::after, .category-nav::before { transition: none; }
  .site-card.is-contact-rippling::before, .site-card.is-contact-rippling::after, .detail-favorite.is-favorite-pulse, .detail-favorite.is-favorite-pulse svg { animation: none !important; }
  .site-card.is-pointer-active::before { opacity: .48; }
  .site-card.is-pointer-active::after { opacity: .36; }
  .site-card.is-pointer-active .site-mark img { filter: none; transform: none; }
  .tag-list { scroll-behavior: auto; }
  /* Keep this explicitly requested per-card reveal, while reducing unrelated motion. */
  .site-card.scroll-reveal.is-revealed { animation-duration: .48s !important; animation-delay: var(--reveal-delay, 0ms) !important; }
}

@media (max-width: 640px) {
  .detail-title-row { align-items: start; gap: 12px; }
  .detail-title-heading { gap: 9px; }
  .detail-title-brand { width: 44px; height: 44px; flex-basis: 44px; }
  .detail-title-row h1 { font-size: 29px; }
  .detail-description { margin-top: 36px; font-size: 15px; }
  .detail-header-favorite { padding: 0 10px; font-size: 13px; }
  .detail-action-row { gap: 8px; }
  .detail-primary { min-width: 0; }
  .detail-secondary { padding: 0 11px; }
  .detail-safety-button { width: 46px; }
  .detail-srv { padding: 13px 13px 12px; }
  .detail-srv-panels { grid-template-columns: 1fr; gap: 7px; }
  .detail-srv-head { flex-wrap: wrap; gap: 7px; }
  .detail-srv-title { font-size: 14px; }
}

.report-shell { width: min(100% - 48px, 760px); margin: 52px auto 76px; }
.report-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 20px; color: var(--ink-faint); font-size: 12px; }
.report-breadcrumb a:hover { color: var(--accent-deep); }
.report-card { padding: clamp(22px, 5vw, 40px); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-soft); }
.report-card h1 { margin: 0; color: var(--ink); font-size: clamp(26px, 5vw, 34px); letter-spacing: -.05em; }
.report-intro { margin: 9px 0 24px; color: var(--ink-soft); font-size: 14px; }
.report-notice { margin: 0 0 24px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 10px; background: var(--accent-wash); color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.report-form { display: grid; gap: 18px; }
.report-field { display: grid; gap: 7px; }
.report-field label { color: var(--ink); font-size: 13px; font-weight: 650; }
.report-field label span { color: var(--accent-deep); }
.report-field input, .report-field select, .report-field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; outline: 0; background: var(--paper); color: var(--ink); font-size: 14px; }
.report-field textarea { min-height: 132px; resize: vertical; line-height: 1.7; }
.report-field input:focus, .report-field select:focus, .report-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.report-field small { color: var(--ink-faint); font-size: 11px; }
.report-submit { justify-self: start; min-height: 46px; padding: 0 22px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 650; transition: transform .2s ease, background-color .2s ease; }
.report-submit:hover { background: var(--accent-deep); transform: translateY(-1px); }
.report-status { min-height: 24px; margin: 0; color: var(--accent-deep); font-size: 13px; }
@media (max-width: 640px) { .report-shell { width: min(100% - 32px, 760px); margin: 30px auto 52px; } }

/* 窄屏保留左侧纵向分类栏；悬停或键盘聚焦时展开文字菜单 */
@media (max-width: 1200px) {
  .directory-layout { grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 15px; }
  .directory-sidebar { position: sticky; top: 82px; z-index: 35; display: block; width: 58px; height: calc(100vh - 98px); max-height: none; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; zoom: 1; }
  .sidebar-heading, .sidebar-footnote { display: none; }
  .category-nav { position: absolute; top: 0; left: 0; z-index: 60; display: grid; box-sizing: border-box; width: 58px; max-height: 100%; gap: 4px; padding: 6px; overflow-x: hidden; overflow-y: auto; border: 1px solid var(--directory-sidebar-border); border-radius: 15px; background: var(--header-glass); box-shadow: var(--directory-sidebar-shadow); -webkit-backdrop-filter: saturate(140%) blur(7px); backdrop-filter: saturate(140%) blur(7px); zoom: 1; transition: width .2s cubic-bezier(.2,.8,.2,1), background-color .24s ease, box-shadow .24s ease, border-color .24s ease; }
  .category-nav:hover, .category-nav:focus-within { width: min(238px, calc(100vw - 82px)); background: color-mix(in srgb, var(--header-glass) 32%, transparent); box-shadow: var(--directory-sidebar-hover-shadow); -webkit-backdrop-filter: saturate(140%) blur(7px); backdrop-filter: saturate(140%) blur(7px); }
  .category-nav:hover::before, .category-nav:focus-within::before { width: calc(100% - 12px); transform: translate3d(6px, var(--category-indicator-y, 0px), 0); }
  .category-link { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 0; width: 44px; min-width: 44px; min-height: 44px; padding: 0; text-align: center; }
  .category-link > span:not(.category-icon), .category-link > b { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .category-icon { width: 32px; height: 32px; }
  .category-nav:hover .category-link, .category-nav:focus-within .category-link { grid-template-columns: 34px minmax(0, 1fr) auto; justify-items: stretch; gap: 8px; width: 100%; min-width: 0; min-height: 44px; padding: 0 9px; text-align: left; }
  .category-nav:hover .category-link > span:not(.category-icon), .category-nav:hover .category-link > b,
  .category-nav:focus-within .category-link > span:not(.category-icon), .category-nav:focus-within .category-link > b { position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: hidden; clip-path: none; text-overflow: ellipsis; }
}

@media (max-width: 440px) {
  .directory-layout { width: min(100% - 24px, 1240px); grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
  .directory-sidebar { width: 52px; }
  .category-nav { width: 52px; padding: 5px; }
  .category-nav:hover, .category-nav:focus-within { width: min(220px, calc(100vw - 70px)); background: color-mix(in srgb, var(--header-glass) 32%, transparent); box-shadow: var(--directory-sidebar-hover-shadow); -webkit-backdrop-filter: saturate(140%) blur(7px); backdrop-filter: saturate(140%) blur(7px); }
  .category-link { width: 40px; min-width: 40px; min-height: 42px; }
  .category-nav:hover .category-link, .category-nav:focus-within .category-link { min-height: 42px; }
  .site-grid { grid-template-columns: 1fr; }
}



/* ===== 备案信息与说明页 ===== */

/* 页脚原来是「span + 一串 a」，靠 .footer-inner a{margin-left:auto} 把第一个链接推到右侧。
   加入备案号后必须显式分组，否则备案号会和「投诉举报」一起被推到右边挤成一坨。 */
.footer-inner .footer-links { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.footer-inner .footer-links a { margin-left: 0; }
.footer-inner a.footer-icp { margin-left: 0; color: var(--footer-ink-muted); font-variant-numeric: tabular-nums; }
.footer-inner a.footer-icp:hover { color: var(--accent-deep); }

/* 说明页（关于本站 / 404）：不加载 app.js，所以顶栏换成静态版本 */
.doc-shell { display: flex; flex-direction: column; min-height: 100vh; }
.doc-topbar { display: flex; align-items: center; gap: 14px; width: min(1000px, calc(100% - 48px)); margin: 0 auto; padding: 26px 0 0; }
.doc-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -.03em; }
.doc-brand img { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 4px 12px rgba(31, 41, 51, .14); }
.doc-topnav { display: flex; align-items: center; gap: 18px; margin-left: auto; color: var(--ink-soft); font-size: 12px; }
.doc-topnav a { color: inherit; transition: color .2s ease; }
.doc-topnav a:hover { color: var(--accent-deep); }
.doc-theme { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft); }
.doc-theme:hover { color: var(--ink); border-color: var(--line-strong); }
.doc-theme svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.doc-theme .doc-theme-moon { display: none; }
:root[data-theme="dark"] .doc-theme .doc-theme-sun { display: none; }
:root[data-theme="dark"] .doc-theme .doc-theme-moon { display: block; }

.doc-main { flex: 1 1 auto; width: min(1000px, calc(100% - 48px)); margin: 0 auto; padding: 46px 0 56px; }
.doc-title { margin: 0 0 10px; color: var(--ink); font-size: clamp(30px, 5vw, 44px); letter-spacing: -.055em; line-height: 1.08; }
.doc-lede { max-width: 620px; margin: 0 0 34px; color: var(--ink-soft); font-size: 14px; line-height: 1.85; }

.doc-card { padding: 28px 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-card); }
.doc-card + .doc-card { margin-top: 14px; }
.doc-card h2 { margin: 0 0 12px; color: var(--ink); font-size: 17px; letter-spacing: -.025em; }
.doc-card h2 small { margin-left: 8px; color: var(--ink-soft); font-size: 11px; font-weight: 400; letter-spacing: 0; }
.doc-card p, .doc-card li { color: var(--ink-soft); font-size: 13.5px; line-height: 1.9; }
.doc-card p + p { margin-top: 10px; }
.doc-card ul { margin: 6px 0 0; padding-left: 19px; }
.doc-card li + li { margin-top: 6px; }
.doc-card a { color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.doc-card a:hover { color: var(--accent); }
.doc-strong { color: var(--ink); font-weight: 600; }

.doc-meta { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 9px 16px; margin: 0; font-size: 13px; }
.doc-meta dt { color: var(--ink-soft); }
.doc-meta dd { margin: 0; color: var(--ink); }
.doc-meta dd a { color: var(--accent-deep); }

/* 404：数字用极细字重压住视口重心，不做插画 */
/* min-height 让内容在首屏里垂直居中；否则只剩顶上一小块，看着像加载失败 */
/* grid 默认 align-content:start，内容会贴着顶部堆；要靠 align-content 才真正垂直居中 */
.doc-404 { display: grid; min-height: min(64vh, 540px); align-content: center; justify-items: center; padding: 24px 0 40px; text-align: center; }
/* 选择器必须带上 .doc-404，否则会被下面的 .doc-404 p 用更高特异性压回 13.5px */
.doc-404 p.doc-404-code { margin: 0; color: var(--ink); font-size: clamp(76px, 16vw, 132px); font-weight: 200; letter-spacing: -.06em; line-height: 1; }
.doc-404 h1 { margin: 18px 0 10px; color: var(--ink); font-size: 22px; letter-spacing: -.03em; }
.doc-404 p { max-width: 400px; margin: 0 auto 26px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.85; }
.doc-404-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.doc-404-actions a { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-size: 13px; }
.doc-404-actions a.is-primary { border-color: transparent; background: var(--navy); color: var(--ink-on-deep); }

@media (max-width: 900px) {
  /* 窄屏下页脚整行折行，链接不能再被 width:100% 撑成一行一个 */
  .footer-inner .footer-links { width: 100%; margin-left: 0; flex-wrap: wrap; gap: 7px 12px; }
  .footer-inner .footer-links a,
  .footer-inner a.footer-icp { width: auto; }
  .doc-topbar, .doc-main { width: calc(100% - 32px); }
  .doc-card { padding: 24px 22px; }
  .doc-meta { grid-template-columns: 1fr; gap: 3px; }
  .doc-meta dd { margin-bottom: 8px; }
}

/* ===== 手机竖屏修正（390 / 430 实测） =====
   三个真问题，成因都不是「间距不够」：
   1) .hero 是 grid 却没写列宽，默认列宽由内容 min-content 撑开。搜索条里
      logo(122px) + 四个模式按钮 + 输入框的 min-content 约 570px，列宽被顶到 570，
      再被 .hero 的 overflow:hidden 从右边裁掉，于是搜索框只露一半。
   2) ≤1200 那套「左侧纵向图标栏 + 悬停展开」是给平板横屏的。手机上它把内容区
      挤成 304px，分类浮层紧贴卡片，看着像压在一起。
   3) 单列卡片按桌面尺寸渲染（logo 57.5 + 3 行描述 + 标签条），一张近 130px 高。
   下面把 1) 显式收成一列，2) 在 ≤640 退回横向分类条，3) 卡片按手机尺寸压紧。 */
@media (max-width: 640px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* 手机上首屏最贵的是纵向空间：原来 padding 42/38 + min-height 460 会在
     搜索框和分类之间留出近 280px 空白，一屏看不到任何卡片。 */
  .hero-search-stage { width: auto; margin: 0 16px; padding: 34px 0 22px; }
  /* 模式标签横向滚动，别换行也别被裁 */
  .search-modes { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; }

  .directory-layout { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* 未滚动时顶栏是悬浮在 hero 上的透明层（155 行用带两个 :not 的选择器
     把背景设成 transparent，特异性比这里高），只有吸附后才给实色。
     毛玻璃在这个尺寸压不住滚过去的内容，卡片文字会从顶栏后面透出来。 */
  body.directory-page .topbar.is-scrolled,
  body.directory-page .topbar.has-docked-search {
    background-color: var(--surface) !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .directory-sidebar {
    position: sticky; top: 62px; z-index: 29;
    display: block; width: auto; height: auto;
    padding: 8px 10px 6px; overflow: visible;
    border: 1px solid var(--directory-sidebar-border); border-radius: 15px;
    /* 吸顶时必须用实色：毛玻璃会把下方卡片透出来，看着就像分类条和卡片重叠了 */
    background: var(--surface); box-shadow: 0 6px 20px rgba(25, 34, 42, .10);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    zoom: 1;
  }
  .sidebar-heading { display: flex; align-items: baseline; justify-content: space-between; }
  .sidebar-heading h2 { margin: 4px 0 10px; font-size: 19px; }
  .sidebar-footnote { display: none; }
  .category-nav {
    position: relative; top: auto; left: auto;
    display: flex; width: auto; max-height: none; height: auto;
    gap: 6px; margin-right: 0; padding: 0 0 5px;
    overflow-x: auto; overflow-y: hidden; border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: none;
    /* 触摸设备上可见滚动条只会多一条灰槽，滑动靠手指，隐藏掉 */
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .category-nav::-webkit-scrollbar { display: none; }
  /* 有横向溢出时右缘做一段渐隐，提示还能往左滑；硬切半个字看着像被裁坏 */
  .category-nav.has-horizontal-overflow {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }
  .category-nav:hover, .category-nav:focus-within {
    width: auto; background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .category-nav:not(.has-horizontal-overflow) { overflow-x: hidden; scrollbar-width: none; }
  .category-nav:not(.has-horizontal-overflow)::-webkit-scrollbar { display: none; }
  .category-link {
    display: grid; grid-template-columns: 30px auto auto;
    justify-items: stretch; gap: 8px;
    width: auto; min-width: max-content; min-height: 42px;
    padding: 0 9px; text-align: left;
  }
  /* ≤1200 用 clip-path 把文字做成视觉隐藏，这里必须逐条还原 */
  .category-link > span:not(.category-icon), .category-link > b {
    position: static; width: auto; height: auto; margin: 0; padding: 0;
    overflow: visible; clip-path: none; white-space: nowrap;
  }
  .category-icon { width: 30px; height: 30px; border-radius: 9px; }
  .category-icon::before { width: 18px; height: 18px; }
  .category-link b { font-size: 12px; }
  .site-section { scroll-margin-top: 148px; }

  /* 卡片：桌面尺寸是 logo 57.5 + 三行描述 + 标签条，手机单列时太占屏。
     zoom 归 1，logo 收到 44，描述压到两行，标签条压薄。 */
  .site-card { zoom: 1; }
  .site-grid { gap: 9px; }
  .site-card-main { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; min-height: 0; padding: 10px 11px 8px; }
  .site-mark { width: 44px; height: 44px; border-radius: 11px; font-size: 15px; }
  .site-card-copy { gap: 3px; }
  .site-card-copy strong { font-size: 14.5px; }
  .site-card-copy small { min-height: 0; font-size: 12px; line-height: 1.45; -webkit-line-clamp: 2; }
  .site-card-footer { min-height: 32px; padding: 3px 8px; }
  .tag-list span { padding: 2.5px 6.5px; font-size: 10.5px; }
}

/* ===== 静态详情页（/s/<id>.html）专用 =====
   这些页面由 scripts/build-seo-pages.mjs 生成，正文服务端写死，
   不加载 detail.js。样式沿用 .detail-* 那套，只补几个静态页独有的块。 */
.detail-page .top-actions { margin-left: auto; }
.seo-mark { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 12px; background: var(--paper-deep); color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -.04em; }
.seo-mark-sm { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: var(--paper-deep); color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.seo-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: 12.5px; }
.seo-facts strong { color: var(--ink); font-weight: 600; }
.seo-body p { margin: 0 0 12px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.95; }
.seo-body p:last-child { margin-bottom: 0; }
.seo-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.seo-quick a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-size: 12.5px; }
.seo-quick a:hover { border-color: var(--accent); color: var(--accent-deep); }