/* ============================================================
   MiniZone Design System — Base (Layer 2)
   重置 / App 壳 / 滚动 / 排版 / 分区 / 页面过渡 / 工具类
   ============================================================ */

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

/* hidden 属性的标准语义兜底：作者样式一旦给元素设了 display，
   UA 的 [hidden]{display:none} 会被覆盖导致 hidden 失效（如 .dock-badge/.mz-unread-dot） */
[hidden] { display: none !important; }

/* 主题切换瞬间（state/theme.js 加 .theming 一帧）：抑制全局过渡，防止大面积颜色 crossfade 闪变 */
html.theming, html.theming * { transition: none !important; }

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 16px;
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}
body { overflow: hidden; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible { outline: 3px solid rgba(35, 104, 245, .4); outline-offset: 2px; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; }
::selection { background: rgba(35, 104, 245, .18); color: var(--accent-deep); }

/* ===== 排版角色：MiSans 优先层（标题强化 + 数字强调 + UI 控制） =====
   正文（帖子/评论/长文本/表单输入）不在此列，保持 var(--font-body) 系统栈，阅读优先。
   三个字体栈在未安装 MiSans 的设备上同源回退（苹方/鸿蒙/系统），因此本区块只改变
   已安装 MiSans 设备（小米/Redmi 等）的字形，不引入网络字体加载与闪烁。 */
:is(.home-title, .page-title, .sub-head .sub-title, .section-heading h2, .m-section-head h2,
    .store-head h2, .sheet-title, .dlg-title, .auth-title, .mini-topbar .mt-name,
    .hero h1, .ac-title, .empty-title, .error-title, .about-name, .u-name, .pp-cover-name) {
  font-family: var(--font-brand);
}
:is(.btn, .seg button, .dock button, .form-label, .m-badge, .sample-tag, .hot-chip,
    .hero-kicker, .ac-tag, .u-gender, .m-section-link, .page-title-sub,
    .quick strong, .author strong, .cc-name, .user-row-name, .pp-row-name) {
  font-family: var(--font-ui);
}
/* 数字强调：统计/排名/价格等关键数字成为视觉重点（配合既有 tabular-nums） */
:is(.profile-stat-num, .hot-rank, .pp-row-rank, .quota-price, .quota-history-cost) {
  font-family: var(--font-ui);
}

/* ===== App 壳：内容 Edge-to-Edge，控制层漂浮其上 ===== */
.app {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg-page);
  isolation: isolate;
}
/* 环境光：极弱的氛围色，随滚动静止，不抢内容 */
.app::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 50% at 88% -4%, rgba(82, 160, 240, .1), transparent 55%),
    radial-gradient(90% 40% at 0% 20%, rgba(119, 88, 244, .05), transparent 55%),
    linear-gradient(180deg, #f6f8fb 0%, var(--bg-page) 30%, #eef1f6 100%);
}
html[data-theme='dark'] .app::before {
    background:
      radial-gradient(120% 50% at 88% -4%, rgba(70, 120, 220, .08), transparent 55%),
      linear-gradient(180deg, #12161d 0%, var(--bg-page) 40%, #0c0f14 100%);
}

/* ===== 滚动内容区：内容延伸至导航之下 ===== */
.scroll {
  position: absolute; inset: 0; z-index: 1;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
  padding: calc(var(--page-top) + var(--safe-top)) var(--page-h) calc(var(--dock-h) + var(--safe-bottom) + 54px);
  -webkit-overflow-scrolling: touch;
}
/* 子页面：底部导航隐藏，底部留白收窄 */
.app.subpage .scroll { padding-bottom: calc(var(--subpage-pad-b) + var(--safe-bottom)); }
.scroll::-webkit-scrollbar { display: none; }

/* ===== 底部主导航切换：新页与缓存页共用，不改变 fixed 控件的定位 ===== */
.page-view.tab-enter { animation: tabPageEnter 200ms var(--ease-out); }
@keyframes tabPageEnter {
  from { opacity: .35; }
  to { opacity: 1; }
}

/* ===== 分区 ===== */
.section { margin-top: var(--sec-gap); }
.section-heading {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 2px; margin-bottom: 14px;
}
.section-heading h2 {
  font-size: var(--fs-title-section);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.section-heading span { font-size: var(--fs-meta); color: var(--text-tertiary); font-weight: var(--fw-semibold); }

/* MiniSectionHeader 变体：带溢出操作 */
.m-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px; margin-bottom: 14px;
}
.m-section-head h2 {
  font-size: var(--fs-title-section);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
}
.m-section-link {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--fs-body-small); font-weight: var(--fw-semibold);
  color: var(--text-tertiary); padding: 6px 8px; margin: -6px -8px;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.m-section-link:active { background: rgba(24, 32, 48, .06); }

/* ===== MiniBadge ===== */
.m-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .01em;
  background: var(--accent-soft); color: var(--accent-deep);
}
.m-badge.muted { background: rgba(24, 32, 48, .06); color: var(--text-secondary); }

/* ===== MiniAvatar：真实头像优先，首字母渐变兜底 ===== */
.m-avatar {
  position: relative;
  display: grid; place-items: center;
  border-radius: 13px;
  overflow: hidden;
  background: linear-gradient(145deg, #4d7de8, #2aa5a0);
  color: #fff;
  font-weight: var(--fw-bold);
  flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(24, 40, 80, .14), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.m-avatar img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.m-avatar span { position: relative; }

/* ===== 通用工具 ===== */
.m-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.m-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== 横屏 / 平板适配 ===== */
@media (min-width: 640px) {
  .app { max-width: 480px; margin: 0 auto; box-shadow: 0 0 80px rgba(0, 0, 0, .12); }
  .banner-container { max-width: 456px; left: 50%; transform: translateX(-50%); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .home-title { font-size: 24px; }
  .hero { min-height: 150px; }
}