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

html {
     font-size: 16px;
     scroll-behavior: smooth;
}

body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     line-height: 1.6;
     color: var(--text-color);
     background: var(--bg-gradient);
     min-height: 100vh;
     transition: all 0.3s ease;
}

/* ===== CSS 变量 ===== */
:root {
     /* 亮色主题 */
     --primary-color: #ff6b6b;
     --secondary-color: #4ecdc4;
     --accent-color: #45b7d1;
     --warning-color: #f9ca24;
     --success-color: #6c5ce7;
     --danger-color: #fd79a8;

     --text-color: #2d3436;
     --text-light: #636e72;
     --text-muted: #b2bec3;

     --bg-primary: #ffffff;
     --bg-secondary: #f8f9fa;
     --bg-tertiary: #e9ecef;
     --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

     --border-color: #dee2e6;
     --border-radius: 12px;
     --border-radius-sm: 8px;
     --border-radius-lg: 20px;

     --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
     --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.2);

     --spacing-xs: 0.25rem;
     --spacing-sm: 0.5rem;
     --spacing-md: 1rem;
     --spacing-lg: 1.5rem;
     --spacing-xl: 2rem;
     --spacing-xxl: 3rem;

     --font-size-xs: 0.75rem;
     --font-size-sm: 0.875rem;
     --font-size-md: 1rem;
     --font-size-lg: 1.125rem;
     --font-size-xl: 1.25rem;
     --font-size-xxl: 1.5rem;

     --transition-fast: 0.15s ease;
     --transition-normal: 0.3s ease;
     --transition-slow: 0.5s ease;
}

/* ===== 页面加载器 ===== */
.page-loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--bg-gradient);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.hidden {
     opacity: 0;
     visibility: hidden;
}

.loader-spinner {
     width: 50px;
     height: 50px;
     border: 4px solid rgba(255, 255, 255, 0.3);
     border-top: 4px solid #ffffff;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-bottom: var(--spacing-lg);
}

.page-loader p {
     color: #ffffff;
     font-size: var(--font-size-lg);
     font-weight: 500;
}

@keyframes spin {
     0% {
          transform: rotate(0deg);
     }

     100% {
          transform: rotate(360deg);
     }
}

/* ===== 主容器 ===== */
.container {
     max-width: 1400px;
     margin: 0 auto;
     padding: var(--spacing-md);
     display: grid;
     grid-template-columns: 1fr 300px;
     grid-template-rows: auto 1fr auto;
     grid-template-areas:
          "header header"
          "main sidebar"
          "footer footer";
     gap: var(--spacing-lg);
     min-height: 100vh;
}

/* ===== 头部样式 ===== */
.header {
     grid-area: header;
     background: var(--bg-primary);
     padding: var(--spacing-lg);
     border-radius: var(--border-radius-lg);
     box-shadow: var(--shadow-md);
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;
     overflow: hidden;
}

.header::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
}

.header-content {
     display: flex;
     align-items: center;
     gap: var(--spacing-xl);
}

.main-title {
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     font-size: var(--font-size-xxl);
     font-weight: 700;
     color: var(--text-color);
     margin: 0;
}

.title-icon {
     font-size: 2rem;
     animation: bounce 2s infinite;
}

@keyframes bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
          transform: translateY(0);
     }

     40% {
          transform: translateY(-10px);
     }

     60% {
          transform: translateY(-5px);
     }
}

.header-info {
     display: flex;
     align-items: center;
     gap: var(--spacing-lg);
}

.current-time {
     font-size: var(--font-size-lg);
     font-weight: 600;
     color: var(--primary-color);
}

.weather-info {
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     padding: var(--spacing-sm) var(--spacing-md);
     background: var(--bg-secondary);
     border-radius: var(--border-radius);
}

.weather-icon {
     font-size: var(--font-size-lg);
}

.temperature {
     font-weight: 600;
     color: var(--text-color);
}

.theme-toggle {
     background: var(--bg-secondary);
     border: none;
     padding: var(--spacing-sm);
     border-radius: 50%;
     cursor: pointer;
     transition: all var(--transition-normal);
     display: flex;
     align-items: center;
     justify-content: center;
     width: 50px;
     height: 50px;
}

.theme-toggle:hover {
     background: var(--primary-color);
     transform: scale(1.1);
}

.theme-toggle .theme-icon {
     font-size: var(--font-size-lg);
     transition: transform var(--transition-normal);
}

.theme-toggle:hover .theme-icon {
     transform: rotate(180deg);
}

/* 头部操作区域 */
.header-actions {
     display: flex;
     align-items: center;
     gap: var(--spacing-md);
}

.user-info {
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     padding: var(--spacing-sm) var(--spacing-md);
     background: var(--bg-secondary);
     border-radius: var(--border-radius);
}

.username {
     font-size: var(--font-size-md);
     font-weight: 500;
     color: var(--text-color);
}

.logout-btn {
     background: none;
     border: none;
     font-size: var(--font-size-lg);
     cursor: pointer;
     padding: var(--spacing-xs);
     border-radius: var(--border-radius-sm);
     transition: all var(--transition-normal);
     display: flex;
     align-items: center;
     justify-content: center;
}

.logout-btn:hover {
     background: var(--primary-color);
     transform: scale(1.1);
}

/* ===== 家庭成员区域 ===== */
.family-members {
     grid-area: main;
     margin-bottom: var(--spacing-xl);
}

.section-title {
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     font-size: var(--font-size-xl);
     font-weight: 600;
     color: var(--text-color);
     margin-bottom: var(--spacing-lg);
     padding-bottom: var(--spacing-sm);
     border-bottom: 2px solid var(--border-color);
}

.section-icon {
     font-size: var(--font-size-xl);
}

.members-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: var(--spacing-lg);
}

.member-card {
     background: var(--bg-primary);
     padding: var(--spacing-lg);
     border-radius: var(--border-radius-lg);
     box-shadow: var(--shadow-md);
     transition: all var(--transition-normal);
     cursor: pointer;
     position: relative;
     overflow: hidden;
}

.member-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
     transform: scaleX(0);
     transition: transform var(--transition-normal);
}

.member-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
}

.member-card:hover::before {
     transform: scaleX(1);
}

.member-avatar {
     position: relative;
     width: 80px;
     height: 80px;
     margin: 0 auto var(--spacing-md);
}

.member-avatar img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
     border: 3px solid var(--border-color);
     transition: border-color var(--transition-normal);
}

.member-card:hover .member-avatar img {
     border-color: var(--primary-color);
}

.status-indicator {
     position: absolute;
     bottom: 5px;
     right: 5px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     border: 3px solid var(--bg-primary);
}

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

