/* ============================================================
   ChuMe 啾咪小手机 — 全局设计系统 & 公共基座
   所有页面必须引用：<link rel="stylesheet" href="global.css">
   ============================================================ */

/* ---------- Google Fonts: Nunito ---------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

/* ---------- 设计 Token（CSS 变量） ---------- */
:root {
  /* —— 啾咪配色 —— */
  --chume-cream: #F8E8C1;
  /* 燕麦奶油 — 主背景 */
  --chume-orange: #FF9F43;
  /* 暖阳橘   — 品牌主色 */
  --chume-orange-light: #FFF0DB;
  /* 暖阳橘浅 — 按钮 hover / 选中底 */
  --chume-brown: #5C4B43;
  /* 咖啡棕   — 主文字 */
  --chume-brown-light: #8B7B74;
  /* 咖啡棕浅 — 次要文字 */
  --chume-card: #F4EFEA;
  /* 浅灰卡其 — 模块底色 */
  --chume-green: #C8E6C9;
  /* 抹茶绿   — 成功状态 */
  --chume-pink: #F2A19B;
  /* 蜜桃柔粉 — 提醒状态 */

  /* —— 字体 —— */
  --font-num: 'Nunito', sans-serif;
  --font-title: 'Nunito', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Nunito', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;

  /* —— 阴影（咖啡棕柔光，禁止纯黑） —— */
  --shadow-soft: 0 8px 24px rgba(92, 75, 67, 0.08);
  --shadow-card: 0 2px 12px rgba(92, 75, 67, 0.06);

  /* —— 圆角 —— */
  --radius-card: 24px;
  --radius-btn: 999px;
}

/* ---------- body 统一样式 ---------- */
body {
  font-family: var(--font-body);
  background-color: var(--chume-cream);
  color: var(--chume-brown);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- #app-container 统一容器 ---------- */
#app-container {
  max-width: 430px;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background-color: var(--chume-card);
  box-shadow: var(--shadow-soft);
}

/* ---------- 桌面端美化（≥640px） ---------- */
@media (min-width: 640px) {
  body {
    background-color: #E8DED4;
    align-items: flex-start;
    padding-top: 1rem;
  }

  #app-container {
    border-radius: 2rem;
    margin: 0 auto;
    max-height: calc(100vh - 2rem);
    min-height: calc(100vh - 2rem);
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(92, 75, 67, 0.15);
  }
}

/* ---------- 全局滚动条隐藏 ---------- */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ---------- 全局动画 ---------- */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* ---------- Safe Area ---------- */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ---------- 响应式图片处理 ---------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 确保emoji在不同设备上正确显示 */
.emoji {
  font-size: 1em;
  line-height: 1;
  vertical-align: middle;
}

/* 响应式容器 */
.responsive-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* ---------- 响应式网格 ---------- */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
}

/* ---------- 浏览器兼容性优化 ---------- */
/* 触摸事件优化 */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input, textarea, select {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* 滚动条优化 */
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;
}

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

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

/* 弹性布局兼容性 */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* 过渡效果兼容性 */
.transition-all {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* 边框半径兼容性 */
.rounded-full {
  -webkit-border-radius: 9999px;
  border-radius: 9999px;
}

/* 阴影兼容性 */
.shadow-card {
  -webkit-box-shadow: 0 2px 12px rgba(92, 75, 67, 0.06);
  box-shadow: 0 2px 12px rgba(92, 75, 67, 0.06);
}

.shadow-soft {
  -webkit-box-shadow: 0 8px 24px rgba(92, 75, 67, 0.08);
  box-shadow: 0 8px 24px rgba(92, 75, 67, 0.08);
}

/* ---------- 屏幕方向适应 ---------- */
/* 横屏模式 */
@media (orientation: landscape) {
  #app-container {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
  }
  
  /* 调整网格布局 */
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  
  /* 调整导航栏 */
  .h-24 {
    height: 16vh;
  }
  
  /* 调整内容区域 */
  .flex-1 {
    overflow-y: auto;
  }
}

