/* ============================================================
   家人守护 · 老人端 — Design Tokens
   温暖亲和 · 米黄底 + 暖橙主色 · PingFang SC 圆润大字
   ============================================================ */

:root {
  /* —— 色彩 · Energetic 暖橙调（老人端友好版）—— */
  --bg:           #FFF7ED;   /* 米黄 page bg */
  --bg-warm:      #FFEDD5;   /* 略深米黄 · 区分分组 */
  --surface:      #FFFFFF;   /* 卡片 / 输入框 */
  --surface-warm: #FED7AA;   /* 暖色装饰区 */

  --primary:      #EA580B;   /* 主行动色 · CTA */
  --primary-deep: #C2410C;   /* 按压态 */
  --primary-soft: #FDBA74;   /* 装饰 · 描边 */
  --secondary:    #F59E0B;   /* 次行动色 / 强调 */

  --fg:           #2D1B0F;   /* 正文 · 深棕，对比 ≥ 11:1 */
  --fg-strong:    #1A0F08;   /* 大标题 */
  --muted:        #78533A;   /* 辅助文案 */
  --muted-2:      #A07C5B;   /* 弱化辅助 */

  --border:       #FED7AA;   /* 细描边 */
  --border-strong:#FDBA74;   /* 输入框描边 */

  --success:      #16A34A;
  --warning:      #D97706;
  --danger:       #DC2626;

  /* —— 字体 —— */
  --font-display: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* —— 字号 · 老人端标准放大 baseline —— */
  --fz-xs:    14px;
  --fz-sm:    16px;
  --fz-base:  19px;    /* 正文 */
  --fz-lg:    21px;    /* 强调正文 */
  --fz-xl:    24px;
  --fz-h3:    26px;
  --fz-h2:    30px;    /* 中标题 */
  --fz-h1:    36px;    /* 大标题 */
  --fz-hero:  44px;    /* hero */

  /* —— 间距 —— */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* —— 圆角 —— */
  --r-sm:    10px;
  --r-md:    16px;
  --r-lg:    20px;
  --r-xl:    28px;
  --r-pill:  999px;

  /* —— 阴影 · 暖色基调 —— */
  --shadow-sm: 0 1px 2px rgba(120, 53, 15, 0.06);
  --shadow-md: 0 6px 20px rgba(234, 88, 12, 0.10), 0 2px 6px rgba(120, 53, 15, 0.06);
  --shadow-cta:0 8px 24px rgba(234, 88, 12, 0.32);

  /* —— Motion —— */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   iPhone 15 Pro 设备框架 — 390 × 844 viewport
   ============================================================ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fz-base);
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 当作为独立预览页时居中显示，带场景背景 */
body.standalone {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #fef3e2 0%, #fff7ed 50%, #fed7aa 100%);
  padding: 24px;
}

.iphone-frame {
  width: 390px;
  height: 844px;
  position: relative;
  border-radius: 56px;
  background: var(--bg);
  overflow: hidden;
  box-shadow:
    0 0 0 12px #1a1a1a,
    0 0 0 14px #2d2d2d,
    0 30px 80px rgba(120, 53, 15, 0.25),
    0 12px 24px rgba(0, 0, 0, 0.15);
  isolation: isolate;
}

/* 嵌入到 iframe 时：去掉外层场景和黑框（外层 phone-host 已提供边框） */
body.embedded {
  margin: 0;
  padding: 0;
  background: transparent;
  display: block;
}
body.embedded .iphone-frame {
  box-shadow: none;
  border-radius: 42px;     /* 内圆角，与 phone-host 黑框配合 */
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

/* —— 状态栏 9:41 —— */
.status-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 54px;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 32px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--fg-strong);
  pointer-events: none;
}
.status-bar .time { letter-spacing: -0.2px; }
.status-bar .indicators { display: flex; gap: 6px; align-items: center; }
.status-bar svg { display: block; }

/* —— Dynamic Island —— */
.dynamic-island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 37px;
  border-radius: 22px;
  background: #000;
  z-index: 30;
}

/* —— Home Indicator —— */
.home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  border-radius: 3px;
  background: var(--fg-strong);
  opacity: 0.85;
  z-index: 20;
}

/* —— 屏幕内容区（状态栏下、home indicator 上） —— */
.screen {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  padding-top: 54px;     /* 状态栏 */
  padding-bottom: 34px;  /* home indicator 区 */
}

/* ============================================================
   通用组件
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;       /* 老人端 ≥ 44pt 触达 */
  padding: 0 28px;
  border: none;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: var(--fz-lg);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), background 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out);
  user-select: none;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn-primary:active { background: var(--primary-deep); }

.btn-primary-block {
  width: 100%;
  min-height: 60px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.btn-ghost {
  background: transparent;
  color: var(--primary);
  font-weight: 600;
}
.btn-ghost:active { background: rgba(234, 88, 12, 0.08); }

.text-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

/* ============================================================
   工具类
   ============================================================ */
.flex-fill { flex: 1; }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.tabular { font-variant-numeric: tabular-nums; }