/* ============================================================
   科技浪尖 · 设计系统 v2（仅深色主题）
   - 配色色阶 / 语义 token / 字体 / 间距 / 断点
   - 历史：曾支持 [data-theme="light"] 浅色覆盖层，因「深色遮罩被
     强改为米白导致封面/banner 图被糊住」且属补丁式实现难以为继，
     2026-09-02 彻底移除浅色模式，仅保留深色（见设计文档）。
   - 焦点可见性 / 滚动偏移 / 移动端适配
   ============================================================ */

/* ---------- 全局基础 ---------- */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
img, svg, video, canvas { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent-2, #60a5fa); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(201, 160, 80, 0.28); }

/* ---------- 视频详情 content 渲染 ---------- */
.video-prose { font-size: 15px; line-height: 1.9; color: #cbd5e1; }
.video-prose img { max-width: 100%; border-radius: 12px; margin: 14px 0; }
.video-prose p { margin: 12px 0; }
.video-prose h2 { color: #fff; font-size: 20px; font-weight: 600; margin: 26px 0 10px; }
.video-prose h3 { color: #fff; font-size: 17px; font-weight: 600; margin: 20px 0 8px; }
.video-prose ul { list-style: disc; padding-left: 22px; margin: 12px 0; }
.video-prose li { margin: 6px 0; }
.video-prose blockquote { border-left: 3px solid #c9a050; padding: 6px 16px; margin: 18px 0; color: #e2e8f0; background: rgba(201, 160, 80, 0.06); border-radius: 0 8px 8px 0; }
.video-prose strong { color: #fff; font-weight: 600; }
.video-prose a { color: #c9a050; text-decoration: underline; }

/* ---------- 移动端底部导航（由 site.js 注入，仅主页类目） ---------- */
.bottom-nav { display: none; }
@media (max-width: 768px) {
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    justify-content: space-around; align-items: center;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: rgba(8, 11, 20, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; color: #94a3b8; font-size: 11px; text-decoration: none; }
  .bottom-nav a.active { color: #c9a050; }
  .bottom-nav svg { width: 22px; height: 22px; }
  body { padding-bottom: 64px; }
}

/* ---------- 移动端适配（<=640px） ---------- */
@media (max-width: 640px) {
  main { padding-left: 12px; padding-right: 12px; }
  .hero-banner { min-height: 360px; }
  .glow-gold.min-h-\[540px\] { min-height: 340px; }
  /* 触控目标不小于 44px */
  nav a[class*="w-10"], nav button[class*="w-10"] { width: 44px; height: 44px; }
}
@media (min-width: 641px) {
  .hero-banner { min-height: 520px; }
}


/* ---------- 全站外层容器：自适应居中（2026-08-29） ----------
   大屏：最大宽度 1400px、水平居中；小屏：满宽自适应。
   min() 只做封顶，不会把 article(860)/video(920)/search(900) 等
   更窄的阅读容器撑大；各页面自身的 max-w-[…px] 工具类优先级
   更高，现有布局不受影响。 */
@layer base {
  body > main {
    width: 100%;
    max-width: min(1400px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}