/* ==========================================================================
   BAIYE-146 · 白叶「现代像素混搭」设计层
   - 标题 / 数字 / 标签：WhiteLeaf Pixel（Fusion Pixel 12px 子集，OFL-1.1）
   - 正文：系统黑体栈
   - 像素字体只用 12 的整数倍字号（12/24/36/48/60/72/96），保证笔画锐利
   本文件在首页内联样式之后加载，只覆盖外观，不改业务逻辑
   ========================================================================== */
@font-face {
  font-family: "WhiteLeaf Pixel";
  src: url("/assets/fonts/whiteleaf-pixel-12.woff2?v=146") format("woff2");
  font-display: swap;
  font-weight: 400 900;
}

:root {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-pixel: "WhiteLeaf Pixel", var(--font-body);
  --font-sans: var(--font-body);
  --font-serif: var(--font-body);
  --px: 3px; /* 像素描边粗细 */
}

[data-theme="light"] {
  --px-bg: #f3f6f1;
  --px-bg-2: #e9efe6;
  --px-surface: #ffffff;
  --px-surface-2: #f8faf6;
  --px-ink: #1f2b22;
  --px-ink-2: #536253;
  --px-ink-3: #879585;
  --px-line: #24321f;
  --px-line-soft: rgba(36, 50, 31, 0.14);
  --px-shadow: rgba(36, 50, 31, 0.16);
  --px-accent: #4f8a3c;
  --px-accent-hi: #63a24c;
  --px-accent-ink: #ffffff;
  --px-sky: #2f7fc1;
  --px-sky-soft: #e3f0fa;
  --px-amber: #c7821b;
  --px-leaf-soft: #e6f1df;
  --wlt-sky-low: #f3f6f1;
}
[data-theme="dark"] {
  --px-bg: #0d1916;
  --px-bg-2: #12221e;
  --px-surface: #15241f;
  --px-surface-2: #1a2c26;
  --px-ink: #e9efe2;
  --px-ink-2: #a9b8a6;
  --px-ink-3: #6f8270;
  --px-line: #04090a;
  --px-line-soft: rgba(233, 239, 226, 0.1);
  --px-shadow: rgba(0, 0, 0, 0.45);
  --px-accent: #8fd06a;
  --px-accent-hi: #a6e07f;
  --px-accent-ink: #0b1a12;
  --px-sky: #6cc4ff;
  --px-sky-soft: rgba(108, 196, 255, 0.12);
  --px-amber: #f2b84b;
  --px-leaf-soft: rgba(143, 208, 106, 0.12);
  --wlt-sky-low: #0d1916;
}

/* ---------- 基础 ---------- */
html, body { background-color: var(--px-bg); }
body { font-family: var(--font-body); color: var(--px-ink); text-rendering: optimizeLegibility; }
.ambient-bg-light, .ambient-bg-dark { background: var(--px-bg) !important; }
::selection { background: var(--px-accent); color: var(--px-accent-ink); }
.wl-pixel, .prologue-title, .section-headline, .reel-section-title, .reel-card-title, .path-card-title, .callout-quote, .brand-title, .drawer-title {
  font-family: var(--font-pixel);
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* 小标签：像素 12px */
.section-kicker, .prologue-kicker, .reel-card-badge, .path-card-index, .roadmap-label, .memory-date, .drawer-sub, .wl-tag {
  font-family: var(--font-pixel) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  -webkit-font-smoothing: none;
}
.section-kicker, .reel-card-badge, .path-card-index, .roadmap-label, .memory-date { color: var(--px-accent) !important; }
.section-kicker::before, .reel-card-badge::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 1px;
  background: currentColor; box-shadow: 9px 0 0 currentColor; margin-right: 17px;
}

/* ---------- 像素按钮（缺角描边 + 底部厚度）---------- */
.wl-btn, .btn-primary-glow, .btn-glass:not(.btn-account),
.hero-experience.is-tree #btnExplore, .wlt-find-btn {
  --bl: var(--px-line);
  --bf: var(--px-surface);
  --bt: var(--px-ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px !important;
  margin: var(--px);
  border: 0 !important; border-radius: 0 !important;
  background: var(--bf) !important; color: var(--bt) !important;
  font-family: var(--font-body) !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .02em;
  text-decoration: none !important; cursor: pointer;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--bl), 0 var(--px) 0 0 var(--bl),
    calc(var(--px) * -1) 0 0 0 var(--bl), var(--px) 0 0 0 var(--bl),
    inset 0 -4px 0 0 rgba(0, 0, 0, .18), inset 0 3px 0 0 rgba(255, 255, 255, .22) !important;
  transition: transform .12s ease, filter .15s ease !important;
  animation: none !important;
}
.btn-primary-glow, .hero-experience.is-tree #btnExplore, .wl-btn.is-primary {
  --bf: var(--px-accent); --bt: var(--px-accent-ink);
}
.wl-btn:hover, .btn-primary-glow:hover, .btn-glass:not(.btn-account):hover,
.hero-experience.is-tree #btnExplore:hover, .wlt-find-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.wl-btn:active, .btn-primary-glow:active, .btn-glass:not(.btn-account):active,
.hero-experience.is-tree #btnExplore:active, .wlt-find-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--bl), 0 var(--px) 0 0 var(--bl),
    calc(var(--px) * -1) 0 0 0 var(--bl), var(--px) 0 0 0 var(--bl),
    inset 0 4px 0 0 rgba(0, 0, 0, .18) !important;
}
.wl-btn:focus-visible, .btn-primary-glow:focus-visible, .wlt-find-btn:focus-visible, #btnExplore:focus-visible { outline: 3px dashed var(--px-sky); outline-offset: 6px; }
.wlt-find-btn:disabled { opacity: .55; transform: none; filter: none; }
.btn-primary-glow svg { flex: none; }

/* ==========================================================================
   顶部导航
   ========================================================================== */
.site-header.wl-nav {
  height: 68px; padding: 0 clamp(16px, 3.2vw, 40px) !important;
  gap: 16px; background: transparent; border-bottom: 0;
}
.site-header.wl-nav.is-scrolled {
  background: color-mix(in srgb, var(--px-bg) 88%, transparent) !important;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 2px 0 0 var(--px-line-soft) !important; border: 0 !important;
}
.wl-nav .brand-group { display: flex; align-items: center; gap: 10px; padding: 0 !important; background: none !important; flex: none; }
.wl-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--px-ink); padding: 6px 4px; }
.wl-brand .brand-logo-img { width: 32px; height: 32px; margin: 0; filter: none; image-rendering: auto; }
.wl-brand .brand-title { font-size: 24px !important; line-height: 1; color: var(--px-ink); white-space: nowrap; }
.wl-brand:hover .brand-logo-img { transform: rotate(-6deg) scale(1.06); }

.wl-nav .nav-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wl-nav .nav-links { display: flex; align-items: center; gap: 2px; font-size: 14px; }
.wl-nav .nav-links a, .wl-nav .nav-links .nav-link-btn {
  position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 11px !important;
  font-family: var(--font-body); font-size: 14px !important; font-weight: 600 !important;
  color: var(--px-ink-2) !important; background: none; border: 0; text-decoration: none; white-space: nowrap;
  text-shadow: none !important; transform: none !important; cursor: pointer;
}
.wl-nav .nav-links a::after, .wl-nav .nav-links .nav-link-btn::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 3px;
  background: var(--px-accent); transform: scaleX(0); transform-origin: left; transition: transform .18s steps(4);
}
.wl-nav .nav-links a:hover, .wl-nav .nav-links .nav-link-btn:hover { color: var(--px-ink) !important; }
.wl-nav .nav-links a:hover::after, .wl-nav .nav-links .nav-link-btn:hover::after { transform: scaleX(1); }
.wl-nav .nav-links .wl-dot::before { content: ""; width: 6px; height: 6px; margin-right: 7px; background: var(--px-amber); }

/* 右侧方块图标按钮：主题 / 菜单 */
.wl-icon-btn, .wl-nav .theme-toggle-btn {
  position: relative; flex: none; width: 40px; height: 40px; margin: var(--px);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0 !important; border-radius: 0 !important; padding: 0;
  background: var(--px-surface) !important; color: var(--px-ink) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--px-line), 0 var(--px) 0 0 var(--px-line),
    calc(var(--px) * -1) 0 0 0 var(--px-line), var(--px) 0 0 0 var(--px-line),
    inset 0 -3px 0 0 rgba(0, 0, 0, .12) !important;
  cursor: pointer; transition: transform .12s ease !important;
}
.wl-icon-btn:hover, .wl-nav .theme-toggle-btn:hover { transform: translateY(-2px) !important; }
.wl-icon-btn:active, .wl-nav .theme-toggle-btn:active { transform: translateY(1px) !important; }
.wl-icon-btn:focus-visible, .wl-nav .theme-toggle-btn:focus-visible { outline: 3px dashed var(--px-sky); outline-offset: 5px; }
.wl-menu-btn svg { width: 20px; height: 20px; shape-rendering: crispEdges; }

