/* 主要颜色变量 */
:root {
  --primary-color: #4CAF50;
  --primary-light: #8BC34A;
  --primary-dark: #2E7D32;
  --accent-color: #FFEB3B;
  --accent-light: #FFF59D;
  --accent-dark: #FBC02D;
  --secondary-color: #2196F3;
  --secondary-light: #64B5F6;
  --secondary-dark: #1976D2;
  --text-primary: #212121;
  --text-secondary: #757575;
  --text-hint: #9E9E9E;
  --background-light: #F5F5F5;
  --background-white: #FFFFFF;
  --danger-color: #F44336;
  --success-color: #4CAF50;
  --warning-color: #FF9800;
  --info-color: #2196F3;
}

/* 全局样式 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-primary);
  background-color: var(--background-light);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* iPhone 容器样式 */
.iphone-container {
  width: 375px;
  height: 812px;
  background-color: var(--background-white);
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

/* 状态栏样式 */
.status-bar {
  height: 44px;
  background-color: var(--background-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.status-bar-left {
  flex: 1;
  text-align: left;
}

.status-bar-center {
  flex: 2;
  text-align: center;
  font-weight: 700;
}

.status-bar-right {
  flex: 1;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 内容区域样式 */
.content {
  height: calc(100% - 44px - 83px);
  overflow-y: auto;
  padding: 15px;
  -webkit-overflow-scrolling: touch;
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  align-items: center;
  background-color: var(--background-light);
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 15px;
}

.search-icon {
  color: var(--text-hint);
  margin-right: 10px;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  color: var(--text-primary);
  outline: none;
}

.search-input::placeholder {
  color: var(--text-hint);
}

/* AI助手样式 */
.ai-assistant {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.ai-icon {
  background-color: rgba(255, 255, 255, 0.2);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
}

.ai-content {
  flex: 1;
}

.ai-title {
  font-weight: 600;
  margin-bottom: 5px;
}

.ai-message {
  font-size: 14px;
  opacity: 0.9;
}

/* 天气信息样式 */
.weather-info {
  display: flex;
  align-items: center;
  background-color: var(--background-white);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.weather-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: var(--accent-dark);
  font-size: 20px;
}

.weather-details {
  flex: 1;
}

.weather-temp {
  font-weight: 600;
  margin-bottom: 5px;
}

.weather-desc {
  font-size: 14px;
  color: var(--text-secondary);
}

/* 章节标题样式 */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  margin-top: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.section-more {
  font-size: 14px;
  color: var(--primary-color);
  text-decoration: none;
  display: flex;
  align-items: center;
}

.section-more i {
  margin-left: 5px;
  font-size: 12px;
}

/* 卡片样式 */
.card {
  background-color: var(--background-white);
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card-content {
  padding: 15px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.card-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

/* AI评分样式 */
.ai-score {
  display: flex;
  align-items: center;
  background-color: rgba(76, 175, 80, 0.1);
  border-radius: 8px;
  padding: 8px;
}

.score-value {
  background-color: var(--primary-color);
  color: white;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 6px;
  margin-right: 10px;
}

.score-details {
  flex: 1;
}

.score-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

.score-description {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 路线难度样式 */
.route-difficulty {
  display: flex;
  align-items: center;
}

.difficulty-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-right: 8px;
}

.difficulty-dots {
  display: flex;
  gap: 3px;
}

.difficulty-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #E0E0E0;
}

.difficulty-dot.active {
  background-color: var(--primary-color);
}

/* 标签样式 */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 5px;
}

.tag {
  background-color: var(--background-light);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
}

.tag i {
  margin-right: 5px;
}

.tag.active {
  background-color: var(--primary-light);
  color: white;
}

/* 路线评分样式 */
.route-rating {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
}

.text-accent {
  color: var(--accent-dark);
}

/* 按钮样式 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  outline: none;
}

.btn-primary {
  background-color: var(--primary-color);
  color: white;
}

.btn-outline {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.btn-danger {
  background-color: var(--danger-color);
  color: white;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-lg {
  padding: 12px 20px;
  font-size: 16px;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-text {
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 10px;
  font-weight: normal;
}

.btn-icon {
  padding: 8px;
  border-radius: 50%;
}

/* 团队卡片样式 */
.team-card {
  background-color: var(--background-white);
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 15px;
}

.team-header {
  margin-bottom: 12px;
}

.team-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.team-info {
  display: flex;
  gap: 15px;
}

.team-info-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.team-info-icon {
  margin-right: 5px;
  color: var(--primary-color);
}

.team-members {
  margin-bottom: 12px;
}

.team-member-list {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.team-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.team-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
}

.badge-primary {
  background-color: rgba(76, 175, 80, 0.1);
  color: var(--primary-color);
}

.badge-secondary {
  background-color: var(--background-light);
  color: var(--text-secondary);
}

/* 成长卡片样式 */
.growth-card {
  background-color: var(--background-white);
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 15px;
}

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

.growth-title {
  font-size: 16px;
  font-weight: 600;
}

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

.growth-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.stat-item {
  background-color: var(--background-light);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 5px;
}

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

.ability-item {
  margin-bottom: 10px;
}

.ability-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.ability-name {
  font-size: 14px;
}

.ability-score {
  font-size: 14px;
  color: var(--primary-color);
}

.progress-container {
  height: 6px;
  background-color: #E0E0E0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: var(--primary-color);
  border-radius: 3px;
}

/* 精彩瞬间样式 */
.moments-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.moment-item {
  height: 150px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.moment-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moment-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  padding: 10px;
}

.moment-title {
  color: white;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 3px;
}

.moment-date {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}

/* 底部导航栏样式 */
.tab-bar {
  height: 83px;
  background-color: var(--background-white);
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 20px;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20%;
  color: var(--text-hint);
  cursor: pointer;
}

.tab-item.active {
  color: var(--primary-color);
}

.tab-icon {
  font-size: 22px;
  margin-bottom: 5px;
}

.tab-label {
  font-size: 12px;
  font-weight: 500;
}

/* 分段控制器样式 */
.segmented-control {
  display: flex;
  background-color: var(--background-light);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 15px;
}

.segment {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
}

.segment.active {
  background-color: var(--background-white);
  color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 筛选标签样式 */
.filter-tags {
  margin-bottom: 15px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 5px;
}

.filter-tags .tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

/* 内容区域样式 */
.content-section {
  margin-bottom: 20px;
}

.content-section.hidden {
  display: none;
}

/* 路线列表样式 */
.route-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.route-item {
  display: flex;
  background-color: var(--background-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.route-image {
  width: 100px;
  height: 100px;
  position: relative;
}

.route-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.route-distance, .route-time {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 10px;
}

.route-info {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.route-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}

.route-brief {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.route-stats {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.route-features {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* 地图视图样式 */
.map-view {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  margin-bottom: 15px;
}

.map-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-overlay {
  position: absolute;
  bottom: 15px;
  right: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.map-controls {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.map-control-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border: none;
  color: var(--text-primary);
}

.map-btn {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 浮动按钮样式 */
.fab {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  z-index: 10;
  cursor: pointer;
}

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

/* 追踪状态样式 */
.tracking-status {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  border-radius: 15px;
  padding: 15px;
  color: white;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

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

.tracking-title {
  font-size: 18px;
  font-weight: 600;
}

.tracking-actions {
  display: flex;
  gap: 10px;
}

.tracking-stats {
  display: flex;
  justify-content: space-between;
}

.tracking-stats .stat-item {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  flex: 1;
}

.tracking-stats .stat-value {
  color: white;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 5px;
}

.tracking-stats .stat-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}

/* 地图容器样式 */
.map-container {
  margin-bottom: 15px;
}

/* 家庭成员追踪样式 */
.family-members {
  margin-bottom: 15px;
}

.family-member {
  display: flex;
  align-items: center;
  background-color: var(--background-white);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.family-member.active {
  border: 2px solid var(--primary-color);
}

.member-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin-right: 15px;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
}

.member-status.online {
  background-color: var(--success-color);
}

.member-status.offline {
  background-color: var(--text-hint);
}

.member-info {
  flex: 1;
}

.member-name {
  font-weight: 600;
  margin-bottom: 3px;
}

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

.member-actions {
  display: flex;
  gap: 10px;
}

/* 安全检查样式 */
.safety-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.safety-item {
  display: flex;
  align-items: center;
  background-color: var(--background-white);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.safety-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
}

.safety-item.completed .safety-icon {
  background-color: rgba(76, 175, 80, 0.1);
  color: var(--success-color);
}

.safety-item.warning .safety-icon {
  background-color: rgba(255, 152, 0, 0.1);
  color: var(--warning-color);
}

.safety-info {
  flex: 1;
}

.safety-title {
  font-weight: 600;
  margin-bottom: 3px;
}

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

.safety-action {
  color: var(--text-hint);
}

/* 路线信息样式 */
.route-details {
  background-color: var(--background-white);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.route-progress {
  margin: 15px 0;
}

.route-checkpoints {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.checkpoint {
  display: flex;
  align-items: flex-start;
}

.checkpoint-marker {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--background-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: var(--text-hint);
  font-size: 12px;
}

.checkpoint.completed .checkpoint-marker {
  background-color: var(--primary-color);
  color: white;
}

.checkpoint.current .checkpoint-marker {
  background-color: var(--primary-color);
  color: white;
}

.checkpoint-info {
  flex: 1;
}

.checkpoint-name {
  font-weight: 500;
  margin-bottom: 3px;
}

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

.checkpoint.current .checkpoint-time {
  color: var(--primary-color);
  font-weight: 500;
}

/* 紧急按钮样式 */
.emergency-button {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* 故事条样式 */
.stories-container {
  margin-bottom: 15px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.stories {
  display: flex;
  gap: 15px;
  padding: 5px 0;
}

.story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70px;
}

.story-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin-bottom: 5px;
}

.story-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid var(--primary-color);
  border-radius: 50%;
}

.story-add {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 2px solid white;
}

.story-name {
  font-size: 12px;
  text-align: center;
  color: var(--text-secondary);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 帖子卡片样式 */
.post-card {
  background-color: var(--background-white);
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.post-header {
  display: flex;
  align-items: center;
  padding: 15px;
}

.post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.post-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-info {
  flex: 1;
}

.post-author {
  font-weight: 600;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
}

.post-author i {
  margin-left: 5px;
  font-size: 12px;
}

.post-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.post-actions {
  color: var(--text-hint);
}

.post-content {
  padding: 0 15px;
}

.post-text {
  margin-bottom: 15px;
  line-height: 1.5;
}

.hashtag {
  color: var(--primary-color);
}

.post-images {
  margin-bottom: 15px;
  border-radius: 10px;
  overflow: hidden;
}

.post-image {
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.post-route {
  background-color: var(--background-light);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 15px;
}

.route-preview {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
}

.route-preview i:first-child {
  margin-right: 8px;
  color: var(--primary-color);
}

.route-preview span {
  flex: 1;
}

.post-footer {
  padding: 10px 15px 15px;
}

.post-stats {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--background-light);
}

.stat-item {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  font-size: 13px;
}

.stat-item i {
  margin-right: 5px;
}

.post-actions {
  display: flex;
  justify-content: space-between;
}

/* 活动卡片样式 */
.post-event {
  margin-bottom: 15px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--background-light);
}

.event-banner {
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.event-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-info {
  padding: 15px;
  background-color: var(--background-white);
}

.event-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.event-time, .event-location {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.event-time i, .event-location i {
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

/* 活动卡片样式 */
.event-card {
  background-color: var(--background-white);
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.event-banner {
  position: relative;
  height: 150px;
}

.event-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-date {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: white;
  border-radius: 10px;
  padding: 8px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  min-width: 50px;
}

.date-day {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color);
}

.date-month {
  font-size: 12px;
  color: var(--text-secondary);
}

.event-content {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-organizer {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.organizer-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}

.event-details {
  margin-bottom: 15px;
}

.event-time, .event-location, .event-participants {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.event-time i, .event-location i, .event-participants i {
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

.event-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

/* 群组列表样式 */
.group-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.group-item {
  display: flex;
  align-items: center;
  background-color: var(--background-white);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.group-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.group-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-info {
  flex: 1;
}

.group-name {
  font-weight: 600;
  margin-bottom: 3px;
}

.group-members, .group-activity, .group-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.group-notification {
  position: relative;
}

.notification-badge {
  background-color: var(--danger-color);
  color: white;
  font-size: 11px;
  font-weight: 600;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.group-action {
  margin-left: 10px;
}

/* 攻略卡片样式 */
.guide-card {
  background-color: var(--background-white);
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.guide-banner {
  height: 150px;
}

.guide-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-content {
  padding: 15px;
}

.guide-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.guide-author {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}

.guide-brief {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.5;
}

.guide-stats {
  display: flex;
  gap: 15px;
}

/* 分类网格样式 */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.category-item {
  background-color: var(--background-white);
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.category-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--background-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--primary-color);
  font-size: 20px;
}

.category-name {
  font-weight: 600;
  text-align: center;
}

/* 用户资料样式 */
.user-profile {
  background-color: var(--background-white);
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 15px;
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.profile-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 3px;
}

.profile-id {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.profile-level {
  display: flex;
  align-items: center;
}

.level-badge {
  background-color: var(--primary-color);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 10px;
  margin-right: 5px;
}

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

.profile-actions {
  margin-left: 10px;
}

.profile-stats {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.profile-stats .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-stats .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}

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

/* 会员卡片样式 */
.vip-card {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  border-radius: 15px;
  padding: 15px;
  margin-bottom: 15px;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.vip-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.vip-title {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.vip-title i {
  margin-right: 5px;
}

.vip-status {
  font-size: 14px;
  font-weight: 500;
}

.vip-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.benefit-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 5px 10px;
  border-radius: 15px;
}

.benefit-item i {
  margin-right: 5px;
}

/* 功能菜单样式 */
.feature-menu {
  margin-bottom: 20px;
}

.menu-group {
  margin-bottom: 20px;
}

.menu-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.menu-items {
  background-color: var(--background-white);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid var(--background-light);
  cursor: pointer;
}

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

.menu-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: var(--primary-color);
}

.menu-label {
  flex: 1;
  font-size: 15px;
}

.menu-value {
  font-size: 14px;
  color: var(--text-secondary);
  margin-right: 10px;
}

.menu-badge {
  background-color: rgba(76, 175, 80, 0.1);
  color: var(--primary-color);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 10px;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.menu-badge i {
  margin-right: 3px;
}

.menu-arrow {
  color: var(--text-hint);
}

.menu-switch {
  margin-right: 5px;
}

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

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--primary-color);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--primary-color);
}

input:checked + .slider:before {
  transform: translateX(16px);
}

.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

/* 退出按钮样式 */
.logout-button {
  margin-top: 30px;
  margin-bottom: 20px;
}

/* 返回按钮样式 */
.back-button {
  margin-bottom: 15px;
}

.back-button a {
  display: flex;
  align-items: center;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
}

.back-button i {
  margin-right: 5px;
}

/* 设置菜单样式 */
.settings-menu {
  margin-bottom: 20px;
}

/* 辅助类 */
.text-primary {
  color: var(--primary-color);
}

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

.text-danger {
  color: var(--danger-color);
}

.text-success {
  color: var(--success-color);
}

.text-warning {
  color: var(--warning-color);
}

.text-info {
  color: var(--info-color);
}

.bg-primary {
  background-color: var(--primary-color);
}

.bg-light-gray {
  background-color: var(--background-light);
}

.hidden {
  display: none;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.text-sm {
  font-size: 0.875rem;
}

.text-xs {
  font-size: 0.75rem;
}

.text-xl {
  font-size: 1.25rem;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.flex {
  display: flex;
}

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

.justify-between {
  justify-content: space-between;
}

.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.object-cover {
  object-fit: cover;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--args));
}

.from-black {
  --tw-gradient-from: #000;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
}

.to-transparent {
  --tw-gradient-to: transparent;
}

.opacity-75 {
  opacity: 0.75;
}

.text-white {
  color: white;
}

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

.overflow-hidden {
  overflow: hidden;
}
