/* runtime-config 与 React 启动期间的静态外壳：结构贴近真实作品首页，避免接管时布局跳变。 */
:root {
  color-scheme: light dark;
  --boot-bg: #f4f5f7;
  --boot-panel: #fff;
  --boot-line: #e8e9ed;
  --boot-soft: #eef0f3;
  --boot-strong: #dfe2e7;
  --boot-ink: #1d1d1f;
  --boot-brand: #f2bb1d;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--boot-bg); color: var(--boot-ink); }
body { font-family: Nunito, system-ui, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; }
.app-boot-shell { position: relative; z-index: 0; min-height: 100vh; min-height: 100dvh; display: flex; overflow: hidden; }
.boot-status-copy { 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; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; color: transparent !important; font-size: 0 !important; }
#root:empty { display: none; }
#root:not(:empty) { position: relative; z-index: 1; }
html:has(#root:not(:empty)) .app-boot-shell { display: none !important; }
.boot-pc-nav { width: 216px; min-height: 100vh; padding: 22px 18px; background: var(--boot-panel); border-right: 1px solid var(--boot-line); display: flex; flex-direction: column; }
.boot-brand, .boot-mobile-brand { display: flex; align-items: center; gap: 10px; }
.boot-brand span, .boot-mobile-brand span { width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--boot-brand) 85%, white); }
.boot-brand i, .boot-mobile-brand i { width: 88px; height: 15px; border-radius: 6px; background: var(--boot-strong); }
.boot-nav-lines { display: grid; gap: 12px; margin-top: 46px; }
.boot-nav-lines i, .boot-nav-bottom i { display: block; height: 42px; border-radius: 12px; background: var(--boot-soft); }
.boot-nav-lines i:first-child { background: color-mix(in srgb, var(--boot-brand) 16%, var(--boot-panel)); }
.boot-nav-bottom { display: grid; gap: 10px; margin-top: auto; }
.boot-main { min-width: 0; flex: 1; }
.boot-topbar { height: 72px; padding: 0 34px; border-bottom: 1px solid var(--boot-line); background: color-mix(in srgb, var(--boot-panel) 94%, transparent); display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.boot-mobile-brand { display: none; margin-right: auto; }
.boot-search { width: min(28vw, 300px); height: 38px; border-radius: 19px; background: var(--boot-soft); }
.boot-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--boot-strong); }
.boot-page { width: min(100%, 1280px); margin: 0 auto; padding: 28px 32px 48px; }
.boot-title-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.boot-title-row i:first-child { width: 142px; height: 28px; border-radius: 8px; background: var(--boot-strong); }
.boot-title-row i:last-child { width: 106px; height: 36px; border-radius: 18px; background: color-mix(in srgb, var(--boot-brand) 38%, var(--boot-panel)); }
.boot-chips { display: flex; gap: 9px; margin: 22px 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--boot-line); }
.boot-chips i { width: 76px; height: 32px; border-radius: 16px; background: var(--boot-soft); }
.boot-chips i:first-child { background: color-mix(in srgb, var(--boot-brand) 24%, var(--boot-panel)); }
.boot-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; }
.boot-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.boot-card { min-width: 0; padding: 10px 10px 16px; border: 1px solid var(--boot-line); border-radius: 16px; background: var(--boot-panel); box-shadow: 0 6px 18px rgba(29, 29, 31, .035); }
.boot-card b { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 11px; background: var(--boot-soft); }
.boot-card i, .boot-card em { display: block; border-radius: 5px; background: var(--boot-strong); }
.boot-card i { width: 76%; height: 14px; margin: 14px 2px 9px; }
.boot-card em { width: 48%; height: 10px; margin-left: 2px; background: var(--boot-soft); }
.boot-aside { display: grid; align-content: start; gap: 16px; }
.boot-aside div { height: 180px; border: 1px solid var(--boot-line); border-radius: 16px; background: var(--boot-panel); }
.boot-aside div:last-child { height: 220px; }
.boot-mobile-tabs { display: none; }
/* 只让占位材质轻微流动，避免整页同时闪烁。 */
.boot-card b, .boot-search, .boot-avatar, .boot-title-row i, .boot-chips i, .boot-aside div,
.boot-brand span, .boot-brand i, .boot-nav-lines i, .boot-nav-bottom i, .boot-mobile-brand span, .boot-mobile-brand i {
  background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.42) 48%, transparent 66%);
  background-size: 240% 100%;
  animation: boot-shimmer 1.8s ease-in-out infinite;
}
@keyframes boot-shimmer { to { background-position-x: -220%; } }