/* 百科：带像素书图标的强调按钮 */
.wl-nav .wl-codex { --bf: var(--px-leaf-soft); --bt: var(--px-ink); min-height: 40px; padding: 0 14px !important; font-size: 14px !important; white-space: nowrap; }
.wl-nav .wl-codex svg { width: 16px; height: 16px; flex: none; shape-rendering: crispEdges; color: currentColor; }
.wl-nav .wl-codex { gap: 8px; --bf: var(--px-leaf-soft); }
.wl-nav .wl-codex:hover { transform: translateY(-2px) !important; filter: brightness(1.06); }
.wl-nav .wl-codex:focus-visible { outline: 3px solid var(--px-ink); outline-offset: 3px; box-shadow: none !important; }
.wl-st-reset-cycle { display: inline-block; align-self: flex-start; margin: 0 0 4px; padding: 1px 8px; font-size: 12px; font-weight: 700; line-height: 1.6; border: 2px solid currentColor; opacity: .85; }

/* 账号按钮 */
.wl-nav .btn-account {
  flex: none; min-height: 40px; height: 40px; margin: var(--px); padding: 0 14px 0 10px !important;
  border: 0 !important; border-radius: 0 !important; white-space: nowrap;
  background: var(--px-accent) !important; color: var(--px-accent-ink) !important;
  font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 700 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--px-line), 0 var(--px) 0 0 var(--px-line),
    calc(var(--px) * -1) 0 0 0 var(--px-line), var(--px) 0 0 0 var(--px-line),
    inset 0 -4px 0 0 rgba(0, 0, 0, .2), inset 0 3px 0 0 rgba(255, 255, 255, .2) !important;
  transition: transform .12s ease !important;
}
.wl-nav .btn-account:hover { transform: translateY(-2px); filter: brightness(1.06); }
.wl-nav .btn-account:active { transform: translateY(1px); }
.wl-nav .btn-account span { color: inherit !important; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.wl-nav .btn-account > div { border-radius: 0 !important; border-color: var(--px-accent-ink) !important; }

/* 逐级收起：宽度不够时，次要入口进抽屉，而不是被挤成竖排 */
@media (max-width: 960px) { .wl-nav .nav-links { display: none !important; } }
@media (max-width: 720px) {
  .site-header.wl-nav { height: 60px; padding: 0 12px 0 14px !important; }
  .wl-nav .wl-codex { display: none !important; }
  /* 手机端也保留个人卡片入口：已登录显示头像+名字，未登录只显示人像图标 */
  .wl-nav .btn-account { display: inline-flex !important; align-items: center; justify-content: center; min-width: 40px; max-width: 42vw; padding: 0 10px 0 8px !important; margin: var(--px) 0 !important; }
  .wl-nav .btn-account span { max-width: 6.5em; font-size: 13px !important; }
  .wl-nav .btn-account:not(:has(> div)) { padding: 0 !important; width: 40px; }
  .wl-nav .btn-account:not(:has(> div)) span { display: none; }
  .wl-nav .btn-account > div { margin-right: 6px !important; }
  .wl-nav .btn-account:not(:has(> div)) .icon-user { width: 20px; height: 20px; }
  .wl-brand .brand-logo-img { width: 28px; height: 28px; }
  .wl-nav .nav-actions { gap: 8px; }
  .wl-icon-btn, .wl-nav .theme-toggle-btn { width: 40px; height: 40px; }
}

/* ==========================================================================
   导航抽屉（右侧滑出 · 像素面板）
   ========================================================================== */
.nav-drawer-overlay { justify-content: flex-end !important; }
.nav-drawer-backdrop { background: rgba(6, 12, 10, .55) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; }
.nav-drawer-panel {
  width: min(400px, 90vw) !important;
  background: var(--px-bg) !important; background-color: var(--px-bg) !important;
  border: 0 !important; box-shadow: calc(var(--px) * -1) 0 0 0 var(--px-line), -16px 0 0 0 var(--px-shadow) !important;
  transform: translateX(105%) !important;
  transition: transform .34s cubic-bezier(.2, .8, .2, 1) !important;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-drawer-overlay.is-open .nav-drawer-panel { transform: translateX(0) !important; }
.nav-drawer-header { padding: 16px 16px 14px 20px !important; border-bottom: 2px solid var(--px-line-soft) !important; }
.drawer-logo { width: 34px !important; height: 34px !important; filter: none !important; }
.drawer-title { font-size: 24px !important; line-height: 1.1; color: var(--px-ink) !important; }
.drawer-sub { color: var(--px-ink-3) !important; margin-top: 4px; }
.drawer-close-btn {
  width: 40px !important; height: 40px !important; border-radius: 0 !important; margin: var(--px);
  border: 0 !important; background: var(--px-surface) !important; color: var(--px-ink) !important;
  box-shadow: 0 calc(var(--px) * -1) 0 0 var(--px-line), 0 var(--px) 0 0 var(--px-line), calc(var(--px) * -1) 0 0 0 var(--px-line), var(--px) 0 0 0 var(--px-line) !important;
}
.drawer-close-btn:hover { transform: none !important; background: var(--px-surface-2) !important; }
.drawer-nav-list { padding: 14px 14px 18px !important; gap: 4px !important; overscroll-behavior: contain; }
.drawer-group-label { font-family: var(--font-pixel); font-size: 12px; letter-spacing: .08em; color: var(--px-ink-3); padding: 12px 8px 6px; -webkit-font-smoothing: none; }
.drawer-item {
  gap: 12px !important; padding: 10px 10px !important; min-height: 56px;
  border-radius: 0 !important; border: 0 !important;
  background: transparent !important; box-shadow: none !important; transform: none !important;
  color: var(--px-ink) !important;
}
.drawer-item:hover, .drawer-item:focus-visible { background: var(--px-surface) !important; box-shadow: inset 4px 0 0 0 var(--px-accent) !important; outline: none; }
.drawer-item-featured { background: var(--px-leaf-soft) !important; box-shadow: inset 4px 0 0 0 var(--px-accent) !important; margin-bottom: 6px; }
.drawer-item-icon {
  width: 36px !important; height: 36px !important; border-radius: 0 !important; font-size: 18px !important;
  background: var(--px-surface) !important; box-shadow: inset 0 0 0 2px var(--px-line-soft), inset 0 -3px 0 0 var(--px-line-soft);
}
.drawer-item-title { font-size: 15px !important; font-weight: 700 !important; color: var(--px-ink) !important; flex-wrap: wrap; row-gap: 2px; }
.drawer-item-desc { font-size: 12.5px !important; color: var(--px-ink-2) !important; }
.drawer-badge {
  font-family: var(--font-pixel); font-weight: 400 !important; font-size: 12px !important; line-height: 16px;
  padding: 1px 6px !important; border-radius: 0 !important;
  background: var(--px-accent) !important; color: var(--px-accent-ink) !important; -webkit-font-smoothing: none;
}
.drawer-arrow { color: var(--px-ink-3) !important; flex: none; }
.nav-drawer-footer { padding: 14px 18px !important; border-top: 2px solid var(--px-line-soft) !important; gap: 12px; flex-wrap: wrap; }
.drawer-theme-btn {
  border-radius: 0 !important; border: 0 !important; margin: var(--px); padding: 8px 14px !important;
  background: var(--px-surface) !important; color: var(--px-ink) !important; font-family: var(--font-body);
  box-shadow: 0 calc(var(--px) * -1) 0 0 var(--px-line), 0 var(--px) 0 0 var(--px-line), calc(var(--px) * -1) 0 0 0 var(--px-line), var(--px) 0 0 0 var(--px-line) !important;
}
.drawer-status { color: var(--px-ink-2) !important; }
.status-live-dot { border-radius: 0 !important; background: var(--px-accent) !important; box-shadow: none !important; }
.wl-drawer-account { margin: 2px 0 8px; }
.wl-drawer-account .drawer-item { background: var(--px-accent) !important; color: var(--px-accent-ink) !important; box-shadow: inset 0 -4px 0 0 rgba(0,0,0,.18) !important; }
.wl-drawer-account .drawer-item * { color: var(--px-accent-ink) !important; }
.wl-drawer-account .drawer-item-icon { background: rgba(255,255,255,.18) !important; box-shadow: none; }
.wl-drawer-account .drawer-item-desc { opacity: .85; }

/* ==========================================================================
   首屏（白叶之树）
   ========================================================================== */
.hero-experience.is-tree { padding-top: 104px; }
.hero-experience.is-tree .prologue-kicker { color: var(--wlt-ink-2) !important; margin-bottom: 20px; gap: 10px; }
.hero-experience.is-tree .prologue-kicker::before { width: 24px; height: 3px; }
.hero-experience.is-tree .prologue-title { font-size: 96px; line-height: 1.12; margin: 0 0 24px; color: var(--wlt-ink); }
.hero-experience.is-tree .prologue-title em { display: block; }
.hero-experience.is-tree .prologue-desc { font-size: 16px; line-height: 1.85; max-width: 30em; margin-bottom: 26px; }
.wlt-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -6px 0 26px !important; font-size: 13px !important; }
.wlt-stats b { font-family: var(--font-pixel); font-weight: 400 !important; font-size: 24px !important; line-height: 1; margin-right: 2px; vertical-align: -2px; -webkit-font-smoothing: none; }
.wlt-actions { gap: 12px 14px !important; }
.hero-experience.is-tree #btnExplore, .wlt-find-btn { --bl: var(--wlt-card-line); }
.wlt-find-btn { --bf: var(--wlt-card); --bt: var(--wlt-ink); }
.wlt-sizes { margin-top: 22px !important; }
.wlt-sizes > span:first-child { font-family: var(--font-pixel); font-size: 12px; letter-spacing: .06em; -webkit-font-smoothing: none; }
.wlt-sizes-seg { border-radius: 0 !important; }
.wlt-size-btn { font-family: var(--font-body); }
.wlt-size-btn small { font-family: var(--font-pixel); font-size: 12px !important; -webkit-font-smoothing: none; }
.wlt-tip { border-radius: 0 !important; font-family: var(--font-body); }
/* 首屏底部与下一区平滑衔接 */
.hero-experience.is-tree::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--px-bg)); }

