/* ========================================
   基础样式 - 全局排版与布局
   ======================================== */

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* 应用容器 */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 页面内容区 */
#page-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1;
  padding: var(--content-padding);
  padding-top: calc(var(--header-height) + var(--content-padding));
  padding-bottom: calc(var(--tabbar-height) + var(--content-padding));
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

.page-content.no-tabbar {
  padding-bottom: var(--content-padding);
}

.page-content.no-header {
  padding-top: var(--content-padding);
}

/* 登录页等全屏页面：去掉最大宽度限制，让子元素自行居中 */
.page-content.no-header.no-tabbar {
  max-width: none;
  padding: 0;
}

/* 文本工具类 */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-bold { font-weight: var(--font-weight-bold); }
.text-secondary { color: var(--color-text-secondary); }
.text-light { color: var(--color-text-light); }
.text-primary { color: var(--color-primary); }
.text-danger { color: var(--color-danger); }
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-xxl { font-size: var(--font-size-xxl); }

/* 间距工具类 */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-base { margin-top: var(--space-base); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-base { margin-bottom: var(--space-base); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* 弹性布局 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-base { gap: var(--space-base); }
.gap-lg { gap: var(--space-lg); }
.flex-1 { flex: 1; }

/* 隐藏 */
.hidden { display: none !important; }

/* 页面过渡动画 */
.page-enter {
  animation: pageFadeIn var(--transition-normal) ease forwards;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}