/* ============================================
   暖星伴APP V5.0 终极版 - 主题样式表
   三大模式物理隔离 · 会员体系物理化 · 即时钩子机制
   ============================================ */


/* ==================== 页面基础布局 ==================== */
.page {
  display: none;
  padding-bottom: 8px;
  overflow-y: auto;
  height: calc(100vh - 60px);
}

.page.active {
  display: block;
}

/* 聊天页特殊布局：header固定，messages独立滚动 */
.page.chat-page {
  display: none;
  flex-direction: column;
  height: calc(100vh - 60px);
  padding-bottom: 0;
  overflow: hidden;
}

.page.chat-page.active {
  display: flex;
}

/* ==================== CSS变量定义 ==================== */
:root {
  /* 默认成人模式主题 */
  --primary: #FF8C42;
  --secondary: #FF8C42;
  --background: #FDFBF7;
  --surface: #FFFFFF;
  --text: #333333;
  --text-secondary: #666666;
  --accent: #FF8C42;
  --accent-light: #FFA066;
  --success: #45B7D1;
  --warning: #FFD166;
  --gradient: linear-gradient(135deg, #FF8C42 0%, #FF6B1A 100%);
  --gradient-dark: linear-gradient(135deg, #FF8C42 0%, #E5762A 100%);
  --shadow: 0 2px 12px rgba(255,140,66,0.12);
  --shadow-strong: 0 4px 20px rgba(255,140,66,0.18);
  
  /* 字号配置 - 成人模式 */
  --font-title: 18px;
  --font-heading: 16px;
  --font-body: 14px;
  --font-small: 12px;
  --font-slogan: 15px;
  
  /* 圆角配置 */
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  
  /* 间距配置 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

/* ==================== 儿童模式主题 ==================== */
[data-mode="child"] {
  --primary: #A8DADC;
  --secondary: #B5EAD7;
  --background: #FDFBF7;
  --surface: #FFFFFF;
  --text: #333333;
  --text-secondary: #666666;
  --accent: #A8DADC;
  --accent-light: #B5EAD7;
  --success: #45B7D1;
  --warning: #FFD166;
  --gradient: linear-gradient(135deg, #A8DADC 0%, #B5EAD7 100%);
  --gradient-dark: linear-gradient(135deg, #A8DADC 0%, #8EC5C7 100%);
  --shadow: 0 4px 16px rgba(168,218,220,0.3);
  --shadow-strong: 0 6px 24px rgba(168,218,220,0.4);
  
  /* 字号配置 - 儿童模式：大字体 */
  --font-title: 24px;
  --font-heading: 22px;
  --font-body: 20px;
  --font-small: 18px;
  --font-slogan: 20px;
  
  /* 圆角配置 - 更圆润 */
  --radius: 20px;
  --radius-lg: 24px;
  --radius-xl: 32px;
}

/* 儿童模式护眼模式 */
[data-mode="child"].eye-care-mode {
  --background: #FDFBF7;
  --primary: #B5EAD7;
}

/* 护眼模式激活样式 - 降低蓝光、暖色调 */
.eye-care-active {
  filter: sepia(0.15) saturate(0.9) brightness(0.95);
}
.eye-care-active .page-header,
.eye-care-active .status-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 200, 120, 0.3) !important;
}
.eye-care-active .chat-messages {
  background: #FFF8E8 !important;
}
.eye-care-active .app-container {
  background: #FFF5E0 !important;
}

/* ==================== 老人模式主题 ==================== */
[data-mode="elderly"] {
  --primary: #FF7A2F;
  --secondary: #FF7A2F;
  --background: #FDFBF7;
  --surface: #FFFFFF;
  --text: #1A1A1A;
  --text-secondary: #444444;
  --accent: #FF7A2F;
  --accent-light: #FF9652;
  --success: #45B7D1;
  --warning: #FFD166;
  --gradient: linear-gradient(135deg, #FF7A2F 0%, #E5661A 100%);
  --gradient-dark: linear-gradient(135deg, #FF7A2F 0%, #CC5F1A 100%);
  --shadow: 0 2px 8px rgba(255,122,47,0.12);
  --shadow-strong: 0 4px 16px rgba(255,122,47,0.18);
  
  /* 字号配置 - 老人模式：最大字体 */
  --font-title: 28px;
  --font-heading: 24px;
  --font-body: 22px;
  --font-small: 20px;
  --font-slogan: 22px;
  
  /* 圆角配置 - 适中 */
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  
  /* 老人模式按钮加大 */
  --btn-height: 52px;
}

/* 老人模式简化界面 */
[data-mode="elderly"].elderly-simplified .quick-access-section,
[data-mode="elderly"].elderly-simplified .scene-section {
  opacity: 0.9;
}

/* ==================== 基础样式重置 ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: var(--font-body);
  color: var(--text);
  background: var(--background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==================== 应用容器 ==================== */
.app-container {
  max-width: 430px;
  margin: 0 auto;
  background: var(--background);
  position: relative;
  padding-bottom: 60px;
}

/* ==================== 启动页 ==================== */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s, visibility 0.5s;
}

.splash-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

.splash-content {
  text-align: center;
}

.splash-logo {
  font-size: 80px;
  margin-bottom: 16px;
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.splash-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.splash-slogan {
  font-size: var(--font-body);
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.loading-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: loading 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loading {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* ==================== 状态栏 ==================== */
.status-bar {
  height: 48px;
  background: var(--gradient);
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-md);
  font-size: var(--font-small);
  color: var(--text);
}

.status-mode-tag {
  background: rgba(255,255,255,0.3);
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.status-mode-tag:active {
  transform: scale(0.95);
  background: rgba(255,255,255,0.5);
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-title {
  font-weight: 600;
}

/* ==================== 首页头部 ==================== */
.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px var(--spacing-md);
  background: var(--gradient);
}

.greeting-section {
  flex: 1;
}

.greeting-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.greeting-sub {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.mode-indicator {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.mode-indicator:active {
  transform: scale(0.9);
}

.mode-icon {
  font-size: 24px;
}

/* ==================== Slogan ==================== */
.slogan-banner {
  background: var(--gradient-dark);
  padding: 14px var(--spacing-md);
  text-align: center;
}

.slogan-text {
  font-size: var(--font-slogan);
  color: white;
  font-weight: 600;
  letter-spacing: 1.5px;
}

/* ==================== AI陪伴入口卡片 ==================== */
.ai-entrance-card {
  margin: var(--spacing-md);
  background: linear-gradient(135deg, #FFF0E6 0%, #FFE4D0 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(255,140,66,0.2);
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
  border-left: 4px solid #FF8C42;
}

.ai-entrance-card:active {
  transform: scale(0.98);
}

.ai-entrance-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient);
  opacity: 0.1;
}

.ai-entrance-content {
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
  position: relative;
  z-index: 1;
}

.ai-robot-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  width: calc(25% - 6px);
}

.robot-face {
  width: 64px;
  height: 64px;
  background: var(--gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}

.robot-heart {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: #E53935;
  border-radius: 50%;
  animation: heartbeat 1.5s ease-in-out infinite;
}

.robot-heart.pro-heart {
  width: 24px;
  height: 24px;
  animation: heartbeat-pro 0.8s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes heartbeat-pro {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.3); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
}

.robot-heart::after {
  content: '❤️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
}

.ai-entrance-info {
  flex: 1;
  margin-left: var(--spacing-md);
}

.ai-identity-badge {
  font-size: 10px;
  color: var(--text-secondary);
  background: rgba(0,0,0,0.05);
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
  display: inline-block;
}

.ai-entrance-title {
  font-size: var(--font-title);
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 2px;
}

.ai-entrance-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* 付费引导文案 */
.ai-pro-guide {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: var(--font-small);
}

.pro-guide-icon {
  font-size: 14px;
}

.pro-guide-text {
  font-weight: 500;
}

.ai-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #FF7043, #FF5722);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.free-count {
  font-size: 14px;
  font-weight: 700;
}

.ai-entrance-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--accent);
  color: white;
  padding: 10px 16px;
  border-radius: var(--radius);
}

.action-btn-icon {
  font-size: 20px;
}

.ai-pro-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--spacing-md);
  background: #FFF3E0;
  font-size: var(--font-small);
  color: var(--accent);
}

.unlock-pro-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: var(--font-small);
  cursor: pointer;
}

/* ==================== 设备概览卡片 ==================== */
.device-overview {
  margin: 0 var(--spacing-md) var(--spacing-md);
  background: linear-gradient(135deg, #E0F4FA 0%, #C8ECF5 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  box-shadow: 0 4px 16px rgba(69,183,209,0.2);
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  border-left: 4px solid #45B7D1;
}

.device-overview:active {
  transform: scale(0.98);
}

.device-overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.device-title {
  font-size: var(--font-heading);
  font-weight: 600;
}

.device-online-status {
  font-size: var(--font-small);
  color: #4CAF50;
}

/* 设备锁定遮罩 */
.device-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  z-index: 10;
}

.device-lock-overlay .lock-overlay-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: var(--font-body);
  font-weight: 600;
}

.device-lock-overlay .lock-icon {
  font-size: 24px;
}

.device-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.quick-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px;
  background: var(--background);
  border-radius: var(--radius);
  border: 1px solid #E8E8E8;
}

.stat-icon {
  font-size: 18px;
}

.stat-label {
  font-size: 10px;
  color: var(--text-secondary);
}

.stat-value {
  font-size: var(--font-small);
  font-weight: 600;
}

/* ==================== 场景按钮 ==================== */
.scene-section {
  padding: var(--spacing-md);
  background: linear-gradient(135deg, #FFF8E1 0%, #FFEFC2 100%);
  margin: 0 var(--spacing-md) var(--spacing-md);
  border-radius: var(--radius-lg);
  border-left: 4px solid #FFD166;
  box-shadow: 0 4px 16px rgba(255,209,102,0.18);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-title {
  font-size: var(--font-heading);
  font-weight: 600;
}

.scene-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* 老人模式：一键场景改为2列显示 */
[data-mode="elderly"] .scene-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

.scene-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid #E8E8E8;
  cursor: pointer;
  transition: all 0.3s;
}

.scene-card:active {
  transform: scale(0.95);
}

.scene-icon {
  font-size: 28px;
}

.scene-name {
  font-size: var(--font-small);
  color: var(--text);
  text-align: center;
  word-break: keep-all;
}

/* 老人模式场景名称：支持4字一行 */
[data-mode="elderly"] .scene-name {
  font-size: 17px;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
  overflow: visible;
}

/* ==================== 功能快捷入口 ==================== */
.quick-access-section {
  padding: var(--spacing-md);
  margin: 0 var(--spacing-md) var(--spacing-md);
  background: linear-gradient(135deg, #F0FAF0 0%, #DCF0DC 100%);
  border-radius: var(--radius-lg);
  border-left: 4px solid #66BB6A;
  box-shadow: 0 4px 16px rgba(102,187,106,0.15);
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.quick-access-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid #E8E8E8;
  cursor: pointer;
  transition: all 0.3s;
}

.quick-access-item:active {
  transform: scale(0.95);
}

.qa-icon {
  font-size: 28px;
}

.qa-label {
  font-size: var(--font-small);
  color: var(--text);
  text-align: center;
  word-break: keep-all;
}

/* 老人模式：快捷入口标签 - 支持换行 */
[data-mode="elderly"] .qa-label {
  font-size: 14px;
  max-width: 100%;
  text-align: center;
  line-height: 1.4;
  margin: 0 auto;
}

/* 老人模式快捷入口改为2列，适配手机 */
[data-mode="elderly"] .quick-access-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px;
}

/* ==================== 会员推荐卡片 ==================== */
.vip-promo-card {
  margin: 0 var(--spacing-md) var(--spacing-md);
  background: linear-gradient(135deg, #FFD54F 0%, #FFB74D 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.vip-promo-card:active {
  transform: scale(0.98);
}

.vip-promo-content {
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
}

.vip-promo-icon {
  font-size: 36px;
  margin-right: 12px;
}

.vip-promo-info {
  flex: 1;
}

.vip-promo-title {
  font-size: var(--font-heading);
  font-weight: 700;
  color: var(--text);
}

.vip-promo-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.vip-promo-action {
  background: var(--accent);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: var(--font-small);
  font-weight: 600;
}

/* ==================== 儿童模式专属 ==================== */
.child-exclusive-section {
  padding: var(--spacing-md);
  margin: 0 var(--spacing-md) var(--spacing-md);
  background: linear-gradient(135deg, #E8F5F8 0%, #D0EDF2 100%);
  border-radius: var(--radius-lg);
  border-left: 4px solid #A8DADC;
  box-shadow: 0 4px 16px rgba(168,218,220,0.2);
}

.child-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.child-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid #E8E8E8;
  cursor: pointer;
}

.cf-icon {
  font-size: 32px;
}

.cf-name {
  font-size: var(--font-body);
  font-weight: 600;
}

/* ==================== 老人模式专属 ==================== */
.elderly-exclusive-section {
  padding: var(--spacing-md);
  margin: 0 var(--spacing-md) var(--spacing-md);
  background: linear-gradient(135deg, #FFF0E8 0%, #FFE0D0 100%);
  border-radius: var(--radius-lg);
  border-left: 4px solid #FF7A2F;
  box-shadow: 0 4px 16px rgba(255,122,47,0.15);
}

.health-alert-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #FFF3E0;
  border-radius: var(--radius-lg);
  border: 1px solid #E8E8E8;
  cursor: pointer;
}

.alert-icon {
  font-size: 28px;
}

.alert-info {
  flex: 1;
}

.alert-title {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--accent);
}

.alert-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.alert-arrow {
  font-size: 24px;
  color: var(--accent);
}

/* 老人模式固定SOS按钮 */

/* SOS导航项 */
.nav-item-sos {
  opacity: 1;
}
.nav-item-sos .nav-icon.sos-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #FF1744;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(255, 23, 68, 0.4);
  animation: sos-pulse-nav 2s ease-in-out infinite;
}
/* 老人模式SOS图标放大 */
body[data-mode="elderly"] .nav-item-sos .nav-icon.sos-icon-box {
  width: 36px;
  height: 36px;
  font-size: 14px;
  border-radius: 7px;
  background: #FF1744;
}
@keyframes sos-pulse-nav {
  0%, 100% { box-shadow: 0 2px 6px rgba(255, 23, 68, 0.4); }
  50% { box-shadow: 0 2px 14px rgba(255, 23, 68, 0.7); }
}

.elderly-sos-fixed {
  position: fixed;
  bottom: 100px;
  right: 16px;
  z-index: 200;
}

.sos-fixed-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #E53935 0%, #C62828 100%);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(229, 57, 53, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}

.sos-fixed-btn:active {
  transform: scale(0.92);
}

.sos-fixed-btn .sos-icon {
  font-size: 22px;
}

.sos-fixed-btn .sos-label {
  display: none;
}

.sos-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(229, 57, 53, 0.25);
  animation: sos-pulse 2s ease-out infinite;
}

@keyframes sos-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}

.sos-icon {
  position: relative;
  font-size: 32px;
  animation: sos-blink 1s ease-in-out infinite;
}

@keyframes sos-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.sos-label {
  position: relative;
  font-size: var(--font-body);
  font-weight: 700;
}

/* ==================== 设备控制页 ==================== */
.device-header {
  padding: var(--spacing-lg);
  background: var(--gradient);
  text-align: center;
}

.device-robot-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.robot-3d-container {
  position: relative;
  width: 120px;
  height: 120px;
}

.robot-3d-model {
  width: 100px;
  height: 100px;
  background: var(--surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  margin: 10px;
  box-shadow: var(--shadow-strong);
}

.robot-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.2;
  animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.2; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.3; }
}

/* Pro专属呼吸灯效果 */
.pro-breathe-light {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 57, 53, 0.4) 0%, transparent 70%);
  animation: pro-breathe 2s ease-in-out infinite;
}

@keyframes pro-breathe {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1); 
    opacity: 0.3;
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.2); 
    opacity: 0.6;
  }
}

.device-name {
  font-size: var(--font-title);
  font-weight: 700;
}

/* 老人模式设备名称缩小，确保在一行显示 */
[data-mode="elderly"] .device-name {
  font-size: 20px !important;
  white-space: nowrap !important;
}

.device-connection-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.online {
  background: #4CAF50;
}

.status-dot.offline {
  background: #9E9E9E;
}

/* 硬件状态提示 */
.hardware-status-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--spacing-md) var(--spacing-md) var(--spacing-md);
  padding: 12px;
  background: #FFF3E0;
  border-radius: var(--radius);
  border-left: 4px solid var(--accent);
}