.status-indicator.away {
     background: var(--warning-color);
}

.status-indicator.offline {
     background: var(--text-muted);
}

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

.member-name {
     font-size: var(--font-size-lg);
     font-weight: 600;
     color: var(--text-color);
     margin-bottom: var(--spacing-xs);
}

.member-status {
     font-size: var(--font-size-sm);
     color: var(--text-light);
     margin-bottom: var(--spacing-sm);
}

.member-mood {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: var(--spacing-xs);
     padding: var(--spacing-xs) var(--spacing-sm);
     background: var(--bg-secondary);
     border-radius: var(--border-radius);
     font-size: var(--font-size-sm);
}

.mood-emoji {
     font-size: var(--font-size-md);
}

.member-actions {
     display: flex;
     justify-content: center;
     gap: var(--spacing-sm);
}

.action-icon {
     background: none;
     border: none;
     padding: var(--spacing-sm);
     border-radius: 50%;
     cursor: pointer;
     font-size: var(--font-size-lg);
     transition: all var(--transition-fast);
     width: 40px;
     height: 40px display: flex;
     align-items: center;
     justify-content: center;
}

.action-icon:hover {
     background: var(--primary-color);
     color: white;
     transform: scale(1.1);
}

.action-icon.message:hover {
     background: var(--accent-color);
}

.action-icon.call:hover {
     background: var(--success-color);
}

.action-icon.video:hover {
     background: var(--secondary-color);
}

/* ===== 侧边栏样式 ===== */
.sidebar {
     grid-area: sidebar;
     display: flex;
     flex-direction: column;
     gap: var(--spacing-lg);
}

.sidebar-title {
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     font-size: var(--font-size-lg);
     font-weight: 600;
     color: var(--text-color);
     margin-bottom: var(--spacing-md);
}

/* ===== 家庭相册样式 ===== */
.family-photos {
     background: var(--bg-primary);
     padding: var(--spacing-lg);
     border-radius: var(--border-radius-lg);
     box-shadow: var(--shadow-md);
}

.photos-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: var(--spacing-sm);
     margin-bottom: var(--spacing-md);
}

.photo-item {
     position: relative;
     aspect-ratio: 1;
     border-radius: var(--border-radius);
     overflow: hidden;
     cursor: pointer;
     transition: transform var(--transition-normal);
}

.photo-item:hover {
     transform: scale(1.05);
}

.photo-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform var(--transition-normal);
}

.photo-item:hover img {
     transform: scale(1.1);
}

.photo-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
     padding: var(--spacing-sm);
     opacity: 0;
     transition: opacity var(--transition-normal);
}

.photo-item:hover .photo-overlay {
     opacity: 1;
}

.photo-date {
     color: white;
     font-size: var(--font-size-xs);
     font-weight: 500;
}

.view-all-photos {
     width: 100%;
     padding: var(--spacing-sm) var(--spacing-md);
     background: var(--bg-secondary);
     border: none;
     border-radius: var(--border-radius);
     color: var(--text-color);
     font-weight: 500;
     cursor: pointer;
     transition: all var(--transition-normal);
}

.view-all-photos:hover {
     background: var(--primary-color);
     color: white;
     transform: translateY(-2px);
}

/* ===== 家庭提醒样式 ===== */
.family-reminders {
     background: var(--bg-primary);
     padding: var(--spacing-lg);
     border-radius: var(--border-radius-lg);
     box-shadow: var(--shadow-md);
}

.reminders-list {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-md);
}

.reminder-item {
     display: flex;
     align-items: center;
     gap: var(--spacing-md);
     padding: var(--spacing-md);
     background: var(--bg-secondary);
     border-radius: var(--border-radius);
     border-left: 4px solid var(--primary-color);
     transition: all var(--transition-normal);
     cursor: pointer;
}

.reminder-item:hover {
     background: var(--bg-tertiary);
     transform: translateX(5px);
}

.reminder-icon {
     font-size: var(--font-size-xl);
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--bg-primary);
     border-radius: 50%;
     box-shadow: var(--shadow-sm);
}

.reminder-content {
     flex: 1;
}

.reminder-text {
     font-weight: 500;
     color: var(--text-color);
     margin-bottom: var(--spacing-xs);
}

.reminder-time {
     font-size: var(--font-size-sm);
     color: var(--text-light);
     font-weight: 600;
}

/* ===== 底部样式 ===== */
.footer {
     grid-area: footer;
     background: var(--bg-primary);
     padding: var(--spacing-lg);
     border-radius: var(--border-radius-lg);
     box-shadow: var(--shadow-md);
     margin-top: var(--spacing-xl);
}

.footer-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: var(--spacing-md);
}

.footer-info p {
     color: var(--text-light);
     font-size: var(--font-size-sm);
     margin-bottom: var(--spacing-xs);
}

.footer-info p:last-child {
     margin-bottom: 0;
}

.footer-links {
     display: flex;
     gap: var(--spacing-lg);
}

.footer-link {
     color: var(--text-light);
     text-decoration: none;
     font-size: var(--font-size-sm);
     transition: color var(--transition-normal);
}

.footer-link:hover {
     color: var(--primary-color);
}

/* ===== 模态框样式 ===== */
.modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 1000;
     animation: fadeIn 0.3s ease;
}

.modal.show {
     display: flex;
     align-items: center;
     justify-content: center;
}

.modal-content {
     background: var(--bg-primary);
     padding: var(--spacing-xl);
     border-radius: var(--border-radius-lg);
     box-shadow: var(--shadow-lg);
     max-width: 500px;
     width: 90%;
     max-height: 80vh;
     overflow-y: auto;
     position: relative;
     animation: slideIn 0.3s ease;
}

.modal-close {
     position: absolute;
     top: var(--spacing-md);
     right: var(--spacing-md);
     font-size: var(--font-size-xl);
     cursor: pointer;
     color: var(--text-light);
     transition: color var(--transition-normal);
}

.modal-close:hover {
     color: var(--primary-color);
}

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

@keyframes slideIn {
     from {
          transform: translateY(-50px);
          opacity: 0;
     }

     to {
          transform: translateY(0);
          opacity: 1;
     }
}

/* ===== 通知样式 ===== */
.notifications-container {
     position: fixed;
     top: var(--spacing-lg);
     right: var(--spacing-lg);
     z-index: 1001;
     display: flex;
     flex-direction: column;
     gap: var(--spacing-sm);
}

.notification {
     background: var(--bg-primary);
     padding: var(--spacing-md);
     border-radius: var(--border-radius);
     box-shadow: var(--shadow-lg);
     border-left: 4px solid var(--primary-color);
     min-width: 300px;
     animation: slideInRight 0.3s ease;
     position: relative;
}

