/* 基础层:重置、排版、应用外壳与响应式布局。
   移动优先 —— 默认样式面向手机,媒体查询逐级增强到桌面。 */

*, *::before, *::after { box-sizing: border-box; }

/* hidden 必须压过组件里声明的 display(flex/grid/block)。
   否则 class="banner"(display:flex) 这类元素加了 hidden 也依然显示,
   提示条就永远藏不住。 */
[hidden] { display: none !important; }

/* 横向防拖拽:移动端只要有一个子元素比视口宽,整页就能被左右拖出一条空白。
   只给 body 写 overflow-x 挡不住 html 层的滚动,两处都要写。 */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  overflow-x: hidden;
  /* 手机上别再把横向橡皮筋回弹出来 */
  overscroll-behavior-x: none;
}

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 600; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p  { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 触控:去掉 300ms 点击延迟,并禁掉双击缩放 ——
   否则连点两下按钮会被浏览器当成「放大」。不影响滚动手势。 */
a, button, label, summary, .btn, .seg-btn, .tabbar a, .slot-card { touch-action: manipulation; }

/* 长按按钮/标签不再弹出文字选择与系统菜单,更像原生按钮 */
.btn, button, .seg-btn, .tabbar a, .slot-card, .slot-head { -webkit-user-select: none; user-select: none; }

/* 数字等宽:刷新时不会左右抖动 */
.num, .stat-v, td.num, time { font-variant-numeric: tabular-nums; }

.dim  { color: var(--text-dim); }
.mute { color: var(--text-mute); }
.caption { font-size: 12px; color: var(--text-dim); }
.mono { font-variant-numeric: tabular-nums; }

/* 长内容一律不撑破父容器 */
.wrap-anywhere { overflow-wrap: anywhere; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* 焦点样式:统一,键盘可见,不用 outline:none */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* 跳转到主内容(键盘用户) */
.skip-link {
  position: absolute; left: var(--sp-3); top: -100px;
  background: var(--bg-elev-2); color: var(--text);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-s);
  border: 1px solid var(--line-strong); z-index: 60;
}
.skip-link:focus { top: var(--sp-3); }

/* ---------- 应用外壳 ---------- */

/* min-width:0 —— flex/grid 子项的默认下限是 min-content,
   里面一个长数字或长 UUID 就能把整行顶得比屏幕还宽。 */
.app { display: flex; flex-direction: column; min-height: 100dvh; min-width: 0; }

/* 手机:顶部标题栏 */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top));
  background: var(--bg-elev-1);
  border-bottom: 1px solid var(--line);
}
.topbar .brand { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); }
/* 顶栏不再放模块名(2026-09-22 按主人要求移除),页面标题由内容区的 <h1> 与侧栏高亮承担 */
.topbar .spacer { flex: 1; }

/* 手机:桌面侧栏隐藏 */
.sidebar { display: none; }

.content {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-4);
  /* 给底部 tab 与安全区留位置 */
  padding-bottom: calc(56px + var(--sp-4) + env(safe-area-inset-bottom));
}

/* 手机:底部 tab(高 56px,列数跟着导航项数量走,不写死) */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg-elev-1);
  border-top: 1px solid var(--line);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 44px;
  color: var(--text-dim); font-size: 12px; text-decoration: none;
  transition: color var(--dur-fast) var(--ease-io);
}
.tabbar a:hover { text-decoration: none; }
.tabbar a[aria-current="page"] { color: var(--accent); }
.tabbar svg { width: 24px; height: 24px; }

/* ---------- 平板 ≥768px ---------- */
@media (min-width: 768px) {
  .content { padding: var(--sp-5); padding-bottom: var(--sp-6); }
  .tabbar {
    position: static; height: auto; padding-bottom: 0;
    display: flex; justify-content: flex-start; gap: var(--sp-5);
    padding: 0 var(--sp-5); background: transparent; border-top: 0;
  }
  .tabbar a { flex-direction: row; gap: var(--sp-2); font-size: 14px; padding: var(--sp-3) 0; }
  .topbar { border-bottom: 1px solid var(--line); }
}

/* ---------- 桌面 ≥1024px:左栏 + 居中内容 ---------- */
@media (min-width: 1024px) {
  .app { flex-direction: row; }
  .sidebar {
    display: flex; flex-direction: column; gap: var(--sp-1);
    width: 224px; flex: 0 0 224px;
    padding: var(--sp-5) var(--sp-3);
    background: var(--bg-elev-1);
    border-right: 1px solid var(--line);
    position: sticky; top: 0; height: 100dvh;
  }
  .sidebar .brand {
    font-size: 16px; font-weight: 600; padding: 0 var(--sp-3) var(--sp-5);
    display: flex; align-items: center; gap: var(--sp-2);
  }
  .sidebar a {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3); min-height: 44px;
    border-radius: var(--radius-s);
    color: var(--text-dim); font-size: 14px; text-decoration: none;
    transition: background var(--dur-fast) var(--ease-io), color var(--dur-fast) var(--ease-io);
  }
  .sidebar a:hover { background: var(--bg-elev-2); color: var(--text); text-decoration: none; }
  .sidebar a[aria-current="page"] { background: var(--bg-elev-2); color: var(--text); }
  .sidebar a[aria-current="page"] svg { color: var(--accent); }
  .sidebar .side-foot { margin-top: auto; padding: var(--sp-3); }

  .main-col { flex: 1; min-width: 0; }
  .topbar { position: sticky; top: 0; }
  .tabbar { display: none; }
  .content { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
}

@media (min-width: 1440px) {
  .sidebar { width: 240px; flex-basis: 240px; }
}

/* ---------- 辅助布局 ---------- */
.stack   { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-s { display: flex; flex-direction: column; gap: var(--sp-2); }
.row     { display: flex; align-items: center; gap: var(--sp-2); }
.row-4   { display: flex; align-items: center; gap: var(--sp-4); }
.wrap    { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.grow    { flex: 1; min-width: 0; }
.section { margin-top: var(--sp-6); }
.section > h2 { margin-bottom: var(--sp-3); }

/* 图标:内联 SVG,统一 1.5px 线宽 / 24 网格,只用 16/20/24 */
.icon    { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none;
           stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-16 { width: 16px; height: 16px; }
.icon-20 { width: 20px; height: 20px; }

/* ---------- 备案信息页脚 ----------
   备案平台的强制义务:ICP 备案号须出现在网页底部并链接工信部。
   放在 .content 末尾（而非侧栏 .side-foot），因为侧栏在 <1024px 是 display:none，
   只挂侧栏会导致手机端看不到备案号。 */
.site-beian {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
}
.site-beian a { color: var(--text-dim); }
.site-beian a:hover { color: var(--accent); }