/* style.css — R107 育儿提醒工具 */
:root, [data-theme="mint"] {
  --primary: #4CAF85; --primary-light: #A8E6CF; --accent: #FF8A80;
  --bg: #F5F9F7; --card: #FFFFFF; --text: #2D3A3A; --text-light: #7B8D8D; --border: #D8E8E0;
  --success: #66BB6A; --warning: #FFB74D; --danger: #EF5350; --info: #4A90D9;
  --nav-h: 56px; --footer-h: 72px; --radius: 14px; --shadow: 0 2px 12px rgba(0,0,0,0.06);
}
[data-theme="pink"] {
  --primary: #F8A5C2; --primary-light: #FDE8EF; --accent: #FFD166;
  --bg: #FFF5F8; --card: #FFFFFF; --text: #3A2D35; --text-light: #8D7B85; --border: #F8D0E0;
  --success: #81C784; --warning: #FFCA28; --danger: #EF5350; --info: #64B5F6;
}
[data-theme="sky"] {
  --primary: #4A90D9; --primary-light: #D6EAFC; --accent: #FF6B6B;
  --bg: #F0F6FC; --card: #FFFFFF; --text: #2D3A3A; --text-light: #7B8D8D; --border: #C5D9F0;
}
[data-theme="earthy"] {
  --primary: #8B7355; --primary-light: #E8DDD0; --accent: #D4A574;
  --bg: #FAF7F2; --card: #FFFFFF; --text: #3A322E; --text-light: #8D7B6E; --border: #DDD0C0;
}
[data-theme="candy"] {
  --primary: #FF6F91; --primary-light: #FFE5EC; --accent: #845EC2;
  --bg: #FFF8F9; --card: #FFFFFF; --text: #3A2D35; --text-light: #8D7B85; --border: #FFD0DC;
}
[data-theme="dark"] {
  --primary: #6BBF8A; --primary-light: #3A4D42; --accent: #FF8A80;
  --bg: #1A1D20; --card: #252830; --text: #E0E0E0; --text-light: #9E9E9E; --border: #3A3F48;
  --shadow: 0 2px 12px rgba(0,0,0,0.35);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body.pr-app {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; padding-bottom: calc(var(--nav-h) + var(--footer-h));
  transition: background 0.8s, color 0.8s;
}
#app { max-width: 480px; margin: 0 auto; min-height: 60vh; }

.page { display: none; padding: 12px 16px 24px; animation: fadeInUp 0.3s ease; }
.page.active { display: block; }

.pr-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.pr-header h1 { font-size: 1.25rem; line-height: 1.3; }
.sub, .hint, .page-hint { color: var(--text-light); font-size: 0.85rem; margin-top: 4px; }
.section-title { font-size: 0.95rem; margin: 18px 0 10px; }

.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-card, .pr-card {
  background: var(--card); border-radius: var(--radius); padding: 14px;
  box-shadow: var(--shadow); border: 1px solid var(--border); text-align: center;
}
.stat-card strong { display: block; font-size: 1.4rem; margin: 4px 0; }
.stat-card small { color: var(--text-light); font-size: 0.75rem; }
.pr-card { text-align: left; margin-bottom: 12px; }
.pr-card h4 { margin-bottom: 10px; font-size: 0.95rem; }

.ring-group { display: flex; justify-content: space-around; margin: 16px 0; }
.ring-card { text-align: center; position: relative; }
.ring-card small { color: var(--text-light); font-size: 0.75rem; }

.reminder-badge {
  background: var(--primary-light); color: var(--text); font-size: 0.75rem;
  padding: 6px 10px; border-radius: 20px; white-space: nowrap;
}
.reminder-badge.has-items { background: var(--warning); color: #333; }

.reminder-card {
  display: flex; gap: 10px; align-items: flex-start; background: var(--card);
  border-radius: var(--radius); padding: 12px; margin-bottom: 8px;
  border-left: 4px solid var(--success); box-shadow: var(--shadow);
}
.reminder-card.status-soon { border-left-color: var(--warning); }
.reminder-card.status-overdue { border-left-color: var(--danger); }
.reminder-card p, .reminder-card small { color: var(--text-light); font-size: 0.8rem; }

.btn-row { display: flex; gap: 10px; margin-top: 12px; }
.btn-row.three { display: grid; grid-template-columns: repeat(3, 1fr); }

.pr-btn, .pr-btn-sm {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 10px; padding: 10px 16px; font-size: 0.9rem; cursor: pointer;
}
.pr-btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.pr-btn-block { display: block; width: 100%; margin-top: 8px; }
.pr-btn-sm { padding: 6px 10px; font-size: 0.8rem; }

.pr-field { display: block; margin-bottom: 10px; font-size: 0.85rem; }
.pr-field input, .pr-field select {
  display: block; width: 100%; margin-top: 4px; padding: 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text);
}

.bottom-nav {
  position: fixed; bottom: var(--footer-h); left: 0; right: 0; height: var(--nav-h);
  background: var(--card); border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-around; z-index: 100;
  max-width: 480px; margin: 0 auto;
}
.bottom-nav.hidden { display: none; }
.nav-item {
  flex: 1; text-align: center; text-decoration: none; color: var(--text-light);
  font-size: 0.7rem; background: none; border: none; cursor: pointer; padding: 6px 0;
}
.nav-item span { display: block; font-size: 1.2rem; }
.nav-item.active { color: var(--primary); font-weight: 600; }
.nav-center {
  width: 48px; height: 48px; border-radius: 50%; background: var(--primary) !important;
  color: #fff !important; font-size: 1.6rem !important; line-height: 48px;
  margin-top: -20px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); flex: none !important;
}