@media (max-width: 1279px) { .hero-experience.is-tree .prologue-title { font-size: 72px; } }
@media (max-width: 900px) {
  .hero-experience.is-tree { padding: 88px 18px 20px !important; }
  .hero-experience.is-tree .prologue-title { font-size: 60px; margin-bottom: 18px; }
  .wlt-stats { justify-content: center; }
}
@media (max-width: 600px) {
  .hero-experience.is-tree { padding: 80px 16px 12px !important; }
  .hero-experience.is-tree .prologue-kicker { font-size: 12px !important; margin-bottom: 14px; }
  .hero-experience.is-tree .prologue-title { font-size: 48px; line-height: 1.15; }
  .hero-experience.is-tree .prologue-desc { font-size: 15px; line-height: 1.8; margin-bottom: 18px; }
  .wlt-stats { margin: -2px 0 20px !important; }
  .wlt-actions { flex-direction: column; align-items: stretch; gap: 12px !important; padding: 0 var(--px); }
  .hero-experience.is-tree #btnExplore, .wlt-find-btn { width: calc(100% - var(--px) * 2); }
  .wlt-actions > .wlt-find-btn:not([hidden]) + .wlt-find-btn:not([hidden]) { margin-top: 0; }
  .wlt-sizes { flex-wrap: wrap; justify-content: center; }
  .wlt-size-btn { min-width: 58px !important; padding: 8px 12px !important; }
}

/* ==========================================================================
   通用区块
   ========================================================================== */
.section-head { margin-bottom: 40px !important; }
.section-headline, .reel-section-title { font-size: 48px !important; line-height: 1.25 !important; color: var(--px-ink) !important; margin-top: 4px !important; }
.section-subhead { font-size: 15px; line-height: 1.85; color: var(--px-ink-2); max-width: 40em; }
@media (max-width: 700px) {
  .section-headline, .reel-section-title { font-size: 36px !important; line-height: 1.3 !important; }
  .content-wrap { padding: 56px 18px 96px !important; }
  .section-head { margin-bottom: 28px !important; }
}
@media (max-width: 360px) { .section-headline, .reel-section-title { font-size: 24px !important; } }

/* 卡片统一：实心面 + 2px 描边 + 硬投影，小圆角 */
.reel-card, .memory-card, .path-card, .roadmap-item, .callout-box, .wl-codex-banner {
  background: var(--px-surface) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 2px solid var(--px-line) !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 0 0 var(--px-shadow) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
[data-theme="dark"] .reel-card, [data-theme="dark"] .memory-card, [data-theme="dark"] .path-card,
[data-theme="dark"] .roadmap-item, [data-theme="dark"] .callout-box, [data-theme="dark"] .wl-codex-banner {
  border-color: rgba(233, 239, 226, .16) !important;
}
.reel-card:hover, .memory-card:hover, .path-card:hover, .roadmap-item:hover, .wl-codex-banner:hover {
  transform: translateY(-4px) !important; box-shadow: 0 10px 0 0 var(--px-shadow) !important;
}
.reel-card.is-active { border-color: var(--px-accent) !important; }

/* 四大篇章 */
.narrative-reel-section { padding: 56px 0 72px !important; }
.reel-card { min-height: 420px !important; }
.reel-card::before { opacity: .7; }
.reel-card-title { font-size: 36px !important; line-height: 1.3 !important; color: var(--px-ink) !important; }
.reel-card-desc { color: var(--px-ink-2) !important; font-size: 15px !important; line-height: 1.9 !important; }
.reel-card-hint { color: var(--px-ink-2) !important; }
.reel-card-mascot { filter: drop-shadow(0 10px 0 rgba(0,0,0,.12)) !important; }
.reel-counter { font-family: var(--font-pixel); font-size: 12px !important; font-weight: 400 !important; color: var(--px-ink-3) !important; -webkit-font-smoothing: none; }
.reel-counter strong { font-size: 24px !important; font-weight: 400 !important; color: var(--px-accent) !important; }
.reel-ctrl-btn, .memory-ctrl-btns button {
  width: 40px !important; height: 40px !important; margin: var(--px);
  border-radius: 0 !important; border: 0 !important;
  background: var(--px-surface) !important; color: var(--px-ink) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 calc(var(--px) * -1) 0 0 var(--px-line), 0 var(--px) 0 0 var(--px-line), calc(var(--px) * -1) 0 0 0 var(--px-line), var(--px) 0 0 0 var(--px-line), inset 0 -3px 0 0 rgba(0,0,0,.12) !important;
  transform: none !important;
}
.reel-ctrl-btn:hover, .memory-ctrl-btns button:hover { background: var(--px-accent) !important; color: var(--px-accent-ink) !important; }
.reel-dot-btn { height: 6px !important; border-radius: 0 !important; background: var(--px-line-soft) !important; box-shadow: none !important; }
.reel-dot-btn.is-active { background: var(--px-accent) !important; }
@media (max-width: 768px) {
  .reel-card { min-height: 0 !important; }
  .reel-card-title { font-size: 24px !important; line-height: 1.35 !important; }
  .reel-card-desc { font-size: 14.5px !important; }
  .reel-card-visual { height: 190px !important; }
  .reel-card-mascot { max-height: 190px !important; }
  .reel-header-wrap { align-items: flex-end; flex-wrap: wrap; }
  .reel-header-controls { gap: 10px !important; }
}

/* 时光纪念 */
.memory-pill-btn {
  margin: 2px; border-radius: 0 !important; border: 2px solid var(--px-line-soft) !important;
  background: var(--px-surface) !important; color: var(--px-ink-2) !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important;
}
.memory-pill-btn:hover { border-color: var(--px-accent) !important; color: var(--px-ink) !important; }
.memory-pill-btn.is-active { background: var(--px-accent) !important; border-color: var(--px-accent) !important; color: var(--px-accent-ink) !important; }
.memory-card { overflow: hidden; }
.memory-img-wrap { border-bottom: 2px solid var(--px-line); }
[data-theme="dark"] .memory-img-wrap { border-color: rgba(233,239,226,.16); }
.memory-badge { border-radius: 0 !important; font-family: var(--font-pixel); font-weight: 400 !important; font-size: 12px !important; -webkit-font-smoothing: none; }
.memory-title { font-family: var(--font-body) !important; font-weight: 700 !important; color: var(--px-ink) !important; }
.memory-reel-hint { color: var(--px-ink-3) !important; }
.btn-open-gallery { font-size: 14px !important; }
@media (max-width: 768px) { .memory-card { width: min(78vw, 320px) !important; } .memory-img-wrap { height: 190px !important; } }

/* 加入途径 */
.paths-grid { gap: 22px !important; margin-bottom: 72px !important; }
.path-card { padding: 30px 26px !important; min-height: 280px !important; }
.path-card-title { font-size: 24px !important; line-height: 1.3; margin: 14px 0 12px !important; color: var(--px-ink) !important; }
.path-card-desc { color: var(--px-ink-2) !important; font-size: 14.5px !important; }
.path-card-status, .roadmap-badge {
  font-family: var(--font-pixel); font-size: 12px !important; font-weight: 400 !important; line-height: 16px;
  padding: 4px 8px !important; border-radius: 0 !important; border: 0 !important;
  background: var(--px-bg-2) !important; color: var(--px-ink-2) !important; -webkit-font-smoothing: none; white-space: nowrap;
}
.roadmap-badge.is-live { background: var(--px-accent) !important; color: var(--px-accent-ink) !important; }
.wl-join-cta { text-align: center; margin: -36px 0 80px; }
@media (max-width: 900px) { .path-card { min-height: 0 !important; } .path-card-status { margin-top: 18px !important; } }

/* 理念引言 */
.callout-box { padding: clamp(32px, 5vw, 60px) clamp(20px, 5vw, 60px) !important; margin-bottom: 40px !important; background: var(--px-surface-2) !important; }
.callout-quote { font-size: 36px !important; line-height: 1.45 !important; color: var(--px-ink) !important; }
.callout-quote em { color: var(--px-accent) !important; }
.callout-sub { color: var(--px-ink-2) !important; }
@media (max-width: 700px) { .callout-quote { font-size: 24px !important; } }

/* 百科横幅 */
.wl-codex-banner { margin: 0 0 80px; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; }
.wl-codex-banner h3 { font-family: var(--font-pixel); font-weight: 400; font-size: 24px; line-height: 1.35; margin: 6px 0 6px; color: var(--px-ink); -webkit-font-smoothing: none; }
.wl-codex-banner p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--px-ink-2); max-width: 36em; }
@media (max-width: 600px) { .wl-codex-banner { padding: 20px 18px; } .wl-codex-banner .wl-btn { width: calc(100% - var(--px) * 2); } }