@media (max-width: 1080px) {
  .boot-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boot-layout { grid-template-columns: minmax(0, 1fr) 220px; }
}

@media (max-width: 760px) {
  .boot-pc-nav { display: none; }
  .boot-main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .boot-topbar { height: 58px; padding: 0 16px; justify-content: flex-start; }
  .boot-mobile-brand { display: flex; }
  .boot-mobile-brand i { width: 72px; height: 13px; }
  .boot-mobile-brand span { width: 30px; height: 30px; }
  .boot-search { width: 92px; margin-left: auto; }
  .boot-avatar { width: 34px; height: 34px; }
  .boot-page { padding: 18px 14px 28px; }
  .boot-title-row i:first-child { width: 108px; height: 23px; }
  .boot-title-row i:last-child { width: 78px; height: 32px; }
  .boot-chips { margin-top: 16px; overflow: hidden; }
  .boot-chips i { min-width: 66px; }
  .boot-layout { display: block; }
  .boot-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .boot-card { padding: 7px 7px 13px; border-radius: 14px; }
  .boot-card b { aspect-ratio: 4 / 3; border-radius: 9px; }
  .boot-card i { margin-top: 11px; }
  .boot-aside { display: none; }
  .boot-mobile-tabs { position: fixed; z-index: 2; right: 0; bottom: 0; left: 0; height: calc(58px + env(safe-area-inset-bottom)); padding: 10px 10vw env(safe-area-inset-bottom); border-top: 1px solid var(--boot-line); background: color-mix(in srgb, var(--boot-panel) 96%, transparent); display: flex; justify-content: space-between; align-items: center; }
  .boot-mobile-tabs i { width: 24px; height: 24px; border-radius: 8px; background: var(--boot-soft); }
  .boot-mobile-tabs i:first-child { background: color-mix(in srgb, var(--boot-brand) 48%, var(--boot-panel)); }
}

/* 路由是端型真相：即使 WebView 视口暂时上报为桌面宽度，/m 仍渲染移动启动壳。 */
html[data-boot-surface='mobile'] .boot-pc-nav { display: none; }
html[data-boot-surface='mobile'] .boot-main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
html[data-boot-surface='pc'] .boot-pc-nav { display: flex; }
@media (min-width: 761px) {
  html[data-boot-surface='mobile'] .boot-topbar { height: 58px; padding: 0 16px; justify-content: flex-start; }
  html[data-boot-surface='mobile'] .boot-mobile-brand { display: flex; }
  html[data-boot-surface='mobile'] .boot-search { width: 120px; margin-left: auto; }
  html[data-boot-surface='mobile'] .boot-page { max-width: 760px; padding: 18px 14px 28px; }
  html[data-boot-surface='mobile'] .boot-layout { display: block; }
  html[data-boot-surface='mobile'] .boot-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html[data-boot-surface='mobile'] .boot-aside { display: none; }
  html[data-boot-surface='mobile'] .boot-mobile-tabs { position: fixed; display: flex; justify-content: space-between; right: 0; bottom: 0; left: 0; height: 58px; padding: 10px 12vw; border-top: 1px solid var(--boot-line); background: var(--boot-panel); }
  html[data-boot-surface='mobile'] .boot-mobile-tabs i { width: 24px; height: 24px; border-radius: 8px; background: var(--boot-soft); }
}

@media (prefers-color-scheme: dark) {
  :root { --boot-bg: #121214; --boot-panel: #1c1c1f; --boot-line: #2d2d31; --boot-soft: #27272b; --boot-strong: #34343a; --boot-ink: #f5f5f7; }
  .boot-card { box-shadow: none; }
  .boot-card b, .boot-search, .boot-avatar, .boot-title-row i, .boot-chips i, .boot-aside div,
  .boot-brand span, .boot-brand i, .boot-nav-lines i, .boot-nav-bottom i, .boot-mobile-brand span, .boot-mobile-brand i {
    background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.055) 48%, transparent 66%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-boot-shell * { animation: none !important; }
}