.record-panel {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200;
  display: none; align-items: flex-end; justify-content: center;
}
.record-panel.open { display: flex; }
.record-panel-inner {
  width: 100%; max-width: 480px; background: var(--card);
  border-radius: 20px 20px 0 0; padding: 16px 16px 32px;
}
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.panel-head h3 { flex: 1; }
.panel-voice { border: none; background: var(--primary-light); border-radius: 50%; width: 36px; height: 36px; font-size: 1rem; cursor: pointer; margin-right: 8px; }
.panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick-btn {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 8px; font-size: 0.85rem; cursor: pointer;
}
.quick-btn:active { transform: scale(0.96); background: var(--primary-light); }

.timer-wrap { position: relative; display: flex; justify-content: center; margin: 20px 0; }
.timer-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.timer-display { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-stats { display: flex; gap: 8px; margin-bottom: 12px; }
.mini-stat { flex: 1; background: var(--card); border-radius: 10px; padding: 10px; text-align: center; border: 1px solid var(--border); }
.mini-stat strong { display: block; font-size: 1.1rem; }

.vaccine-timeline .timeline-month { margin-bottom: 16px; }
.vaccine-timeline h4 { color: var(--primary); margin-bottom: 8px; font-size: 0.9rem; }
.vaccine-card {
  display: flex; align-items: center; gap: 10px; background: var(--card);
  border-radius: var(--radius); padding: 12px; margin-bottom: 8px; border: 1px solid var(--border);
}
.vaccine-card.done { opacity: 0.65; }
.vaccine-card.overdue { border-color: var(--danger); }
.vaccine-card.soon { border-color: var(--warning); }
.vaccine-card.future { opacity: 0.85; }
.vaccine-summary { display: flex; gap: 8px; margin-bottom: 12px; }
.tag { font-size: 0.75rem; padding: 4px 8px; border-radius: 8px; background: var(--primary-light); }

.history-timeline { margin-top: 12px; }
.history-day { font-size: 0.8rem; color: var(--text-light); margin: 12px 0 6px; }
.history-item, .history-row {
  display: flex; gap: 10px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.hi-time { font-size: 0.75rem; color: var(--text-light); width: 42px; }
.hi-icon { font-size: 1.2rem; }

.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-tab {
  border: 1px solid var(--border); background: var(--card); border-radius: 20px;
  padding: 6px 12px; font-size: 0.75rem; cursor: pointer;
}
.filter-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.member-card { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.member-avatar { font-size: 1.5rem; }
.theme-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-pick {
  border: 2px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 0.75rem;
  cursor: pointer; background: var(--card);
}
.theme-pick::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--swatch); margin-right: 4px; vertical-align: middle; }
.theme-pick.active { border-color: var(--primary); }

.toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
.points-total { font-size: 2rem; color: var(--primary); font-weight: 700; }
.badge-row, .reward-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badge-item { font-size: 0.75rem; padding: 6px 8px; background: var(--primary-light); border-radius: 8px; }
.badge-item.locked { opacity: 0.4; filter: grayscale(1); }
.reward-btn { font-size: 0.75rem; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; }

.heatmap-wrap { overflow-x: auto; margin-bottom: 12px; background: var(--card); border-radius: var(--radius); padding: 8px; }
.month-nav { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.month-nav button { border: none; background: var(--primary-light); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; }

.onboard-page { display: flex; align-items: center; justify-content: center; min-height: 70vh; }
.onboard-page.active { display: flex; }
.onboard-card { text-align: center; padding: 32px 20px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.onboard-emoji { font-size: 3rem; margin-bottom: 8px; }

.pr-sheet-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 300;
  display: flex; align-items: flex-end; justify-content: center;
}
.pr-sheet {
  width: 100%; max-width: 480px; background: var(--card);
  border-radius: 20px 20px 0 0; padding: 16px; max-height: 85vh; overflow-y: auto;
}
.pr-sheet-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
.pr-sheet-foot { display: flex; gap: 10px; margin-top: 16px; }
.pr-sheet-foot .pr-btn { flex: 1; }

.pr-toast {
  position: fixed; left: 50%; bottom: calc(var(--footer-h) + var(--nav-h) + 16px);
  transform: translateX(-50%) translateY(20px); opacity: 0;
  background: rgba(45,58,58,0.92); color: #fff; padding: 10px 18px; border-radius: 20px;
  font-size: 0.85rem; z-index: 400; transition: all 0.3s; pointer-events: none;
}
.pr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.pr-toast.error { background: var(--danger); }

.bar-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 0.85rem; }
.bar-track { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }

.growth-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.growth-form label { font-size: 0.75rem; }
.growth-form input { width: 100%; padding: 6px; border: 1px solid var(--border); border-radius: 6px; }

.empty { color: var(--text-light); text-align: center; padding: 24px; font-size: 0.9rem; }
.panel-open { overflow: hidden; }
body.sleep-mode .pr-header h1::after { content: ' 🌙'; }

.contact-footer {
  position: fixed; bottom: 0; left: 0; right: 0; background: var(--card);
  border-top: 1px solid var(--border); padding: 10px 16px; z-index: 90;
}
.contact-footer__btns { display: flex; gap: 8px; justify-content: center; margin-bottom: 6px; }
.contact-footer__cta, .contact-footer__btn {
  font-size: 0.8rem; padding: 8px 12px; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
}
.contact-footer__cta { background: var(--primary); color: #fff; border-color: var(--primary); }
.contact-footer__brand { font-size: 0.65rem; color: var(--text-light); text-align: center; }

.particle-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 500; }

/* 分享页 */
.share-main { padding: 16px; max-width: 480px; margin: 0 auto; min-height: 60vh; }
.share-landing { padding-bottom: var(--footer-h); }
.share-hero { text-align: center; margin-bottom: 16px; }
.share-badge { display: inline-block; background: var(--primary-light); padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; }
.share-hero h1 { margin: 10px 0 4px; font-size: 1.5rem; }
.share-sub { color: var(--text-light); font-size: 0.9rem; }
.share-stats { text-align: center; margin-bottom: 12px; }
.share-stat-big { font-size: 2.5rem; color: var(--primary); font-weight: 700; margin-bottom: 12px; }
.share-stat-big small { display: block; font-size: 0.8rem; color: var(--text-light); font-weight: 400; }
.share-stat-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.share-qr-block { text-align: center; }
.share-qr-block p { margin-bottom: 10px; color: var(--text-light); }
.share-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.share-empty { text-align: center; padding: 40px 20px; }

/* P2 AI 预测 */
.ai-feed-panel { margin: 12px 0; border-left: 4px solid var(--primary); }
.ai-feed-panel.status-soon { border-left-color: var(--warning); }
.ai-feed-panel.status-overdue { border-left-color: var(--danger); }
.ai-countdown { font-size: 1.4rem; font-weight: 700; color: var(--primary); margin: 8px 0; }
.ai-meta { display: flex; gap: 12px; font-size: 0.8rem; color: var(--text-light); margin-bottom: 6px; }

/* P2 语音 */
.voice-record-panel { margin-top: 12px; }
#btn-voice-record.listening { background: var(--danger); border-color: var(--danger); animation: sweetSpotPulse 1s ease-in-out infinite; }

@media (min-width: 481px) {
  .bottom-nav, .contact-footer, .record-panel-inner, .pr-sheet { left: 50%; transform: translateX(-50%); }
  .record-panel.open .record-panel-inner { transform: translateX(-50%); }
}