/* 更新与规划 */
.roadmap-item { padding: 20px 22px !important; gap: 14px; }
.roadmap-name { color: var(--px-ink) !important; font-size: 16px !important; font-weight: 700 !important; }

/* 页脚 */
.site-footer { border-top: 2px solid var(--px-line-soft) !important; color: var(--px-ink-3) !important; padding: 32px clamp(18px, 5vw, 64px) calc(32px + env(safe-area-inset-bottom)) !important; }
.site-footer strong { font-family: var(--font-pixel); font-weight: 400 !important; font-size: 12px; letter-spacing: .08em; color: var(--px-ink) !important; -webkit-font-smoothing: none; }
.site-footer .icp-link { color: var(--px-ink-3) !important; }
@media (max-width: 900px) { .site-footer { gap: 12px !important; } .footer-center { justify-content: flex-start !important; } }

/* 动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .wl-btn, .btn-primary-glow, .wlt-find-btn, #btnExplore, .reel-card, .memory-card, .path-card, .roadmap-item { transition: none !important; }
  .nav-drawer-panel { transition: none !important; }
}

/* ---------- BAIYE-146 v2 微调 ---------- */
.wl-nav .brand-dropdown-arrow { display: none !important; }
.wl-nav .wl-contact {
  height: 32px; padding: 0 10px !important; margin: 0 2px; gap: 7px;
  border: 2px solid var(--px-line-soft) !important; border-radius: 0 !important;
  background: var(--px-surface) !important; color: var(--px-ink-2) !important;
  font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 700 !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; white-space: nowrap;
}
.wl-nav .wl-contact:hover { border-color: var(--px-accent) !important; color: var(--px-ink) !important; transform: none !important; }
.wl-nav .wl-contact .contact-dot { border-radius: 0 !important; width: 6px !important; height: 6px !important; background: var(--px-accent) !important; box-shadow: none !important; animation: none !important; }
@media (max-width: 1120px) { .wl-nav .wl-contact { display: none !important; } }
@media (max-width: 600px) {
  .wlt-actions { flex-direction: row !important; flex-wrap: wrap; }
  .wlt-actions > #btnExplore { flex: 1 1 100%; }
  .wlt-actions > .wlt-find-btn { flex: 1 1 0; width: auto !important; min-width: 0; padding: 10px 12px !important; }
  .hero-experience.is-tree .prologue-title { margin-bottom: 14px; }
}

/* ==========================================================================
   BAIYE-146 第二轮：真机反馈修复
   ========================================================================== */
/* 隐藏的首屏按钮真正隐藏（之前 display 覆盖了 hidden 属性） */
.wlt-find-btn[hidden] { display: none !important; }
/* 旧版移动端 .hero-prologue{top:18%} 会把文字往下推、压到树上 */
.hero-experience.is-tree .hero-prologue { top: 0 !important; }
@media (max-width: 900px) {
  .hero-experience.is-tree .wlt-hero-grid { gap: 32px !important; }
}
/* 标题里的中点：像素字体空格太宽，改为紧凑间隔 */
.wl-sep { display: inline-block; margin: 0 -.18em; }
/* 引言：按短语断行，避免单字掉行 */
.callout-quote .wl-ph { display: inline-block; }
@media (max-width: 700px) {
  .callout-quote { font-size: 22px !important; line-height: 1.6 !important; }
}
@media (max-width: 360px) { .callout-quote { font-size: 20px !important; } }
/* 影像馆提示：触屏设备显示“左右滑动” */
.wl-hint-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .wl-hint-mouse { display: none; }
  .wl-hint-touch { display: inline; }
}
/* 抽屉：标签不再挤到第二行，条目高度统一 */
.drawer-item-title { flex-wrap: nowrap !important; align-items: center; gap: 6px; min-width: 0; line-height: 1.35; }
.drawer-badge { flex: none; white-space: nowrap; font-size: 11px !important; line-height: 15px; padding: 1px 5px !important; }
@media (max-width: 420px) { .drawer-item-title { font-size: 14px !important; } }
/* roadmap 到页脚的空白收紧 */
#pathsSection .roadmap-grid:last-child, #pathsSection > :last-child { margin-bottom: 0 !important; }
@media (max-width: 700px) { #pathsSection { padding-bottom: 48px !important; } }
/* 手机端叙事卡片：吉祥物缩小放右下角，压缩空白 */
@media (max-width: 768px) {
  .reel-card-visual { flex: 0 0 auto !important; height: 128px !important; justify-content: flex-end !important; padding: 0 16px 0 0 !important; margin-top: -12px; }
  .reel-card-mascot { max-height: 120px !important; max-width: 45% !important; }
}
/* 文字断行：避免段尾单字 */
.prologue-desc, .section-subhead, .reel-card-desc, .callout-sub, .path-card-desc { text-wrap: pretty; }
@media (max-width: 900px) { .hero-experience.is-tree .prologue-desc { text-wrap: balance; } }
@media (max-width: 768px) {
  .reel-card-visual { height: 108px !important; margin-top: -10px !important; }
  .reel-card-mascot { max-height: 104px !important; }
}

/* ==========================================================================
   BAIYE-146g · 顶部导航分组下拉：了解白叶▾ / 加入途径 / 社区▾ / 问题反馈
   ========================================================================== */
.wl-navdd { gap: 4px !important; }
.wl-navdd .wl-dd { position: relative; }
.wl-navdd .wl-dd-trigger {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--px-ink-2);
  background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.wl-navdd .wl-dd-trigger::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px;
  background: var(--px-accent); transform: scaleX(0); transform-origin: left; transition: transform .18s steps(4);
}
.wl-navdd .wl-dd-trigger.wl-dot::before { content: ""; width: 6px; height: 6px; margin-right: 1px; background: var(--px-amber); }
.wl-navdd .wl-dd.is-open .wl-dd-trigger, .wl-navdd .wl-dd-trigger:hover { color: var(--px-ink); }
.wl-navdd .wl-dd.is-open .wl-dd-trigger::after, .wl-navdd .wl-dd-trigger:hover::after { transform: scaleX(1); }
.wl-dd-caret { width: 10px; height: 10px; shape-rendering: crispEdges; transition: transform .15s steps(2); }
.wl-dd.is-open .wl-dd-caret { transform: rotate(180deg); }
.wl-navdd .wl-dd-trigger:focus-visible, .wl-navdd .wl-dd-item:focus-visible, .wl-navdd .wl-nav-top:focus-visible { outline: 3px dashed var(--px-sky); outline-offset: 2px; }