.hardware-status-banner.pro {
  background: #E8F5E9;
  border-left-color: #4CAF50;
}

.hardware-status-icon {
  font-size: 28px;
}

.hardware-status-info {
  flex: 1;
}

.hardware-status-title {
  font-size: var(--font-body);
  font-weight: 600;
}

.hardware-status-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.hardware-unlock-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: var(--font-small);
  cursor: pointer;
}

/* 控制区域 */
.control-section {
  padding: 16px var(--spacing-md);
  position: relative;
  border-radius: 12px;
  margin: var(--spacing-md) var(--spacing-md) var(--spacing-md);
}

/* 设备页面各区域差异化背景色 */
#light-control-section {
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border-left: 4px solid #FFB74D;
}

#temp-control-section {
  background: linear-gradient(135deg, #FBE9E7, #FFCCBC);
  border-left: 4px solid #FF7043;
}

#breath-control-section {
  background: linear-gradient(135deg, #FCE4EC, #F8BBD0);
  border-left: 4px solid #E91E63;
}

.control-section:not(#light-control-section):not(#temp-control-section):not(#breath-control-section) {
  background: linear-gradient(135deg, #E8EAF6, #C5CAE9);
  border-left: 4px solid #5C6BC0;
}

.control-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.control-title {
  font-size: var(--font-heading);
  font-weight: 600;
}

.control-status {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

/* 控制区域锁定遮罩 */
.control-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  z-index: 10;
  backdrop-filter: blur(2px);
}

.lock-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--accent);
}

.lock-emoji {
  font-size: 36px;
}

.control-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.control-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  background: var(--surface);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #E8E8E8;
}

.control-card:active {
  transform: scale(0.95);
}

.control-card.active {
  border-color: var(--accent);
  background: var(--primary);
}

.control-card-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  border-radius: 50%;
}

.control-card-name {
  font-size: var(--font-small);
  color: var(--text);
}

.brightness-slider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid #E8E8E8;
}

.slider-label {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  background: var(--background);
  border-radius: 2px;
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
}

.slider-value {
  font-size: var(--font-small);
  color: var(--text-secondary);
  min-width: 40px;
  text-align: right;
}

.color-picker-section {
  margin-top: 12px;
}

.color-presets {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.color-preset {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.color-preset:active {
  transform: scale(0.9);
}

.color-preset.selected {
  border-color: var(--text);
  transform: scale(1.1);
}

/* 场景模式 */
.scene-modes {
  display: flex;
  gap: 8px;
  overflow-x: visible !important;
}

.scene-mode-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid #E8E8E8;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s;
}

.scene-mode-item:active {
  transform: scale(0.95);
}

.scene-mode-item.active {
  background: var(--accent);
  color: white;
}

.scene-mode-icon {
  font-size: 24px;
}

.scene-mode-name {
  font-size: var(--font-small);
}

/* 多设备管理 */
.multi-device-section {
  padding: 16px var(--spacing-md);
  margin: 0 var(--spacing-md) var(--spacing-md);
  background: linear-gradient(135deg, #E0F2F1, #B2DFDB);
  border-left: 4px solid #26A69A;
  border-radius: 12px;
}

.multi-device-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--spacing-md);
  background: var(--surface);
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid #E8E8E8;
}

.md-icon {
  font-size: 28px;
}

.md-info {
  flex: 1;
}

.md-title {
  font-size: var(--font-body);
  font-weight: 600;
}

.md-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.md-arrow {
  font-size: 20px;
  color: var(--text-secondary);
}

/* ==================== 我的页面 ==================== */
.profile-header-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--gradient);
}

.profile-avatar-section {
  position: relative;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  background: var(--surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.vip-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: #FFD700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: var(--font-title);
  font-weight: 700;
  color: var(--text);
}

.vip-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: var(--font-small);
}

.vip-tag.free {
  background: rgba(0,0,0,0.1);
  color: var(--text-secondary);
}

.vip-tag.pro {
  background: linear-gradient(135deg, #FFD54F, #FFB74D);
  color: var(--text);
}

.profile-edit-btn {
  background: rgba(255,255,255,0.9);
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: var(--font-small);
  cursor: pointer;
}

/* 资料编辑页面 */
.profile-edit-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid #E8E8E8;
}

.profile-edit-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin-bottom: 8px;
  border: 3px solid var(--accent);
}

.profile-edit-avatar-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.profile-edit-avatar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.profile-edit-avatar-option {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
}

.profile-edit-avatar-option.selected {
  border-color: var(--accent);
  background: #FFF3E8;
  transform: scale(1.1);
}

.profile-edit-field {
  background: white;
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid #E8E8E8;
}

.profile-edit-field-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.profile-edit-input {
  width: 100%;
  height: 44px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 15px;
  background: #FAFAFA;
  box-sizing: border-box;
}

.profile-edit-input:focus {
  border-color: var(--accent);
  outline: none;
  background: white;
}

.profile-edit-gender-row {
  display: flex;
  gap: 10px;
}

.profile-edit-gender-btn {
  flex: 1;
  height: 44px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  background: #FAFAFA;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
}

.profile-edit-gender-btn.selected {
  border-color: var(--accent);
  background: #FFF3E8;
  color: #FF8C42;
  font-weight: 600;
}

/* 会员卡片 */
.membership-card {
  margin: var(--spacing-md);
  background: linear-gradient(135deg, #FF7043 0%, #FF5722 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.membership-card-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 100%;
  background: rgba(30,30,50,0.06);
}

.membership-card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  position: relative;
  z-index: 1;
}

.membership-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.membership-icon {
  font-size: 40px;
}

.membership-title {
  font-size: var(--font-title);
  font-weight: 700;
  color: white;
}

.membership-subtitle {
  font-size: var(--font-small);
  color: rgba(30,30,50,0.85);
}

.membership-card-right {
  text-align: right;
  flex-shrink: 0;
}

.membership-price {
  font-size: 24px;
  font-weight: 700;
  color: white;
}

.membership-price span {
  font-size: var(--font-small);
}

.membership-cta {
  background: white;
  color: var(--accent);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: var(--font-small);
  font-weight: 600;
  white-space: nowrap;
}

.membership-features-preview {
  display: flex;
  gap: 12px;
  padding: 10px var(--spacing-md);
  background: rgba(0,0,0,0.1);
  font-size: var(--font-small);
  color: white;
}

/* 数据汇总 */
.data-summary-section {
  padding: 16px var(--spacing-md);
  margin: var(--spacing-md) var(--spacing-md) var(--spacing-md);
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  border-left: 4px solid #42A5F5;
  border-radius: 12px;
}

.data-summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.data-summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid #E8E8E8;
  cursor: pointer;
  transition: all 0.3s;
}

.data-summary-card:active {
  transform: scale(0.95);
}

.dsc-icon {
  font-size: 28px;
}

.dsc-value {
  font-size: var(--font-title);
  font-weight: 700;
  color: var(--accent);
}

.dsc-label {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

/* 功能菜单 */
.profile-menu-section {
  padding: 0 var(--spacing-md) 16px;
}

.menu-group {
  background: var(--surface);
  border-radius: 12px;
  margin-bottom: var(--spacing-md);
  overflow: hidden;
  border: 1px solid #E8E8E8;
}

/* 我的页面三个菜单组差异化背景色 */
.menu-group:nth-child(1) {
  background: linear-gradient(135deg, #F3E5F5, #E1BEE7);
  border-left: 4px solid #AB47BC;
  border-top: 1px solid #E8E8E8;
  border-right: 1px solid #E8E8E8;
  border-bottom: 1px solid #E8E8E8;
}

.menu-group:nth-child(2) {
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  border-left: 4px solid #FFA726;
  border-top: 1px solid #E8E8E8;
  border-right: 1px solid #E8E8E8;
  border-bottom: 1px solid #E8E8E8;
}

.menu-group:nth-child(3) {
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border-left: 4px solid #66BB6A;
  border-top: 1px solid #E8E8E8;
  border-right: 1px solid #E8E8E8;
  border-bottom: 1px solid #E8E8E8;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--spacing-md);
  cursor: pointer;
  transition: background 0.3s;
  border-bottom: 1px solid var(--background);
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background: var(--background);
}

.menu-item.danger {
  color: #E53935;
}

.menu-icon {
  width: 40px;
  height: 40px;
  background: var(--gradient);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  border: 1px solid #E8E8E8;
}

.menu-info {
  flex: 1;
}

.menu-label {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
}

.menu-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.menu-arrow {
  font-size: 20px;
  color: var(--text-secondary);
}

/* Switch开关 */
.switch {
  width: 48px;
  height: 28px;
  background: #ddd;
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}

.switch.active {
  background: var(--accent);
}

.switch::after {
  content: '';
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.switch.active::after {
  left: 22px;
}

/* ==================== 聊天页面 ==================== */
.chat-header {
  background: var(--gradient);
  padding: 12px var(--spacing-md);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  position: relative;
 z-index: 50;
}

.back-btn {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.95);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.1);
  transition: transform 0.15s;
  position: relative;
}

/* 用CSS画粗箭头替代细字体箭头 */
.back-btn.arrow-back {
  font-size: 0;
}

.back-btn.arrow-back::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-left: 3px solid #FF8C42;
  border-bottom: 3px solid #FF8C42;
  transform: rotate(45deg);
  margin-left: 3px;
}

.back-btn:active {
  transform: scale(0.88);
}

.back-btn.light {
  background: rgba(255,255,255,0.3);
  color: white;
}

.back-btn.light.arrow-back::before {
  border-left-color: white;
  border-bottom-color: white;
}

.chat-robot-avatar {
  width: 40px;
  height: 40px;
  background: var(--surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.robot-face-small {
  font-size: 24px;
}

.chat-info {
  flex: 1;
}

.chat-name {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
}

.chat-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.ai-status-dot {
  width: 6px;
  height: 6px;
  background: #4CAF50;
  border-radius: 50%;
}

.chat-ai-badge {
  background: var(--accent);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* VIP锁定提示 */
.vip-lock-banner {
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
  padding: 10px var(--spacing-md);
  flex-shrink: 0;
}

.lock-banner-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lock-icon {
  font-size: 20px;
}

.lock-text {
  flex: 1;
  font-size: var(--font-small);
  color: var(--accent);
}

.lock-unlock-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: var(--font-small);
  cursor: pointer;
}

/* 免费使用提示 */
.free-usage-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px var(--spacing-md);
  background: var(--surface);
  font-size: var(--font-small);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.usage-icon {
  font-size: 16px;
}

.usage-text {
  color: var(--text-secondary);
}

.usage-count {
  color: var(--accent);
  font-weight: 600;
}

/* 聊天消息 */
.chat-messages {
  flex: 1;
  padding: var(--spacing-md);
  padding-bottom: 80px; /* 为固定输入框留空间 */
  overflow-y: auto;
  background: var(--background);
  -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
}

/* 老人模式：聊天区底部留更多空间（SOS按钮+输入框） */
body[data-mode="elderly"] .chat-messages {
  padding-bottom: 160px;
}

.message {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.message.user {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 36px;
  height: 36px;
  background: var(--surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.message.user .message-avatar {
  background: var(--accent);
  color: white;
}

.message-content {
  max-width: 75%;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: var(--radius);
  font-size: var(--font-body);
  line-height: 1.6;
  box-shadow: var(--shadow);
}

.message.user .message-content {
  background: var(--accent);
  color: white;
}

.ai-name-tag {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}
.ai-name-tag::after {
  content: " AI生成";
  display: inline-block;
  font-size: 10px;
  color: #999;
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

.ai-tip {
  display: block;
  font-size: var(--font-small);
  color: var(--text-secondary);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--background);
  background: #FFF8E1;
  padding: 8px;
  border-radius: 8px;
}

/* 聊天输入 */
.chat-input-area {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  z-index: 100 !important;
  box-sizing: border-box;
}

/* AI聊天附件按钮 */
.chat-action-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: #F5F5F5;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.chat-action-btn:active {
  background: #FF8C42;
  transform: scale(0.95);
}

/* 老人模式：聊天输入区域上方留出SOS按钮空间 */
.chat-input-area {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  z-index: 100 !important;
  box-sizing: border-box;
}

/* AI聊天附件按钮 */
.chat-action-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: #F5F5F5;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.chat-action-btn:active {
  background: #FF8C42;
  transform: scale(0.95);
}

/* 老人模式：输入框加边框，增强对比度 */
body[data-mode="elderly"] .chat-input {
  background: #fff;
  border: 2px solid #FF7A2F;
  font-size: 18px;
  padding: 12px 18px;
}

body[data-mode="elderly"] .send-btn {
  width: 52px;
  height: 52px;
  font-size: 24px;
}

.input-tools {
  display: flex;
  gap: 8px;
}

.input-tool-btn {
  width: 40px;
  height: 40px;
  background: var(--background);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}

.input-tool-btn:active {
  transform: scale(0.9);
  background: var(--primary);
}

.chat-input {
  flex: 1;
  min-height: 40px;
  max-height: 100px;
  padding: 10px 16px;
  background: var(--background);
  border: 1px solid #E0E0E0;
  border-radius: 20px;
  font-size: var(--font-body);
  color: var(--text);
  resize: none;
  outline: none;
}

.chat-input:focus {
  border-color: var(--accent);
}

.chat-input::placeholder {
  color: var(--text-secondary);
}

.chat-input:disabled {
  opacity: 0.5;
}

.send-btn {
  width: 44px;
  height: 44px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  cursor: pointer;
}

.send-btn:active {
  transform: scale(0.9);
}

.send-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 输入框锁定遮罩 */
.input-lock-overlay {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: rgba(255,255,255,0.98);
  padding: 16px var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 101 !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
}

/* 老人模式：输入框锁定遮罩也需上移避让SOS按钮 */
body[data-mode="elderly"] .input-lock-overlay {
  bottom: 120px;
}

.input-lock-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.input-lock-content .lock-icon {
  font-size: 24px;
  color: var(--accent);
}

.input-lock-content span {
  color: var(--text);
  font-size: var(--font-body);
}

.lock-pro-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: var(--font-small);
  cursor: pointer;
}

/* ==================== 情绪打卡页面 ==================== */
.page-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--spacing-md);
  background: var(--gradient);
}

.page-title {
  font-size: var(--font-heading);
  font-weight: 600;
  color: white;
}

.emotion-checkin-container {
  padding: var(--spacing-lg);
  text-align: center;
}

.emotion-checkin-prompt {
  margin-bottom: var(--spacing-lg);
}

.prompt-emoji {
  font-size: 48px;
  margin-bottom: 8px;
}

.prompt-text {
  font-size: var(--font-title);
  font-weight: 600;
}

.emotion-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: var(--spacing-lg);
}

.emotion-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.emotion-option-card:active {
  transform: scale(0.95);
}

.emotion-option-card.selected {
  border-color: var(--accent);
  background: var(--primary);
}

.emotion-emoji {
  font-size: 40px;
}

.emotion-name {
  font-size: var(--font-body);
  font-weight: 600;
}

.checkin-submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}

/* ==================== 情绪树洞页面 ==================== */
.mood-tree-container {
  padding: var(--spacing-lg);
  text-align: center;
}

.mood-tree-intro {
  margin-bottom: var(--spacing-lg);
}

.tree-icon {
  font-size: 64px;
  margin-bottom: 12px;
}

.tree-text {
  font-size: var(--font-body);
  color: var(--text-secondary);
  line-height: 1.8;
}

.tree-hint-cards {
  display: flex;
  gap: 12px;
  margin-bottom: var(--spacing-lg);
}

.hint-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  cursor: pointer;
}

.hint-icon {
  font-size: 28px;
}

.hint-text {
  font-size: var(--font-small);
}

.anonymous-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--background);
  border-radius: 20px;
  font-size: var(--font-small);
  color: var(--text-secondary);
}

/* ==================== 助眠中心页面 ==================== */
.dark-header {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
}

.dark-header .page-title {
  color: white;
}

.sleep-center-content {
  padding: var(--spacing-md);
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  min-height: calc(100vh - 120px);
}

.sleep-planet {
  position: relative;
  text-align: center;
  padding: 40px 0;
}

.planet-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,220,100,0.3) 0%, transparent 70%);
  border-radius: 50%;
}

.planet-icon {
  position: relative;
  font-size: 80px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.sleep-section {
  margin-bottom: var(--spacing-lg);
}

.sleep-section-title {
  font-size: var(--font-body);
  font-weight: 600;
  color: white;
  margin-bottom: 12px;
}

.sound-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sound-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(30,30,50,0.06);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.3s;
}

