:root {
    --warm-bg: #FFF6F0;
    --card-bg: #FFFFFF;
    --primary: #F4856B;
    --primary-light: #FFEEE8;
    --accent-amber: #F5A623;
    --accent-mint: #5EC4B6;
    --accent-lavender: #B19CD9;
    --text-main: #3D3028;
    --text-secondary: #8C7A6B;
    --text-light: #B8A99A;
    --divider: #F0E8E0;
    --shadow-sm: 0 2px 8px rgba(61,48,40,0.06);
    --shadow-md: 0 4px 16px rgba(61,48,40,0.08);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --nav-height: 64px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: #F5EDE4;
    display: flex; justify-content: center; align-items: center; min-height: 100vh;
    -webkit-tap-highlight-color: transparent; user-select: none;
  }

  .phone-frame {
    width: 390px; height: 844px;
    background: var(--warm-bg);
    border-radius: 36px; overflow: hidden; position: relative;
    box-shadow: 0 0 0 3px #3D3028, 0 0 0 6px #E8E0D8, 0 20px 60px rgba(0,0,0,0.25);
    display: flex; flex-direction: column;
  }
  @media (max-width: 430px) {
    html, body { height: 100%; overflow: hidden; }
    .phone-frame {
      /* 用 JS 注入的 --app-height（= window.innerHeight，真实可视高度，排除浏览器底部工具栏）。
         dvh / vh 作为降级：不支持 --app-height 时用动态视口高度，再退到 vh。 */
      position: fixed; top: 0; left: 0; right: 0;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      height: var(--app-height, 100dvh);
      border-radius: 0; box-shadow: none;
    }
  }

  .scroll-area {
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding: 16px 16px 20px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  }
  .scroll-area::-webkit-scrollbar { display: none; }

  /* ====== 屏幕容器 ====== */
  .screen { display: none; }
  .screen.active { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

  /* ====== 顶栏 ====== */
  .top-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 4px 10px;
  }
  .home-title { display: flex; align-items: center; gap: 8px; cursor: pointer; }
  .home-emoji {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, #FDDCB5, #FFC3A0, #FFAFBD); border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; box-shadow: var(--shadow-sm);
  }
  .home-name {
    font-size: 22px; font-weight: 800; letter-spacing: 1.5px;
    background: linear-gradient(90deg, #FF6B6B, #F4856B, #FFA94D);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(244,133,107,.25));
  }
  .top-actions { display: flex; align-items: center; gap: 10px; }
  .btn-add {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: var(--primary); color: #FFF; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s;
  }
  .btn-add:active { transform: scale(.92); }
  .btn-edit-icon {
     width: 36px; height: 36px; border-radius: 50%;
     background: #F5F2EF; display: flex; align-items: center; justify-content: center;
     cursor: pointer; flex-shrink: 0; transition: all .2s;
   }
   .btn-edit-icon svg { width: 16px; height: 16px; stroke: var(--text-secondary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
   .btn-edit-icon:active { background: #EBE5DE; }
   .btn-edit-icon.active { background: var(--primary-light); }
   .btn-edit-icon.active svg { stroke: var(--primary); }

   .btn-back {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: #F5F2EF; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 16px; color: var(--text-secondary);
  }
  .btn-back:active { background: #EBE5DE; }

  /* ====== 日期栏 ====== */
  .date-bar {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px; flex-wrap: wrap;
  }
  .date-text   { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
  .date-weekday{ font-size: 13px; color: var(--text-light); }
  .date-gap    { width: 1px; height: 14px; background: var(--divider); }
  .date-loc    { font-size: 12px; color: var(--text-secondary); }
  .date-wth    { font-size: 12px; color: var(--text-secondary); }

  /* ====== 健康状态面板（特殊样式） ====== */
  .panel.health {
    background: linear-gradient(135deg, #FDF2E8, #F8E4D6);
    border: 1.5px solid #F0D8C4; display: none;
  }
  .panel.health.visible { display: block; }
  .panel.health .health-body {
    margin: 0 14px 10px; border-radius: 10px;
    padding: 8px 12px; display: flex; align-items: center; gap: 10px;
    cursor: pointer;
  }
  .health-emoji { font-size: 36px; flex-shrink: 0; }
  .health-info { flex: 1; }
  .health-info-title { font-size: 13px; font-weight: 600; color: var(--text-main); }
  .health-info-sub   { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

  /* ====== 统一面板卡片 ====== */
  .panel {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm); margin-bottom: 14px;
    overflow: hidden;
    animation: fadeInUp .4s ease-out both;
  }
  .panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 16px 12px;
  }
  .panel-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 800; letter-spacing: 1px;
    color: #7B6E65;
  }
  .panel-title.coral { background: linear-gradient(90deg, #F4856B, #F5A623); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }
  .panel-title.mint  { color: #6BAF9A; }
  .panel-title.amber { color: #D4913E; }
  .panel-title.lavender { color: #9B82C4; }
  .panel-bar {
    width: 4px; height: 18px; border-radius: 2px; flex-shrink: 0;
  }
  .panel-bar.coral { background: var(--primary); }
  .panel-bar.amber { background: var(--accent-amber); }
  .panel-bar.mint  { background: var(--accent-mint); }
  .panel-bar.lavender { background: var(--accent-lavender); }
  .panel-more {
    width: 28px; height: 28px; border-radius: 50%;
    background: #F5F2EF; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s; flex-shrink: 0;
  }
  .panel-more:active { background: #EBE5DE; }
  .panel-more svg { width: 14px; height: 14px; stroke: var(--text-secondary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* 各板块区域底色 */
  .panel.courses   { background: #F7FAF6; }
  .panel.reminders { background: #FFFBF6; }
  .panel.funs      { background: #FBFAFE; }
  .panel.white     { background: var(--card-bg); }
  .panel.footprints { background: #FAFDF8; }
  .panel.growth    { background: #FFFAFE; }

  /* ====== 面板内的列表行 ====== */
  .panel-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; cursor: pointer;
    border-top: 1px solid var(--divider);
    transition: background .15s;
  }
  .panel-row:active { background: #FAFAF8; }

  /* 课程专用行 */
  .panel-row.course { gap: 12px; }
  .course-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
  }
  .course-icon.art   { background: #FFF0F5; }
  .course-icon.sport { background: #F0F9F4; }
  .course-icon.music { background: #F5F0FF; }
  .course-icon.eng  { background: #FFF8F0; }
  .course-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .course-name   { font-size: 13px; font-weight: 700; color: var(--text-main); }
  .course-detail { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
  .course-time { color: var(--primary); font-weight: 700; font-size: 14px; }
  .course-dot  { width: 3px; height: 3px; border-radius: 50%; background: var(--text-light); flex-shrink: 0; }
  .course-remind { color: var(--accent-amber); font-weight: 500; margin-left: auto; font-size: 11px; }

  /* 复制课程按钮 */
  .btn-copy-courses {
    width: 26px; height: 26px; border-radius: 50%;
    background: #F0F6F2; color: var(--accent-mint);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; cursor: pointer; transition: all .2s; flex-shrink: 0;
    margin-left: auto;
  }
  .btn-copy-courses:hover { background: var(--primary-light); }
  .btn-copy-courses:active { background: var(--primary); color: #FFF; transform: scale(.96); }
  .btn-copy-courses.copied { background: var(--accent-mint); border-color: var(--accent-mint); color: #FFF; }

  /* 提醒专用行 */
  .panel-row.remind { gap: 12px; }
  .remind-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
  }
  .remind-icon.orange { background: #FFF3E8; }
  .remind-info { flex: 1; min-width: 0; }
  .remind-name { font-size: 13px; font-weight: 700; color: var(--text-main); }
  .remind-tags { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
  .remind-deadline { font-size: 11px; font-weight: 500; }
  .remind-deadline.soon { color: var(--accent-amber); }
  .remind-deadline.normal { color: var(--text-light); }
  .remind-type {
    font-size: 10px; background: #F8F5F0; color: var(--text-secondary);
    padding: 1px 8px; border-radius: 8px;
  }

  /* 趣事专用行 */
  .panel-row.fun { gap: 12px; }
  .fun-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
  }
  .fun-avatar.dad { background: #E8F4FD; }
  .fun-avatar.mom { background: #FFE8E8; }
  .fun-content { flex: 1; min-width: 0; }
  .fun-meta  { display: flex; align-items: center; gap: 6px; }
  .fun-author{ font-size: 12px; font-weight: 600; color: var(--text-main); }
  .fun-time  { font-size: 11px; color: var(--text-light); }
  .fun-text  { font-size: 13px; color: var(--text-main); margin-top: 3px; line-height: 1.5; }
  .fun-reaction { font-size: 20px; flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
  .fun-photo {
    width: 52px; height: 52px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg, #FDE2D0, #FAD0C4); margin-left: 4px;
    display: flex; align-items: center; justify-content: center; font-size: 26px;
  }

  /* ====== 足迹 ====== */
  /* 子模块切换 */
  .fp-segment { display: flex; gap:0; margin-bottom: 14px; background: var(--card-bg); border-radius: var(--radius-md); padding: 3px; box-shadow: var(--shadow-sm); }
  .fp-seg-btn { flex:1; text-align:center; padding: 8px 0; border-radius: 10px; font-size: 13px; font-weight: 700; border:none; background:none; cursor:pointer; color: var(--text-secondary); }
  .fp-seg-btn.active { background: var(--primary); color: #FFF; }

  /* 筛选栏 */
  .fp-filter-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
  .fp-filter-chip { padding: 4px 10px; border-radius: 14px; border: 1px solid var(--divider); font-size: 11px; cursor: pointer; background: var(--card-bg); color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
  .fp-filter-chip.active { background: var(--primary); color: #FFF; border-color: var(--primary); }
  .fp-filter-gap { width: 1px; height: 18px; background: var(--divider); }
  .fp-time-select { font-size: 11px; color: var(--primary); font-weight: 600; cursor: pointer; border: none; background: none; }

  /* 地图区域 */
  .fp-map { height: 200px; border-radius: var(--radius-md); background: linear-gradient(135deg, #E8F5E9, #C8E6C9, #B2DFDB); position: relative; z-index: 0; margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
  .fp-map-loading { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 13px; color: var(--text-secondary); }
  .fp-map-fallback { background: linear-gradient(135deg, #E8F5E9, #C8E6C9, #B2DFDB); }
  /* Leaflet 真实地图样式覆盖 */
  .fp-map.leaflet-container { background: #E8F5E9; font-family: inherit; }
  .fp-map .leaflet-control-zoom { border: none !important; box-shadow: var(--shadow-sm); }
  .fp-map .leaflet-control-zoom a { background: rgba(255,255,255,0.95); color: var(--text-main); border-radius: 4px; font-size: 16px; line-height: 22px; }
  .leaflet-pin-icon { background: transparent; border: none; }
  .leaflet-pin { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 20px; text-align: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
  .leaflet-pin.visited { color: #5EC4B6; }
  .leaflet-pin.wish { color: #F5A623; }
  .leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: var(--shadow-sm); }
  .leaflet-popup-content { margin: 8px 12px; }
  .fp-map-pin { position: absolute; transform: translate(-50%,-50%); cursor: pointer; z-index: 2; }
  .fp-map-pin .pin-dot { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); margin: 0 auto; }
  .fp-map-pin .pin-dot.visited { background: #5EC4B6; }
  .fp-map-pin .pin-dot.wish { background: #F5A623; }
  .fp-map-pin .pin-label { background: var(--card-bg); font-size: 9px; color: var(--text-main); padding: 1px 6px; border-radius: 8px; white-space: nowrap; margin-top: 2px; box-shadow: var(--shadow-sm); display: none; }
  .fp-map-pin:active .pin-label { display: block; }

  /* 最近足迹（朋友圈式） */
  .fp-timeline { margin-top: 8px; }
  .fp-timeline-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--divider); cursor: pointer; }
  .fp-tl-date { width: 38px; flex-shrink: 0; text-align: center; }
  .fp-tl-date .tld-day { font-size: 18px; font-weight: 800; color: var(--text-main); line-height: 1; }
  .fp-tl-date .tld-mon { font-size: 10px; color: var(--text-secondary); }
  .fp-tl-cover { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; }
  .fp-tl-cover.park { background: #E8F5E9; }
  .fp-tl-cover.shop { background: #FFF3E0; }
  .fp-tl-cover.mall { background: #F3E5F5; }
  .fp-tl-cover.play { background: #FFEBEE; }
  .fp-tl-cover.eat  { background: #FFF8E1; }
  .fp-tl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .fp-tl-title { font-size: 13px; font-weight: 700; color: var(--text-main); }
  .fp-tl-meta { font-size: 11px; color: var(--text-secondary); display: flex; gap: 6px; align-items: center; }
  .fp-tl-tag { font-size: 9px; padding: 1px 6px; border-radius: 6px; background: #F5F0EB; color: var(--text-secondary); }
  .fp-tl-mood { font-size: 20px; flex-shrink: 0; }

  /* 想去清单卡片 */
  .wish-card { display: flex; gap: 10px; padding: 10px 12px; background: var(--card-bg); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow-sm); }
  .wish-cover { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; background: linear-gradient(135deg, #FFF3E0, #FFE0B2); }
  .wish-body { flex: 1; min-width: 0; }
  .wish-title { font-size: 13px; font-weight: 700; color: var(--text-main); }
  .wish-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
  .wish-stars { color: var(--accent-amber); font-size: 12px; margin-top: 2px; }

  /* 旅行卡片 */
  .trip-card { background: var(--card-bg); border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; }
  .trip-card .tc-cover { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
  .trip-card .tc-cover.sea { background: linear-gradient(135deg, #E3F2FD, #BBDEFB); }
  .trip-card .tc-cover.city { background: linear-gradient(135deg, #FFF3E0, #FFE0B2); }
  .trip-card .tc-cover.culture { background: linear-gradient(135deg, #F3E5F5, #E1BEE7); }
  .trip-card .tc-body { padding: 10px 14px; }
  .trip-card .tc-title { font-size: 14px; font-weight: 800; color: var(--text-main); }
  .trip-card .tc-meta { font-size: 11px; color: var(--text-secondary); margin-top: 3px; }
  .trip-card .tc-age { font-size: 11px; color: var(--primary); font-weight: 600; margin-top: 2px; }

  /* 旅行详情-每日地点 */
  .trip-day { margin-bottom: 12px; }
  .trip-day-title { font-size: 13px; font-weight: 800; color: var(--text-main); padding: 8px 14px; background: #FAFAF8; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .trip-day .fp-timeline-item { padding-left: 0; padding-right: 0; }

  /* 花费汇总 */
  .cost-summary { background: #FAFAF8; border-radius: var(--radius-sm); padding: 12px; margin-top: 10px; }
  .cost-row { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; }
  .cost-row .cr-label { color: var(--text-secondary); }
  .cost-row .cr-val { font-weight: 600; color: var(--text-main); }
  .cost-row.total { border-top: 1px solid var(--divider); padding-top: 8px; font-size: 14px; }

  /* 两步添加浮层 — 居中弹窗 */
   .add-step-overlay { display: none; position: absolute; inset: 0; background: rgba(61,48,40,.35); z-index: 155; align-items: center; justify-content: center; }
   .add-step-overlay.show { display: flex; }
   .add-step-panel { background: var(--card-bg); border-radius: var(--radius-lg); width: 280px; padding: 24px 20px 20px; box-shadow: 0 16px 48px rgba(0,0,0,.15); animation: popIn .25s ease-out both; }
   @keyframes popIn { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
  .add-step-options { display: flex; gap: 10px; }
  .add-step-opt { flex: 1; padding: 16px 8px; border-radius: var(--radius-md); text-align: center; cursor: pointer; border: 2px solid var(--divider); background: var(--card-bg); font-size: 14px; font-weight: 700; color: var(--text-main); }
  .add-step-opt:active { background: var(--primary-light); border-color: var(--primary); }
  .add-step-opt .aso-icon { font-size: 28px; display: block; margin-bottom: 6px; }
  .add-step-back { font-size: 13px; color: var(--primary); cursor: pointer; text-align: center; margin-top: 12px; display: block; }

  /* 存量面板复用 */
  .panel.footprints { background: #FAFDF8; }

  /* ====== 成长 ====== */
   .growth-banner { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
   .growth-stat { font-size: 12px; color: var(--text-secondary); }
   .growth-stat b { color: var(--primary); font-size: 15px; }
   .growth-stat-divider { width: 1px; height: 14px; background: var(--divider); }
   .growth-filter-row { display: flex; gap: 8px; margin-bottom: 14px; position: relative; }
   .growth-filter-dropdown { position: relative; display: inline-block; }
   .gfd-trigger { font-size: 11px; color: var(--text-secondary); cursor: pointer; padding: 4px 8px; background: #F5F2EF; border-radius: 8px; white-space: nowrap; }
   .gfd-menu { display: none; position: absolute; left: 0; top: 30px; background: var(--card-bg); border-radius: var(--radius-sm); box-shadow: 0 6px 24px rgba(61,48,40,0.18); padding: 4px 0; z-index: 10000; min-width: 130px; max-height: 240px; overflow-y: auto; }
   .gfd-menu.show { display: block; }
   .gfd-item { padding: 8px 14px; font-size: 12px; color: var(--text-main); cursor: pointer; white-space: nowrap; }
   .gfd-item:active { background: #FAFAF8; }
   .gfd-item.active { color: var(--primary); font-weight: 700; }

   .growth-card { background: var(--card-bg); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); margin-bottom: 10px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; }
   .growth-card .gc-img { height: 140px; display: flex; align-items: center; justify-content: center; font-size: 36px; }
   .growth-card .gc-img.quote  { background: linear-gradient(135deg, #FFF5F5, #FFE8E8); }
   .growth-card .gc-img.funny  { background: linear-gradient(135deg, #FFFDE8, #FFF9C4); }
   .growth-card .gc-img.mile   { background: linear-gradient(135deg, #E8F8F5, #B2DFDB); }
   .growth-card .gc-img.touch  { background: linear-gradient(135deg, #F5F0FF, #D1C4E9); }
   .growth-card .gc-body { padding: 10px 12px; display: flex; gap: 8px; align-items: flex-start; }
   .growth-card .gc-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; }
   .growth-card .gc-avatar.dad { background: #E8F4FD; }
   .growth-card .gc-avatar.mom { background: #FFE8E8; }
   .growth-card .gc-content { flex: 1; min-width: 0; }
   .growth-card .gc-text { font-size: 13px; color: var(--text-main); line-height: 1.5; }
   .growth-card .gc-meta { font-size: 11px; color: var(--text-light); margin-top: 4px; }
   .growth-card .gc-tag { font-size: 9px; padding: 1px 6px; border-radius: 6px; font-weight: 500; margin-right: 4px; }
   .growth-card .gc-tag.quote  { background: #FFE8E8; color: #C46B6B; }
   .growth-card .gc-tag.funny  { background: #FFF3D6; color: #B8882A; }
   .growth-card .gc-tag.mile   { background: #D5F5EC; color: #3D8B70; }
   .growth-card .gc-tag.touch  { background: #EDE5FA; color: #7B5EA7; }

   .gc-create-btn { text-align: center; padding: 14px; color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer; }

   /* 时光胶囊 */
   .capsule-hero { text-align: center; padding: 30px 16px; background: linear-gradient(135deg, #F3E5F5, #E1BEE7, #F8BBD0); border-radius: var(--radius-md); margin-bottom: 14px; }
   .capsule-hero .ch-year { font-size: 28px; font-weight: 800; color: var(--text-main); }
   .capsule-hero .ch-desc { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
   .capsule-hero .ch-badge { display: inline-block; background: var(--card-bg); font-size: 11px; padding: 4px 10px; border-radius: 12px; margin-top: 10px; font-weight:600; color: var(--primary); }

   /* 随机播放 */
   .random-overlay { display: none; position: absolute; inset: 0; background: rgba(61,48,40,.85); z-index: 160; align-items: center; justify-content: center; flex-direction: column; }
   .random-overlay.show { display: flex; }
   .random-card { background: var(--card-bg); border-radius: var(--radius-lg); padding: 24px 20px; width: 300px; text-align: center; animation: popIn .3s ease-out; }
   .random-card .rc-emoji { font-size: 48px; margin-bottom: 10px; }
   .random-card .rc-text { font-size: 15px; color: var(--text-main); line-height: 1.6; font-style: italic; }
   .random-card .rc-meta { font-size: 12px; color: var(--text-light); margin-top: 10px; }
   .random-card .rc-date { font-size: 14px; font-weight: 800; color: var(--primary); margin-top: 6px; }
   .random-actions { display: flex; gap: 10px; margin-top: 16px; }
   .random-btn { padding: 10px 24px; border-radius: 20px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; }
   .random-btn.primary { background: var(--primary); color: #FFF; }
   .random-btn.secondary { background: rgba(255,255,255,.2); color: #FFF; }

   /* ====== 全局图片放大查看浮层 ====== */
   .photo-viewer-overlay {
     display: none; position: absolute; inset: 0; background: rgba(0,0,0,.92);
     z-index: 200; flex-direction: column;
   }
   .photo-viewer-overlay.show { display: flex; }
   .photo-viewer-bar {
     flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
     padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top, 0px));
     color: #fff;
   }
   .photo-viewer-close { font-size: 22px; cursor: pointer; padding: 6px 10px; }
   .photo-viewer-count { font-size: 13px; color: rgba(255,255,255,.8); }
   .photo-viewer-body {
     flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
     display: flex; flex-direction: column; align-items: center; justify-content: center;
     gap: 12px; padding: 0 12px 24px; -webkit-overflow-scrolling: touch;
   }
   .photo-viewer-body img {
     max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 6px;
   }
   .photo-viewer-body video {
     max-width: 100%; max-height: 80vh; border-radius: 6px;
   }

   /* 存量面板 */
   .panel.growth { background: #FFFAFE; }

  /* ====== 通用箭头 ====== */
  .arr { font-size: 18px; color: var(--text-light); flex-shrink: 0; }

  /* ====== 那年今日 ====== */
  .panel.otd {
    background: linear-gradient(135deg, #FFF9F0, #FFF3E0);
    padding: 16px; display: none; cursor: pointer;
  }
  .panel.otd.visible { display: block; }
  .otd-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .otd-icon   { font-size: 20px; }
  .otd-label  { font-size: 15px; font-weight: 800; color: var(--accent-amber); letter-spacing: 1px; }
  .otd-body   { font-size: 13px; color: var(--text-main); line-height: 1.6; font-style: italic; }
  .otd-date   { font-size: 11px; color: var(--text-light); margin-top: 6px; }

  /* ====== 页面标题（非首页= ====== */
  .page-title {
    font-size: 22px; font-weight: 800; letter-spacing: 1.5px;
    background: linear-gradient(90deg, #FF6B6B, #F4856B, #FFA94D);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(244,133,107,.25));
  }
  .page-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

  /* ====== 子Tab栏 ====== */
  .sub-tabs {
    display: flex; gap: 6px; margin-bottom: 14px;
    background: var(--card-bg); border-radius: var(--radius-md);
    padding: 4px; box-shadow: var(--shadow-sm);
  }
  .sub-tab {
    flex: 1; text-align: center; padding: 8px 0; border-radius: 10px;
    font-size: 12px; font-weight: 600; border: none; background: none;
    cursor: pointer; color: var(--text-secondary); transition: all .2s;
  }
  .sub-tab.active { background: var(--primary); color: #FFF; }

  /* ====== 健康首页专用样式 ====== */
  .current-record-card {
    background: linear-gradient(135deg, #FFF3EE, #FFE8DE);
    border: 1.5px solid #F5D0C0;
    border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 14px;
  }
  .current-record-card .cr-status {
    font-size: 12px; font-weight: 700; color: var(--primary);
  }
  .current-record-card .cr-title {
    font-size: 15px; font-weight: 800; color: var(--text-main); margin: 4px 0 6px;
  }
  .current-record-card .cr-sub {
    font-size: 12px; color: var(--text-secondary);
  }
  .cr-actions { display: flex; gap: 8px; margin-top: 10px; }
  .btn-record {
    flex: 1; padding: 8px 0; border-radius: 20px; border: none;
    font-size: 12px; font-weight: 600; cursor: pointer; text-align: center;
  }
  .btn-record.primary { background: var(--primary); color: #FFF; }
  .btn-record.outline { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
  .btn-record.link { background: none; border: none; color: var(--primary); font-size: 12px; font-weight: 500; padding: 8px 0; }

  /* 历史记录时间轴 */
  .history-year-group { margin-bottom: 14px; }
  .hyg-label {
    font-size: 12px; font-weight: 700; color: var(--text-light);
    padding: 4px 0; margin-bottom: 4px; border-bottom: 1px solid var(--divider);
  }
  .history-item {
    display: flex; gap: 12px; padding: 14px 0;
    border-bottom: 1px solid var(--divider); cursor: pointer;
  }
  .history-date { width: 44px; flex-shrink: 0; text-align: center; }
  .history-date .hd-day { font-size: 22px; font-weight: 800; color: var(--text-main); line-height: 1; }
  .history-date .hd-month { font-size: 11px; color: var(--text-secondary); }
  .history-body { flex: 1; min-width: 0; }
  .history-body .hb-title { font-size: 13px; font-weight: 700; color: var(--text-main); }
  .history-body .hb-range { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
  .history-body .hb-tags { display: flex; gap: 6px; margin-top: 4px; }
  .hb-tag {
    font-size: 10px; padding: 1px 6px; border-radius: 6px;
    background: #F5F0EB; color: var(--text-secondary);
  }
  .history-status {
    font-size: 11px; font-weight: 600; flex-shrink: 0; align-self: center;
  }
  .history-status.ongoing { color: var(--accent-amber); }
  .history-status.recovered { color: var(--accent-mint); }

  /* 年月选择器 */
  .ym-selector {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  }
  .ym-btn {
    font-size: 14px; font-weight: 700; color: var(--primary); cursor: pointer;
    border: none; background: none; padding: 4px;
  }
  .ym-current { font-size: 15px; font-weight: 800; color: var(--text-main); cursor: pointer; }

  /* ====== 日历样式 ====== */
  .calendar-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
  }
  .cal-month-title { font-size: 14px; font-weight: 500; color: var(--text-main); cursor: pointer; padding: 5px 10px; border-radius: 8px; background: #F5F2EF; display: inline-flex; align-items: center; gap: 4px; }
  .cal-month-title:after { content: '▾'; font-size: 10px; color: var(--text-light); }
  .cal-month-title:active { background: #EBE5DE; }
  .cal-nav { font-size: 18px; color: var(--text-secondary); cursor: pointer; padding: 4px 8px; }
  .cal-view-toggle { display: flex; gap: 4px; }
  .cal-view-btn {
    padding: 4px 10px; border-radius: 8px; border: 1px solid var(--divider);
    background: var(--card-bg); font-size: 11px; font-weight: 600;
    color: var(--text-secondary); cursor: pointer;
  }
  .cal-view-btn.active { background: var(--primary); color: #FFF; border-color: var(--primary); }

  /* ====== 周视图课表 ====== */
  .week-grid {
    background: var(--card-bg); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 10px;
  }
  .week-header { display: grid; grid-template-columns: 48px repeat(7,1fr); }
   .week-header-cell {
     text-align: center; padding: 6px 2px; font-size: 11px; font-weight: 600;
     border-bottom: 1px solid var(--divider); min-height: 52px;
     display: flex; flex-direction: column; align-items: center; justify-content: center;
   }
  .week-header-cell.weekend { color: #D4913E; }
  .week-header-cell.workday { color: #6BAF9A; }
  .week-header-cell.holiday { color: #F56C6C; }
  .week-header-cell .wh-date {
    font-size: 13px; font-weight: 800;
    width: 28px; height: 28px; line-height: 28px; border-radius: 50%;
  }
  .week-header-cell .wh-tag {
    font-size: 9px; display: block; margin-top: 1px; line-height: 1;
  }
  .week-header-cell.today-cell { color: var(--primary); }
  .week-header-cell.today-cell .wh-date {
    background: var(--primary); color: #FFF;
  }
  .week-body { position: relative; }
  .week-hour {
    display: grid; grid-template-columns: 48px repeat(7,1fr);
    min-height: 52px; border-bottom: 1px solid var(--divider);
  }
  .week-hour .wh-label {
    font-size: 10px; color: var(--text-secondary); padding: 4px 4px 0;
    text-align: right; border-right: 1px solid var(--divider);
    line-height: 1.3;
  }
  .week-hour .wh-slot {
    position: relative; border-right: 1px solid #F0EBE4; cursor: pointer;
  }
  .week-hour .wh-slot:last-child { border-right: none; }
  .wh-slot.weekend-bg { background: #FFF8F0; }
  .course-block {
    position: relative; margin: 2px; border-radius: 8px;
    padding: 4px 6px; font-size: 10px; font-weight: 600; color: #FFF;
    overflow: hidden; cursor: pointer; z-index: 2; display: flex; flex-direction: column;
    gap: 1px; line-height: 1.3; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  }
  .course-block.art   { background: #F4A0A0; }
  .course-block.sport { background: #5EC4B6; }
  .course-block.music { background: #B19CD9; }
  .course-block.eng   { background: #F5A623; }
  .course-block .cb-time { font-size: 10px; opacity: .9; }
  .course-block .cb-name { font-size: 11px; font-weight: 700; }
  .course-block .cb-loc  { font-size: 9px; opacity: .85; }

  /* ====== 月视图 ====== */
  .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; text-align: center; }
  .cal-day-header { font-size: 10px; color: var(--text-light); padding: 5px 0; font-weight: 500; }
  .cal-day-header.wkend { color: #D4913E; }
  .cal-day {
    padding: 5px 1px; border-radius: 8px; cursor: pointer; font-size: 13px;
    font-weight: 500; color: var(--text-main); position: relative; min-height: 38px;
  }
  .cal-day:hover { background: #FAF8F5; }
  .cal-day.today { background: var(--primary); color: #FFF; font-weight: 700; }
  .cal-day.selected { background: var(--primary-light); color: var(--primary); font-weight: 700; }
  .cal-day.other-month { color: var(--text-light); }
  .cal-day.weekend { color: #D4913E; background: #FFFBF6; }
  .cal-day.weekend.today { color: #FFF; }
  .cal-day.holiday { color: #F56C6C; background: #FFF5F5; }
  .cal-day.workday { color: #6BAF9A; }
  .cal-day-bars { position: absolute; bottom: 3px; left: 4px; right: 4px; display: flex; flex-direction: column; gap: 1px; }
  .cal-day-bar {
    height: 3px; border-radius: 2px;
  }
  .cal-day-bar.art   { background: #F4A0A0; }
  .cal-day-bar.sport { background: #5EC4B6; }
  .cal-day-bar.music { background: #B19CD9; }
  .cal-day-bar.eng   { background: #F5A623; }
  .cal-day-bar.remind { background: #F5A623; }
  .cal-day-bar.urgent { background: #F56C6C; }
  .cal-day-tag {
    position: absolute; top: 1px; right: 2px; font-size: 8px;
    font-weight: 600; padding: 0 2px; border-radius: 2px;
  }
  .cal-day-tag.holiday { color: #F56C6C; background: #FFE8E8; }
  .cal-day-tag.workday { color: #6BAF9A; background: #E6F7F0; }

  /* 选中日详情 */
  .day-detail {
    background: var(--card-bg); border-radius: var(--radius-md);
    padding: 12px 16px; margin-top: 10px; box-shadow: var(--shadow-sm);
  }
  .day-detail-title { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
  .day-detail-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 0;
    border-top: 1px solid var(--divider);
  }
  .day-detail-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  }
  .day-detail-dot.art { background: #F4A0A0; }
  .day-detail-dot.sport { background: #5EC4B6; }
  .day-detail-dot.music { background: #B19CD9; }
  .day-detail-dot.remind { background: var(--accent-amber); }
  .day-detail-text { font-size: 12px; color: var(--text-main); }

  /* ====== 地图替代（模拟） ====== */
  .map-placeholder {
    height: 260px; border-radius: var(--radius-md);
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9, #B2DFDB);
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; margin-bottom: 14px;
    box-shadow: var(--shadow-sm); position: relative;
    overflow: hidden;
  }
  .map-placeholder .map-pin {
    position: absolute; font-size: 24px;
    animation: pinBounce .8s ease-out both;
  }
  .map-placeholder .map-label {
    background: var(--card-bg); font-size: 11px; color: var(--text-main);
    padding: 2px 8px; border-radius: 10px; box-shadow: var(--shadow-sm);
    white-space: nowrap;
  }
  @keyframes pinBounce {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ====== 表单样式 ====== */
  .form-group { margin-bottom: 14px; }
  .form-label { font-size: 13px; font-weight: 700; color: var(--text-main); margin-bottom: 6px; display: block; }
  .form-input {
    width: 100%; padding: 10px 14px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--divider); font-size: 13px; font-family: inherit;
    background: var(--card-bg); color: var(--text-main); outline: none;
  }
  .form-input:focus { border-color: var(--primary); }
  .form-textarea {
    width: 100%; padding: 10px 14px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--divider); font-size: 13px; font-family: inherit;
    background: var(--card-bg); color: var(--text-main); outline: none;
    min-height: 80px; resize: vertical;
  }
  .form-textarea:focus { border-color: var(--primary); }
  .tag-group { display: flex; flex-wrap: wrap; gap: 8px; }
  .tag-chip {
    padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 500;
    border: 1.5px solid var(--divider); background: var(--card-bg);
    color: var(--text-secondary); cursor: pointer; transition: all .15s;
  }
  .tag-chip.selected { background: var(--primary-light); border-color: var(--primary); color: var(--primary); font-weight: 700; }
  .photo-upload {
    width: 80px; height: 80px; border-radius: var(--radius-sm);
    border: 1.5px dashed var(--divider); display: flex;
    align-items: center; justify-content: center; font-size: 28px;
    color: var(--text-light); cursor: pointer; background: #FAFAF8;
  }
  /* 照片预览列表（上传后显示） */
  .photo-list {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
  }
  .photo-preview {
    position: relative; width: 80px; height: 80px; border-radius: var(--radius-sm);
    overflow: hidden; border: 1px solid var(--divider); background: #000;
  }
  .photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .photo-preview .photo-del {
    position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
    border-radius: 50%; background: rgba(0,0,0,0.55); color: #FFF;
    font-size: 14px; line-height: 20px; text-align: center; cursor: pointer;
    border: none; padding: 0;
  }
  .btn-submit {
    width: 100%; padding: 14px; border-radius: var(--radius-md);
    border: none; background: var(--primary); color: #FFF;
    font-size: 15px; font-weight: 700; cursor: pointer;
    margin-top: 8px; box-shadow: var(--shadow-sm);
  }
  .btn-submit:active { opacity: .85; }

  /* ====== 出行摘要 ====== */
  .summary-row {
    display: flex; gap: 12px; margin-bottom: 14px;
  }
  .summary-card {
    flex: 1; text-align: center; padding: 12px 8px;
    background: var(--card-bg); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
  }
  .summary-card .sc-num { font-size: 22px; font-weight: 800; color: var(--primary); }
  .summary-card .sc-label { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

  /* ====== 记录详情 ====== */
  .detail-section { margin-bottom: 16px; }
  .detail-section-title { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
  .detail-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--divider);
  }
  .detail-row-label { font-size: 13px; color: var(--text-secondary); }
  .detail-row-value { font-size: 13px; color: var(--text-main); font-weight: 500; }

  /* ====== 体温折线图 ====== */
  .chart-placeholder {
    height: 130px; border-radius: var(--radius-sm);
    background: #FDF9F5; position: relative; margin: 8px 0;
    overflow: hidden;
  }
  .chart-placeholder svg { width: 100%; height: 100%; }
  .chart-dot {
    position: absolute; width: 6px; height: 6px;
    background: var(--primary); border-radius: 50%; border: 2px solid #FFF;
    transform: translate(-50%,-50%); box-shadow: 0 1px 3px rgba(0,0,0,.15);
    z-index: 2;
  }
  .chart-label {
    position: absolute; transform: translateX(-50%);
    font-size: 10px; font-weight: 600; color: var(--primary);
  }

  /* ====== 底部导航（固定在 flex 流末尾，不随内容滚动） ====== */
  .bottom-nav {
    flex-shrink: 0;
    height: var(--nav-height); background: var(--card-bg);
    border-top: 1px solid var(--divider);
    display: flex; align-items: center; justify-content: space-around;
    padding: 0 12px 6px; z-index: 100;
    /* iOS 全面屏底部 Home 指示器避让 + 浏览器工具栏缓冲 */
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    border: none; background: none; cursor: pointer;
    padding: 6px 10px; border-radius: 12px; transition: all .2s;
    min-width: 52px; position: relative;
  }
  .nav-icon   { font-size: 22px; transition: transform .2s; }
  .nav-label  { font-size: 10px; font-weight: 600; color: var(--text-light); transition: color .2s; }
  .nav-item.active .nav-label { color: var(--primary); }
  .nav-item.active .nav-icon  { transform: translateY(-2px); }
  .nav-item.active::after {
    content:''; position: absolute; top: 0; width: 20px; height: 3px;
    background: var(--primary); border-radius: 0 0 3px 3px;
  }
  .nav-item:active { background: var(--primary-light); }

  /* ====== 空状态 ====== */
  .empty-state {
    text-align: center; padding: 30px 20px; color: var(--text-light);
  }
  .empty-state .empty-icon { font-size: 48px; margin-bottom: 8px; }
  .empty-state .empty-text { font-size: 13px; }
  .empty-state .empty-action {
    margin-top: 12px; color: var(--primary); font-size: 13px; font-weight: 600;
    cursor: pointer;
  }

  /* ====== 头像行 ====== */
  .avatar-row {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--divider); cursor: pointer;
  }
  .avatar-row:last-child { border-bottom: none; }
  .avatar-circle {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
  }
  .avatar-circle.admin  { background: #FFE8E0; }
  .avatar-circle.collab { background: #E0F0FF; }
  .avatar-circle.viewer { background: #F0F0E8; }
  .avatar-info { flex: 1; }
  .avatar-name { font-size: 13px; font-weight: 600; color: var(--text-main); }
  .avatar-role { font-size: 11px; color: var(--text-secondary); }

  /* 设置列表 */
  .setting-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--divider); cursor: pointer;
  }
  .setting-row:last-child { border-bottom: none; }
  .setting-label { font-size: 13px; color: var(--text-main); }
  .setting-value { font-size: 12px; color: var(--text-secondary); }

  /* 切换开关 */
  .toggle {
    width: 44px; height: 26px; border-radius: 13px;
    background: #E0D8D0; position: relative; cursor: pointer;
    transition: background .2s;
  }
  .toggle.on { background: var(--accent-mint); }
  .toggle::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #FFF; box-shadow: 0 1px 3px rgba(0,0,0,.15);
    transition: left .2s;
  }
  .toggle.on::after { left: 21px; }

  /* 浮层选择器 */
  .quick-add-menu {
    display: none; position: absolute; top: 56px; right: 16px;
    background: var(--card-bg); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md); padding: 8px 0; z-index: 10000; min-width: 140px;
  }
  .quick-add-menu.show { display: block; }
  .quick-add-item {
    padding: 10px 16px; font-size: 13px; color: var(--text-main);
    cursor: pointer; display: flex; align-items: center; gap: 8px;
  }
  .quick-add-item:active { background: #FAFAF8; }

  /* ====== 动画 ====== */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  /* ====== Toast ====== */
  .toast {
    position: absolute; top: 20px; left: 50%;
    transform: translateX(-50%) translateY(-120px);
    background: var(--text-main); color: #FFF;
    font-size: 13px; font-weight: 600; padding: 10px 20px;
    border-radius: 24px; z-index: 200; pointer-events: none;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  }
  .toast.show { transform: translateX(-50%) translateY(0); }

  /* 成员邀请弹窗 */
  .modal-overlay {
    display: none; position: absolute; inset: 0; background: rgba(61,48,40,.4);
    z-index: 160; align-items: center; justify-content: center;
  }
  .modal-overlay.show { display: flex; }
  .modal-box {
    background: var(--card-bg); border-radius: var(--radius-lg);
    padding: 20px; width: 300px; text-align: center;
  }
  .modal-box .modal-title { font-size: 16px; font-weight: 800; color: var(--text-main); margin-bottom: 12px; }
  .modal-box .modal-text { font-size: 12px; color: var(--text-secondary); margin-bottom: 14px; }
  .modal-btn {
    padding: 10px 24px; border-radius: 20px; border: none;
    font-size: 13px; font-weight: 600; cursor: pointer; margin: 4px;
  }
  .modal-btn.primary { background: var(--primary); color: #FFF; }
  .modal-btn.secondary { background: #F5F2EF; color: var(--text-secondary); }

  /* ====== 记录体温/用药内联展开 ====== */
  .inline-form {
    display: none; background: var(--card-bg); border-radius: var(--radius-sm);
    padding: 14px; margin: 0 14px 10px; box-shadow: var(--shadow-sm);
    animation: fadeInUp .3s ease-out both;
  }
  .inline-form.show { display: block; }
  .inline-form .if-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .inline-form .if-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); width: 50px; flex-shrink: 0; }
  .inline-form .if-input {
    flex: 1; padding: 8px 12px; border-radius: 8px; border: 1.5px solid var(--divider);
    font-size: 13px; font-family: inherit; background: #FAFAF8; color: var(--text-main); outline: none;
  }
  .inline-form .if-input:focus { border-color: var(--primary); }
  .inline-form .stepper { display: flex; align-items: center; gap: 0; }
  .inline-form .stepper-btn {
    width: 32px; height: 32px; border: 1.5px solid var(--divider); background: var(--card-bg);
    font-size: 16px; font-weight: 700; color: var(--text-main); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .inline-form .stepper-btn:first-child { border-radius: 8px 0 0 8px; }
  .inline-form .stepper-btn:last-child { border-radius: 0 8px 8px 0; }
  .inline-form .stepper-val {
    width: 36px; height: 32px; border-top: 1.5px solid var(--divider); border-bottom: 1.5px solid var(--divider);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: var(--primary); background: var(--card-bg);
  }
  .inline-form .if-actions { display: flex; gap: 8px; margin-top: 4px; }
  .inline-form .if-btn {
    flex: 1; padding: 8px 0; border-radius: 16px; border: none;
    font-size: 12px; font-weight: 600; cursor: pointer;
  }
  .inline-form .if-btn.primary { background: var(--primary); color: #FFF; }
  .inline-form .if-btn.secondary { background: #F5F2EF; color: var(--text-secondary); }
  .med-row {
     padding: 0 12px 12px; background: #FAFAF8; border-radius: 10px; margin-bottom: 8px;
     overflow: hidden;
   }
   .med-row-header {
     display: flex; align-items: center; justify-content: space-between;
     padding: 8px 0; margin: 0 -12px 8px; padding-left: 12px; padding-right: 12px;
     background: #F0EFEA; border-radius: 10px 10px 0 0;
   }
   .med-row-title { font-size: 12px; font-weight: 700; color: var(--text-main); }
   .med-row .med-del {
     width: 22px; height: 22px; border-radius: 50%; border: none;
     background: #FFE8E0; color: var(--primary); font-size: 12px;
     cursor: pointer; display: flex; align-items: center; justify-content: center;
     flex-shrink: 0; line-height: 1;
   }
   .med-stepper-row {
     display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
   }
   .med-stepper-row .ms-label {
     font-size: 12px; color: var(--text-secondary); margin: 0 4px;
   }
  .add-med-btn {
    font-size: 12px; font-weight: 600; color: var(--primary); cursor: pointer;
    border: none; background: none; padding: 4px 0; margin-bottom: 8px;
  }

  /* ====== 年月选择器浮层 ====== */
  .ym-picker-overlay {
    display: none; position: absolute; inset: 0; background: rgba(61,48,40,.35);
    z-index: 155; align-items: flex-end; justify-content: center;
  }
  .ym-picker-overlay.show { display: flex; }
  .ym-picker-panel {
    background: var(--card-bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%; max-width: 390px; padding: 14px 0 30px;
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    animation: slideUp .3s ease-out both;
  }
  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .ym-picker-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 16px 10px; border-bottom: 1px solid var(--divider);
  }
  .ym-picker-title { font-size: 15px; font-weight: 800; color: var(--text-main); }
  .ym-picker-close { font-size: 18px; color: var(--text-secondary); cursor: pointer; padding: 4px; }
  .ym-picker-body { display: flex; height: 220px; overflow: hidden; }
  .ym-picker-col {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    text-align: center; padding: 80px 0;
  }
  .ym-picker-col::-webkit-scrollbar { display: none; }
  .ym-picker-item {
    padding: 10px 0; font-size: 14px; color: var(--text-light); cursor: pointer;
    transition: all .15s;
  }
  .ym-picker-item.selected { color: var(--primary); font-weight: 800; font-size: 16px; }
  .ym-picker-item.empty { color: #D0C8C0; cursor: default; }

  /* ====== 响应式适配 ====== */
  @media (max-width: 430px) {
    /* 注意：height 在顶部 media query 中已用 --app-height 适配浏览器工具栏，此处不重复声明，避免覆盖回 100vh 导致底部 Tab 被遮挡 */
    .phone-frame { width: 100vw; border-radius: 0; box-shadow: none; }
    .quick-add-menu { right: 8px; }
  }