.notification.success {
     border-left-color: var(--success-color);
}

.notification.warning {
     border-left-color: var(--warning-color);
}

.notification.error {
     border-left-color: var(--danger-color);
}

.notification-close {
     position: absolute;
     top: var(--spacing-xs);
     right: var(--spacing-xs);
     background: none;
     border: none;
     font-size: var(--font-size-sm);
     cursor: pointer;
     color: var(--text-light);
     padding: var(--spacing-xs);
}

@keyframes slideInRight {
     from {
          transform: translateX(100%);
          opacity: 0;
     }

     to {
          transform: translateX(0);
          opacity: 1;
     }
}

/* ===== 深色主题 ===== */
[data-theme="dark"] {
     --text-color: #f8f9fa;
     --text-light: #adb5bd;
     --text-muted: #6c757d;

     --bg-primary: #2d3436;
     --bg-secondary: #636e72;
     --bg-tertiary: #74b9ff;
     --bg-gradient: linear-gradient(135deg, #2d3436 0%, #636e72 100%);

     --border-color: #495057;
}

[data-theme="dark"] .member-card {
     background: var(--bg-primary);
     border: 1px solid var(--border-color);
}

[data-theme="dark"] .status-indicator {
     border-color: var(--bg-primary);
}

[data-theme="dark"] .photo-overlay {
     background: linear-gradient(transparent, rgba(255, 255, 255, 0.1));
}

/* ===== 响应式设计 ===== */
@media (max-width: 1200px) {
     .container {
          grid-template-columns: 1fr;
          grid-template-areas:
               "header"
               "main"
               "sidebar"
               "footer";
     }

     .sidebar {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--spacing-lg);
     }
}

@media (max-width: 768px) {
     .container {
          padding: var(--spacing-sm);
          gap: var(--spacing-md);
     }

     .header {
          padding: var(--spacing-md);
     }

     .header-content {
          flex-direction: column;
          align-items: flex-start;
          gap: var(--spacing-md);
     }

     .header-info {
          flex-direction: column;
          align-items: flex-start;
          gap: var(--spacing-sm);
     }

     .main-title {
          font-size: var(--font-size-xl);
     }

     .members-grid {
          grid-template-columns: 1fr;
          gap: var(--spacing-md);
     }

     .sidebar {
          grid-template-columns: 1fr;
     }

     .footer-content {
          flex-direction: column;
          text-align: center;
     }

     .notifications-container {
          top: var(--spacing-sm);
          right: var(--spacing-sm);
          left: var(--spacing-sm);
     }

     .notification {
          min-width: auto;
     }
}

@media (max-width: 480px) {
     .header {
          padding: var(--spacing-sm);
     }

     .main-title {
          font-size: var(--font-size-lg);
     }

     .member-card {
          padding: var(--spacing-md);
     }

     .member-avatar {
          width: 60px;
          height: 60px;
     }

     .photos-grid {
          grid-template-columns: 1fr;
     }

     .modal-content {
          padding: var(--spacing-lg);
          margin: var(--spacing-md);
     }
}

/* ===== 动画和过渡效果 ===== */
.fade-in {
     animation: fadeIn 0.5s ease;
}

.slide-up {
     animation: slideUp 0.5s ease;
}

@keyframes slideUp {
     from {
          transform: translateY(30px);
          opacity: 0;
     }

     to {
          transform: translateY(0);
          opacity: 1;
     }
}

.pulse {
     animation: pulse 2s infinite;
}

@keyframes pulse {
     0% {
          transform: scale(1);
     }

     50% {
          transform: scale(1.05);
     }

     100% {
          transform: scale(1);
     }
}

/* ===== 可访问性 ===== */
.sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
}

/* 焦点样式 */
button:focus,
.action-icon:focus,
.footer-link:focus {
     outline: 2px solid var(--primary-color);
     outline-offset: 2px;
}

/* 减少动画（用户偏好） */
@media (prefers-reduced-motion: reduce) {

     *,
     *::before,
     *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
     }
}

/* ===== 打印样式 ===== */
@media print {

     .header,
     .sidebar,
     .footer,
     .modal,
     .notifications-container {
          display: none !important;
     }

     .container {
          grid-template-columns: 1fr;
          grid-template-areas: "main";
          max-width: none;
          padding: 0;
     }

     .member-card {
          break-inside: avoid;
          box-shadow: none;
          border: 1px solid #000;
     }
}

/* ===== 自定义滚动条 ===== */
::-webkit-scrollbar {
     width: 8px;
}

::-webkit-scrollbar-track {
     background: var(--bg-secondary);
     border-radius: var(--border-radius);
}

::-webkit-scrollbar-thumb {
     background: var(--primary-color);
     border-radius: var(--border-radius);
}

::-webkit-scrollbar-thumb:hover {
     background: var(--secondary-color);
}

/* ===== 选择文本样式 ===== */
::selection {
     background: var(--primary-color);
     color: white;
}

::-moz-selection {
     background: var(--primary-color);
     color: white;
}

/* 邀请成员样式 */
.invite-member-form {
     max-width: 500px;
}

.invite-methods {
     display: flex;
     gap: 10px;
     margin-bottom: 20px;
}

.invite-method {
     flex: 1;
     padding: 15px;
     border: 2px solid #e0e0e0;
     border-radius: 8px;
     background: white;
     cursor: pointer;
     transition: all 0.3s ease;
     text-align: center;
}

.invite-method:hover {
     border-color: #007bff;
}

.invite-method.active {
     border-color: #007bff;
     background: #f0f8ff;
}

.invite-method i {
     display: block;
     font-size: 24px;
     margin-bottom: 8px;
     color: #666;
}

.invite-method.active i {
     color: #007bff;
}

.invite-form {
     display: none;
}

.invite-form.active {
     display: block;
}

.qr-code-container {
     text-align: center;
     padding: 20px;
}

.qr-code {
     width: 150px;
     height: 150px;
     border: 2px dashed #ccc;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 15px;
     font-size: 48px;
     color: #666;
}

.qr-actions {
     display: flex;
     gap: 10px;
     justify-content: center;
     margin-top: 15px;
}

/* 编辑成员样式 */
.edit-member-form {
     max-width: 450px;
}

.avatar-upload {
     display: flex;
     align-items: center;
     gap: 15px;
}

.avatar-preview {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid #e0e0e0;
}

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

.permission-item {
     display: flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
}

.permission-item input[type="checkbox"] {
     margin: 0;
}

/* 确认对话框样式 */
.confirm-dialog {
     text-align: center;
     padding: 20px;
}