.sound-card:active {
  transform: scale(0.95);
}

.sound-card.playing {
  background: var(--accent);
}

.sound-icon {
  font-size: 28px;
}

.sound-name {
  font-size: var(--font-body);
  color: white;
}

.story-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.story-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(30,30,50,0.06);
  border-radius: var(--radius);
  cursor: pointer;
}

.story-thumb {
  width: 50px;
  height: 50px;
  background: var(--gradient);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.story-info {
  flex: 1;
}

.story-title {
  font-size: var(--font-body);
  color: white;
  font-weight: 600;
}

.story-duration {
  font-size: var(--font-small);
  color: rgba(255,255,255,0.6);
}

.story-play {
  width: 36px;
  height: 36px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}

.timer-options {
  display: flex;
  gap: 8px;
}

.timer-option {
  flex: 1;
  padding: 12px;
  background: rgba(30,30,50,0.06);
  border-radius: var(--radius);
  text-align: center;
  font-size: var(--font-small);
  color: white;
  cursor: pointer;
}

.timer-option.selected {
  background: var(--accent);
}

/* ==================== 健康数据页面 ==================== */
.health-data-content {
  padding: var(--spacing-md);
}

.health-quick-add {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: var(--spacing-lg);
}

.add-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid #E8E8E8;
  cursor: pointer;
}

.add-icon {
  font-size: 28px;
}

.add-name {
  font-size: var(--font-small);
}

.record-empty {
  text-align: center;
  padding: 40px;
  background: var(--surface);
  border-radius: var(--radius);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.empty-text {
  font-size: var(--font-body);
  color: var(--text);
  margin-bottom: 4px;
}

.empty-hint {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.sos-emergency-section {
  margin-top: var(--spacing-md);
}

.sos-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #E53935 0%, #C62828 100%);
  border: none;
  border-radius: var(--radius-lg);
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sos-icon {
  font-size: 24px;
}

.sos-text {
  font-size: var(--font-body);
}

/* ==================== 会员中心页面 ==================== */
.membership-content {
  padding: var(--spacing-md);
}

/* VIP选项卡切换 */
.vip-plan-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: var(--spacing-md);
  padding: 4px;
  background: #F5F5F5;
  border-radius: var(--radius);
}

.vip-plan-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.vip-plan-tab.active {
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.vip-plan-tab .tab-name {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.vip-plan-tab.active .tab-name {
  color: var(--accent);
}

.vip-plan-tab .tab-price {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.vip-plan-tab.active .tab-price {
  color: var(--accent);
}

.vip-plan-tab .tab-tag {
  position: absolute;
  top: -4px;
  right: 8px;
  background: #FF4757;
  color: white;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 600;
}

.vip-plan-tab.yearly-tab .tab-tag {
  background: linear-gradient(135deg, #FF6B81, #FF4757);
}

.membership-comparison {
  margin-bottom: var(--spacing-lg);
}

.comparison-header {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.comparison-title {
  font-size: var(--font-heading);
  font-weight: 700;
}

.plan-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border: 2px solid transparent;
}

.plan-card.pro-card {
  border-color: var(--accent);
  position: relative;
}

.plan-card.pro-card.yearly-card {
  border: 2px solid #FF5722;
  background: linear-gradient(135deg, #FFF8F5, #FFF);
}

.yearly-badge {
  background: linear-gradient(135deg, #FF6B81, #FF4757) !important;
}

.plan-badge {
  background: var(--accent);
  color: white;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.plan-name {
  font-size: var(--font-heading);
  font-weight: 700;
}

.plan-price {
  font-size: var(--font-title);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

/* 新的价格显示样式 */
.plan-price-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.plan-price-display .price-current {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
}

.plan-price-display .price-unit {
  font-size: var(--font-body);
  color: var(--text-secondary);
}

.plan-price-display .price-original {
  font-size: var(--font-small);
  color: #999;
  text-decoration: line-through;
}

.plan-savings-tip {
  font-size: var(--font-small);
  color: var(--accent);
  margin-bottom: 12px;
}

.plan-savings-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  padding: 8px 16px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.plan-savings-highlight .savings-amount {
  font-size: var(--font-heading);
  font-weight: 700;
  color: #FF5722;
}

.plan-savings-highlight .savings-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.plan-price span {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.plan-price-yearly {
  font-size: var(--font-small);
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.plan-features {
  margin-bottom: var(--spacing-md);
}

.feature-item {
  padding: 8px 0;
  font-size: var(--font-small);
  color: var(--text);
  border-bottom: 1px solid var(--background);
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-item.disabled {
  color: var(--text-secondary);
}

.feature-item.disabled-line {
  color: #ccc;
  text-decoration: line-through;
}

.feature-item.highlight {
  color: var(--accent);
  font-weight: 600;
}

.plan-emotion {
  text-align: center;
  color: var(--accent);
  font-size: var(--font-small);
  margin-bottom: 12px;
}

.plan-subscribe-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #FF7043 0%, #FF5722 100%);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: var(--font-body);
  font-weight: 700;
  cursor: pointer;
}

.plan-subscribe-btn.yearly-btn {
  background: linear-gradient(135deg, #FF6B81 0%, #FF4757 100%);
  font-size: var(--font-heading);
}

/* 自动续费说明 */
.auto-renew-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  margin-top: var(--spacing-md);
  background: #F8F8F8;
  border-radius: var(--radius);
  font-size: var(--font-small);
}

.auto-renew-notice .renew-icon {
  font-size: 14px;
}

.auto-renew-notice .renew-text {
  color: var(--text-secondary);
}

.auto-renew-notice .renew-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

/* 额外权益项 */
.feature-item.bonus {
  color: #FF5722;
  font-weight: 600;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 4px 0;
}

.plan-footer {
  text-align: center;
  margin-top: 12px;
}

.plan-status.current {
  color: var(--text-secondary);
  font-size: var(--font-small);
}

.pro-features-showcase {
  margin-top: var(--spacing-lg);
}

.showcase-title {
  font-size: var(--font-heading);
  font-weight: 700;
  margin-bottom: 12px;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.showcase-item {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid #E8E8E8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: all 0.3s;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: center;
}

.showcase-item:active {
  transform: scale(0.95);
}

.showcase-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.showcase-name {
  font-size: var(--font-body);
  font-weight: 600;
  margin-bottom: 4px;
}

.showcase-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

/* ==================== 家庭组/商城等页面通用样式 ==================== */
.family-group-content,
.ugc-content,
.learn-course-list,
.shop-content,
.settings-content,
.policy-content,
.subscription-content,
.deletion-content {
  padding: var(--spacing-md);
}

/* 商城分类横排 */
.shop-categories {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: visible !important;
  -webkit-overflow-scrolling: touch;
}

.category-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 20px;
  background: #f0f0f0;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.category-btn.active {
  background: linear-gradient(135deg, #FF8C42, #FF7A2F);
  color: #fff;
  font-weight: 600;
}

.category-btn:active {
  transform: scale(0.95);
}

.family-tip,
.ugc-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-small);
}

.tip-icon {
  font-size: 20px;
}

.family-members {
  margin-bottom: var(--spacing-md);
}

.family-member-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--spacing-md);
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid #E8E8E8;
}

.member-avatar {
  width: 48px;
  height: 48px;
  background: var(--gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.member-info {
  flex: 1;
}

.member-name {
  font-size: var(--font-body);
  font-weight: 600;
}

.member-role {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.member-device {
  font-size: var(--font-small);
  color: var(--accent);
}

.add-member-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: var(--surface);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--font-body);
  color: var(--accent);
}

.family-flywheel-card {
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.flywheel-title {
  font-size: var(--font-body);
  font-weight: 700;
  margin-bottom: 8px;
}

.flywheel-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
  line-height: 1.6;
}

.ugc-grid {
  display: grid;
  gap: 12px;
  margin-bottom: var(--spacing-md);
}

.ugc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--spacing-md);
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid #E8E8E8;
}

.ugc-thumbnail {
  width: 50px;
  height: 50px;
  background: var(--gradient);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.ugc-info {
  flex: 1;
}

.ugc-title {
  font-size: var(--font-body);
  font-weight: 600;
}

.ugc-meta {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.share-to-social-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.learn-tabs {
  display: flex;
  gap: 8px;
  padding: var(--spacing-md);
  overflow-x: visible !important;
}

.learn-tab {
  padding: 8px 16px;
  background: var(--surface);
  border-radius: 20px;
  font-size: var(--font-small);
  cursor: pointer;
  white-space: nowrap;
}

.learn-tab.active {
  background: var(--accent);
  color: white;
}

.course-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--spacing-md);
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid #E8E8E8;
  margin-bottom: 12px;
}

.course-thumb {
  width: 50px;
  height: 50px;
  background: var(--gradient);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.course-info {
  flex: 1;
}

.course-title {
  font-size: var(--font-body);
  font-weight: 600;
}

.course-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.course-meta {
  font-size: var(--font-small);
  color: var(--accent);
}

.shop-products {
  display: grid;
  gap: 12px;
}

.product-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--spacing-md);
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid #E8E8E8;
}

.product-image {
  width: 80px;
  height: 80px;
  background: var(--gradient);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: var(--font-body);
  font-weight: 600;
  margin-bottom: 4px;
}

.product-price {
  font-size: var(--font-title);
  font-weight: 700;
  color: var(--accent);
}

.settings-group {
  background: var(--surface);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

.settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--spacing-md);
  cursor: pointer;
  border-bottom: 1px solid var(--background);
}

.settings-item:last-child {
  border-bottom: none;
}

.settings-item:active {
  background: var(--background);
}

.settings-icon {
  width: 36px;
  height: 36px;
  background: var(--gradient);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.settings-info {
  flex: 1;
}

.settings-label {
  font-size: var(--font-body);
  font-weight: 600;
}

.settings-value {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

/* 隐私政策/订阅内容样式 */
.policy-content,
.subscription-content,
.deletion-content {
  padding: var(--spacing-md);
  line-height: 1.8;
}

.policy-content h2 {
  font-size: var(--font-title);
  margin-bottom: 8px;
}

.policy-content h3 {
  font-size: var(--font-body);
  font-weight: 700;
  margin-top: 16px;
  margin-bottom: 8px;
}

.policy-content p {
  font-size: var(--font-small);
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.subscription-section {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.subscription-section h3 {
  font-size: var(--font-body);
  font-weight: 700;
  margin-bottom: 8px;
}

.subscription-section p,
.subscription-section ol {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.subscription-section ol {
  padding-left: 20px;
  margin-top: 8px;
}

.subscription-section ol li {
  margin-bottom: 4px;
}

.subscription-section .note {
  color: var(--accent);
  margin-top: 8px;
}

.deletion-warning {
  text-align: center;
  padding: var(--spacing-lg);
  background: #FFEBEE;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
}

.warning-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.deletion-warning h3 {
  color: #E53935;
  font-size: var(--font-body);
}

.deletion-section {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.deletion-section h4 {
  font-size: var(--font-body);
  font-weight: 600;
  margin-bottom: 8px;
}

.deletion-section ul {
  padding-left: 20px;
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.deletion-section ul li {
  margin-bottom: 4px;
}

.deletion-btn {
  width: 100%;
  padding: 14px;
  background: #E53935;
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
}

.deletion-cancel-btn {
  width: 100%;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--text-secondary);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--font-body);
  cursor: pointer;
}

/* ==================== 底部导航栏 ==================== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: var(--surface);
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  z-index: 100 !important;
}

/* 老人模式：底部导航栏 */
body[data-mode="elderly"] .bottom-nav {
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  padding-top: 14px;
}

/* 老人模式：导航栏按钮加大 */
body[data-mode="elderly"] .nav-item {
  padding: 10px 0;
  gap: 6px;
}

body[data-mode="elderly"] .nav-icon {
  font-size: 30px;
  height: 36px;
}

body[data-mode="elderly"] .nav-label {
  font-size: 18px;
  font-weight: 700;
  height: 22px;
}

/* 儿童模式：导航栏文字 */
body[data-mode="child"] .nav-label {
  font-size: 16px;
  font-weight: 700;
  height: 20px;
}

body[data-mode="elderly"] .nav-item.active {
  background: rgba(255, 122, 47, 0.1);
  border-radius: 12px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.3s;
  flex: 1;
  min-width: 0;
}

.nav-item.active {
  opacity: 1;
}

.nav-icon {
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  line-height: 1;
}

.nav-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  height: 17px;
}

/* ==================== 弹窗样式 ==================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  width: 90%;
  max-width: 360px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s;
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.modal-title {
  font-size: var(--font-title);
  font-weight: 700;
}

.close-modal-btn {
  width: 28px;
  height: 28px;
  background: var(--background);
  border: none;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--spacing-md);
}

/* 模式选择弹窗 */
.mode-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mode-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--spacing-md);
  background: var(--background);
  border-radius: var(--radius);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.mode-option.selected {
  border-color: var(--accent);
  background: var(--primary);
}

.mode-option-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.mode-option-icon.child {
  background: linear-gradient(135deg, #A8DADC 0%, #B5EAD7 100%);
}

.mode-option-icon.adult {
  background: #FF8C42;
}

.mode-option-icon.elderly {
  background: #FF7A2F;
}

.mode-option-name {
  font-size: var(--font-body);
  font-weight: 600;
}

.mode-option-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

/* 隐私确认弹窗 */
.privacy-consent-modal {
  text-align: center;
}

.privacy-modal-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.privacy-modal-title {
  font-size: var(--font-title);
  font-weight: 700;
  margin-bottom: 12px;
}

.privacy-modal-content {
  font-size: var(--font-small);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.privacy-modal-content a {
  color: var(--accent);
  text-decoration: none;
}

.privacy-consent-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.privacy-agree-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}

.privacy-decline-btn {
  width: 100%;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--text-secondary);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--font-body);
  cursor: pointer;
}

/* 年龄验证弹窗 */
.age-verification-modal {
  text-align: center;
}

.age-modal-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.age-modal-title {
  font-size: var(--font-title);
  font-weight: 700;
  margin-bottom: 8px;
}

.age-modal-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.age-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.age-option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--background);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--font-body);
  transition: all 0.3s;
}

.age-option-btn:active {
  transform: scale(0.98);
}

.age-option-btn.adult {
  background: var(--primary);
}

.age-icon {
  font-size: 32px;
}

.age-text {
  flex: 1;
  text-align: left;
}

.age-modal-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: var(--font-small);
  color: var(--text-secondary);
}

/* 家长认证弹窗 */
.parent-verification-modal {
  text-align: center;
}

.parent-modal-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.parent-modal-title {
  font-size: var(--font-title);
  font-weight: 700;
  margin-bottom: 8px;
}

.parent-modal-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.parent-input-group {
  margin-bottom: 16px;
}

.parent-year-input {
  width: 100%;
  padding: 14px;
  border: 2px solid var(--background);
  border-radius: var(--radius);
  font-size: var(--font-body);
  text-align: center;
  outline: none;
}

.parent-year-input:focus {
  border-color: var(--accent);
}

.parent-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.parent-verify-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}

.parent-cancel-btn {
  width: 100%;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--text-secondary);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--font-body);
  cursor: pointer;
}

/* 监护人授权弹窗 */
.guardian-consent-modal {
  text-align: center;
}

.guardian-modal-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.guardian-modal-title {
  font-size: var(--font-title);
  font-weight: 700;
  margin-bottom: 12px;
}

.guardian-modal-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.guardian-consent-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.guardian-consent-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius);
  font-size: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}

.guardian-consent-btn.confirm {
  background: var(--accent);
  color: white;
}

.guardian-consent-btn.cancel {
  background: var(--surface);
  border: 1px solid var(--text-secondary);
  color: var(--text);
}

.guardian-modal-warning {
  padding: 12px;
  background: #FFF3E0;
  border-radius: var(--radius);
  font-size: var(--font-small);
  color: var(--accent);
}

/* 老人风险提示弹窗 */
.elderly-risk-modal {
  text-align: center;
}

.risk-modal-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.risk-modal-title {
  font-size: var(--font-title);
  font-weight: 700;
  margin-bottom: 16px;
}

.risk-modal-content {
  text-align: left;
  margin-bottom: 20px;
}

.risk-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--background);
}

.risk-item:last-child {
  border-bottom: none;
}

.risk-icon {
  font-size: 20px;
}

.risk-item span:last-child {
  flex: 1;
  font-size: var(--font-small);
  color: var(--text-secondary);
  line-height: 1.5;
}

.risk-confirm-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
}