.wl-dd-panel {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 1200; width: 272px; padding: 8px;
  display: grid; gap: 2px; background: var(--px-surface);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--px-line), 0 var(--px) 0 0 var(--px-line),
    calc(var(--px) * -1) 0 0 0 var(--px-line), var(--px) 0 0 0 var(--px-line),
    6px 9px 0 0 var(--px-shadow);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .14s ease, transform .14s steps(3), visibility 0s linear .14s;
}
.wl-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; }
.wl-dd.is-open .wl-dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.wl-nav .nav-links.wl-navdd .wl-dd-item {
  display: flex; align-items: center; gap: 12px; width: 100%; height: auto !important; min-height: 56px; padding: 10px !important; text-align: left;
  background: none; border: 0; color: var(--px-ink) !important; text-decoration: none; cursor: pointer; font-family: var(--font-body);
}
.wl-navdd .wl-dd-item::after { display: none !important; }
.wl-nav .nav-links.wl-navdd .wl-dd-item:hover, .wl-nav .nav-links.wl-navdd .wl-dd-item:focus-visible { background: var(--px-leaf-soft); }
.wl-dd-ico {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--px-bg-2); color: var(--px-accent); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08);
}
.wl-dd-item:hover .wl-dd-ico { background: var(--px-accent); color: var(--px-accent-ink); }
.wl-dd-ico svg { width: 16px; height: 16px; shape-rendering: crispEdges; }
.wl-dd-txt { display: grid; gap: 3px; min-width: 0; }
.wl-dd-txt b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.wl-dd-txt small { font-size: 12px; font-weight: 400; line-height: 1.3; color: var(--px-ink-3); white-space: nowrap; }
.wl-dd-new { font-style: normal; font-family: var(--font-pixel); font-size: 12px; font-weight: 400; line-height: 1; padding: 3px 5px; background: var(--px-amber); color: #fff; }
.wl-navdd .wl-nav-top { padding: 0 12px !important; }
@media (prefers-reduced-motion: reduce) { .wl-dd-panel, .wl-dd-caret { transition: none !important; } }

/* ===== BAIYE-147 首页内容重整 ===== */
.wl-home-sec { padding-top: 0 !important; padding-bottom: 88px !important; }
#quickstartSection { padding-top: 72px !important; }
.wl-mono { font-family: var(--font-mono, ui-monospace, Consolas, monospace); font-weight: 700; color: var(--px-ink); }

.wl-start { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.wl-addr-card, .wl-stat, .wl-step, .wl-rank-card {
  background: var(--px-surface); border: 2px solid var(--px-line); border-radius: 6px; box-shadow: 0 6px 0 0 var(--px-shadow);
}
[data-theme="dark"] .wl-addr-card, [data-theme="dark"] .wl-stat, [data-theme="dark"] .wl-step, [data-theme="dark"] .wl-rank-card { border-color: rgba(233, 239, 226, .16); }
.wl-addr-card { padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.wl-addr-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wl-addr { font-family: var(--font-pixel); font-size: 40px; line-height: 1.2; color: var(--px-ink); background: none; padding: 0; -webkit-font-smoothing: none; letter-spacing: .02em; }
.wl-addr-meta { margin: 0; font-size: 14px; line-height: 1.7; color: var(--px-ink-2); }
.wl-addr-meta b { color: var(--px-amber); }
.wl-copy-btn { display: inline-flex !important; align-items: center; gap: 8px; }
.wl-copy-btn svg { width: 16px; height: 16px; flex: none; }
.wl-copy-btn.is-done { background: var(--px-sky) !important; color: #fff !important; }

.wl-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wl-stat { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.wl-stat-num { font-family: var(--font-pixel); font-size: 32px; line-height: 1.15; color: var(--px-accent); -webkit-font-smoothing: none; white-space: nowrap; }
.wl-stat-num small { font-size: .55em; margin-left: 4px; color: var(--px-ink-2); }
.wl-stat-label { font-size: 13px; color: var(--px-ink-2); }

.wl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.wl-step { padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.wl-step-no { font-family: var(--font-pixel); font-size: 14px; line-height: 1; color: var(--px-accent-ink); background: var(--px-accent); align-self: flex-start; padding: 6px 8px; -webkit-font-smoothing: none; }
.wl-step-title { font-family: var(--font-pixel); font-weight: 400; font-size: 24px; line-height: 1.3; margin: 6px 0 0; color: var(--px-ink); -webkit-font-smoothing: none; }
.wl-step-desc { margin: 0 0 6px; font-size: 14.5px; line-height: 1.75; color: var(--px-ink-2); flex: 1; text-wrap: pretty; }
.wl-step-desc code { font-family: var(--font-mono, Consolas, monospace); font-size: 13px; padding: 1px 6px; background: var(--px-leaf-soft); color: var(--px-ink); border-radius: 3px; }
.wl-step .wl-btn { align-self: flex-start; }
.wl-join-rule { margin: 26px 0 0; font-size: 14px; color: var(--px-ink-2); text-align: center; }
.wl-link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--px-sky); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.wl-rank-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wl-rank-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.wl-rank-card { padding: 20px 20px 14px; }
.wl-rank-title { font-family: var(--font-pixel); font-weight: 400; font-size: 18px; margin: 0 0 10px; color: var(--px-ink); -webkit-font-smoothing: none; }
.wl-rank-list { list-style: none; margin: 0; padding: 0; }
.wl-rank-list li { border-top: 2px dashed var(--px-line-soft); }
.wl-rank-list li:first-child { border-top: 0; }
.wl-rank-list a { display: flex; align-items: center; gap: 12px; padding: 10px 2px; color: inherit; text-decoration: none; min-width: 0; }
.wl-rank-list a:hover .wl-rank-name { color: var(--px-accent); }
.wl-rank-no { font-family: var(--font-pixel); font-size: 16px; width: 22px; text-align: center; color: var(--px-ink-2); -webkit-font-smoothing: none; flex: none; }
.wl-rank-list li:nth-child(1) .wl-rank-no { color: var(--px-amber); }
.wl-rank-av { width: 34px; height: 34px; border-radius: 4px; image-rendering: pixelated; border: 2px solid var(--px-line); background: var(--px-bg-2); flex: none; }
.wl-rank-who { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.wl-rank-name { font-weight: 700; font-size: 14.5px; color: var(--px-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-rank-id { font-size: 12px; color: var(--px-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-rank-val { font-family: var(--font-pixel); font-size: 15px; color: var(--px-accent); white-space: nowrap; -webkit-font-smoothing: none; flex: none; }
.wl-rank-val small { font-size: .75em; margin-left: 2px; color: var(--px-ink-2); }
.wl-rank-empty { padding: 12px 2px; font-size: 13px; color: var(--px-ink-2); }

#codexSection .wl-codex-banner { margin-bottom: 0 !important; }
#memoriesSection { padding-bottom: 88px !important; }

@media (max-width: 980px) {
  .wl-start { grid-template-columns: 1fr; }
  .wl-steps, .wl-rank-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
  #quickstartSection { padding-top: 48px !important; }
  .wl-home-sec { padding-bottom: 64px !important; }
  .wl-addr-card { padding: 20px 18px; }
  .wl-addr { font-size: 30px; }
  .wl-addr-row .wl-copy-btn { width: 100%; justify-content: center; }
  .wl-stats-grid { gap: 10px; }
  .wl-stat { padding: 14px 14px; }
  .wl-stat-num { font-size: 24px; }
  .wl-step { padding: 20px 18px; }
  .wl-step-title { font-size: 21px; }
  .wl-rank-head .wl-btn { width: 100%; justify-content: center; text-align: center; }
}

/* ===== BAIYE-148 首页视觉丰富化：像素物品 / 大胆数据 / 内嵌卫星地图 ===== */
.px-ico { display: inline-block; line-height: 0; }
.px-svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; overflow: visible; }

/* 进服地址：横向一整条 */
.wl-start { grid-template-columns: 1fr !important; gap: 18px; }
.wl-addr-card { position: relative; padding-right: 120px; overflow: hidden; }
.wl-addr-ico { position: absolute; right: 28px; top: 50%; width: 72px; height: 72px; margin-top: -36px; filter: drop-shadow(0 6px 0 var(--px-shadow)); }

/* 数据卡：四格大数字 */
.wl-stats-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 18px; }
.wl-stat { position: relative; padding: 22px 22px 20px; gap: 4px; justify-content: flex-start; min-height: 200px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.wl-stat:hover { transform: translateY(-3px); box-shadow: 0 9px 0 0 var(--px-shadow); }
.wl-stat-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--px-ink-2); order: 0; }
.wl-stat-num { font-size: 46px; line-height: 1.05; margin: 46px 0 2px; color: var(--px-ink); position: relative; z-index: 1; }
.wl-stat-num small { font-size: .42em; margin-left: 6px; color: var(--px-ink-2); }
.wl-stat-foot { margin-top: auto; padding-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--px-ink-2); position: relative; z-index: 1; }
.wl-stat-foot b { color: var(--px-accent); font-weight: 800; }
.wl-stat-ico { position: absolute; right: 18px; top: 18px; width: 64px; height: 64px; filter: drop-shadow(0 4px 0 var(--px-shadow)); }
.wl-stat-days .wl-stat-num { color: var(--px-accent); font-size: 56px; }
.wl-stat-days { background: linear-gradient(160deg, var(--px-surface) 55%, var(--px-sky-soft)); }

/* 经验条：开服天数距离下一个里程碑 */
.wl-xp { display: flex; align-items: center; gap: 10px; margin-top: 10px; position: relative; z-index: 1; }
.wl-xp-bar { flex: 1; height: 12px; background: #1c2a1c; border: 2px solid var(--px-line); position: relative; overflow: hidden; }
.wl-xp-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#b6f36a 0 40%, #7fcf3a 40% 100%); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.wl-xp-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(0,0,0,.45) calc(10% - 2px) 10%); pointer-events: none; }
.wl-xp-lv { font-family: var(--font-pixel); font-size: 13px; color: #6fbf2f; -webkit-font-smoothing: none; text-shadow: 1px 1px 0 rgba(0,0,0,.25); white-space: nowrap; }
[data-theme="dark"] .wl-xp-lv { color: #b6f36a; }

/* 居民头像墙 */
.wl-heads { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; min-height: 40px; }
.wl-head { width: 34px; height: 34px; border: 2px solid var(--px-line); background: var(--px-bg-2); display: inline-flex; align-items: center; justify-content: center; position: relative; transition: transform .15s ease; text-decoration: none; }
.wl-head img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.wl-head:hover { transform: translateY(-4px) scale(1.12); z-index: 2; box-shadow: 0 4px 0 var(--px-shadow); }
.wl-head-more { font-family: var(--font-pixel); font-size: 12px; color: var(--px-accent-ink); background: var(--px-accent); -webkit-font-smoothing: none; }
.wl-heads.is-ready .wl-head { animation: wlHeadIn .42s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes wlHeadIn { from { opacity: 0; transform: translateY(10px) scale(.6); } to { opacity: 1; transform: none; } }
[data-theme="dark"] .wl-head { border-color: rgba(233,239,226,.3); }

/* 挖掘：铁镐敲石头 */
.wl-mine { position: absolute; right: 16px; top: 16px; width: 76px; height: 70px; }
.wl-mine-stone { position: absolute; right: 0; bottom: 0; width: 46px; height: 46px; box-shadow: 0 4px 0 var(--px-shadow); }
.wl-mine-pick { position: absolute; left: 0; top: 0; width: 44px; height: 44px; transform-origin: 20% 85%; transform: rotate(-20deg); filter: drop-shadow(0 3px 0 var(--px-shadow)); }
.wl-mine.is-on .wl-mine-pick { animation: wlSwing .56s ease-in infinite; }
@keyframes wlSwing { 0% { transform: rotate(-35deg); } 55% { transform: rotate(18deg); } 62% { transform: rotate(10deg); } 100% { transform: rotate(-35deg); } }
.wl-mine.is-on .wl-mine-stone { animation: wlHit .56s linear infinite; }
@keyframes wlHit { 0%, 50% { transform: none; } 56% { transform: translate(1px, 1px) scale(.96); } 70%, 100% { transform: none; } }
.wl-mine.is-break .wl-mine-stone { animation: wlBreak .5s ease-out forwards; }
@keyframes wlBreak { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.15); opacity: .7; filter: brightness(1.4); } 100% { transform: scale(.2); opacity: 0; } }

/* 金币堆 */
.wl-coins { position: absolute; right: 16px; top: 18px; width: 72px; height: 62px; }
.wl-coins span { position: absolute; width: 36px; height: 36px; filter: drop-shadow(0 3px 0 var(--px-shadow)); animation: wlCoin 3.2s ease-in-out infinite; }
.wl-coins span:nth-child(1) { left: 0; top: 22px; animation-delay: 0s; }
.wl-coins span:nth-child(2) { left: 24px; top: 26px; animation-delay: .5s; }
.wl-coins span:nth-child(3) { left: 14px; top: 0; width: 40px; height: 40px; animation-delay: 1s; }
@keyframes wlCoin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.wl-stat-coin .wl-stat-num { color: var(--px-amber); }

/* 通用：轻微漂浮 */
.wl-bob { animation: wlBob 4s ease-in-out infinite; }
@keyframes wlBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 三步加入：像素物品 */
.wl-step { overflow: hidden; }
.wl-step-ico { position: absolute; right: 18px; top: 16px; width: 56px; height: 56px; filter: drop-shadow(0 4px 0 var(--px-shadow)); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.wl-step:hover .wl-step-ico { transform: translateY(-4px) rotate(-8deg) scale(1.08); }
.wl-step-title { padding-right: 52px; }
.wl-steps { counter-reset: none; position: relative; }

/* 风云榜：图标标题 + 皇冠 + 比例条 */
.wl-rank-title { display: flex; align-items: center; gap: 10px; }
.wl-rank-ico { width: 28px; height: 28px; flex: none; }
.wl-rank-list a { gap: 12px; padding: 12px 2px; }
.wl-rank-no { width: 26px; height: 26px; line-height: 22px; font-size: 14px; border: 2px solid var(--px-line-soft); color: var(--px-ink-2); }
.wl-rank-list li.is-r1 .wl-rank-no { background: #ffd23f; border-color: #8a5a00; color: #5a3d00; }
.wl-rank-list li.is-r2 .wl-rank-no { background: #dfe6ea; border-color: #6b7a83; color: #33424a; }
.wl-rank-list li.is-r3 .wl-rank-no { background: #e3a06a; border-color: #7a4520; color: #4a2610; }
.wl-rank-avwrap { position: relative; flex: none; width: 40px; height: 40px; }
.wl-rank-av { width: 40px; height: 40px; }
.wl-rank-list li.is-r1 .wl-rank-av { border-color: #c98a00; box-shadow: 0 0 0 2px #ffd23f; }
.wl-rank-crown { position: absolute; left: 50%; top: -17px; width: 24px; height: 24px; margin-left: -12px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); animation: wlBob 3s ease-in-out infinite; }
.wl-rank-bar { display: block; height: 6px; margin-top: 6px; background: var(--px-line-soft); position: relative; overflow: hidden; }
.wl-rank-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--px-accent); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.wl-rank-list li.is-r1 .wl-rank-bar i { background: linear-gradient(90deg, #f2b705, #ffd23f); }
.wl-rank-list.is-in .wl-rank-bar i { width: var(--w); }
.wl-rank-list.is-in li:nth-child(2) .wl-rank-bar i { transition-delay: .12s; }
.wl-rank-list.is-in li:nth-child(3) .wl-rank-bar i { transition-delay: .24s; }

/* 内嵌卫星地图 */
.wl-map-frame { position: relative; height: clamp(420px, 64vh, 640px); border: 2px solid var(--px-line); border-radius: 6px; overflow: hidden; background: #0e1a1f; box-shadow: 0 6px 0 0 var(--px-shadow); }
[data-theme="dark"] .wl-map-frame { border-color: rgba(233,239,226,.16); }
.wl-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; opacity: 0; transition: opacity .6s ease; }
.wl-map-frame.is-loaded iframe { opacity: 1; }
.wl-map-skel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #cfe3d0; font-size: 14px; background: radial-gradient(circle at 50% 45%, #1d3a33, #0e1a1f 70%); }
.wl-map-skel [data-px] { width: 72px; height: 72px; animation: wlBob 2.4s ease-in-out infinite; }
.wl-map-frame.is-loaded .wl-map-skel { display: none; }
.wl-map-cover { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background: linear-gradient(to top, rgba(8,16,14,.55), rgba(8,16,14,0) 45%); cursor: pointer; display: flex; align-items: flex-end; justify-content: center; transition: background .25s ease; }
.wl-map-cover:hover, .wl-map-cover:focus-visible { background: linear-gradient(to top, rgba(8,16,14,.7), rgba(8,16,14,.08) 60%); outline: none; }
.wl-map-hint { margin-bottom: 26px; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 10px 16px; background: rgba(255,255,255,.94); color: #1f2b22; border: 2px solid #24321f; box-shadow: 0 4px 0 rgba(0,0,0,.35); font-family: var(--font-pixel); font-size: 16px; -webkit-font-smoothing: none; transition: transform .2s ease; }
.wl-map-hint [data-px] { width: 24px; height: 24px; }
.wl-map-hint small { font-family: var(--font-body); font-size: 12px; color: #536253; width: 100%; text-align: center; }
.wl-map-cover:hover .wl-map-hint { transform: translateY(-3px); }
.wl-map-frame.is-active .wl-map-cover { display: none; }
.wl-map-hud { position: absolute; left: 14px; bottom: 14px; z-index: 4; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.wl-map-frame:not(.is-active) .wl-map-hud { bottom: auto; top: 14px; }
.wl-map-compass { width: 46px; height: 46px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
.wl-map-online { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(12,22,18,.82); color: #e9efe2; border: 2px solid rgba(0,0,0,.6); font-size: 12.5px; font-weight: 700; }
.wl-map-online[hidden] { display: none; }
.wl-map-online img { width: 20px; height: 20px; image-rendering: pixelated; border: 1px solid rgba(255,255,255,.4); }
.wl-live-dot { width: 8px; height: 8px; background: #8f9a8f; display: inline-block; flex: none; }
.wl-live-dot.is-on { background: #6fe36a; box-shadow: 0 0 0 0 rgba(111,227,106,.7); animation: wlPulse 1.8s infinite; }
@keyframes wlPulse { 0% { box-shadow: 0 0 0 0 rgba(111,227,106,.7); } 70% { box-shadow: 0 0 0 7px rgba(111,227,106,0); } 100% { box-shadow: 0 0 0 0 rgba(111,227,106,0); } }
.wl-map-exit { position: absolute !important; z-index: 5; left: 50%; bottom: 14px; transform: translateX(-50%); display: none !important; white-space: nowrap; }
.wl-map-frame.is-active .wl-map-exit { display: inline-flex !important; }
.wl-map-note { margin: 16px 0 0; font-size: 13px; color: var(--px-ink-2); text-align: center; }

/* 页边漂浮像素物品（只在宽屏显示，不挤压内容） */
.wl-has-floats { position: relative; }
.wl-float { position: absolute; width: 44px; height: 44px; pointer-events: none; opacity: .9; display: none; animation: wlFloat 6s ease-in-out infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 5px 0 var(--px-shadow)); z-index: 0; }
.wl-float.f-tl { left: -58px; top: 40px; }
.wl-float.f-tr { right: -58px; top: 40px; }
.wl-float.f-bl { left: -58px; bottom: 140px; }
.wl-float.f-br { right: -58px; bottom: 140px; }
@keyframes wlFloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(6deg); } }
@media (min-width: 1360px) { .wl-float { display: block; } }

/* 滚动进场 */
.wl-rv-on .wl-rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.wl-rv-on .wl-rv.is-in { opacity: 1; transform: none; }
.wl-rv-on .wl-stats-grid .wl-rv:nth-child(2), .wl-rv-on .wl-steps .wl-rv:nth-child(2), .wl-rv-on .wl-rank-grid .wl-rv:nth-child(2) { transition-delay: .08s; }
.wl-rv-on .wl-stats-grid .wl-rv:nth-child(3), .wl-rv-on .wl-steps .wl-rv:nth-child(3), .wl-rv-on .wl-rank-grid .wl-rv:nth-child(3) { transition-delay: .16s; }
.wl-rv-on .wl-stats-grid .wl-rv:nth-child(4) { transition-delay: .24s; }
.wl-rv-on .wl-stat.wl-rv.is-in:hover { transform: translateY(-3px); }

@media (max-width: 1100px) {
  .wl-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wl-addr-card { padding-right: 18px; }
  .wl-addr-ico { width: 44px; height: 44px; top: 18px; right: 16px; margin-top: 0; }
  .wl-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wl-stat { min-height: 0; padding: 16px 14px 14px; }
  .wl-stat-days, .wl-stat-heads { grid-column: 1 / -1; }
  .wl-stat-num { font-size: 30px; margin-top: 8px; }
  .wl-stat-days .wl-stat-num { font-size: 40px; }
  .wl-stat-ico { width: 52px; height: 52px; right: 14px; top: 14px; }
  .wl-mine { width: 56px; height: 50px; right: 10px; top: 10px; }
  .wl-mine-stone { width: 32px; height: 32px; }
  .wl-mine-pick { width: 32px; height: 32px; }
  .wl-coins { width: 52px; height: 46px; right: 8px; top: 10px; }
  .wl-coins span { width: 26px !important; height: 26px !important; }
  .wl-coins span:nth-child(2) { left: 18px; top: 20px; }
  .wl-coins span:nth-child(1) { top: 18px; }
  .wl-stat-mine .wl-stat-label, .wl-stat-coin .wl-stat-label { padding-right: 48px; display: block; min-height: 2.6em; }
  .wl-head { width: 30px; height: 30px; }
  .wl-step-ico { width: 44px; height: 44px; right: 14px; top: 14px; }
  .wl-map-frame { height: 440px; }
  .wl-map-hint { font-size: 14px; margin-bottom: 18px; }
  .wl-map-compass { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-bob, .wl-float, .wl-coins span, .wl-rank-crown, .wl-map-skel [data-px], .wl-live-dot.is-on { animation: none !important; }
  .wl-heads.is-ready .wl-head { animation: none; }
}

/* ===== 服务器实时状态（沿用数据卡风格：粗边框 + 底部硬阴影 + 像素大数字 + 像素图标） ===== */
.wl-status-sec { margin-top: 8px; }
.wl-st-panel { display: grid; gap: 18px; }
.wl-st-grid { display: grid; gap: 18px; grid-template-columns: 1.2fr 1fr 1fr 1fr; }
.wl-st-servers { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wl-st-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px 22px 18px; min-height: 190px; overflow: hidden;
  background: var(--px-surface); border: 2px solid var(--px-line); border-radius: 6px; box-shadow: 0 6px 0 0 var(--px-shadow); color: var(--px-ink);
  transition: transform .2s ease, box-shadow .2s ease; }
.wl-st-card:hover { transform: translateY(-3px); box-shadow: 0 9px 0 0 var(--px-shadow); }
[data-theme="dark"] .wl-st-card { border-color: rgba(233, 239, 226, .16); }
.wl-st-card.is-off { opacity: .65; }
.wl-st-main { background: linear-gradient(160deg, var(--px-surface) 55%, var(--px-leaf-soft)); }
.wl-st-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--px-ink-2); }
.wl-st-ico { position: absolute; right: 18px; top: 16px; width: 56px; height: 56px; filter: drop-shadow(0 4px 0 var(--px-shadow)); }
.wl-st-num { font-family: var(--font-pixel); font-size: 46px; line-height: 1.05; margin: 40px 0 2px; color: var(--px-ink); -webkit-font-smoothing: none; white-space: nowrap; }
.wl-st-num small { font-size: .42em; margin-left: 6px; color: var(--px-ink-2); }
.wl-st-main .wl-st-num { color: var(--px-accent); font-size: 56px; }
.wl-st-foot { margin-top: auto; padding-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--px-ink-2); }
.wl-st-foot b { color: var(--px-accent); font-weight: 800; }
/* 像素分段进度条（与开服天数同款） */
.wl-st-bar { position: relative; height: 12px; margin-top: 10px; background: #1c2a1c; border: 2px solid var(--px-line); overflow: hidden; }
.wl-st-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#b6f36a 0 40%, #7fcf3a 40% 100%); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.wl-st-bar i.warn { background: linear-gradient(#ffd98a 0 40%, #e0a028 40% 100%); }
.wl-st-bar i.bad { background: linear-gradient(#ff9a8c 0 40%, #d4574a 40% 100%); }
.wl-st-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(0,0,0,.45) calc(10% - 2px) 10%); pointer-events: none; }
/* 各服卡片 */
.wl-st-server-head { display: flex; align-items: center; gap: 8px; padding-right: 64px; }
.wl-st-server-head b { font-size: 16px; }
.wl-st-dot { width: 10px; height: 10px; flex: none; background: var(--px-accent); box-shadow: 0 0 0 2px var(--px-leaf-soft); }
.wl-st-dot.off { background: #d4574a; box-shadow: 0 0 0 2px #f6dcd8; }
.wl-st-state { font-size: 12px; font-weight: 700; color: var(--px-accent); }
.wl-st-card.is-off .wl-st-state { color: #d4574a; }
.wl-st-server .wl-st-num { margin-top: 22px; font-size: 40px; }
.wl-st-tps-line { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--px-ink-2); }
.wl-st-tps-line b { font-family: var(--font-pixel); font-size: 20px; -webkit-font-smoothing: none; }
.wl-st-tps-line .is-good { color: var(--px-accent); }
.wl-st-tps-line .is-warn { color: var(--px-amber); }
.wl-st-tps-line .is-bad { color: #d4574a; }
.wl-st-tps-line .is-na { color: var(--px-ink-3); }
.wl-st-names { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.wl-st-chip { padding: 2px 8px; font-size: 12.5px; font-weight: 700; background: var(--px-surface-2); color: var(--px-ink); border: 2px solid var(--px-line-soft); border-radius: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-st-hint, .wl-st-time { margin: 0; font-size: 12.5px; color: var(--px-ink-3); }
.wl-st-time { text-align: right; }
@media (max-width: 960px) {
  .wl-st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .wl-st-servers { grid-template-columns: minmax(0, 1fr); }
  .wl-st-card { min-height: 0; padding: 18px; }
  .wl-st-num { font-size: 34px; margin-top: 26px; }
  .wl-st-main .wl-st-num { font-size: 42px; }
  .wl-st-ico { width: 44px; height: 44px; top: 14px; right: 14px; }
}
@media (max-width: 420px) {
  .wl-st-grid { grid-template-columns: minmax(0, 1fr); }
}
.wl-st-chip.wl-st-more { background: var(--px-leaf-soft); color: var(--px-accent); }

/* 资源世界重置倒计时 */
.wl-st-reset { gap: 12px; }
.wl-st-reset-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.wl-st-reset-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 2px solid var(--px-ink, #1f2a24); background: rgba(255,255,255,.55); }
.wl-st-reset-name { font-size: 13px; color: var(--px-ink-2); }
.wl-st-reset-time { font-family: var(--font-pixel); font-size: 20px; line-height: 1.3; color: var(--px-accent); -webkit-font-smoothing: none; font-variant-numeric: tabular-nums; }
.wl-st-reset-time.is-soon { color: var(--px-amber); }
.wl-st-reset-at { font-size: 12px; color: var(--px-ink-3); }

/* 24 小时趋势图 */
.wl-st-trend{grid-column:1/-1;position:relative}
.wl-st-tabs{margin-left:auto;display:inline-flex;gap:0}
.wl-st-tab{font:inherit;font-size:12px;padding:3px 10px;border:2px solid var(--px-line,#222);background:transparent;color:inherit;cursor:pointer}
.wl-st-tab+.wl-st-tab{margin-left:-2px}
.wl-st-tab.on{background:var(--sp-accent,#1f9a55);color:#fff}
.wl-st-chart{position:relative;margin-top:8px}
.wl-st-svg{width:100%;height:auto;display:block}
.wl-st-grid-l{stroke:currentColor;stroke-opacity:.15;stroke-width:1}
.wl-st-axis{font-size:10px;fill:currentColor;opacity:.6}
.wl-st-cross{stroke:currentColor;stroke-opacity:.4;stroke-dasharray:3 3}
.wl-st-tip{position:absolute;top:0;transform:translateX(-50%);padding:3px 8px;font-size:12px;white-space:nowrap;background:var(--px-surface,#fff);border:2px solid var(--px-line,#222);pointer-events:none}
.wl-st-tip[hidden]{display:none}
.wl-st-legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px;margin-top:6px}
.wl-st-legend span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:5px;background:var(--c)}
.wl-st-legend em{margin-left:auto;font-style:normal;opacity:.6}

/* ===== 深色模式：服务器状态面板装饰 (v4) ===== */
[data-theme="dark"] .wl-st-card {
  background:
    linear-gradient(180deg, rgba(120,220,150,.07), rgba(120,220,150,0) 46px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 16px),
    #15281f;
  border-color: rgba(150, 215, 175, .34);
  box-shadow: 0 5px 0 0 rgba(0,0,0,.55), inset 0 3px 0 0 rgba(110, 220, 140, .55);
}
[data-theme="dark"] .wl-st-card::before,
[data-theme="dark"] .wl-st-card::after {
  content: ""; position: absolute; width: 8px; height: 8px; pointer-events: none;
  background: #7ee08f; box-shadow: 0 0 8px rgba(126,224,143,.65);
}
[data-theme="dark"] .wl-st-card::before { right: 10px; top: 10px; }
[data-theme="dark"] .wl-st-card::after { left: 10px; bottom: 10px; width: 5px; height: 5px; background: #f0b94a; box-shadow: 0 0 8px rgba(240,185,74,.6); }
[data-theme="dark"] .wl-st-card:hover { box-shadow: 0 9px 0 0 rgba(0,0,0,.55), inset 0 3px 0 0 rgba(130, 235, 160, .8); }
[data-theme="dark"] .wl-st-reset-item {
  background: linear-gradient(135deg, rgba(126,224,143,.10), rgba(0,0,0,.28));
  border: 2px solid rgba(150, 215, 175, .4);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), 3px 3px 0 rgba(0,0,0,.45);
}
[data-theme="dark"] .wl-st-reset-name { color: #bcd6c4; }
[data-theme="dark"] .wl-st-reset-time { color: #9df27a; text-shadow: 0 0 10px rgba(157,242,122,.45); }
[data-theme="dark"] .wl-st-reset-time.is-soon { color: #ffc857; text-shadow: 0 0 10px rgba(255,200,87,.5); }
[data-theme="dark"] .wl-st-reset-at, [data-theme="dark"] .wl-st-hint, [data-theme="dark"] .wl-st-time { color: #93ad9e; }
[data-theme="dark"] .wl-st-tab { border-color: rgba(150,215,175,.5); background: rgba(0,0,0,.25); color: #cfe6d6; }
[data-theme="dark"] .wl-st-tab.on { background: #2fb46a; color: #04170c; font-weight: 700; }
[data-theme="dark"] .wl-st-svg { background: linear-gradient(180deg, rgba(126,224,143,.06), transparent 70%); }
[data-theme="dark"] .wl-st-grid-l { stroke: rgba(150,215,175,.2); stroke-dasharray: 3 5; }
[data-theme="dark"] .wl-st-axis { fill: #a9c3b3; }

/* ===== 状态面板 v5：浅色装饰 + 趋势浮窗 + 小图标 ===== */
.wl-st-card {
  background-image:
    radial-gradient(circle at 100% 0, var(--px-leaf-soft, rgba(90,170,90,.14)) 0, transparent 46%),
    repeating-linear-gradient(135deg, rgba(60,120,70,.045) 0 6px, transparent 6px 12px);
}
.wl-st-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #5fae4e 0 12px, #4a9a3e 12px 24px, #8a5a34 24px 36px, #77492a 36px 48px);
  opacity: .5;
}
.wl-st-trend::after, .wl-st-reset::after { opacity: .35; }
.wl-st-card::before {
  content: ""; position: absolute; right: 12px; bottom: 14px; width: 28px; height: 28px; pointer-events: none; opacity: .16;
  background:
    linear-gradient(var(--px-accent, #2e8b3d), var(--px-accent, #2e8b3d)) 0 0 / 8px 8px no-repeat,
    linear-gradient(var(--px-accent, #2e8b3d), var(--px-accent, #2e8b3d)) 10px 10px / 8px 8px no-repeat,
    linear-gradient(var(--px-accent, #2e8b3d), var(--px-accent, #2e8b3d)) 20px 0 / 8px 8px no-repeat,
    linear-gradient(var(--px-accent, #2e8b3d), var(--px-accent, #2e8b3d)) 0 20px / 8px 8px no-repeat;
}
.wl-st-mini { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }
.wl-st-mini svg { width: 100%; height: 100%; display: block; }
.wl-st-reset-item { background-image: linear-gradient(135deg, rgba(95,174,78,.12), transparent 60%); }
.wl-st-click { cursor: pointer; }
.wl-st-click:focus-visible { outline: 3px solid var(--px-accent, #2e8b3d); outline-offset: 3px; }
.wl-st-more-hint {
  position: absolute; left: 22px; bottom: 16px; font-size: 12px; font-weight: 700; padding: 2px 8px;
  border: 2px solid var(--px-accent, #2e8b3d); color: var(--px-accent, #2e8b3d); background: var(--px-surface, #fff);
  transition: transform .15s; z-index: 1;
}
.wl-st-click:hover .wl-st-more-hint { transform: translateX(4px); }
.wl-st-main .wl-st-foot { margin-bottom: 26px; }
html.wl-st-lock { overflow: hidden; }
.wl-st-modal {
  position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(10, 20, 14, .55); backdrop-filter: blur(3px);
}
.wl-st-modal.on { display: flex; animation: wlStFade .18s ease; }
.wl-st-modal-box { position: relative; width: min(860px, 100%); max-height: 92vh; overflow: auto; }
.wl-st-modal-box .wl-st-trend { margin: 0; transform: none !important; min-height: 0; }
.wl-st-modal-box .wl-st-trend::before { display: none; }
.wl-st-modal-x {
  position: absolute; top: 12px; right: 14px; z-index: 3; width: 30px; height: 30px; line-height: 24px; font-size: 22px; cursor: pointer;
  border: 2px solid var(--px-line, #222); background: var(--px-surface, #fff); color: inherit;
}
.wl-st-modal-x:hover { background: #d6453d; color: #fff; }
.wl-st-modal-box .wl-st-tabs { margin-right: 40px; }
@keyframes wlStFade { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
[data-theme="dark"] .wl-st-card::after { opacity: .6; }
[data-theme="dark"] .wl-st-card::before { opacity: .22; }
[data-theme="dark"] .wl-st-more-hint { background: #15281f; color: #9df27a; border-color: #4fbf74; }
[data-theme="dark"] .wl-st-modal-x { background: #15281f; border-color: rgba(150,215,175,.5); }

.wl-st-reset-item { position: relative; }
.wl-st-mcico { position: absolute; right: 12px; top: 50%; width: 56px; height: 56px; margin-top: -28px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); pointer-events: none; }
.wl-st-reset-item:hover .wl-st-mcico { transform: translateY(-2px) rotate(-4deg); transition: transform .15s; }