.warning-text {
     color: #dc

     /* 邀请成员样式 */
     .invite-member-form {
          max-width: 500px;
     }

     .invite-methods {
          display: flex;
          gap: 10px;
          margin-bottom: 20px;
     }

     .invite-method {
          flex: 1;
          padding: 15px;
          border: 2px solid #e0e0e0;
          border-radius: 8px;
          background: white;
          cursor: pointer;
          transition: all 0.3s ease;
          text-align: center;
     }

     .invite-method:hover {
          border-color: #007bff;
     }

     .invite-method.active {
          border-color: #007bff;
          background: #f0f8ff;
     }

     .invite-method i {
          display: block;
          font-size: 24px;
          margin-bottom: 8px;
          color: #666;
     }

     .invite-method.active i {
          color: #007bff;
     }

     .invite-form {
          display: none;
     }

     .invite-form.active {
          display: block;
     }

     .qr-code-container {
          text-align: center;
          padding: 20px;
     }

     .qr-code {
          width: 150px;
          height: 150px;
          border: 2px dashed #ccc;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 15px;
          font-size: 48px;
          color: #666;
     }

     .qr-actions {
          display: flex;
          gap: 10px;
          justify-content: center;
          margin-top: 15px;
     }

     /* 编辑成员样式 */
     .edit-member-form {
          max-width: 450px;
     }

     .avatar-upload {
          display: flex;
          align-items: center;
          gap: 15px;
     }

     .avatar-preview {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          object-fit: cover;
          border: 2px solid #e0e0e0;
     }

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

     .permission-item {
          display: flex;
          align-items: center;
          gap: 10px;
          cursor: pointer;
     }

     .permission-item input[type="checkbox"] {
          margin: 0;
     }

     /* 确认对话框样式 */
     .confirm-dialog {
          text-align: center;
          padding: 20px;
     }

     .warning-text {
          color: #dc3545;
          font-weight: 500;
          margin: 15px 0;
     }

     /* 数据管理样式 */
     .data-management {
          max-width: 600px;
     }

     .data-section {
          margin-bottom: 30px;
          padding: 20px;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          background: #f8f9fa;
     }

     .data-section h3 {
          margin: 0 0 15px 0;
          color: #333;
          display: flex;
          align-items: center;
          gap: 10px;
     }

     .data-section h3 i {
          color: #007bff;
     }

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

     .data-actions .btn {
          flex: 1;
          min-width: 120px;
     }

     .export-options {
          display: flex;
          gap: 10px;
          margin-bottom: 15px;
     }

     .export-option {
          flex: 1;
          padding: 10px;
          border: 2px solid #e0e0e0;
          border-radius: 6px;
          background: white;
          cursor: pointer;
          text-align: center;
          transition: all 0.3s ease;
     }

     .export-option:hover {
          border-color: #007bff;
     }

     .export-option.active {
          border-color: #007bff;
          background: #f0f8ff;
     }

     .import-preview {
          text-align: left;
     }

     .import-preview ul {
          margin: 15px 0;
          padding-left: 20px;
     }

     .import-preview li {
          margin: 5px 0;
     }

     /* 危险操作样式 */
     .danger-dialog {
          text-align: center;
          padding: 20px;
     }

     .danger-icon {
          font-size: 48px;
          color: #dc3545;
          margin-bottom: 15px;
     }

     .danger-dialog h3 {
          color: #dc3545;
          margin: 10px 0;
     }

     .danger-dialog p {
          margin: 10px 0;
          color: #666;
     }

     .danger-dialog strong {
          color: #dc3545;
     }

     /* 邀请管理样式 */
     .invitations-manager {
          max-width: 600px;
     }

     .empty-state {
          text-align: center;
          padding: 40px 20px;
          color: #666;
     }

     .empty-state i {
          font-size: 48px;
          margin-bottom: 15px;
          color: #ccc;
     }

     .invitations-list {
          max-height: 400px;
          overflow-y: auto;
     }

     .invitation-item {
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          padding: 15px;
          margin-bottom: 15px;
          background: white;
     }

     .invitation-info {
          display: flex;
          align-items: center;
          gap: 15px;
          margin-bottom: 10px;
     }

     .invitation-info h4 {
          margin: 0;
          flex: 1;
     }

     .role-badge,
     .status-badge {
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 500;
     }

     .role-badge {
          background: #e3f2fd;
          color: #1976d2;
     }

     .status-badge {
          color: white;
     }

     .status-pending {
          background: #ff9800;
     }

     .status-accepted {
          background: #4caf50;
     }

     .status-rejected {
          background: #f44336;
     }

     .status-expired {
          background: #9e9e9e;
     }

     .invitation-meta {
          margin-bottom: 15px;
     }

     .invitation-meta small {
          color: #666;
     }

     .invitation-actions {
          display: flex;
          gap: 10px;
          justify-content: flex-end;
     }

     /* 通知设置样式 */
     .notification-settings {
          max-width: 500px;
     }

     .setting-group {
          margin-bottom: 25px;
          padding: 20px;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          background: #f8f9fa;
     }

     .setting-group h4 {
          margin: 0 0 15px 0;
          color: #333;
     }

     .setting-item {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 10px;
          cursor: pointer;
          padding: 8px;
          border-radius: 4px;
          transition: background-color 0.3s ease;
     }

     .setting-item:hover {
          background: rgba(0, 123, 255, 0. .setting-item:hover {
                    background: rgba(0, 123, 255, 0.1);
               }

               .setting-item input[type="checkbox"] {
                    margin: 0;
               }

               .setting-item label {
                    flex: 1;
                    margin: 0;
                    cursor: pointer;
               }

               .setting-description {
                    font-size: 12px;
                    color: #666;
                    margin-left: 30px;
                    margin-top: -5px;
               }

               /* 通知时间设置 */
               .time-settings {
                    display: flex;
                    gap: 15px;
                    align-items: center;
                    margin-top: 10px;
               }

               .time-input {
                    display: flex;
                    align-items: center;
                    gap: 5px;
               }

               .time-input input {
                    width: 70px;
                    padding: 5px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
               }

               /* 响应式设计 */
               @media (max-width: 768px) {
                    .invite-methods {
                         flex-direction: column;
                    }

                    .invite-method {
                         text-align: left;
                    }

                    .invite-method i {
                         display: inline;
                         margin-right: 10px;
                         margin-bottom: 0;
                    }

                    .qr-actions {
                         flex-direction: column;
                    }

                    .avatar-upload {
                         flex-direction: column;
                         text-align: center;
                    }

                    .data-actions {
                         flex-direction: column;
                    }

                    .export-options {
                         flex-direction: column;
                    }

                    .invitation-info {
                         flex-direction: column;
                         align-items: flex-start;
                         gap: 10px;
                    }

                    .invitation-actions {
                         justify-content: flex-start;
                         flex-wrap: wrap;
                    }

                    .time-settings {
                         flex-direction: column;
                         align-items: flex-start;
                         gap: 10px;
                    }
               }

               /* 加载状态样式 */
               .loading-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(255, 255, 255, 0.8);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 10;
               }

               .loading-spinner {
                    width: 40px;
                    height: 40px;
                    border: 4px solid #f3f3f3;
                    border-top: 4px solid #007bff;
                    border-radius: 50%;
                    animation: spin 1s linear infinite;
               }

               @keyframes spin {
                    0% {
                         transform: rotate(0deg);
                    }

                    100% {
                         transform: rotate(360deg);
                    }
               }

               /* 成功/错误消息样式 */
               .message {
                    padding: 12px 16px;
                    border-radius: 6px;
                    margin-bottom: 20px;
                    display: flex;
                    align-items: center;
                    gap: 10px;
               }

               .message.success {
                    background: #d4edda;
                    color: #155724;
                    border: 1px solid #c3e6cb;
               }

               .message.error {
                    background: #f8d7da;
                    color: #721c24;
                    border: 1px solid #f5c6cb;
               }

               .message.warning {
                    background: #fff3cd;
                    color: #856404;
                    border: 1px solid #ffeaa7;
               }

               .message.info {
                    background: #d1ecf1;
                    color: #0c5460;
                    border: 1px solid #bee5eb;
               }

               .message i {
                    font-size: 18px;
               }

               /* 进度条样式 */
               .progress {
                    width: 100%;
                    height: 8px;
                    background: #e0e0e0;
                    border-radius: 4px;
                    overflow: hidden;
                    margin: 10px 0;
               }

               .progress-bar {
                    height: 100%;
                    background: linear-gradient(90deg, #007bff, #0056b3);
                    border-radius: 4px;
                    transition: width 0.3s ease;
                    animation: progress-shimmer 2s infinite;
               }

               @keyframes progress-shimmer {
                    0% {
                         opacity: 1;
                    }

                    50% {
                         opacity: 0.7;
                    }

                    100% {
                         opacity: 1;
                    }
               }

               /* 工具提示样式 */
               .tooltip {
                    position: relative;
                    display: inline-block;
               }

               .tooltip .tooltiptext {
                    visibility: hidden;
                    width: 200px;
                    background-color: #333;
                    color: #fff;
                    text-align: center;
                    border-radius: 6px;
                    padding: 8px;
                    position: absolute;
                    z-index: 1000;
                    bottom: 125%;
                    left: 50%;
                    margin-left: -100px;
                    opacity: 0;
                    transition: opacity 0.3s;
                    font-size: 12px;
               }

               .tooltip .tooltiptext::after {
                    content: "";
                    position: absolute;
                    top: 100%;
                    left: 50%;
                    margin-left: -5px;
                    border-width: 5px;
                    border-style: solid;
                    border-color: #333 transparent transparent transparent;
               }

               .tooltip:hover .tooltiptext {
                    visibility: visible;
                    opacity: 1;
               }

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

               .tag {
                    background: #e3f2fd;
                    color: #1976d2;
                    padding: 4px 12px;
                    border-radius: 16px;
                    font-size: 12px;
                    font-weight: 500;
                    display: flex;
                    align-items: center;
                    gap: 6px;
               }

               .tag.removable {
                    cursor: pointer;
               }

               .tag .remove {
                    color: #666;
                    font-size: 14px;
                    cursor: pointer;
                    padding: 2px;
                    border-radius: 50%;
                    transition: all 0.2s ease;
               }

               .tag .remove:hover {
                    background: rgba(0, 0, 0, 0.1);
                    color: #333;
               }

               /* 搜索框增强样式 */
               .search-container {
                    position: relative;
                    margin-bottom: 20px;
               }

               .search-input {
                    width: 100%;
                    padding: 12px 40px 12px 16px;
                    border: 1px solid #ddd;
                    border-radius: 25px;
                    font-size: 14px;
                    transition: all 0.3s ease;
               }

               .search-input:focus {
                    outline: none;
                    border-color: #007bff;
                    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
               }

               .search-icon {
                    position: absolute;
                    right: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #666;
                    pointer-events: none;
               }

               .search-clear {
                    position: absolute;
                    right: 40px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #999;
                    cursor: pointer;
                    padding: 2px;
                    border-radius: 50%;
                    transition: all 0.2s ease;
               }

               .search-clear:hover {
                    background: rgba(0, 0, 0, 0 .search-clear:hover {
                              background: rgba(0, 0, 0, 0.1);
                              color: #666;
                         }

                         /* 下拉菜单样式 */
                         .dropdown {
                              position: relative;
                              display: inline-block;
                         }

                         .dropdown-toggle {
                              background: white;
                              border: 1px solid #ddd;
                              padding: 8px 30px 8px 12px;
                              border-radius: 6px;
                              cursor: pointer;
                              display: flex;
                              align-items: center;
                              gap: 8px;
                              transition: all 0.3s ease;
                         }

                         .dropdown-toggle:hover {
                              border-color: #007bff;
                         }

                         .dropdown-toggle::after {
                              content: "▼";
                              font-size: 10px;
                              color: #666;
                              margin-left: auto;
                              transition: transform 0.3s ease;
                         }

                         .dropdown.open .dropdown-toggle::after {
                              transform: rotate(180deg);
                         }

                         .dropdown-menu {
                              position: absolute;
                              top: 100%;
                              left: 0;
                              right: 0;
                              background: white;
                              border: 1px solid #ddd;
                              border-radius: 6px;
                              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                              z-index: 1000;
                              max-height: 200px;
                              overflow-y: auto;
                              opacity: 0;
                              visibility: hidden;
                              transform: translateY(-10px);
                              transition: all 0.3s ease;
                         }

                         .dropdown.open .dropdown-menu {
                              opacity: 1;
                              visibility: visible;
                              transform: translateY(0);
                         }

                         .dropdown-item {
                              padding: 10px 15px;
                              cursor: pointer;
                              border-bottom: 1px solid #f0f0f0;
                              transition: background-color 0.2s ease;
                         }

                         .dropdown-item:hover {
                              background: #f8f9fa;
                         }

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

                         .dropdown-item.selected {
                              background: #e3f2fd;
                              color: #1976d2;
                         }

                         /* 分页样式 */
                         .pagination {
                              display: flex;
                              justify-content: center;
                              align-items: center;
                              gap: 5px;
                              margin: 20px 0;
                         }

                         .pagination-item {
                              padding: 8px 12px;
                              border: 1px solid #ddd;
                              background: white;
                              cursor: pointer;
                              border-radius: 4px;
                              transition: all 0.3s ease;
                              min-width: 40px;
                              text-align: center;
                         }

                         .pagination-item:hover {
                              background: #f8f9fa;
                              border-color: #007bff;
                         }

                         .pagination-item.active {
                              background: #007bff;
                              color: white;
                              border-color: #007bff;
                         }

                         .pagination-item.disabled {
                              opacity: 0.5;
                              cursor: not-allowed;
                         }

                         .pagination-item.disabled:hover {
                              background: white;
                              border-color: #ddd;
                         }

                         /* 面包屑导航样式 */
                         .breadcrumb {
                              display: flex;
                              align-items: center;
                              gap: 8px;
                              margin-bottom: 20px;
                              padding: 10px 0;
                              font-size: 14px;
                         }

                         .breadcrumb-item {
                              color: #666;
                              text-decoration: none;
                              transition: color 0.3s ease;
                         }

                         .breadcrumb-item:hover {
                              color: #007bff;
                         }

                         .breadcrumb-item.active {
                              color: #333;
                              font-weight: 500;
                         }

                         .breadcrumb-separator {
                              color: #999;
                              font-size: 12px;
                         }

                         /* 卡片网格布局 */
                         .cards-grid {
                              display: grid;
                              grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                              gap: 20px;
                              margin: 20px 0;
                         }

                         .card {
                              background: white;
                              border: 1px solid #e0e0e0;
                              border-radius: 8px;
                              padding: 20px;
                              transition: all 0.3s ease;
                              cursor: pointer;
                         }

                         .card:hover {
                              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                              transform: translateY(-2px);
                         }

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

                         .card-icon {
                              width: 40px;
                              height: 40px;
                              background: #e3f2fd;
                              border-radius: 50%;
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              color: #1976d2;
                              font-size: 18px;
                         }

                         .card-title {
                              margin: 0;
                              font-size: 16px;
                              color: #333;
                         }

                         .card-content {
                              color: #666;
                              line-height: 1.5;
                         }

                         .card-footer {
                              margin-top: 15px;
                              padding-top: 15px;
                              border-top: 1px solid #f0f0f0;
                              display: flex;
                              justify-content: space-between;
                              align-items: center;
                         }

                         /* 统计数字样式 */
                         .stats-grid {
                              display: grid;
                              grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                              gap: 20px;
                              margin: 20px 0;
                         }

                         .stat-card {
                              background: white;
                              border: 1px solid #e0e0e0;
                              border-radius: 8px;
                              padding: 20px;
                              text-align: center;
                         }

                         .stat-number {
                              font-size: 32px;
                              font-weight: bold;
                              color: #007bff;
                              margin-bottom: 8px;
                         }

                         .stat-label {
                              color: #666;
                              font-size: 14px;
                              margin-bottom: 8px;
                         }

                         .stat-change {
                              font-size: 12px;
                              font-weight: 500;
                         }

                         .stat-change.positive {
                              color: #28a745;
                         }

                         .stat-change.negative {
                              color: #dc3545;
                         }

                         .stat-change.neutral {
                              color: #6c757d;
                         }

                         /* 时间选择器样式 */
                         .datetime-picker {
                              display: flex;
                              gap: 10px;
                              align-items: center;
                         }

                         .date-input, .time-input {
                              padding: 8px 12px;
                              border: 1px solid #ddd;
                              border-radius: 6px;
                              font-size: 14px;
                         }

                         .date-input:focus, .time-input:focus {
                              outline: none;
                              border-color: #007bff;
                              box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
                         }

                         /* 文件上传区域样式 */
                         .file-upload-area {
                              border: 2px dashed #ddd;
                              border-radius: 8px;
                              padding: 40px 20px;
                              text-align: center;
                              background: #fafafa;
                              cursor: pointer;
                              transition: all 0.3s ease;
                         }

                         .file-upload-area:hover {
                              border-color: #007bff;
                              background: #f0f8ff;
                         }

                         .file-upload-area.dragover {
                              border-color: #007bff;
                              background: #e3f2fd;
                         }

                         .upload-icon {
                              font-size: 48px;
                              color: #ccc;
                              margin-bottom: 15px;
                         }

                         .upload-text {
                              color: #666;
                              margin-bottom: 10px;
                         }

                         .upload-hint {
                              font-size: 12px;
                              color: #999;
                         }

                         .file-list {
                              margin-top: 20px;
                         }

                         .file-item {
                              display: flex;
                              align-items: center;
                              gap: 10px;
                              padding: 10px;
                              border: 1px solid #e0e0e0;
                              border-radius: 6px;
                              margin-bottom: 10px;
                              background: white;
                         }

                         .file-icon {
                              color: #666;
                              font-size: 16px;
                         }

                         .file-info {
                              flex: 1;
                         }

                         .file-name {
                              font-weight: 500;
                              margin-bottom: 4px;
                         }

                         .file-size {
                              font-size: 12px;
                              color: #999;
                         }

                         .file-remove {
                              color: #dc3545;
                              cursor: pointer;
                              padding: 4px;
                              border-radius: 4px;
                              transition: background-color 0.2s ease;
                         }

                         .file-remove:hover {
                              background: rgba(220, 53, 69, 0.1);
                         }

                         /* 响应式调整 */
                         @media (max-width: 480px) {
                              .cards-grid {
                                   grid-template-columns: 1fr;
                              }

                              .stats-grid {
                                   grid-template-columns: 1fr;
                              }

                              .datetime-picker {
                                   flex-direction: column;
                                   align-items: stretch;
                              }

                              .pagination {
                                   flex-wrap: wrap;
                                   gap: 3px;
                              }

                              .pagination-item {
                                   min-width: 35px;
                                   padding: 6px 8px;
                              }

                              .breadcrumb {
                                   flex-wrap: wrap;
                              }
                         }

                         /* ===== 新模块样式 ===== */

                         /* 模块导航 */
                         .module-nav {
                              display: flex;
                              gap: var(--spacing-sm);
                              margin-bottom: var(--spacing-lg);
                              flex-wrap: wrap;
                              padding: var(--spacing-md);
                              background: var(--bg-primary);
                              border-radius: var(--border-radius-lg);
                              box-shadow: var(--shadow-sm);
                         }

                         .nav-btn {
                              padding: var(--spacing-sm) var(--spacing-lg);
                              background: var(--bg-secondary);
                              border: none;
                              border-radius: var(--border-radius);
                              cursor: pointer;
                              font-size: var(--font-size-md);
                              transition: all var(--transition-normal);
                              color: var(--text-color);
                         }

                         .nav-btn:hover {
                              background: var(--primary-color);
                              color: white;
                              transform: translateY(-2px);
                         }

                         .nav-btn.active {
                              background: var(--primary-color);
                              color: white;
                              box-shadow: var(--shadow-md);
                         }

                         /* 模块区域 */
                         .module-section {
                              display: none;
                              background: var(--bg-primary);
                              padding: var(--spacing-lg);
                              border-radius: var(--border-radius-lg);
                              box-shadow: var(--shadow-md);
                              margin-bottom: var(--spacing-lg);
                         }

                         .module-section.active {
                              display: block;
                              animation: fadeIn 0.3s ease;
                         }

                         .module-tabs {
                              display: flex;
                              gap: var(--spacing-sm);
                              margin-bottom: var(--spacing-lg);
                              border-bottom: 2px solid var(--border-color);
                              padding-bottom: var(--spacing-sm);
                         }

                         .tab-btn {
                              padding: var(--spacing-sm) var(--spacing-md);
                              background: none;
                              border: none;
                              border-bottom: 2px solid transparent;
                              cursor: pointer;
                              font-size: var(--font-size-md);
                              color: var(--text-light);
                              transition: all var(--transition-normal);
                              margin-bottom: -2px;
                         }

                         .tab-btn:hover {
                              color: var(--primary-color);
                         }

                         .tab-btn.active {
                              color: var(--primary-color);
                              border-bottom-color: var(--primary-color);
                         }

                         .tab-content {
                              display: none;
                         }

                         .tab-content.active {
                              display: block;
                              animation: fadeIn 0.3s ease;
                         }

                         /* 添加按钮 */
                         .add-btn {
                              width: 100%;
                              padding: var(--spacing-md);
                              background: var(--bg-secondary);
                              border: 2px dashed var(--border-color);
                              border-radius: var(--border-radius);
                              cursor: pointer;
                              font-size: var(--font-size-md);
                              color: var(--text-color);
                              transition: all var(--transition-normal);
                              margin-top: var(--spacing-lg);
                         }

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

                         /* 书房模块 */
                         .book-list, .sharing-list {
                              display: grid;
                              gap: var(--spacing-md);
                         }

                         .book-card {
                              display: flex;
                              gap: var(--spacing-md);
                              padding: var(--spacing-md);
                              background: var(--bg-secondary);
                              border-radius: var(--border-radius);
                              transition: all var(--transition-normal);
                         }

                         .book-card:hover {
                              transform: translateX(5px);
                              box-shadow: var(--shadow-sm);
                         }

                         .book-cover {
                              font-size: 3rem;
                              width: 80px;
                              height: 100px;
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              background: var(--bg-primary);
                              border-radius: var(--border-radius);
                         }

                         .book-info h3 {
                              margin-bottom: var(--spacing-xs);
                              color: var(--text-color);
                         }

                         .book-author, .book-status {
                              font-size: var(--font-size-sm);
                              color: var(--text-light);
                              margin-bottom: var(--spacing-xs);
                         }

                         .book-rating, .book-progress {
                              margin-top: var(--spacing-xs);
                              font-size: var(--font-size-sm);
                              color: var(--primary-color);
                         }

                         .sharing-card {
                              padding: var(--spacing-md);
                              background: var(--bg-secondary);
                              border-radius: var(--border-radius);
                              border-left: 4px solid var(--primary-color);
                              margin-bottom: var(--spacing-md);
                         }

                         .sharing-header {
                              display: flex;
                              justify-content: space-between;
                              margin-bottom: var(--spacing-sm);
                              font-size: var(--font-size-sm);
                              color: var(--text-light);
                         }

                         .sharing-card h4 {
                              margin-bottom: var(--spacing-sm);
                              color: var(--text-color);
                         }

                         /* 厨房模块 */
                         .menu-list {
                              display: grid;
                              gap: var(--spacing-md);
                         }

                         .menu-item {
                              display: flex;
                              gap: var(--spacing-md);
                              padding: var(--spacing-md);
                              background: var(--bg-secondary);
                              border-radius: var(--border-radius);
                              transition: all var(--transition-normal);
                         }

                         .menu-item:hover {
                              transform: translateX(5px);
                              box-shadow: var(--shadow-sm);
                         }

                         .menu-icon {
                              font-size: 2.5rem;
                              width: 60px;
                              height: 60px;
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              background: var(--bg-primary);
                              border-radius: var(--border-radius);
                         }

                         .menu-info h3 {
                              margin-bottom: var(--spacing-xs);
                              color: var(--text-color);
                         }

                         .menu-cooker, .menu-date {
                              font-size: var(--font-size-sm);
                              color: var(--text-light);
                         }

                         .popular-dishes {
                              display: grid;
                              grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                              gap: var(--spacing-md);
                         }

                         .dish-card {
                              padding: var(--spacing-md);
                              background: var(--bg-secondary);
                              border-radius: var(--border-radius);
                              text-align: center;
                              transition: all var(--transition-normal);
                         }

                         .dish-card:hover {
                              transform: translateY(-5px);
                              box-shadow: var(--shadow-md);
                         }

                         .dish-card.popular {
                              border: 2px solid var(--primary-color);
                         }

                         .dish-icon {
                              font-size: 3rem;
                              margin-bottom: var(--spacing-sm);
                         }

                         .dish-card h3 {
                              margin-bottom: var(--spacing-sm);
                              color: var(--text-color);
                         }

                         .dish-stats {
                              display: flex;
                              justify-content: space-around;
                              font-size: var(--font-size-sm);
                              color: var(--text-light);
                         }

                         /* 户外模块 */
                         .outdoor-places {
                              display: grid;
                              gap: var(--spacing-md);
                         }

                         .place-card {
                              display: flex;
                              gap: var(--spacing-md);
                              padding: var(--spacing-md);
                              background: var(--bg-secondary);
                              border-radius: var(--border-radius);
                              transition: all var(--transition-normal);
                         }

                         .place-card:hover {
                              transform: translateY(-5px);
                              box-shadow: var(--shadow-md);
                         }

                         .place-image {
                              font-size: 4rem;
                              width: 100px;
                              height: 100px;
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              background: var(--bg-primary);
                              border-radius: var(--border-radius);
                         }

                         .place-info h3 {
                              margin-bottom: var(--spacing-xs);
                              color: var(--text-color);
                         }

                         .place-location, .place-desc {
                              font-size: var(--font-size-sm);
                              color: var(--text-light);
                              margin-bottom: var(--spacing-xs);
                         }

                         .place-tags {
                              display: flex;
                              gap: var(--spacing-xs);
                              flex-wrap: wrap;
                              margin-top: var(--spacing-sm);
                         }

                         .tag {
                              padding: var(--spacing-xs) var(--spacing-sm);
                              background: var(--bg-primary);
                              border-radius: var(--border-radius-sm);
                              font-size: var(--font-size-xs);
                              color: var(--text-color);
                         }

                         /* 养生健身模块 */
                         .fitness-today {
                              display: grid;
                              gap: var(--spacing-md);
                         }

                         .fitness-card {
                              padding: var(--spacing-md);
                              background: var(--bg-secondary);
                              border-radius: var(--border-radius);
                              border-left: 4px solid var(--primary-color);
                         }

                         .fitness-card h3 {
                              margin-bottom: var(--spacing-md);
                              color: var(--text-color);
                         }

                         .fitness-item {
                              display: flex;
                              align-items: center;
                              gap: var(--spacing-md);
                         }

                         .fitness-icon {
                              font-size: 2rem;
                              width: 50px;
                              height: 50px;
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              background: var(--bg-primary);
                              border-radius: 50%;
                         }

                         .fitness-details {
                              flex: 1;
                         }

                         .fitness-details p {
                              margin-bottom: var(--spacing-xs);
                              color: var(--text-color);
                         }

                         .fitness-time {
                              font-size: var(--font-size-sm);
                              color: var(--text-light);
                         }

                         .fitness-status {
                              font-size: var(--font-size-sm);
                              padding: var(--spacing-xs) var(--spacing-sm);
                              background: var(--bg-primary);
                              border-radius: var(--border-radius-sm);
                         }

                         /* 里程碑模块 */
                         .milestone-timeline {
                              position: relative;
                              padding-left: var(--spacing-xl);
                         }

                         .milestone-timeline::before {
                              content: '';
                              position: absolute;
                              left: 20px;
                              top: 0;
                              bottom: 0;
                              width: 2px;
                              background: var(--border-color);
                         }

                         .milestone-item {
                              position: relative;
                              display: flex;
                              gap: var(--spacing-md);
                              margin-bottom: var(--spacing-xl);
                              padding: var(--spacing-md);
                              background: var(--bg-secondary);
                              border-radius: var(--border-radius);
                              transition: all var(--transition-normal);
                         }

                         .milestone-item:hover {
                              transform: translateX(5px);
                              box-shadow: var(--shadow-sm);
                         }

                         .milestone-item::before {
                              content: '';
                              position: absolute;
                              left: -32px;
                              top: 20px;
                              width: 12px;
                              height: 12px;
                              border-radius: 50%;
                              background: var(--primary-color);
                              border: 3px solid var(--bg-primary);
                         }

                         .milestone-icon {
                              font-size: 2.5rem;
                              width: 60px;
                              height: 60px;
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              background: var(--bg-primary);
                              border-radius: 50%;
                         }

                         .milestone-content h3 {
                              margin-bottom: var(--spacing-xs);
                              color: var(--text-color);
                         }

                         .milestone-date {
                              font-size: var(--font-size-sm);
                              color: var(--primary-color);
                              font-weight: 600;
                              margin-bottom: var(--spacing-xs);
                         }

                         .milestone-desc {
                              font-size: var(--font-size-sm);
                              color: var(--text-light);
                         }

                         /* 甜蜜瞬间模块 */
                         .moments-photos, .events-list {
                              display: grid;
                              gap: var(--spacing-md);
                         }

                         .photo-moment, .event-moment {
                              display: flex;
                              gap: var(--spacing-md);
                              padding: var(--spacing-md);
                              background: var(--bg-secondary);
                              border-radius: var(--border-radius);
                              transition: all var(--transition-normal);
                         }

                         .photo-moment:hover, .event-moment:hover {
                              transform: translateX(5px);
                              box-shadow: var(--shadow-sm);
                         }

                         .photo-thumb {
                              width: 80px;
                              height: 80px;
                              background: var(--bg-primary);
                              border-radius: var(--border-radius);
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              font-size: 2rem;
                         }

                         .event-icon {
                              width: 60px;
                              height: 60px;
                              background: var(--bg-primary);
                              border-radius: 50%;
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              font-size: 2rem;
                         }

                         .photo-info h4, .event-info h4 {
                              margin-bottom: var(--spacing-xs);
                              color: var(--text-color);
                         }

                         .photo-date, .event-date {
                              font-size: var(--font-size-sm);
                              color: var(--text-light);
                              margin-bottom: var(--spacing-xs);
                         }

                         .photo-desc, .event-desc {
                              font-size: var(--font-size-sm);
                              color: var(--text-light);
                         }

                         /* 表单样式 */
                         .add-form {
                              padding: var(--spacing-md);
                         }

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

                         .form-group label {
                              display: block;
                              margin-bottom: var(--spacing-xs);
                              color: var(--text-color);
                              font-weight: 500;
                         }

                         .form-group input,
                         .form-group textarea,
                         .form-group select {
                              width: 100%;
                              padding: var(--spacing-sm) var(--spacing-md);
                              border: 1px solid var(--border-color);
                              border-radius: var(--border-radius);
                              font-size: var(--font-size-md);
                              color: var(--text-color);
                              background: var(--bg-primary);
                              transition: all var(--transition-normal);
                         }

                         .form-group input:focus,
                         .form-group textarea:focus,
                         .form-group select:focus {
                              outline: none;
                              border-color: var(--primary-color);
                              box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
                         }

                         .form-actions {
                              display: flex;
                              gap: var(--spacing-md);
                              justify-content: flex-end;
                              margin-top: var(--spacing-lg);
                         }

                         .btn {
                              padding: var(--spacing-sm) var(--spacing-lg);
                              border: none;
                              border-radius: var(--border-radius);
                              cursor: pointer;
                              font-size: var(--font-size-md);
                              transition: all var(--transition-normal);
                         }

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

                         .btn-primary:hover {
                              background: #ff5252;
                              transform: translateY(-2px);
                              box-shadow: var(--shadow-md);
                         }

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

                         .btn-secondary:hover {
                              background: var(--bg-tertiary);
                         }

                         /* 响应式调整 */
                         @media (max-width: 768px) {
                              .module-nav {
                                   flex-direction: column;
                              }

                              .nav-btn {
                                   width: 100%;
                              }

                              .popular-dishes {
                                   grid-template-columns: 1fr;
                              }

                              .milestone-timeline {
                                   padding-left: var(--spacing-lg);
                              }

                              .milestone-item::before {
                                   left: -24px;
                              }
                         }