.risk-guide-link {
  display: block;
  color: var(--accent);
  font-size: var(--font-small);
  cursor: pointer;
}

/* 防沉迷弹窗 */
.anti-addiction-modal {
  text-align: center;
}

.addiction-modal-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.addiction-modal-title {
  font-size: var(--font-title);
  font-weight: 700;
  margin-bottom: 16px;
}

.addiction-time-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.time-icon {
  font-size: 24px;
}

.time-value {
  font-size: 48px;
  font-weight: 700;
  color: var(--accent);
}

.time-unit {
  font-size: var(--font-body);
  color: var(--text-secondary);
}

.addiction-message {
  font-size: var(--font-body);
  margin-bottom: 8px;
}

.addiction-suggestion {
  font-size: var(--font-small);
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.addiction-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.addiction-rest-btn,
.addiction-continue-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: var(--radius);
  font-size: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}

.addiction-rest-btn {
  background: var(--accent);
  color: white;
}

.addiction-continue-btn {
  background: var(--surface);
  border: 1px solid var(--text-secondary);
  color: var(--text);
}

.addiction-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.switch-toggle {
  position: relative;
  width: 40px;
  height: 22px;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 22px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.switch-toggle input:checked + .toggle-slider {
  background-color: var(--accent);
}

.switch-toggle input:checked + .toggle-slider:before {
  transform: translateX(18px);
}

/* 健康提示弹窗 */
.health-tip-modal {
  text-align: center;
}

.health-modal-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.health-modal-title {
  font-size: var(--font-title);
  font-weight: 700;
  margin-bottom: 16px;
}

.health-modal-content {
  text-align: left;
  margin-bottom: 16px;
}

.health-tip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: var(--font-small);
}

.tip-emoji {
  font-size: 24px;
}

.health-modal-resources {
  background: #FFF3E0;
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 16px;
  text-align: left;
}

.resource-title {
  font-size: var(--font-small);
  font-weight: 600;
  margin-bottom: 8px;
}

.resource-item {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 4px 0;
}

.health-confirm-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}

/* 家长管控弹窗 */
.parental-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid #E8E8E8;
}

.parental-card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #333;
}

.parental-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
  color: #333;
}

.parental-card-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.parental-row-label {
  flex-shrink: 0;
  margin-right: 12px;
}

.parental-select {
  flex: 1;
  max-width: 140px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 15px;
  background: white;
}

.parental-report-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
  color: #333;
}

.parental-report-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.toggle-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.report-value {
  font-weight: 600;
  color: var(--accent);
  font-size: 15px;
}

.parental-save-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* 安全指南弹窗 */
.safety-guide-modal {
  max-height: 80vh;
  overflow-y: auto;
}

.guide-content {
  margin-bottom: 16px;
}

.guide-section {
  margin-bottom: 16px;
}

.guide-section-title {
  font-size: var(--font-body);
  font-weight: 600;
  margin-bottom: 8px;
}

.guide-list {
  padding-left: 20px;
  font-size: var(--font-small);
  color: var(--text-secondary);
  line-height: 1.8;
}

/* 即时钩子弹窗 */
.hook-modal {
  text-align: center;
}

.hook-icon {
  font-size: 64px;
  margin-bottom: 16px;
  animation: heartbeat 1s ease-in-out infinite;
}

.hook-title {
  font-size: var(--font-title);
  font-weight: 700;
  margin-bottom: 8px;
}

.hook-text {
  font-size: var(--font-small);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.hook-features {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.hook-feature {
  padding: 8px 12px;
  background: var(--background);
  border-radius: 20px;
  font-size: var(--font-small);
}

.hook-subscribe-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #FF7043 0%, #FF5722 100%);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 12px;
}

.hook-skip-btn {
  width: 100%;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--text-secondary);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--font-body);
  cursor: pointer;
}

/* 夜间锁定弹窗 */
.night-lock-modal {
  text-align: center;
}

.night-lock-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.night-lock-title {
  font-size: var(--font-title);
  font-weight: 700;
  margin-bottom: 8px;
}

.night-lock-text {
  font-size: var(--font-small);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.night-lock-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}

/* ==================== Toast提示 ==================== */
.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 12px 24px;
  border-radius: 24px;
  font-size: var(--font-small);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  text-align: center;
  max-width: 80%;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ==================== 底部备案信息 ==================== */
.app-footer {
  position: relative;
  z-index: 1;
  padding: var(--spacing-md);
  text-align: center;
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: auto;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-beian a,
.footer-gongan a {
  color: var(--text-secondary);
  text-decoration: none;
}

.footer-copyright {
  margin-top: 4px;
}
.auth-page .app-footer { display: none !important; }

/* ==================== 响应式适配 ==================== */
@media (max-width: 430px) {
  .app-container {
    max-width: 100%;
  }
  
  .bottom-nav {
    max-width: 100%;
  }
}

/* ==================== 辅助类 ==================== */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

/* ==================== 品牌头部 ==================== */
.brand-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px 6px;
  background: #FF8C42;
}

.brand-header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.brand-logo {
  height: 36px;
  width: auto;
  max-width: 200px;
}

.brand-slogan {
  font-size: 11px;
  color: #333333;
  letter-spacing: 0.5px;
}

/* 儿童模式品牌头部 */
[data-mode="child"] .brand-header {
  background: #A8DADC;
}

/* 老人模式品牌头部 */
[data-mode="elderly"] .brand-header {
  background: #FF7A2F;
}

/* 状态栏内嵌LOGO */
.status-bar .brand-logo-inline {
  height: 32px;
  width: auto;
  margin-right: 8px;
}

/* ==================== 底部导航选中状态 ==================== */
.nav-item.active .nav-icon,
.nav-item.active .nav-label {
  color: var(--accent);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 3px 3px;
}

/* ==================== 在线状态颜色 ==================== */
.device-online,
.device-online-status,
.status-dot.online,
.online-indicator {
  color: var(--success) !important;
}

.device-online-status::before {
  color: var(--success) !important;
}

/* ==================== 提醒/消息状态颜色 ==================== */
.warning-badge,
.message-badge,
.notification-dot,
.reminder-badge {
  background: var(--warning) !important;
  color: #333333 !important;
}

/* ==================== 场景模式视觉切换 ==================== */

/* 场景激活的卡片样式 */
.scene-card.scene-active {
  background: var(--accent);
  color: white;
  transform: scale(1.05);
  box-shadow: var(--shadow-strong);
}

.scene-card.scene-active .scene-name {
  color: white;
}

/* 助眠场景 - 暗色调 */
[data-scene="sleep"] .home-header,
[data-scene="sleep"] .ai-entrance-card,
[data-scene="sleep"] .device-overview-card {
  opacity: 0.7;
  filter: brightness(0.6);
}

/* 放松场景 - 柔和色调 */
[data-scene="relax"] .home-header,
[data-scene="relax"] .ai-entrance-card {
  opacity: 0.85;
}

/* 专注场景 - 去干扰 */
[data-scene="focus"] .quick-access-section,
[data-scene="focus"] .vip-promo-card {
  opacity: 0.5;
}

/* 场景弹窗 */
.scene-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  animation: fadeIn 0.3s ease;
}

.scene-modal-card {
  background: white;
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
  width: 85%;
  max-width: 320px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}

.scene-modal-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.scene-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
}

.scene-modal-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.scene-modal-animation {
  margin: 20px auto;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scene-modal-btn {
  background: #FF8C42;
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 24px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 12px;
}

.scene-modal-btn:active {
  transform: scale(0.95);
}

/* 助眠月亮动画 */
.sleep-moon {
  width: 40px;
  height: 40px;
  background: #FFD54F;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255,213,79,0.5);
  animation: moonGlow 2s ease-in-out infinite;
}

@keyframes moonGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(255,213,79,0.5); }
  50% { box-shadow: 0 0 40px rgba(255,213,79,0.8); }
}

/* 放松呼吸动画 */
.breathe-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A8DADC, #B5EAD7);
  animation: breathe 4s ease-in-out infinite;
}

.breathe-text {
  font-size: 14px;
  color: #999;
  margin-top: 8px;
}

@keyframes breathe {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* 专注倒计时 */
.focus-timer {
  font-size: 36px;
  font-weight: 700;
  color: #FF8C42;
  font-variant-numeric: tabular-nums;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==================== 健康数据输入弹窗 ==================== */
.health-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
}

.health-input {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  font-size: 16px;
  outline: none;
  color: #333;
}

.health-input:focus {
  border-color: #FF8C42;
}

.health-input-unit {
  color: #999;
  font-size: 14px;
  white-space: nowrap;
}

.health-input-note {
  margin-bottom: 16px;
}

.health-note-input {
  width: 100%;
  box-sizing: border-box;
}

.health-input-actions {
  display: flex;
  gap: 12px;
}

.health-cancel-btn {
  background: #f0f0f0 !important;
  color: #666 !important;
}

/* 健康记录列表 */
.health-record-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 12px;
  border: 1px solid #E8E8E8;
  margin-bottom: 8px;
  flex-wrap: wrap;
  position: relative;
}

.health-record-icon {
  font-size: 20px;
}

.health-record-info {
  flex: 1;
}

