/* ============================================================
   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;
  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;
  }

  #app-container {
    border-radius: 2rem;
    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;
}

@keyframes calendarViewChange {
  from {
    opacity: 0.65;
    transform: translateY(-4px);
  }

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

.calendar-week-view,
.calendar-month-view {
  overflow: hidden;
  animation: calendarViewChange 0.22s ease-out;
}

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