/* ====================================================================
   全站统一：手机外框 + 内部 TabBar
   - 桌面端：整体居中显示一个手机形状的"卡片"，外有圆角阴影
   - 移动端：撑满屏幕，但仍保留外框视觉（细线 + 极浅阴影）
   - TabBar 始终固定在外框内部底部，内容在外框内滚动
   ==================================================================== */

/* ---------- 全局基础 ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* 锁死视口，杜绝任何整页滚动条 */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: linear-gradient(135deg, #e9eff9 0%, #dde6f4 100%);
}

/* 全局隐藏所有滚动条（内容仍可滚动，只是条不可见） */
* {
  scrollbar-width: none !important;           /* Firefox */
  -ms-overflow-style: none !important;         /* IE/Edge 旧版 */
}
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;                     /* WebKit/Chrome/Edge/Safari */
}

/* ---------- 手机外框 ---------- */
.app {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: transparent;   /* 透出 body 背景，避免与各页面自定义背景冲突 */
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* 框外不滚动 */
}

@media (min-width: 520px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
  }
  .app {
    min-height: calc(100vh - 28px);
    height: calc(100vh - 28px);
    max-height: calc(100vh - 28px);   /* 锁死高度，内容再多也不撑破视口 */
    overflow: hidden;            /* 桌面端也要裁切，滚动只发生在内部容器 */
    border-radius: 22px;
    border: 1px solid #e1e7f0;
    box-shadow:
      0 20px 60px rgba(20, 30, 60, 0.12),
      0 4px 12px rgba(20, 30, 60, 0.06);
  }
}

/* ---------- 内容区（可滚动） ---------- */
.app-main {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 64px; /* 给底部 TabBar 让出空间 */
}

/* ---------- 底部 TabBar（外框内固定） ---------- */
.tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 64px;
  display: flex;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 50;
  flex-shrink: 0;
}
/* 桌面端：TabBar 跟随外框圆角 */
@media (min-width: 520px) {
  .tabbar {
    border-radius: 0 0 22px 22px;
  }
}

.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: #8a90a8;
  font-size: 11.5px;
  line-height: 1.1;
  position: relative;
  transition: color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.tabbar a .tab-ico {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  line-height: 1;
  font-size: 18px;
  color: #8a90a8;
  transition: transform .15s ease, color .15s ease, background .15s ease;
  border-radius: 8px;
}
.tabbar a .tab-ico svg { width: 22px; height: 22px; fill: currentColor; }

.tabbar a.active { color: #1f2430; font-weight: 600; }
.tabbar a.active .tab-ico {
  background: linear-gradient(180deg, #ffe1e7 0%, #ffd0d8 100%);
  color: #ff5a76;
  transform: translateY(-1px) scale(1.04);
}