.health-record-type {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.health-record-note {
  font-size: 14px;
  color: #999;
}

.health-record-value {
  font-size: 18px;
  font-weight: 700;
  color: #FF8C42;
}

.health-record-unit {
  font-size: 14px;
  font-weight: 400;
  color: #999;
}

.health-record-time {
  font-size: 11px;
  color: #bbb;
  white-space: nowrap;
}

.health-record-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.health-edit-btn, .health-delete-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.health-edit-btn:hover, .health-delete-btn:hover {
  background: #f0f0f0;
}

.health-delete-btn:hover {
  background: #ffe0e0;
}

/* ==================== 情绪打卡历史记录 ==================== */
.emotion-history-section {
  margin-top: 30px;
  text-align: left;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.history-title {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
}

.history-count {
  font-size: var(--font-small);
  color: var(--text-secondary);
  background: #f5f5f5;
  padding: 4px 10px;
  border-radius: 10px;
}

/* 情绪趋势图 */
.emotion-trend-section {
  margin-bottom: 16px;
}

.trend-title {
  font-size: var(--font-small);
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.trend-chart {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 100px;
  padding: 10px 5px;
  background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%);
  border-radius: 12px;
  gap: 4px;
}

.trend-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 20%;
  background: #e0e0e0;
  border-radius: 6px 6px 4px 4px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.trend-bar .bar-emoji {
  font-size: 16px;
  margin-bottom: 4px;
}

.trend-bar .bar-label {
  font-size: 9px;
  color: #666;
  text-align: center;
  position: absolute;
  bottom: 2px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trend-bar.has-data {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.trend-day-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: #999;
}

/* 历史记录列表 */
.history-list {
  max-height: 300px;
  overflow-y: auto;
}

.history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  color: #ccc;
}

.history-empty .empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.history-empty .empty-text {
  font-size: var(--font-body);
  color: #999;
  margin-bottom: 6px;
}

.history-empty .empty-hint {
  font-size: var(--font-small);
  color: #bbb;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fafafa;
  border-radius: 12px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.history-item:active {
  transform: scale(0.98);
  background: #f0f0f0;
}

.history-emoji {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 12px;
}

.history-info {
  flex: 1;
}

.history-emotion {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.history-date {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.history-mode-tag {
  font-size: 16px;
  opacity: 0.6;
}

/* ==================== 模拟播放器样式 ==================== */

/* 播放器覆盖层 */
.player-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 2000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.player-overlay.active {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 播放器面板 */
.player-panel {
  width: 100%;
  max-width: 430px;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 24px 24px 0 0;
  padding: 20px;
  padding-bottom: 40px;
  animation: slideUp 0.3s ease;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  z-index: 100 !important;
  position: relative;
}

.player-close {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(30,30,50,0.06);
  border-radius: 50%;
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 101 !important;
  position: relative;
}

.player-close:active {
  transform: scale(0.9);
  background: rgba(255,255,255,0.2);
}

.player-category {
  font-size: var(--font-small);
  color: rgba(255,255,255,0.6);
}

/* 封面区域 */
.player-cover {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,220,150,0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}

.cover-icon {
  font-size: 80px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3));
}

/* 封面呼吸动画 */
.player-cover.breathing .cover-icon {
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* 播放信息 */
.player-info {
  text-align: center;
  margin-bottom: 24px;
}

.player-title {
  font-size: 24px;
  font-weight: 700;
  color: white;
  margin-bottom: 6px;
}

.player-subtitle {
  font-size: var(--font-small);
  color: rgba(255,255,255,0.6);
}

/* 进度条 */
.player-progress {
  margin-bottom: 24px;
}

.progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF8C42, #FFB74D);
  border-radius: 3px;
  width: 0%;
  transition: width 0.3s;
}

.progress-thumb {
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 0%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: left 0.3s;
}

.progress-times {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}

/* 控制按钮 */
.player-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-bottom: 30px;
}

.control-btn {
  border: none;
  background: transparent;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.control-btn:active {
  transform: scale(0.9);
}

.control-prev, .control-next {
  font-size: 28px;
  opacity: 0.8;
}

.control-play {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #FF8C42, #FF6B1A);
  border-radius: 50%;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(255,140,66,0.4);
}

.control-play:active {
  transform: scale(0.95);
}

/* 额外功能区 */
.player-extra {
  margin-top: auto;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.volume-icon {
  font-size: 20px;
  width: 28px;
  text-align: center;
}

.volume-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  outline: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.volume-value {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  width: 36px;
  text-align: right;
}

.sleep-timer-control {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 14px;
}

.timer-label {
  font-size: var(--font-small);
  color: rgba(30,30,50,0.85);
  display: block;
  margin-bottom: 10px;
}

.timer-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.timer-btn {
  padding: 8px 14px;
  background: rgba(30,30,50,0.06);
  border: none;
  border-radius: 20px;
  color: rgba(30,30,50,0.85);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.timer-btn:active {
  transform: scale(0.95);
}

.timer-btn.active {
  background: var(--accent);
  color: white;
}

/* ==================== 迷你播放条 ==================== */
.mini-player {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  width: calc(100% - 32px);
  max-width: 398px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  z-index: 1500;
  opacity: 0;
  transition: all 0.3s ease;
}

.mini-player.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.mini-cover {
  font-size: 28px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30,30,50,0.06);
  border-radius: 8px;
}

.mini-info {
  flex: 1;
  min-width: 0;
}

.mini-title {
  font-size: var(--font-body);
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-status {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}

.mini-play-btn {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #FF8C42, #FF6B1A);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-play-btn:active {
  transform: scale(0.9);
}

.mini-close-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

.mini-close-btn:active {
  transform: scale(0.9);
}

/* 播放中动画 */
.mini-player.active .mini-cover {
  animation: miniBreathe 2s ease-in-out infinite;
}

@keyframes miniBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 儿童模式适配 */
[data-mode="child"] .emotion-history-section {
  border-radius: 24px;
}

[data-mode="child"] .history-item {
  border-radius: 16px;
}

[data-mode="child"] .history-emoji {
  border-radius: 14px;
}

/* 老人模式适配 */
[data-mode="elderly"] .emotion-history-section {
  border-radius: 20px;
}

[data-mode="elderly"] .emotion-options-grid {
  grid-template-columns: repeat(2, 1fr);
}

[data-mode="elderly"] .history-item {
  padding: 16px;
}

[data-mode="elderly"] .player-title {
  font-size: 28px;
}

[data-mode="elderly"] .mini-title {
  font-size: 18px;
}


/* ==================== 健康预警页面 ==================== */
.health-alert-content {
  padding: var(--spacing-md);
}

/* 预警等级卡片 */
.alert-overview-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.alert-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.alert-level-badge.alert-normal {
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  color: #155724;
}

.alert-level-badge.alert-warning {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
  color: #856404;
}

.alert-level-badge.alert-danger {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  color: #721c24;
}

.level-icon {
  font-size: 20px;
}

.level-text {
  font-size: var(--font-body);
  font-weight: 600;
}

.alert-summary {
  display: flex;
  justify-content: space-around;
  gap: 12px;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.summary-icon {
  font-size: 24px;
}

.summary-label {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.summary-value {
  font-size: var(--font-heading);
  font-weight: 700;
  color: var(--text);
}

.summary-value.alert-normal {
  color: #28a745;
}

.summary-value.alert-mid {
  color: #ffc107;
}

.summary-value.alert-high {
  color: #dc3545;
}

/* 预警设置区域 */
.alert-settings-section {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: var(--spacing-lg);
}

.alert-settings-section .section-title {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.settings-list {
  margin-bottom: 16px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.setting-icon {
  font-size: 20px;
}

.setting-name {
  font-size: var(--font-body);
  color: var(--text);
}

/* 开关样式 */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 26px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.switch-toggle input:checked + .toggle-slider {
  background-color: var(--accent);
}

.switch-toggle input:checked + .toggle-slider:before {
  transform: translateX(22px);
}

/* 阈值设置 */
.threshold-settings {
  background: #f8f9fa;
  border-radius: var(--radius);
  padding: 12px;
}

.threshold-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  gap: 10px;
}

.threshold-label {
  flex: 1;
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.threshold-input {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: var(--font-small);
  text-align: center;
}

.threshold-input:focus {
  outline: none;
  border-color: var(--accent);
}

.threshold-unit {
  font-size: var(--font-small);
  color: var(--text-secondary);
  width: 50px;
}

/* 预警历史区域 */
.alert-history-section {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.alert-history-section .section-title {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.alert-history-list {
  max-height: 300px;
  overflow-y: auto;
}

.alert-record-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid #E8E8E8;
  margin-bottom: 8px;
}

.record-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 10px;
}

.record-info {
  flex: 1;
}

.record-message {
  font-size: var(--font-body);
  color: var(--text);
  margin-bottom: 2px;
}

.record-time {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.record-value {
  font-size: var(--font-heading);
  font-weight: 700;
  color: var(--text);
}

/* 历史空状态（复用情绪打卡的样式） */
.history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  color: #ccc;
}

.history-empty .empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.history-empty .empty-text {
  font-size: var(--font-body);
  color: #999;
  margin-bottom: 6px;
}

.history-empty .empty-hint {
  font-size: var(--font-small);
  color: #bbb;
}

/* 老人模式适配 */
[data-mode="elderly"] .alert-overview-card {
  padding: 24px;
}

[data-mode="elderly"] .summary-item {
  gap: 6px;
}

[data-mode="elderly"] .summary-icon {
  font-size: 28px;
}

[data-mode="elderly"] .setting-item {
  padding: 14px 0;
}

[data-mode="elderly"] .setting-name {
  font-size: 18px;
}

[data-mode="elderly"] .toggle-slider {
  width: 56px;
  height: 30px;
}

[data-mode="elderly"] .toggle-slider:before {
  height: 24px;
  width: 24px;
}

[data-mode="elderly"] .switch-toggle input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

[data-mode="elderly"] .threshold-input {
  width: 70px;
  padding: 8px;
  font-size: 16px;
}

[data-mode="elderly"] .alert-record-item {
  padding: 14px;
}

[data-mode="elderly"] .record-icon {
  width: 48px;
  height: 48px;
  font-size: 28px;
}

/* ==================== 添加新设备按钮 ==================== */
.add-device-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #FF8C42, #FF7A2F);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(255,140,66,0.3);
}

.add-device-btn:active {
  transform: scale(0.97);
}

.add-device-btn:hover {
  box-shadow: 0 6px 16px rgba(255,140,66,0.4);
}

.add-device-btn-icon {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.add-device-btn-text {
  font-size: 16px;
}

/* ==================== 成长记录页面 ==================== */
.growth-record-page .page-content {
  padding: 16px;
  padding-bottom: 100px;
}

.growth-overview {
  display: flex;
  background: linear-gradient(135deg, #A8DADC, #B5EAD7);
  border-radius: 16px;
  padding: 20px 12px;
  margin-bottom: 20px;
}

.growth-stat {
  flex: 1;
  text-align: center;
}

.growth-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.growth-stat-label {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
}

.growth-timeline {
  margin-bottom: 20px;
}

.growth-timeline-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.growth-timeline-item.milestone {
  background: #FFF8E1;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #FFD166;
}

.growth-timeline-icon {
  font-size: 20px;
  margin-right: 12px;
  flex-shrink: 0;
}

.growth-timeline-content {
  flex: 1;
}

.growth-timeline-text {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.growth-timeline-date {
  font-size: 14px;
  color: #999;
  margin-top: 4px;
}

.growth-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.growth-badge {
  text-align: center;
  padding: 12px 4px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eee;
  transition: all 0.2s;
}

.growth-badge.unlocked {
  border-color: #FFD166;
  background: #FFF8E1;
}

.growth-badge.locked {
  opacity: 0.45;
  filter: grayscale(0.8);
}

.growth-badge .badge-icon {
  font-size: 28px;
  margin-bottom: 4px;
}

.growth-badge .badge-name {
  font-size: 11px;
  font-weight: 600;
  color: #333;
}

.growth-badge .badge-desc {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
}

/* 正在输入动画 */
.ai-typing {
  color: var(--text-secondary);
  font-style: italic;
  animation: typingPulse 1.2s infinite;
}
@keyframes typingPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* 语音录音状态 */
.input-tool-btn.recording {
  background: #FF3B30;
  color: white;
  animation: pulse-record 1.2s ease-in-out infinite;
}
@keyframes pulse-record {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
/* ==================== 好友功能样式 ==================== */

/* 好友卡片 */
.friend-card {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid #E8E8E8;
  cursor: pointer;
  transition: background 0.2s;
}
.friend-card:active {
  background: #FFF5EE;
}
.friend-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFF3E8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.friend-info {
  flex: 1;
  margin-left: 12px;
  overflow: hidden;
}
.friend-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}
.friend-last-msg {
  font-size: 14px;
  color: #999;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-chat-btn {
  font-size: 20px;
  opacity: 0.6;
  flex-shrink: 0;
  margin-left: 8px;
}

/* 好友聊天页面 */
.friend-chat-page {
  background: #FDFBF7;
}
.friend-chat-page .page-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}
.friend-chat-page .chat-messages {
  height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 12px;
  background: #FDFBF7;
}
.friend-chat-page .chat-input-bar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: white;
  border-top: 1px solid #f0f0f0;
  gap: 8px;
}
.friend-chat-page .chat-input-bar input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #E8E8E8;
  border-radius: 20px;
  font-size: 14px;
  outline: none;
  background: #FAFAFA;
}
.friend-chat-page .chat-input-bar input:focus {
  border-color: #FF8C42;
  background: #FFF9F5;
}
.friend-chat-page .send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FF8C42;
  color: white;
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.friend-chat-page .send-btn:active {
  background: #E67A30;
}

/* 好友聊天消息气泡 */
.friend-chat-page .message {
  display: flex;
  margin-bottom: 12px;
  align-items: flex-start;
}
.friend-chat-page .message.user {
  flex-direction: row-reverse;
}
.friend-chat-page .message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: #FFF3E8;
}
.friend-chat-page .message.user .message-avatar {
  background: #E8F5E9;
}
.friend-chat-page .message-content {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  background: white;
  border: 1px solid #E8E8E8;
  margin: 0 8px;
}
.friend-chat-page .message.user .message-content {
  background: #FF8C42;
  border-color: #FF8C42;
  color: white;
}
.friend-chat-page .ai-name-tag {
  font-size: 11px;
  color: #888;
}
.friend-chat-page .ai-name-tag::after {
  content: " AI生成";
  display: inline-block;
  font-size: 10px;
  color: #aaa;
  background: rgba(0,0,0,0.04);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1.4;
}

/* ========== 商品详情页购买栏 ========== */
.product-bottom-bar {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  gap: 10px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  z-index: 150;
  border-top: 1px solid #f0f0f0;
  box-sizing: border-box;
}

/* 老人模式适配 - 底部导航更高 */
[data-mode="elderly"] .product-bottom-bar {
  bottom: 80px;
}

/* 商品详情页面内容避免被底部栏遮挡 */
.product-detail-page .product-detail-container {
  padding-bottom: 140px;
}

.quantity-selector {
  display: flex;
  align-items: center;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  overflow: hidden;
}

.quantity-selector button {
  width: 32px;
  height: 32px;
  border: none;
  background: #F8F8F8;
  font-size: 16px;
  cursor: pointer;
}

.quantity-selector span {
  width: 36px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}

.add-cart-btn {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid #FF8C42;
  background: white;
  color: #FF8C42;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.buy-now-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: linear-gradient(135deg, #FF8C42, #FF7A2F);
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ========== 确认订单页面 ========== */
.checkout-page .checkout-content {
  padding-bottom: 80px;
}

.checkout-section {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.checkout-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #F0F0F0;
}

.address-form .form-item {
  margin-bottom: 12px;
}

.address-form label {
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}

.address-form input,
.address-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
}

.address-form input:focus,
.address-form textarea:focus {
  border-color: #FF8C42;
}

.checkout-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #F5F5F5;
}

.checkout-item:last-child {
  border-bottom: none;
}

.checkout-item-icon {
  font-size: 28px;
  width: 40px;
  text-align: center;
}

.checkout-item-info {
  flex: 1;
  margin-left: 8px;
}

.checkout-item-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.checkout-item-price {
  font-size: 14px;
  color: #999;
  margin-top: 2px;
}

.checkout-item-total {
  font-size: 15px;
  font-weight: 600;
  color: #FF8C42;
}

.order-summary .summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  color: #666;
}

.order-summary .summary-row.total {
  padding-top: 12px;
  border-top: 1px solid #F0F0F0;
  margin-top: 4px;
}

.submit-order-btn {
  width: 100%;
  padding: 14px;
  border: none;
  background: linear-gradient(135deg, #FF8C42, #FF7A2F);
  color: white;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}

/* 商品详情页底部留白 */
.product-detail-container {
  padding-bottom: 80px !important;
}

/* 会员权益卡片优化 */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: var(--spacing-md);
}

.showcase-item {
  background: white !important;
  border: 1px solid #E8E8E8 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  padding: 20px 12px !important;
  border-radius: 12px !important;
  transition: all 0.3s !important;
}

.showcase-item:active {
  transform: scale(0.95) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
}

/* 老人模式下权益卡片放大 */
[data-mode="elderly"] .showcase-item {
  padding: 24px 16px !important;
}

[data-mode="elderly"] .showcase-icon {
  font-size: 40px !important;
}

[data-mode="elderly"] .showcase-name {
  font-size: 18px !important;
}

[data-mode="elderly"] .showcase-desc {
  font-size: 15px !important;
}

/* 修复好友聊天输入框被底部导航覆盖 */
.friend-chat-page .chat-messages {
  height: calc(100vh - 220px) !important;
  padding-bottom: 80px !important;
}

.friend-chat-page .chat-input-bar {
  position: fixed !important;
  bottom: 60px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 430px !important;
  box-sizing: border-box !important;
  z-index: 150 !important;
  background: white !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06) !important;
}

/* 老人模式适配 - 底部导航更高 */
[data-mode="elderly"] .friend-chat-page .chat-input-bar {
  bottom: 80px !important;
}

[data-mode="elderly"] .friend-chat-page .chat-messages {
  height: calc(100vh - 260px) !important;
}

/* 好友聊天页面顶部导航栏样式 */
.friend-chat-page .page-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, #FF8C42, #FF7A2F) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(255, 140, 66, 0.3) !important;
}

.friend-chat-page .page-header .page-title {
  color: white !important;
  font-weight: 600 !important;
}

.friend-chat-page .back-btn {
  color: white !important;
  background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important; border: 1px solid rgba(255,140,66,0.3) !important;
}

/* 老人模式适配 */
[data-mode="elderly"] .friend-chat-page .page-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, #FF7A2F, #FF6B1A) !important;
}

/* 儿童模式适配 */
[data-mode="child"] .friend-chat-page .page-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, #A8DADC, #8AC7C7) !important;
}

[data-mode="child"] .friend-chat-page .page-header .page-title {
  color: #333 !important;
}

[data-mode="child"] .friend-chat-page .back-btn {
  color: #333 !important;
  background: rgba(255, 255, 255, 0.9) !important;
}







/* 修复好友聊天输入框按钮样式 */
.friend-chat-page .chat-input-bar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  padding-left: 8px !important;
}

.friend-chat-page .input-action-btn {
  width: 36px !important;
  height: 36px !important;
  border: none !important;
  background: #F5F5F5 !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
  flex-shrink: 0 !important;
}

.friend-chat-page .input-action-btn:active {
  background: #FF8C42 !important;
  transform: scale(0.95) !important;
}

.friend-chat-page .input-action-btn.recording {
  background: #FF4D4F !important;
  animation: pulse 1s infinite !important;
}

.friend-chat-page .chat-input-bar input {
  flex: 1 !important;
  height: 36px !important;
  border: 1px solid #E8E8E8 !important;
  border-radius: 18px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  background: #FAFAFA !important;
  outline: none !important;
}

.friend-chat-page .chat-input-bar input:focus {
  border-color: #FF8C42 !important;
  background: #FFF9F5 !important;
}

.friend-chat-page .send-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #FF8C42 !important;
  color: white !important;
  border: none !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 77, 79, 0);
  }
}

/* 聊天消息中的图片和文件显示 */
.message-image {
  max-width: 200px;
  max-height: 200px;
  border-radius: 12px;
  cursor: pointer;
  object-fit: cover;
}

.message-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #F8F9FA;
  border-radius: 12px;
  border: 1px solid #E8E8E8;
  cursor: pointer;
}

.message-file-icon {
  font-size: 32px;
}

.message-file-info {
  flex: 1;
}

.message-file-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

.message-file-size {
  font-size: 14px;
  color: #999;
}

/* 修复商品详情底部购买栏按钮高度 */
.product-bottom-bar .quantity-selector {
  display: flex;
  align-items: center;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  overflow: hidden;
  height: 40px;
}

.product-bottom-bar .quantity-selector button {
  width: 36px;
  height: 40px;
  border: none;
  background: #F8F8F8;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-bottom-bar .quantity-selector span {
  width: 36px;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-bottom-bar .add-cart-btn {
  flex: 1;
  height: 40px;
  padding: 0 16px;
  border: 1px solid #FF8C42;
  background: white;
  color: #FF8C42;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-bottom-bar .buy-now-btn {
  flex: 1;
  height: 40px;
  padding: 0 16px;
  border: none;
  background: linear-gradient(135deg, #FF8C42, #FF7A2F);
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 确保按钮emoji正确显示 */
.chat-action-btn,
.input-action-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple Color Emoji", Roboto, sans-serif;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* 修复商品详情底部按钮文字对齐 */
.product-bottom-bar button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}


/* 老人模式场景网格改为2列，确保名字能放下 */
@media (max-width: 480px) {
  [data-mode="elderly"] .scenes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [data-mode="elderly"] .scene-name {
    font-size: 16px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    max-width: none !important;
  }
}





/* 终极方案：老人模式所有场景名称强制缩小字体，确保不换行 */
[data-mode="elderly"] .scene-name,
[data-mode="elderly"] [class*="scene"] [class*="name"],
[data-mode="elderly"] [class*="scene"] [class*="title"] {
  font-size: 14px !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow: visible !important;
}




/* 老人模式聊天名称缩小，确保"灵狐·小暖"在一行显示 */
[data-mode="elderly"] .chat-name {
  font-size: 18px !important;
  white-space: nowrap !important;
}


/* 老人模式：聊天头部所有元素都不换行，强制一行显示 */
[data-mode="elderly"] .chat-header,
[data-mode="elderly"] .chat-header > *:not(#voice-toggle-btn),
[data-mode="elderly"] .chat-name,
[data-mode="elderly"] .chat-name * {
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  font-size: 16px !important;
}

[data-mode="elderly"] #voice-toggle-btn {
	font-size: 22px !important;
}




/* 老人模式：chat-name字体强制缩小到14px，确保能放下 */
[data-mode="elderly"] .chat-name {
  font-size: 14px !important;
  white-space: nowrap !important;
  display: inline-block !important;
}



/* 老人模式快捷入口改为2列，美观不挤 */
[data-mode="elderly"] .quick-access-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 15px !important;
}


/* 老人模式：一键场景改为2列，2排共4个 */
[data-mode="elderly"] .quick-scenes-grid,
[data-mode="elderly"] [class*="quick-scene"],
[data-mode="elderly"] [class*="scenes-grid"] {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}



/* 老人模式：首页设备名称缩小，确保"灵狐·小暖"一行显示 */
[data-mode="elderly"] .device-name,
[data-mode="elderly"] [class*="device"] [class*="name"],
[data-mode="elderly"] [class*="card"] [class*="title"],
[data-mode="elderly"] .home-device-name {
  font-size: 16px !important;
  white-space: nowrap !important;
}



/* 老人模式：所有可能的名称类都强制缩小 */
[data-mode="elderly"] .home-device-name,
[data-mode="elderly"] .device-title,
[data-mode="elderly"] .device-card-name,
[data-mode="elderly"] .main-device-name,
[data-mode="elderly"] [class*="name"],
[data-mode="elderly"] [class*="title"] {
  font-size: 18px !important;
  white-space: nowrap !important;
}



/* 老人模式：scene-grid强制2列显示，最高优先级 */
[data-mode="elderly"] .scene-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}