/* 竖屏模式 */
@media (orientation: portrait) {
  #app-container {
    max-height: 100vh;
    max-height: 100dvh;
  }
  
  /* 恢复默认布局 */
  .h-24 {
    height: 6rem;
  }
}

/* ---------- 布局结构优化 ---------- */
/* 确保容器在不同屏幕尺寸上的一致性 */
#app-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 防止内容溢出 */
* {
  box-sizing: border-box;
}

/* 弹性布局容器 */
.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* 内容区域自适应 */
.content-area {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

/* 响应式边距 */
.responsive-padding {
  padding: 1rem;
}

@media (max-width: 360px) {
  .responsive-padding {
    padding: 0.75rem;
  }
}

@media (min-width: 480px) {
  .responsive-padding {
    padding: 1.25rem;
  }
}

/* 响应式字体大小 */
.responsive-text {
  font-size: 1rem;
}

@media (max-width: 360px) {
  .responsive-text {
    font-size: 0.875rem;
  }
}

@media (min-width: 480px) {
  .responsive-text {
    font-size: 1.125rem;
  }
}

/* 防止文本溢出 */
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 响应式网格布局 */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.75rem;
}

@media (min-width: 360px) {
  .responsive-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 480px) {
  .responsive-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1.25rem;
  }
}

/* ---------- 媒体查询：不同屏幕尺寸和设备类型 ---------- */
/* 超小屏幕：小于320px */
@media (max-width: 319px) {
  /* 调整字体大小 */
  body {
    font-size: 14px;
  }
  
  /* 调整容器内边距 */
  #app-container {
    padding: 0.5rem;
  }
  
  /* 调整导航栏高度 */
  .h-24 {
    height: 5rem;
  }
  
  /* 调整按钮大小 */
  button {
    padding: 0.75rem 1rem;
  }
}

/* 小屏幕：320px - 374px */
@media (min-width: 320px) and (max-width: 374px) {
  /* 调整字体大小 */
  body {
    font-size: 15px;
  }
  
  /* 调整容器内边距 */
  #app-container {
    padding: 0.75rem;
  }
}

/* 中屏幕：375px - 479px */
@media (min-width: 375px) and (max-width: 479px) {
  /* 调整字体大小 */
  body {
    font-size: 16px;
  }
  
  /* 调整容器内边距 */
  #app-container {
    padding: 1rem;
  }
}

/* 大屏幕：480px - 767px */
@media (min-width: 480px) and (max-width: 767px) {
  /* 调整字体大小 */
  body {
    font-size: 17px;
  }
  
  /* 调整容器内边距 */
  #app-container {
    padding: 1.25rem;
  }
  
  /* 调整容器最大宽度 */
  #app-container {
    max-width: 540px;
    margin: 0 auto;
  }
}

/* 平板设备：768px及以上 */
@media (min-width: 768px) {
  /* 调整字体大小 */
  body {
    font-size: 18px;
  }
  
  /* 调整容器内边距 */
  #app-container {
    padding: 1.5rem;
  }
  
  /* 调整容器最大宽度 */
  #app-container {
    max-width: 640px;
    margin: 0 auto;
    border-radius: 1rem;
    box-shadow: 0 12px 48px rgba(92, 75, 67, 0.15);
  }
  
  /* 调整导航栏高度 */
  .h-24 {
    height: 7rem;
  }
}

/* 高DPI设备 */
@media (-webkit-device-pixel-ratio: 2), (device-pixel-ratio: 2) {
  /* 调整图标大小 */
  i {
    font-size: 1.1em;
  }
}

/* 超高DPI设备 */
@media (-webkit-device-pixel-ratio: 3), (device-pixel-ratio: 3) {
  /* 调整图标大小 */
  i {
    font-size: 1.2em;
  }
}