/* 老人模式：调整设备名称大小为24px */
[data-mode="elderly"] .device-name {
  font-size: 24px !important;
  white-space: nowrap !important;
}


/* 老人模式：首页所有设备相关名称强制24px，最高优先级 */
body[data-mode="elderly"] [class*="device"],
body[data-mode="elderly"] [class*="device"] [class*="name"],
body[data-mode="elderly"] [class*="device"] [class*="title"],
body[data-mode="elderly"] .main-device [class*="name"],
body[data-mode="elderly"] .device-name {
  font-size: 24px !important;
  white-space: nowrap !important;
}



/* 老人模式：首页功能块名称加粗加大 */
[data-mode="elderly"] .qa-label,
[data-mode="elderly"] .scene-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}


/* 老人模式：首页所有功能块文字统一大小，整齐美观 */
[data-mode="elderly"] .qa-label,
[data-mode="elderly"] .scene-name,
[data-mode="elderly"] [class*="qa"] [class*="label"],
[data-mode="elderly"] [class*="scene"] [class*="name"],
[data-mode="elderly"] .quick-access-item *,
[data-mode="elderly"] .scene-card * {
  font-size: 20px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}


/* 老人模式：电量显示文字也改成20px */
[data-mode="elderly"] .battery-percentage,
[data-mode="elderly"] [class*="battery"],
[data-mode="elderly"] [class*="电量"] {
  font-size: 20px !important;
  font-weight: 700 !important;
}


/* 老人模式：电量显示文字也改成20px */
[data-mode="elderly"] .battery-percentage,
[data-mode="elderly"] [class*="battery"],
[data-mode="elderly"] [class*="电量"] {
  font-size: 20px !important;
  font-weight: 700 !important;
}


/* 老人模式：所有电量相关文字强制20px粗体 */
[data-mode="elderly"] [class*="battery"],
[data-mode="elderly"] [class*="battery"] *,
[data-mode="elderly"] [class*="电量"],
[data-mode="elderly"] [class*="电量"] * {
  font-size: 20px !important;
  font-weight: 700 !important;
}


/* ========== 2026-05-10 成人模式调整 ========== */

/* 成人模式：首页功能卡片文字14px粗体 */
[data-mode="adult"] .stat-label {
  font-size: 14px !important;
  font-weight: bold;
}
[data-mode="adult"] .scene-name {
  font-size: 14px !important;
  font-weight: bold;
}
[data-mode="adult"] .qa-label {
  font-size: 14px !important;
  font-weight: bold;
}

/* 成人模式：一键场景和快捷入口一行2个卡片 */
[data-mode="adult"] .scene-grid {
  grid-template-columns: repeat(2, 1fr);
}
[data-mode="adult"] .quick-access-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* 成人模式：设备控制页面功能卡片文字14px粗体 */
[data-mode="adult"] .control-title {
  font-size: 14px;
  font-weight: bold;
}
[data-mode="adult"] .control-card-name {
  font-size: 14px;
  font-weight: bold;
}
[data-mode="adult"] .scene-mode-name {
  font-size: 14px;
  font-weight: bold;
}

/* 成人模式：场景模式自动换行防溢出 */
[data-mode="adult"] .scene-modes {
  flex-wrap: wrap;
  overflow-x: visible;
}
[data-mode="adult"] .scene-mode-item {
  padding: 8px 12px;
  flex: 1 1 calc(33% - 8px);
  min-width: calc(33% - 8px);
}

/* ========== 2026-05-10 儿童模式调整 ========== */

/* 儿童模式：首页功能卡片文字16px粗体 */
[data-mode="child"] .stat-label {
  font-size: 16px;
  font-weight: bold;
}
[data-mode="child"] .scene-name {
  font-size: 16px;
  font-weight: bold;
}
[data-mode="child"] .qa-label {
  font-size: 16px;
  font-weight: bold;
}
[data-mode="child"] .cf-name {
  font-size: 16px;
  font-weight: bold;
}

/* 儿童模式：设备控制页面功能卡片文字16px粗体 */
[data-mode="child"] .control-title {
  font-size: 16px;
  font-weight: bold;
}
[data-mode="child"] .control-card-name {
  font-size: 16px;
  font-weight: bold;
}
[data-mode="child"] .scene-mode-name {
  font-size: 16px;
  font-weight: bold;
}

/* 儿童模式：场景模式自动换行防溢出 */
[data-mode="child"] .scene-modes {
  flex-wrap: wrap;
  overflow-x: visible;
}
[data-mode="child"] .scene-mode-item {
  padding: 8px 12px;
  flex: 1 1 calc(33% - 8px);
  min-width: calc(33% - 8px);
}

/* 老人模式：场景模式自动换行防溢出 */
[data-mode="elderly"] .scene-modes {
  flex-wrap: wrap;
  overflow-x: visible;
}
[data-mode="elderly"] .scene-mode-item {
  padding: 8px 12px;
  flex: 1 1 calc(33% - 8px);
  min-width: calc(33% - 8px);
}

/* 老人模式：VIP权益标签一行显示 */
[data-mode="elderly"] .membership-features-preview {
  font-size: 16px;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}

/* 老人模式：设备控制页面功能卡片文字20px粗体 */
[data-mode="elderly"] .control-title {
  font-size: 18px;
  font-weight: bold;
}
[data-mode="elderly"] .control-card-name {
  font-size: 18px;
  font-weight: bold;
}
[data-mode="elderly"] .scene-mode-name {
  font-size: 18px;
  font-weight: bold;
}

/* 老人模式：设备控制页面功能卡片文字18px粗体 */
[data-mode="elderly"] .control-title {
  font-size: 18px;
  font-weight: bold;
}
[data-mode="elderly"] .control-card-name {
  font-size: 18px;
  font-weight: bold;
}
[data-mode="elderly"] .scene-mode-name {
  font-size: 18px;
  font-weight: bold;
}


/* ==================== 原创内容样式（自动生成） ==================== */

/* --- 睡前故事样式 --- */
.story-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: visible !important;
  padding-bottom: 4px;
}
.story-filter-tab {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  background: rgba(30,30,50,0.06);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.story-filter-tab.active {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.story-list-new {
  max-height: 400px;
  overflow-y: auto;
}
.story-item-new {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.story-item-new:active {
  transform: scale(0.98);
  background: rgba(255,255,255,0.15);
}
.story-thumb-new {
  font-size: 24px;
  width: 40px;
  text-align: center;
}
.story-info-new {
  flex: 1;
}
.story-title-new {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.story-duration-new {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.story-arrow {
  font-size: 16px;
  color: rgba(255,255,255,0.4);
}

/* --- 冥想引导词样式 --- */
.meditation-filter-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: visible !important;
  padding-bottom: 4px;
}
.meditation-filter-tab {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  background: rgba(30,30,50,0.06);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.meditation-filter-tab.active {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.meditation-list {
  max-height: 400px;
  overflow-y: auto;
}
.meditation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.meditation-item:active {
  transform: scale(0.98);
  background: rgba(255,255,255,0.15);
}
.meditation-icon {
  font-size: 24px;
  width: 40px;
  text-align: center;
}
.meditation-info {
  flex: 1;
}
.meditation-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}
.meditation-meta {
  font-size: 12px;
  color: #999;
}
.meditation-arrow {
  font-size: 18px;
  color: #ccc;
}

/* --- 故事/冥想阅读器样式 --- */
.content-reader-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}
.content-reader-modal.active {
  display: flex;
}
.reader-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
}
.reader-content {
  position: relative;
  width: 92%;
  max-width: 480px;
  max-height: 85vh;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: readerSlideUp 0.3s ease;
}
@keyframes readerSlideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.reader-header {
  padding: 20px 20px 12px;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}
.reader-close-btn {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #f5f5f5;
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}
.reader-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
  padding-right: 40px;
}
.reader-meta {
  font-size: 13px;
  color: #999;
}
.reader-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.reader-body p {
  font-size: 15px;
  line-height: 1.9;
  color: #444;
  margin-bottom: 12px;
}
.reader-footer {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
}
.reader-done-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #6C5CE7, #a29bfe);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.reader-done-btn:active {
  transform: scale(0.98);
}

/* --- 呼吸动画（冥想） --- */
.breathing-circle-container {
  display: flex;
  justify-content: center;
  padding: 24px 0 12px;
}
.breathing-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a29bfe, #6C5CE7);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(108,92,231,0.3);
}
.breathing-circle.breathing {
  animation: breathe 8s ease-in-out infinite;
}
.breathing-text {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
@keyframes breathe {
  0%, 100% { transform: scale(0.7); box-shadow: 0 0 20px rgba(108,92,231,0.2); }
  25% { transform: scale(1); box-shadow: 0 0 40px rgba(108,92,231,0.5); }
  50% { transform: scale(1); box-shadow: 0 0 40px rgba(108,92,231,0.5); }
  75% { transform: scale(0.7); box-shadow: 0 0 20px rgba(108,92,231,0.2); }
}
.meditation-body {
  max-height: 45vh;
}

/* --- 健康小贴士样式 --- */
.health-tips-section {
  margin: 20px 16px;
}
.health-tips-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
}
.health-tip-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}
.health-tip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.health-tip-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.health-tip-refresh {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.3s;
}
.health-tip-refresh:active {
  transform: rotate(180deg);
}
.health-tip-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}
.health-tip-content {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
}
.health-tip-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}
.health-tip-date {
  font-size: 12px;
  color: #999;
}

/* --- 情感语录样式 --- */
.emotion-quote-section {
  padding: 0 16px 16px;
}
.emotion-quote-card {
  background: linear-gradient(135deg, #fff5f5, #fff0f6);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}
.quote-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.quote-category {
  font-size: 12px;
  color: #e17055;
  font-weight: 600;
  margin-bottom: 6px;
}
.quote-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}
.quote-content {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  font-style: italic;
  margin-bottom: 14px;
}
.quote-refresh-btn {
  background: linear-gradient(135deg, #e17055, #fd79a8);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.quote-refresh-btn:active {
  transform: scale(0.95);
}

/* --- 趣味问答入口样式 --- */
.quiz-entry-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(135deg, #6C5CE7, #a29bfe);
  border-radius: 16px;
  margin: 12px 0;
  cursor: pointer;
  transition: all 0.2s;
}
.quiz-entry-card:active {
  transform: scale(0.98);
}
.quiz-entry-icon {
  font-size: 32px;
}
.quiz-entry-info {
  flex: 1;
}
.quiz-entry-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.quiz-entry-desc {
  font-size: 12px;
  color: rgba(30,30,50,0.85);
  margin-top: 2px;
}
.quiz-entry-arrow {
  font-size: 20px;
  color: rgba(255,255,255,0.6);
}

/* --- 趣味问答页面样式 --- */
.fun-quiz-page .page-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
}
.quiz-score-display {
  font-size: 14px;
  font-weight: 700;
  color: #6C5CE7;
  background: #f0edff;
  padding: 4px 12px;
  border-radius: 20px;
}
.fun-quiz-container {
  padding: 16px;
}
.quiz-category-bar {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  gap: 8px !important;
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: visible !important;
  padding-bottom: 4px;
}
.quiz-tab {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  background: #f0f0f0;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.quiz-tab.active {
  background: #6C5CE7;
  color: #fff;
}
.quiz-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.quiz-progress-bar {
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6C5CE7, #a29bfe);
  border-radius: 3px;
  transition: width 0.3s;
}
.quiz-progress-text {
  font-size: 12px;
  color: #999;
  margin-bottom: 14px;
}
.quiz-category-badge {
  display: inline-block;
  padding: 3px 10px;
  background: #f0edff;
  color: #6C5CE7;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}
.quiz-question {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
  margin-bottom: 18px;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f8f9fa;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}
.quiz-option:active {
  transform: scale(0.98);
}
.option-letter {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #666;
  flex-shrink: 0;
}
.option-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}
.quiz-option.correct {
  background: #e8f5e9;
  border-color: #4caf50;
}
.quiz-option.correct .option-letter {
  background: #4caf50;
  color: #fff;
}
.quiz-option.wrong {
  background: #ffebee;
  border-color: #f44336;
}
.quiz-option.wrong .option-letter {
  background: #f44336;
  color: #fff;
}
.quiz-explanation {
  background: #f0f7ff;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.explanation-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}
.explanation-text {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}
.quiz-next-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #6C5CE7, #a29bfe);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.quiz-next-btn:active {
  transform: scale(0.98);
}
.quiz-result-card {
  text-align: center;
  padding: 40px 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.result-emoji {
  font-size: 64px;
  margin-bottom: 16px;
}
.result-score {
  font-size: 36px;
  font-weight: 800;
  color: #6C5CE7;
}
.result-percent {
  font-size: 16px;
  color: #999;
  margin: 8px 0;
}
.result-message {
  font-size: 16px;
  color: #555;
  margin-bottom: 24px;
}
.quiz-retry-btn {
  padding: 12px 32px;
  background: linear-gradient(135deg, #6C5CE7, #a29bfe);
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.quiz-retry-btn:active {
  transform: scale(0.95);
}
.quiz-empty {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 14px;
}


/* ==================== 公版内容+真实音频样式 ==================== */

/* --- 经典童话标签筛选 --- */
.story-filter-bar .story-filter-tab.classic-tab {
  background: rgba(255, 200, 100, 0.2);
  color: #ffc864;
}
.story-filter-bar .story-filter-tab.classic-tab.active {
  background: rgba(255, 200, 100, 0.4);
  color: #fff;
}

.classic-tale-item {
  border-left: 3px solid #ffc864;
}

.classic-tale-item .story-thumb-new {
  background: rgba(255, 200, 100, 0.15);
  border-radius: 8px;
}

.classic-tales-section-title {
  font-size: 14px;
  color: rgba(255, 200, 100, 0.8);
  margin: 8px 0 4px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* --- 白噪音增强样式 --- */
.sound-category-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  overflow-x: visible !important;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.sound-category-bar::-webkit-scrollbar {
  display: none;
}
.sound-category-tab {
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.sound-category-tab.active {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.sound-category-tab:active {
  transform: scale(0.95);
}

.sound-grid-enhanced {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sound-card-enhanced {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}
.sound-card-enhanced:active {
  transform: scale(0.95);
}
.sound-card-enhanced.playing {
  background: var(--accent);
}
.sound-card-enhanced .sound-icon-enhanced {
  font-size: 24px;
  width: 32px;
  text-align: center;
}
.sound-card-enhanced .sound-info {
  flex: 1;
  min-width: 0;
}
.sound-card-enhanced .sound-name-enhanced {
  font-size: 13px;
  color: #fff;
  font-weight: 500;
}
.sound-card-enhanced .sound-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sound-card-enhanced .sound-wave {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  gap: 2px;
  align-items: flex-end;
  height: 16px;
}
.sound-card-enhanced.playing .sound-wave {
  display: flex;
}
.sound-wave span {
  display: block;
  width: 2px;
  background: #fff;
  border-radius: 1px;
  animation: soundWave 0.8s ease-in-out infinite alternate;
}
.sound-wave span:nth-child(1) { height: 4px; animation-delay: 0s; }
.sound-wave span:nth-child(2) { height: 8px; animation-delay: 0.1s; }
.sound-wave span:nth-child(3) { height: 12px; animation-delay: 0.2s; }
.sound-wave span:nth-child(4) { height: 6px; animation-delay: 0.3s; }

@keyframes soundWave {
  0% { transform: scaleY(0.5); }
  100% { transform: scaleY(1.2); }
}

/* --- 睡前故事音频按钮 --- */
.story-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(108, 92, 231, 0.3);
  color: #a29bfe;
  border: none;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.story-audio-btn:hover {
  background: rgba(108, 92, 231, 0.5);
  color: #fff;
}
.story-audio-btn:active {
  transform: scale(0.95);
}

.story-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(0, 184, 148, 0.3);
  color: #55efc4;
  border: none;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.story-read-btn:hover {
  background: rgba(0, 184, 148, 0.5);
  color: #fff;
}
.story-read-btn:active {
  transform: scale(0.95);
}

.story-action-bar {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: center;
}

/* --- 古诗词页面样式 --- */
.poem-reader-page .learn-tabs {
  display: none;
}

.poem-category-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: visible !important;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.poem-category-bar::-webkit-scrollbar {
  display: none;
}
.poem-tab {
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.poem-tab.active {
  background: rgba(108, 92, 231, 0.3);
  color: #a29bfe;
}
.poem-tab:active {
  transform: scale(0.95);
}

.poem-card {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid rgba(108, 92, 231, 0.5);
}
.poem-card:active {
  transform: scale(0.98);
  background: rgba(255,255,255,0.12);
}
.poem-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.poem-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.poem-card-author {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.poem-card-text {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin-bottom: 6px;
}
.poem-card-category {
  font-size: 11px;
  color: rgba(108, 92, 231, 0.6);
}

/* 古诗词详情 */
.poem-detail-content .reader-body {
  text-align: center;
}
.poem-original {
  text-align: center;
  margin-bottom: 20px;
}
.poem-line {
  font-size: 18px;
  line-height: 2;
  color: #fff;
  font-weight: 500;
  letter-spacing: 2px;
}
.poem-divider {
  height: 1px;
  background: rgba(30,30,50,0.06);
  margin: 16px 0;
}
.poem-section {
  text-align: left;
  margin-bottom: 16px;
}
.poem-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #a29bfe;
  margin-bottom: 8px;
}
.poem-section-text {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(30,30,50,0.85);
}

/* --- 成语故事页面样式 --- */
.idiom-category-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: visible !important;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.idiom-category-bar::-webkit-scrollbar {
  display: none;
}
.idiom-tab {
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.idiom-tab.active {
  background: rgba(253, 203, 110, 0.3);
  color: #fdcb6e;
}
.idiom-tab:active {
  transform: scale(0.95);
}

.idiom-card {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid rgba(253, 203, 110, 0.5);
}
.idiom-card:active {
  transform: scale(0.98);
  background: rgba(255,255,255,0.12);
}
.idiom-card-name {
  font-size: 20px;
  font-weight: 700;
  color: #fdcb6e;
  margin-bottom: 2px;
}
.idiom-card-pinyin {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 6px;
}
.idiom-card-meaning {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  margin-bottom: 6px;
}
.idiom-card-category {
  font-size: 11px;
  color: rgba(253, 203, 110, 0.5);
}

/* 成语详情 */
.idiom-detail-body {
  text-align: left;
}
.idiom-meaning-section,
.idiom-story-section,
.idiom-lesson-section {
  margin-bottom: 16px;
}
.idiom-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #fdcb6e;
  margin-bottom: 8px;
}
.idiom-section-text {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(30,30,50,0.85);
}
.idiom-lesson-text {
  background: rgba(253, 203, 110, 0.1);
  padding: 12px;
  border-radius: 8px;
  border-left: 3px solid #fdcb6e;
}
.idiom-divider {
  height: 1px;
  background: rgba(30,30,50,0.06);
  margin: 16px 0;
}

/* --- 学习中心入口卡片 --- */
.learn-entry-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.learn-entry-card:active {
  transform: scale(0.98);
  background: rgba(255,255,255,0.12);
}
.learn-entry-icon {
  font-size: 28px;
  width: 40px;
  text-align: center;
}
.learn-entry-info {
  flex: 1;
}
.learn-entry-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.learn-entry-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}
.learn-entry-arrow {
  font-size: 20px;
  color: rgba(255,255,255,0.3);
}

/* --- 通用空状态提示 --- */
.content-empty-hint {
  text-align: center;
  padding: 20px;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
}

/* 修复播放器关闭按钮 */
.player-close {
  width: 40px;
  height: 40px;
  font-size: 24px;
  color: rgba(30,30,50,0.85);
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101 !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.player-close:active {
  background: rgba(255,255,255,0.3);
  transform: scale(0.9);
}

/* 修复古诗词卡片文字颜色 - 适配浅色背景 */
.poem-card {
  background: #fff;
  border: 1px solid #eee;
  border-left: 3px solid #6C5CE7;
}
.poem-card-title {
  color: #333;
}
.poem-card-author {
  color: #999;
}
.poem-card-text {
  color: #555;
}
.poem-card-category {
  color: #6C5CE7;
}

/* 修复成语故事卡片文字颜色 - 适配浅色背景 */
.idiom-card {
  background: #fff;
  border: 1px solid #eee;
  border-left: 3px solid #fdcb6e;
}
.idiom-card-name {
  color: #e17055;
}
.idiom-card-pinyin {
  color: #999;
}
.idiom-card-meaning {
  color: #555;
}
.idiom-card-category {
  color: #e17055;
}

/* 修复古诗词详情弹窗文字颜色 */
.poem-line {
  color: #333 !important;
}
.poem-divider {
  background: #eee !important;
}
.poem-section-title {
  color: #6C5CE7 !important;
}
.poem-text-section {
  color: #333;
}
.poem-translation {
  color: #555;
  margin-top: 16px;
  line-height: 1.8;
  font-size: 14px;
}
.poem-translation strong {
  color: #6C5CE7;
}
.poem-appreciation {
  color: #555;
  margin-top: 12px;
  line-height: 1.8;
  font-size: 14px;
}
.poem-appreciation strong {
  color: #6C5CE7;
}

/* 修复成语详情弹窗文字颜色 */
.idiom-meaning-section, .idiom-story-section, .idiom-lesson-section {
  color: #555;
  line-height: 1.8;
  font-size: 14px;
  margin-bottom: 16px;
}
.idiom-meaning-section strong, .idiom-story-section strong, .idiom-lesson-section strong {
  color: #e17055;
}
.reader-subtitle {
  color: #999 !important;
}

/* 修复古诗词译文和赏析文字颜色 */
.poem-section-text {
  color: #555 !important;
  font-size: 14px;
  line-height: 1.8;
}
.poem-section {
  margin-bottom: 16px;
}

/* 修复成语故事详情文字颜色 */
.idiom-section-text {
  color: #555 !important;
  font-size: 14px;
  line-height: 1.8;
}
.idiom-meaning-section strong,
.idiom-story-section strong,
.idiom-lesson-section strong {
  color: #e17055 !important;
}

/* 分类标签手机适配 - 始终显示文字 */
.poem-tab, .idiom-tab {
  display: inline-flex !important;
  align-items: center;
  padding: 6px 14px !important;
  font-size: 13px !important;
  color: #666 !important;
  background: #f5f5f5;
  border-radius: 20px;
  margin: 0 4px 8px 0;
  cursor: pointer;
  white-space: nowrap;
}
.poem-tab.active, .idiom-tab.active {
  background: #6C5CE7 !important;
  color: #fff !important;
}
.category-tag {
  display: inline-flex !important;
  align-items: center;
  padding: 6px 14px !important;
  font-size: 13px !important;
  color: #666 !important;
  background: #f5f5f5;
  border-radius: 20px;
  margin: 0 4px 8px 0;
  cursor: pointer;
  white-space: nowrap;
}
.category-tag.active {
  background: #6C5CE7 !important;
  color: #fff !important;
}

/* 分类标签换行显示，防止被挡住 */
#poem-category-tabs, #idiom-category-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  padding: 8px 16px !important;
  gap: 6px;
  overflow: visible !important;
}
#poem-category-tabs .poem-tab,
#poem-category-tabs .category-tag,
#idiom-category-tabs .idiom-tab,
#idiom-category-tabs .category-tag {
  flex-shrink: 0;
  margin: 0 !important;
}

/* 修复学习中心入口卡片样式 */
.learn-entry-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  background: #fff !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.learn-entry-icon {
  font-size: 32px !important;
  width: 44px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
.learn-entry-info {
  flex: 1 !important;
  min-width: 0 !important;
}
.learn-entry-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #333 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
.learn-entry-desc {
  font-size: 12px !important;
  color: #999 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
.learn-entry-arrow {
  color: #ccc !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

/* 助眠中心分区标题 */
.sleep-zone-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 8px;
  margin-bottom: 4px;
}
.sleep-zone-icon {
  font-size: 22px;
}
.sleep-zone-label {
  font-size: 17px;
  font-weight: 700;
  color: #333;
}
.sleep-zone-desc {
  font-size: 12px;
  color: #999;
  margin-left: auto;
}

/* 分区标题增强 */
.sleep-zone-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  margin: 12px 0 0;
  background: linear-gradient(135deg, #f8f9ff, #eef1ff);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.sleep-zone-header:active {
  opacity: 0.8;
}
.sleep-zone-icon {
  font-size: 24px;
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.sleep-zone-label {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}
.sleep-zone-desc {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}
.sleep-zone-arrow {
  margin-left: auto;
  font-size: 14px;
  color: #ccc;
  transition: transform 0.3s;
}
.sleep-zone-header.collapsed .sleep-zone-arrow {
  transform: rotate(-90deg);
}
.sleep-zone-content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.sleep-zone-content.collapsed {
  max-height: 0 !important;
}

/* 故事和冥想筛选标签换行 */
.story-filter-bar, .meditation-filter-bar, .classic-tales-filter {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 8px 0 !important;
  overflow: visible !important;
}
.story-filter-bar .filter-tab, .meditation-filter-bar .meditation-filter-tab {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* 老人模式设备页面卡片文字缩小 */
body[data-mode="elderly"] .control-card-name { font-size: 18px !important; }
body[data-mode="elderly"] .control-title { font-size: 18px !important; }
body[data-mode="elderly"] .control-status { font-size: 18px !important; }
body[data-mode="elderly"] .scene-mode-name { font-size: 18px !important; }
body[data-mode="elderly"] .slider-label { font-size: 18px !important; }
body[data-mode="elderly"] .slider-value { font-size: 18px !important; }

/* 老人模式设备页面卡片文字缩小 */
body[data-mode="elderly"] .control-card-name { font-size: 18px !important; }
body[data-mode="elderly"] .control-title { font-size: 18px !important; }
body[data-mode="elderly"] .control-status { font-size: 18px !important; }
body[data-mode="elderly"] .scene-mode-name { font-size: 18px !important; }
body[data-mode="elderly"] .slider-label { font-size: 18px !important; }
body[data-mode="elderly"] .slider-value { font-size: 18px !important; }

/* 老人模式设备页面卡片文字缩小 */
body[data-mode="elderly"] .control-card-name { font-size: 18px !important; }
body[data-mode="elderly"] .control-title { font-size: 18px !important; }
body[data-mode="elderly"] .control-status { font-size: 18px !important; }
body[data-mode="elderly"] .scene-mode-name { font-size: 18px !important; }
body[data-mode="elderly"] .slider-label { font-size: 18px !important; }
body[data-mode="elderly"] .slider-value { font-size: 18px !important; }
body[data-mode=elderly] .control-card-name { font-size: 18px !important; }
body[data-mode=elderly] .control-title { font-size: 18px !important; }
body[data-mode=elderly] .control-status { font-size: 18px !important; }
body[data-mode=elderly] .scene-mode-name { font-size: 18px !important; }

/* ==================== 治愈音乐页面 ==================== */
.healing-music-page {
  background: var(--background);
}

.healing-music-container {
  padding: var(--spacing-md);
}

.healing-music-intro {
  text-align: center;
  padding: 12px 0 8px;
}

.healing-music-icon {
  font-size: 36px;
  margin-bottom: 4px;
}

.healing-music-text {
  font-size: var(--font-body);
  color: var(--text-secondary);
  line-height: 1.8;
}

.healing-category-bar {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.healing-category-bar::-webkit-scrollbar {
  display: none;
}

.healing-category-tab {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: var(--font-small);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s;
}
.healing-category-tab.active {
  background: var(--accent);
  color: white;
}

.healing-music-list {
  margin-top: 12px;
}

.healing-track-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border-radius: 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: all 0.3s;
}
.healing-track-card:active {
  transform: scale(0.98);
}
.healing-track-card.playing {
  background: var(--accent);
  color: white;
}
.healing-track-card.playing .healing-track-desc,
.healing-track-card.playing .healing-track-meta {
  color: rgba(255,255,255,0.7);
}

.healing-track-icon {
  font-size: 28px;
  width: 40px;
  text-align: center;
}

.healing-track-info {
  flex: 1;
  min-width: 0;
}

.healing-track-name {
  font-size: var(--font-body);
  font-weight: 600;
  margin-bottom: 2px;
}

.healing-track-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.healing-track-meta {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
  margin-top: 2px;
}

.healing-track-play {
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.05);
  border-radius: 50%;
}
.healing-track-card.playing .healing-track-play {
  background: rgba(255,255,255,0.2);
}

.healing-music-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: 8px;
  margin-top: 16px;
  font-size: 11px;
  color: var(--text-secondary);
}

/* ==================== 放松冥想页面 ==================== */
.relax-meditation-page {
  background: var(--background);
}

.meditation-container {
  padding: var(--spacing-md);
}

.meditation-intro {
  text-align: center;
  padding: 20px 0 16px;
}

.meditation-intro-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.meditation-intro-text {
  font-size: var(--font-body);
  color: var(--text-secondary);
  line-height: 1.8;
}

.meditation-guide-list {
  margin-top: 8px;
}

.meditation-guide-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;

  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.meditation-guide-card:active {
  transform: scale(0.98);
}

.meditation-guide-icon {
  font-size: 32px;
  width: 48px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.meditation-guide-info {
  flex: 1;
  position: relative;
  z-index: 1;
}

.meditation-guide-name {
  font-size: var(--font-body);
  font-weight: 600;
  color: #fff;
  margin-bottom: 3px;
}

.meditation-guide-desc {
  font-size: var(--font-small);
  color: rgba(30,30,50,0.85);
}

.meditation-guide-duration {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}

.meditation-guide-arrow {
  font-size: 18px;
  color: rgba(255,255,255,0.6);
  position: relative;
  z-index: 1;
}

/* ==================== 冥想执行页面 ==================== */
.meditation-session-page {
  overflow: hidden;
}

.meditation-bg {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  position: relative;
}

.meditation-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  z-index: 10;
}

.meditation-header .back-btn {
  color: #fff;
  background: rgba(255,255,255,0.15);
  border: none;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}

.meditation-timer-display {
  position: relative;
  margin-bottom: 40px;
}

.meditation-circle {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.meditation-progress-ring {
  position: absolute;
  width: 160px;
  height: 160px;
  transform: rotate(-90deg);
}

.meditation-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.2);
  stroke-width: 6;
}

.meditation-ring-progress {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 565.48;
  stroke-dashoffset: 565.48;
  transition: stroke-dashoffset 1s linear;
}

.meditation-time-text {
  font-size: 36px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 2px;
}

.meditation-step-text {
  font-size: 18px;
  color: #fff;
  text-align: center;
  line-height: 1.8;
  max-width: 300px;
  min-height: 80px;
  transition: opacity 0.3s;
  padding: 0 20px;
}

.meditation-controls {
  margin-top: 30px;
  z-index: 10;
  position: relative;
}

.meditation-btn {
  padding: 14px 48px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.meditation-btn-start {
  background: rgba(255,255,255,0.25);
  color: #fff;
  backdrop-filter: blur(10px);
}
.meditation-btn-start:active {
  transform: scale(0.95);
}

.meditation-bg-sound {
  position: absolute;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.meditation-bg-label {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}

.meditation-bg-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.meditation-bg-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.3);
  border-radius: 24px;
  transition: 0.3s;
}

.toggle-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}

.meditation-bg-toggle input:checked + .toggle-slider {
  background: rgba(255,255,255,0.6);
}

.meditation-bg-toggle input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* 老人模式：设备页面功能卡片字号18px */
[data-mode="elderly"] .device-page .scene-card *,
[data-mode="elderly"] .device-page [class*="control-card"] * {
  font-size: 18px !important;
}

/* 老人模式：设备页面卡片字号强制20px，覆盖全局24px */
body[data-mode="elderly"] .device-page .control-card-name,
body[data-mode="elderly"] .device-page .control-title,
body[data-mode="elderly"] .device-page .scene-mode-name,
body[data-mode="elderly"] .device-page .scene-name,
body[data-mode="elderly"] .device-page .scene-card * {
  font-size: 20px !important;
}

/* 老人模式：首页功能卡片文字20px */
body[data-mode="elderly"] .home-page .scene-name,
body[data-mode="elderly"] .home-page .qa-label,
body[data-mode="elderly"] .home-page .section-title,
body[data-mode="elderly"] .home-page .vip-promo-title,
body[data-mode="elderly"] .home-page .vip-promo-desc,
body[data-mode="elderly"] .home-page .cf-name {
  font-size: 20px !important;
}

/* 老人模式：首页机器人卡片标签14px */
body[data-mode="elderly"] .home-page .stat-label {
  font-size: 14px !important;
}
/* 人格切换面板 */
.personality-panel {
    position: absolute;
    top: 55px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255,255,255,0.95);
    border-radius: 12px;
    padding: 8px;
    z-index: 200;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.personality-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: rgba(30,30,50,0.85);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.personality-btn:hover {
    background: rgba(30,30,50,0.06);
}
.personality-btn.active {
    background: rgba(255,140,50,0.15);
    color: #ff8c32;
    font-weight: 600;
}
.personality-toggle {
 position: relative;
 background: rgba(255,255,255,0.95);
 border-radius: 50%;
 width: 32px;
 height: 32px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}


/* ============ 文件下载卡片样式 ============ */
.file-download-card {
  margin-top: 8px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #FFF8E1 0%, #FFF0E6 100%);
  border: 1px solid rgba(255, 140, 66, 0.2);
  max-width: 100%;
}

.file-download-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 140, 66, 0.08);
  border-bottom: 1px solid rgba(255, 140, 66, 0.1);
}

.file-download-icon {
  font-size: 18px;
}

.file-download-name {
  font-size: 13px;
  font-weight: 600;
  color: #E65100;
  word-break: break-all;
}

.file-download-preview {
  margin: 0;
  padding: 10px 14px;
  font-size: 11px;
  line-height: 1.5;
  color: #666;
  background: rgba(255, 255, 255, 0.6);
  max-height: 80px;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
  word-break: break-all;
}

.file-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  border: none;
  background: linear-gradient(135deg, #FF8C42 0%, #FF6B1A 100%);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
}

.file-download-btn:hover {
  background: linear-gradient(135deg, #FF7A2F 0%, #E5661A 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 107, 26, 0.3);
}

.file-download-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.chat-file-bubble {
    display: flex !important;
    align-items: center;
    background: rgba(255,255,255,0.95);
    border-radius: 12px;
    padding: 10px 14px;
    margin: 8px 0;
    cursor: pointer;
    transition: all 0.2s;
    width: fit-content;
    max-width: 260px;
    border: 1px solid #e0e0e0;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    float: none !important;
}
.chat-file-bubble:hover {
    background: rgba(240,247,255,1);
    border-color: #b8d4f0;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.chat-file-icon { font-size: 28px; margin-right: 10px; flex-shrink: 0; }
.chat-file-info { display: flex; flex-direction: column; min-width: 0; }
.chat-file-name { font-size: 13px; font-weight: 500; color: #1a73e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.chat-file-size { font-size: 11px; color: #999; margin-top: 2px; }

.chat-file-list { text-align: left !important; margin-top: 8px; }

.ai-file-msg {
    margin-top: -4px !important;
    padding-top: 0 !important;
}
.ai-file-msg .chat-file-list {
    text-align: left;
    padding: 0 8px;
}

/* ===== AI内容举报按钮 ===== */
.ai-report-btn {
    display: inline-block;
    font-size: 10px;
    color: #bbb;
    background: none;
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    margin-left: 8px;
    vertical-align: middle;
}
.ai-report-btn:hover {
    color: #999;
    text-decoration: underline;
}
.ai-report-modal {
    max-width: 320px;
    padding: 24px;
    text-align: center;
}
.ai-report-modal .report-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}
.ai-report-modal .report-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
}
.ai-report-modal .report-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.ai-report-modal .report-option {
    padding: 10px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
}
.ai-report-modal .report-option:hover {
    border-color: #FF8C42;
    background: #FFF8F0;
}
.ai-report-modal .report-cancel {
    font-size: 13px;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
}
/* ==================== 推送通知+蓝牙连接 样式 v1.1 ==================== */
/* 集成到 theme.css 末尾 */

/* ===== 蓝牙连接区域 ===== */
.bluetooth-connection-section {
  transition: all 0.3s ease;
}

.bluetooth-connection-section:hover {
  box-shadow: 0 2px 12px rgba(25, 118, 210, 0.15);
}

#ble-connect-btn {
  transition: all 0.2s ease;
}

#ble-connect-btn:active {
  transform: scale(0.96);
}

#ble-connect-btn.connected {
  background: linear-gradient(135deg, #4CAF50, #388E3C) !important;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

/* 已配对设备列表 */
.ble-paired-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(255,255,255,0.7);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.ble-paired-item:hover {
  background: rgba(255,255,255,0.9);
}

.ble-paired-item:active {
  background: rgba(255,255,255,0.5);
}

/* 传感器数据面板 */
.sensor-data-section {
  animation: sensorFadeIn 0.3s ease;
}

@keyframes sensorFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 通知开关样式（iOS风格toggle） */
#notification-toggle:checked + #notification-slider {
  background: #4CAF50;
}

#notification-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

#notification-toggle:checked + #notification-slider::before {
  transform: translateX(20px);
}

/* 蓝牙连接状态动画 */
.ble-scanning {
  animation: blePulse 1.5s ease-in-out infinite;
}

@keyframes blePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 设备连接成功动画 */
.ble-connected-anim {
  animation: bleConnectSuccess 0.6s ease;
}

@keyframes bleConnectSuccess {
  0% { transform: scale(1); }
  30% { transform: scale(1.05); }
  60% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* 电池电量颜色 */
.battery-ok { color: #4CAF50; }
.battery-low { color: #FF5722; }
.battery-medium { color: #FF9800; }

/* ===== 老人模式蓝牙大按钮 ===== */
.elderly-ble-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: calc(100% - 40px);
  margin: 16px 20px;
  padding: 18px;
  border: 2px solid #1976D2;
  border-radius: 16px;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  color: #1565C0;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.elderly-ble-btn:active {
  transform: scale(0.98);
  background: linear-gradient(135deg, #BBDEFB, #90CAF9);
}

.elderly-ble-btn.connected {
  border-color: #4CAF50;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  color: #2E7D32;
}
/* ==================== 推送通知+蓝牙连接 样式 v1.1 ==================== */
/* 集成到 theme.css 末尾 */

/* ===== 蓝牙连接区域 ===== */
.bluetooth-connection-section {
  transition: all 0.3s ease;
}

.bluetooth-connection-section:hover {
  box-shadow: 0 2px 12px rgba(25, 118, 210, 0.15);
}

#ble-connect-btn {
  transition: all 0.2s ease;
}

#ble-connect-btn:active {
  transform: scale(0.96);
}

#ble-connect-btn.connected {
  background: linear-gradient(135deg, #4CAF50, #388E3C) !important;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

/* 已配对设备列表 */
.ble-paired-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(255,255,255,0.7);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.ble-paired-item:hover {
  background: rgba(255,255,255,0.9);
}

.ble-paired-item:active {
  background: rgba(255,255,255,0.5);
}

/* 传感器数据面板 */
.sensor-data-section {
  animation: sensorFadeIn 0.3s ease;
}

@keyframes sensorFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 通知开关样式（iOS风格toggle） */
#notification-toggle:checked + #notification-slider {
  background: #4CAF50;
}

#notification-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

#notification-toggle:checked + #notification-slider::before {
  transform: translateX(20px);
}

/* 蓝牙连接状态动画 */
.ble-scanning {
  animation: blePulse 1.5s ease-in-out infinite;
}

@keyframes blePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 设备连接成功动画 */
.ble-connected-anim {
  animation: bleConnectSuccess 0.6s ease;
}

@keyframes bleConnectSuccess {
  0% { transform: scale(1); }
  30% { transform: scale(1.05); }
  60% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* 电池电量颜色 */
.battery-ok { color: #4CAF50; }
.battery-low { color: #FF5722; }
.battery-medium { color: #FF9800; }

/* ===== 老人模式蓝牙大按钮 ===== */
.elderly-ble-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: calc(100% - 40px);
  margin: 16px 20px;
  padding: 18px;
  border: 2px solid #1976D2;
  border-radius: 16px;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  color: #1565C0;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.elderly-ble-btn:active {
  transform: scale(0.98);
  background: linear-gradient(135deg, #BBDEFB, #90CAF9);
}

.elderly-ble-btn.connected {
  border-color: #4CAF50;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  color: #2E7D32;
}

/* 蓝牙连接按钮白底橙边样式 */
.ble-inline-btn {
  background: #fff !important;
  color: #FF6B35 !important;
  border: 1.5px solid #FF6B35 !important;
  border-radius: 20px !important;
  padding: 10px 22px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.ble-inline-btn:hover, .ble-inline-btn:active {
  background: #FFF5F0 !important;
}

/* ===== 技能按钮样式 v1.0 ===== */
/* 暖星伴 - 技能按钮样式 */
.skill-buttons-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  justify-content: flex-start;
}

.skill-buttons-bar::-webkit-scrollbar {
  display: none;
}

.skill-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 8px;
  border: 1.5px solid #FF8C42;
  border-radius: 18px;
  background: #fff;
  color: #FF8C42;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 0 0 calc(25% - 6px);
  max-width: calc(25% - 6px);
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.2;
}

.skill-btn:active {
  transform: scale(0.95);
}

.skill-btn.active {
  background: #FF8C42;
  color: #fff;
  border-color: #FF8C42;
  box-shadow: 0 2px 8px rgba(255,140,66,0.3);
}

.skill-btn .skill-emoji {
  font-size: 14px;
  line-height: 1;
}

.skill-btn .skill-name {
  font-size: 11px;
  font-weight: 500;
}

/* 技能指示器 */
.skill-indicator {
  text-align: center;
  padding: 6px 16px;
  margin: 4px auto;
  background: rgba(255,140,66,0.1);
  border-radius: 12px;
  font-size: 12px;
  color: #FF8C42;
  max-width: 200px;
}

.skill-indicator-emoji {
  font-size: 14px;
}

.skill-indicator-text {
  font-size: 11px;
}

/* 儿童模式适配 */
.mode-child .skill-buttons-bar {
  background: rgba(168,218,220,0.15);
  border-bottom-color: rgba(168,218,220,0.2);
}

.mode-child .skill-btn {
  border-color: #A8DADC;
  color: #5A9CA0;
}

.mode-child .skill-btn.active {
  background: #A8DADC;
  color: #fff;
  border-color: #A8DADC;
  box-shadow: 0 2px 8px rgba(168,218,220,0.3);
}

.mode-child .skill-indicator {
  background: rgba(168,218,220,0.15);
  color: #5A9CA0;
}

/* 老人模式适配 */
.mode-elder .skill-btn {
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 22px;
}

.mode-elder .skill-btn .skill-emoji {
  font-size: 18px;
}

.mode-elder .skill-btn .skill-name {
  font-size: 13px;
}

/* ============ 天气页面样式 ============ */
#page-weather {
    background: linear-gradient(135deg, #4A90D9 0%, #5B7FD6 50%, #7C6DD8 100%);
    min-height: 100vh;
    color: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.wp-header {
    display: flex;
    align-items: center;
    padding: 16px 16px 8px;
    gap: 12px;
}

.wp-back-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-header-title {
    font-size: 18px;
    font-weight: 600;
    flex: 1;
}

.wp-refresh-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-search-bar {
    display: flex;
    padding: 0 16px 12px;
    gap: 8px;
}

.wp-search-input {
    flex: 1;
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    background: rgba(255,255,255,0.25);
    color: #fff;
    outline: none;
}

.wp-search-input::placeholder {
    color: rgba(255,255,255,0.6);
}

.wp-search-btn {
    border: none;
    border-radius: 20px;
    padding: 10px 18px;
    font-size: 14px;
    background: rgba(255,255,255,0.3);
    color: #fff;
    cursor: pointer;
    font-weight: 500;
}

.wp-current {
    text-align: center;
    padding: 20px 16px 16px;
}

.wp-city-name {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 4px;
}

.wp-icon-temp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 0;
}

.wp-icon {
    font-size: 56px;
    line-height: 1;
}

.wp-temp {
    font-size: 64px;
    font-weight: 300;
    line-height: 1;
}

.wp-text {
    font-size: 18px;
    margin-bottom: 4px;
}

.wp-feels {
    font-size: 14px;
    opacity: 0.8;
}

.wp-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 16px 16px;
}

.wp-detail-item {
    background: rgba(255,255,255,0.15);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
}

.wp-detail-label {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 6px;
}

.wp-detail-value {
    font-size: 16px;
    font-weight: 500;
}

.wp-forecast-section {
    margin: 0 16px 20px;
    background: rgba(255,255,255,0.15);
    border-radius: 18px;
    padding: 16px;
}

.wp-forecast-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    opacity: 0.9;
}

.wp-forecast-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.wp-forecast-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wp-fi-date {
    width: 50px;
    font-size: 14px;
    font-weight: 500;
}

.wp-fi-icon {
    width: 36px;
    font-size: 22px;
    text-align: center;
}

.wp-fi-text {
    flex: 1;
    font-size: 14px;
    padding-left: 8px;
}

.wp-fi-temp {
    font-size: 14px;
    font-weight: 500;
    min-width: 70px;
    text-align: right;
}

/* 加载/错误状态 */
.wp-loading, .wp-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
    text-align: center;
}

.wp-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wp-spin 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes wp-spin {
    to { transform: rotate(360deg); }
}

.wp-error-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.wp-error-msg {
    font-size: 15px;
    opacity: 0.8;
    margin-bottom: 16px;
}

.wp-error-retry {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    border-radius: 20px;
    padding: 10px 24px;
    font-size: 14px;
    cursor: pointer;
}

/* 老年模式适配 */
.mode-elder #page-weather .wp-temp { font-size: 72px; }
.mode-elder #page-weather .wp-icon { font-size: 64px; }
.mode-elder #page-weather .wp-text { font-size: 22px; }
.mode-elder #page-weather .wp-detail-value { font-size: 18px; }

/* ============ 首页天气摘要 ============ */
.greeting-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.greeting-left {
  display: flex;
  flex-direction: column;
}
.home-weather-brief {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.2);
  border-radius: 16px;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  white-space: nowrap;
}
.hwb-icon {
  font-size: 16px;
}
.hwb-text {
  font-weight: 600;
}
/* ============ 音乐搜索结果 ============ */
.music-search-results {
    background: rgba(0,0,0,0.03);
    border-radius: 12px;
    padding: 10px;
    max-width: 280px;
}
.music-results-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #FF8C42;
}
.music-result-item {
    display: flex;
    align-items: center;
    padding: 8px 6px;
    border-radius: 8px;
    cursor: pointer;
    gap: 8px;
    transition: background 0.2s;
}
.music-result-item:hover,
.music-result-item:active {
    background: rgba(255,140,66,0.1);
}
.music-result-num {
    font-size: 12px;
    color: #999;
    min-width: 18px;
    text-align: center;
}
.music-result-name {
    font-size: 13px;
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.music-result-artist {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
    margin-left: 4px;
}
.music-result-dur {
    font-size: 11px;
    color: #bbb;
    margin-left: 4px;
}

/* ============ 故事卡片 ============ */
.story-card {
    background: linear-gradient(135deg, #fff8e7, #fff3e0);
    border-radius: 16px;
    padding: 16px;
    max-width: 300px;
    border: 1px solid rgba(255, 167, 38, 0.2);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.1);
}
.story-type-badge {
    display: inline-block;
    background: linear-gradient(135deg, #FF8C42, #FF6B35);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 8px;
}
.story-title-text {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}
.story-content-text {
    font-size: 13px;
    line-height: 1.8;
    color: #555;
    max-height: 200px;
    overflow-y: auto;
}
.story-tts-hint {
    margin-top: 10px;
    font-size: 11px;
    color: #FF8C42;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* === Social 补充样式 === */
.friend-avatar-wrap {
  position: relative;
  display: inline-block;
}

.unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #FF4444;
  color: #fff;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  font-weight: bold;
  line-height: 1;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.friend-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.friend-delete-btn {
  background: #FF4444;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.85;
}

.friend-delete-btn:hover {
  opacity: 1;
  background: #CC0000;
}

/* ===== File Preview Area (chat attachment) ===== */
#file-preview-area {
    padding: 8px 16px;
    background: var(--card-bg, #1a1a2e);
    border-top: 1px solid var(--border-color, #2d2d44);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    box-sizing: border-box;
}
#file-preview-area .file-preview-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
#file-preview-area .pending-file-info {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 8px;
}
#file-preview-area .pending-file-info span:first-child {
    font-size: 24px;
    flex-shrink: 0;
}
#file-preview-area .file-details {
    flex: 1;
    min-width: 0;
}
#file-preview-area .file-details .file-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #e0e0e0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#file-preview-area .file-details .file-size {
    font-size: 12px;
    color: var(--text-secondary, #888);
}
#file-preview-area .cancel-btn {
    background: none;
    border: none;
    color: #ff6b6b;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
#file-preview-area .cancel-btn:hover {
    background: rgba(255, 107, 107, 0.1);
}