/* 六爻占断APP官网主页 - 护眼模式配色样式 */

/* ===== CSS变量定义 - 护眼模式 ===== */
:root {
  /* ===== 护眼模式配色系统 ===== */
  
  /* 背景颜色 */
  --bg-primary: #F7F5F3;          /* 温和的米白色 */
  --bg-secondary: #EDE8E3;        /* 淡雅的米色 */
  --bg-tertiary: #E5DDD6;         /* 更深的米色 */
  --bg-dark: #2D2D2D;             /* 深色背景（用于对比） */
  
  /* 文字颜色 */
  --text-primary: #1A1A1A;        /* 更深的灰色，提高对比度 */
  --text-secondary: #3A3A3A;      /* 中等灰色 */
  --text-muted: #555555;          /* 弱化文字 */
  --text-inverse: #FFFFFF;        /* 反色文字 */
  --text-body: #3A3A3A;           /* 正文文字色 */
  
  /* 强调色 */
  --accent-primary: #8B5A2B;      /* 温和的棕色 */
  --accent-secondary: #4A6741;    /* 柔和的绿色 */
  --accent-tertiary: #A67C52;     /* 浅棕色 */
  
  /* 状态颜色 */
  --color-success: #4A6741;       /* 成功色（柔和绿色） */
  --color-warning: #B8860B;       /* 警告色（金色） */
  --color-error: #A0522D;         /* 错误色（温和红棕色） */
  --color-info: #5F7A61;          /* 信息色（青绿色） */
  
  /* 链接颜色 */
  --link-default: #5F7A61;        /* 默认链接色 */
  --link-hover: #4A6741;          /* 悬停链接色 */
  --link-visited: #8B5A2B;        /* 已访问链接色 */
  --link-active: #A67C52;         /* 激活链接色 */
  
  /* ===== 兼容性别名（保持向后兼容） ===== */
  --ink-black: var(--text-primary);
  --ochre-brown: var(--accent-primary);
  --steel-blue: var(--accent-secondary);
  --beige: var(--bg-secondary);
  --floral-white: var(--bg-primary);
  --light-gray: var(--text-muted);
  --crimson: var(--color-error);
  --sea-green: var(--color-success);
  --gold: var(--color-warning);
  
  /* ===== 渐变色 ===== */
  --ink-gradient: linear-gradient(135deg, #2D2D2D 0%, #4A4A4A 50%, #666666 100%);
  --ochre-gradient: linear-gradient(135deg, #8B5A2B 0%, #A67C52 50%, #C4956C 100%);
  --blue-gradient: linear-gradient(135deg, #4A6741 0%, #5F7A61 50%, #7A9B7C 100%);
  --gold-gradient: linear-gradient(135deg, #B8860B 0%, #DAA520 50%, #F4A460 100%);
  
  /* 语义化渐变别名 */
  --gradient-primary: var(--ochre-gradient);
  --gradient-secondary: var(--blue-gradient);
  --gradient-accent: var(--gold-gradient);
  --gradient-ink: var(--ink-gradient);
  --gradient-subtle: linear-gradient(135deg, #F7F5F3 0%, #EDE8E3 50%, #E5DDD6 100%);
  
  /* 字体 */
  --font-primary: 'Source Han Sans CN', 'Noto Sans CJK SC', sans-serif;
  --font-serif: 'Source Han Serif CN', 'Noto Serif CJK SC', serif;
  --font-decorative: 'Ma Shan Zheng', cursive;
  
  /* 间距 */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;
  
  /* 阴影 */
  --shadow-light: 0 2px 8px rgba(45, 45, 45, 0.1);
  --shadow-medium: 0 4px 16px rgba(45, 45, 45, 0.15);
  --shadow-heavy: 0 8px 32px rgba(45, 45, 45, 0.2);
  
  /* 边框圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  
  /* 过渡动画 */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-black);
  background-color: var(--floral-white);
  overflow-x: hidden;
}

/* ===== 通用容器 ===== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

/* ===== 加载动画 ===== */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--floral-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

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

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

.ink-circle {
  width: 60px;
  height: 60px;
  border: 3px solid var(--text-muted);  /* 使用语义化弱化文字色 */
  border-top: 3px solid var(--accent-primary);  /* 使用语义化主要强调色 */
  border-radius: 50%;
  animation: ink-spin 1s linear infinite;
  margin: 0 auto var(--spacing-sm);
}

.loading-text {
  font-family: var(--font-decorative);
  font-size: 1.2rem;
  color: var(--accent-primary);  /* 使用语义化主要强调色 */
  opacity: 0.8;
}

@keyframes ink-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== 墨迹扩散动画 ===== */
@keyframes ink-spread {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

/* ===== 头部导航 ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(26, 26, 26, 0.95);  /* 使用增强的墨黑色 */
  backdrop-filter: blur(10px);
  z-index: 1000;
  transition: background var(--transition-normal);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  max-width: 1200px;
  margin: 0 auto;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.logo {
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1);
}

.brand-name {
  font-family: var(--font-decorative);
  font-size: 1.5rem;
  color: var(--text-inverse);  /* 使用语义化颜色 */
  font-weight: normal;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background: var(--text-inverse);  /* 使用语义化颜色 */
  margin: 2px 0;
  transition: var(--transition-fast);
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: var(--spacing-lg);
}

.nav-menu a {
  color: var(--text-inverse);  /* 使用语义化颜色 */
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
  position: relative;
}

.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-primary);  /* 使用语义化强调色 */
  transition: width var(--transition-fast);
}

.nav-menu a:hover {
  color: var(--accent-primary);  /* 使用语义化强调色 */
}

.nav-menu a:hover::after {
  width: 100%;
}

/* ===== 英雄区域 ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg-primary);  /* 使用语义化背景色 */
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.ink-wash-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(70, 130, 180, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(44, 44, 44, 0.05) 0%, transparent 70%);
  animation: ink-flow 20s ease-in-out infinite;
}

@keyframes ink-flow {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(2deg); }
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xxl);
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xxl) var(--spacing-md);
}

.hero-text {
  animation: fadeInUp 1s ease-out;
}

.hero-title {
  margin-bottom: var(--spacing-lg);
}

.title-main {
  display: block;
  font-family: var(--font-decorative);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--text-primary);  /* 使用语义化主要文字色 */
  line-height: 1.2;
  margin-bottom: var(--spacing-xs);
  text-shadow: 2px 2px 4px rgba(139, 69, 19, 0.3);
}

.title-sub {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  color: var(--text-secondary);  /* 使用语义化次要文字色 */
  font-weight: 300;
}

.hero-description {
  font-size: 1.1rem;
  color: var(--text-body);  /* 使用语义化正文文字色 */
  margin-bottom: var(--spacing-xl);
  line-height: 1.8;
  opacity: 0.9;
}

.hero-cta {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.cta-button.primary {
  background: var(--gradient-primary);  /* 使用语义化主要渐变 */
  color: var(--text-inverse);  /* 使用语义化反色文字 */
  box-shadow: var(--shadow-medium);
}

.cta-button.primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-heavy);
}

.cta-button.secondary {
  background: transparent;
  color: var(--accent-secondary);  /* 使用语义化次要强调色 */
  border: 2px solid var(--accent-secondary);
}

.cta-button.secondary:hover {
  background: var(--accent-secondary);
  color: var(--text-inverse);  /* 使用语义化反色文字 */
}

.button-icon {
  font-size: 1.2rem;
  transition: transform var(--transition-fast);
}

.cta-button:hover .button-icon {
  transform: translateY(2px);
}

.hero-visual {
  position: relative;
  animation: fadeInRight 1s ease-out 0.3s both;
}

.app-preview {
  position: relative;
  text-align: center;
}

.app-screenshot {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-heavy);
  background: var(--light-gray);
  aspect-ratio: 9/16;
  object-fit: cover;
}

.preview-decoration {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
}

.bagua-symbol {
  width: 100%;
  height: 100%;
  background: var(--gradient-accent);  /* 使用语义化强调渐变 */
  border-radius: 50%;
  position: relative;
  animation: rotate 20s linear infinite;
}

.bagua-symbol::before {
  content: '☯';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: var(--text-primary);  /* 使用语义化主要文字色 */
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== 关于我们区域 ===== */
.about-section {
  padding: var(--spacing-xxl) 0;
  background: var(--bg-primary);  /* 使用语义化背景色 */
  position: relative;
}

.about-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--light-gray), transparent);
}

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

.section-title {
  font-family: var(--font-decorative);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--text-primary);  /* 使用语义化主要文字色 */
  margin-bottom: var(--spacing-sm);
  position: relative;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  font-weight: 600;
}

.title-decoration {
  width: 60px;
  height: 3px;
  background: var(--gradient-primary);  /* 使用语义化主要渐变 */
  margin: 0 auto var(--spacing-md);
  border-radius: 2px;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);  /* 使用语义化次要文字色 */
  opacity: 0.8;
}

.about-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-xxl);
  align-items: center;
}

.about-description {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-body);  /* 使用语义化正文文字色 */
  margin-bottom: var(--spacing-lg);
  text-align: justify;
}

.about-visual {
  display: flex;
  justify-content: center;
}

.culture-elements {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.element-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: rgba(245, 245, 220, 0.5);
  border-radius: var(--radius-md);
  transition: transform var(--transition-normal);
}

.element-item:hover {
  transform: translateX(10px);
}

.element-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.ink-brush {
  background: var(--gradient-ink);  /* 使用语义化墨色渐变 */
  color: var(--text-inverse);  /* 使用语义化反色文字 */
}

.ink-brush::before {
  content: '🖌';
}

.calligraphy {
  background: var(--gradient-secondary);  /* 使用语义化次要渐变 */
  color: var(--text-inverse);  /* 使用语义化反色文字 */
}

.calligraphy::before {
  content: '📜';
}

.traditional-pattern {
  background: var(--gradient-accent);  /* 使用语义化强调渐变 */
  color: var(--text-primary);  /* 使用语义化主要文字色 */
}

/* Legal Page Styles */
.legal-page {
    padding: var(--spacing-xxl) 0;
    background-color: var(--bg-primary);
}

.legal-content {
    background: #fff;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-medium);
    max-width: 900px;
    margin: 0 auto;
}

.legal-content h1 {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--text-primary);
    font-size: 2rem;
}

.legal-content h2 {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent-primary);
    padding-bottom: var(--spacing-xs);
    font-size: 1.5rem;
}

.legal-content h3 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 1.2rem;
    font-weight: 600;
}

.legal-content p, .legal-content li {
    line-height: 1.8;
    color: var(--text-body);
    margin-bottom: var(--spacing-sm);
}

.legal-content ul {
    padding-left: var(--spacing-lg);
}

.legal-content li {
    margin-bottom: var(--spacing-xs);
}

/* Legal Page Tables */
.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-md) 0;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid var(--bg-tertiary);
}

.legal-content th, .legal-content td {
    border: 1px solid var(--bg-tertiary);
    padding: var(--spacing-sm);
    text-align: left;
    vertical-align: top;
}

.legal-content th {
    background-color: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

.legal-content tr:nth-child(even) {
    background-color: var(--bg-primary);
}

.legal-content tr:hover {
    background-color: rgba(139, 90, 43, 0.05);
}

.traditional-pattern::before {
  content: '🏮';
}

/* ===== 功能特色区域 ===== */
.features-section {
  padding: var(--spacing-xxl) 0;
  background: var(--gradient-subtle);  /* 使用语义化微妙渐变 */
  position: relative;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xxl);
}

.feature-card {
  background: var(--bg-secondary);  /* 使用语义化次要背景色 */
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-light);
  text-align: center;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(139, 69, 19, 0.1), transparent);
  transition: left var(--transition-slow);
}

.feature-card:hover::before {
  left: 100%;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-heavy);
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);  /* 使用语义化主要渐变 */
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

.feature-icon svg {
  width: 40px;
  height: 40px;
}

.feature-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--text-primary);  /* 使用语义化主要文字色 */
  margin-bottom: var(--spacing-md);
  position: relative;
  z-index: 1;
}

.feature-description {
  color: var(--text-body);  /* 使用语义化正文文字色 */
  line-height: 1.7;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

/* ===== 下载区域 ===== */
.download-section {
  padding: var(--spacing-xxl) 0;
  background: var(--gradient-ink);  /* 使用语义化墨色渐变 */
  color: var(--text-inverse);  /* 使用语义化反色文字 */
  position: relative;
}

.download-section .section-title {
  color: var(--text-inverse);  /* 使用语义化反色文字 */
}

.download-section .section-subtitle {
  color: var(--text-muted);  /* 使用语义化弱化文字色 */
}

.download-section .title-decoration {
  background: var(--gradient-primary);  /* 使用语义化主要渐变 */
}

.download-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-xxl);
  align-items: center;
  margin-top: var(--spacing-xxl);
}

.download-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.download-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-secondary);  /* 使用语义化次要背景色 */
  color: var(--text-primary);  /* 使用语义化主要文字色 */
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-light);
}

.download-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.store-icon {
  width: 40px;
  height: 40px;
}

.btn-text {
  display: flex;
  flex-direction: column;
}

.btn-subtitle {
  font-size: 0.8rem;
  opacity: 0.7;
}

.btn-title {
  font-size: 1.1rem;
  font-weight: 600;
}

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

.app-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: var(--spacing-xl);
}

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

.stat-number {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--accent-tertiary);  /* 使用语义化第三强调色 */
  margin-bottom: var(--spacing-xs);
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

.qr-code-section {
  text-align: center;
}

.qr-code {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--spacing-sm);
  background: var(--bg-secondary);  /* 使用语义化次要背景色 */
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-code img {
  width: 100px;
  height: 100px;
  background: var(--light-gray);
}

.qr-text {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* ===== 页脚 ===== */
.footer {
  background: var(--bg-dark);  /* 使用语义化深色背景 */
  color: var(--text-inverse);  /* 使用语义化反色文字 */
  padding: var(--spacing-xl) 0 var(--spacing-lg);
}

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

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.footer-logo {
  filter: brightness(0) invert(1);
}

.footer-brand-name {
  font-family: var(--font-decorative);
  font-size: 1.2rem;
}

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

.footer-links a {
  color: var(--text-muted);  /* 使用语义化弱化文字色 */
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--accent-primary);  /* 使用语义化主要强调色 */
}

.footer-social {
  display: flex;
  gap: var(--spacing-md);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(245, 245, 220, 0.1);
  border-radius: 50%;
  color: var(--text-muted);  /* 使用语义化弱化文字色 */
  text-decoration: none;
  transition: all var(--transition-fast);
}

.social-link:hover {
  background: var(--accent-primary);  /* 使用语义化主要强调色 */
  color: var(--text-inverse);  /* 使用语义化反色文字 */
  transform: translateY(-2px);
}

.social-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.footer-bottom {
  border-top: 1px solid rgba(245, 245, 220, 0.2);
  padding-top: var(--spacing-lg);
  text-align: center;
}

.copyright {
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.6;
  color: var(--text-primary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.divider {
  margin: 0 var(--spacing-xs);
  opacity: 0.7;
  color: var(--text-secondary);
}

.disclaimer {
  font-style: italic;
  color: var(--text-secondary);
}

.icp-info {
  font-size: 0.85rem;
  opacity: 0.9;
  color: var(--text-secondary);
}

/* ===== 工具类 ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

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

.hidden { display: none; }
.visible { display: block; }

/* ===== 无障碍支持 ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 焦点样式 */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* ===== 法律文档页面样式 ===== */
.legal-page {
  padding-top: 100px; /* 避开固定头部 */
  padding-bottom: var(--spacing-xxl);
  background-color: var(--bg-primary);
  min-height: 100vh;
}

.legal-content {
  background: var(--bg-secondary);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-light);
  max-width: 1000px;
  margin: 0 auto;
}

.legal-content h1 {
  text-align: center;
  font-family: var(--font-decorative);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xl);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.legal-content h2 {
  font-family: var(--font-serif);
  color: var(--accent-primary);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid rgba(139, 69, 19, 0.1);
  font-size: 1.5rem;
}

.legal-content h3 {
  color: var(--text-primary);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  font-size: 1.1rem;
  font-weight: 600;
}

.legal-content p, 
.legal-content li {
  color: var(--text-body);
  line-height: 1.8;
  margin-bottom: var(--spacing-sm);
  text-align: justify;
}

.legal-content ul {
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.legal-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* 表格样式 */
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-md) 0;
  font-size: 0.95rem;
  border: 1px solid var(--accent-tertiary);
  background: rgba(255, 255, 255, 0.3);
}

.legal-content th,
.legal-content td {
  padding: var(--spacing-sm);
  border: 1px solid rgba(139, 69, 19, 0.2);
  text-align: left;
  vertical-align: top;
}

.legal-content th {
  background-color: rgba(139, 69, 19, 0.1);
  color: var(--accent-primary);
  font-weight: 600;
  white-space: nowrap;
}

.legal-content tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.5);
}

.legal-content tr:hover {
  background-color: rgba(139, 69, 19, 0.05);
}

.legal-content a {
  color: var(--link-default);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all var(--transition-fast);
}

.legal-content a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .legal-page {
    padding-top: 80px;
  }

  .legal-content {
    padding: var(--spacing-md);
    margin: 0 var(--spacing-sm);
  }
  
  .legal-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .legal-content th,
  .legal-content td {
    min-width: 120px; /* 防止内容过窄 */
  }
}

:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}



/* 跳转到主内容链接 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--accent-primary);  /* 使用语义化主要强调色 */
  color: var(--text-inverse);  /* 使用语义化反色文字 */
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 10000;
}

.skip-link:focus {
  top: 6px;
}

/* ===== 深色模式配色系统 ===== */
@media (prefers-color-scheme: dark) {
  :root {
    /* 深色模式基础色彩 */
    --bg-primary: #0F0F0F;
    --bg-secondary: #1A1A1A;
    --bg-tertiary: #2A2A2A;
    --bg-dark: #000000;
    
    /* 深色模式文字色彩 */
    --text-primary: #F5F5F5;           /* 对比度13.1:1 */
    --text-secondary: #D1D1D1;         /* 对比度8.2:1 */
    --text-muted: #A1A1A1;             /* 对比度4.8:1 */
    --text-inverse: #0F0F0F;
    
    /* 深色模式强调色 */
    --accent-primary: #E6B17A;         /* 调亮的赭石 - 对比度5.2:1 */
    --accent-secondary: #7FB3D3;       /* 调亮的青蓝 - 对比度4.9:1 */
    --accent-tertiary: #F4D03F;        /* 调亮的金色 - 对比度6.1:1 */
    
    /* 深色模式状态色 */
    --color-success: #4ADE80;          /* 对比度5.8:1 */
    --color-warning: #FBBF24;          /* 对比度7.2:1 */
    --color-error: #F87171;            /* 对比度4.6:1 */
    --color-info: #60A5FA;             /* 对比度5.1:1 */
    
    /* 深色模式链接色 */
    --link-default: #7FB3D3;           /* 对比度4.9:1 */
    --link-hover: #93C5DC;             /* 对比度6.2:1 */
    --link-visited: #B19CD9;           /* 对比度5.4:1 */
    --link-active: #E6B17A;
    
    /* 深色模式渐变色 */
    --ink-gradient-enhanced: linear-gradient(135deg, #0F0F0F 0%, #2A2A2A 50%, #4A4A4A 100%);
    --ochre-gradient-enhanced: linear-gradient(135deg, #E6B17A 0%, #D4A574 50%, #C2996E 100%);
    --blue-gradient-enhanced: linear-gradient(135deg, #7FB3D3 0%, #6FA3C3 50%, #5F93B3 100%);
    --gold-gradient-enhanced: linear-gradient(135deg, #F4D03F 0%, #E4C02F 50%, #D4B01F 100%);
    
    /* 更新兼容性别名 */
    --ink-black: var(--text-primary);
    --ochre-brown: var(--accent-primary);
    --steel-blue: var(--accent-secondary);
    --beige: var(--bg-secondary);
    --floral-white: var(--bg-primary);
    --light-gray: var(--text-muted);
    --crimson: var(--color-error);
    --sea-green: var(--color-success);
    --gold: var(--color-warning);
    
    --ink-gradient: var(--ink-gradient-enhanced);
    --ochre-gradient: var(--ochre-gradient-enhanced);
    --blue-gradient: var(--blue-gradient-enhanced);
    --gold-gradient: var(--gold-gradient-enhanced);
  }
}

/* ===== 高对比度模式 ===== */
@media (prefers-contrast: high) {
  :root {
    --text-primary: #000000;
    --text-secondary: #000000;
    --text-muted: #333333;             /* 对比度4.6:1 */
    --text-inverse: #FFFFFF;
    
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F8F8;
    --bg-tertiary: #F0F0F0;
    --bg-dark: #000000;
    
    --accent-primary: #8B0000;         /* 深红色 - 对比度10.1:1 */
    --accent-secondary: #000080;       /* 深蓝色 - 对比度12.6:1 */
    --accent-tertiary: #B8860B;        /* 深金色 - 对比度4.7:1 */
    
    --color-success: #006400;          /* 深绿色 - 对比度8.2:1 */
    --color-warning: #FF8C00;          /* 深橙色 - 对比度4.8:1 */
    --color-error: #8B0000;            /* 深红色 - 对比度10.1:1 */
    --color-info: #000080;             /* 深蓝色 - 对比度12.6:1 */
    
    --link-default: #000080;
    --link-hover: #8B0000;
    --link-visited: #4B0082;           /* 深紫色 - 对比度9.1:1 */
    --link-active: #8B0000;
    
    /* 高对比度模式渐变色 */
    --ink-gradient-enhanced: linear-gradient(135deg, #000000 0%, #333333 50%, #666666 100%);
    --ochre-gradient-enhanced: linear-gradient(135deg, #8B0000 0%, #A52A2A 50%, #CD5C5C 100%);
    --blue-gradient-enhanced: linear-gradient(135deg, #000080 0%, #0000CD 50%, #4169E1 100%);
    --gold-gradient-enhanced: linear-gradient(135deg, #B8860B 0%, #DAA520 50%, #FFD700 100%);
    
    /* 更新兼容性别名 */
    --ink-black: var(--text-primary);
    --ochre-brown: var(--accent-primary);
    --steel-blue: var(--accent-secondary);
    --beige: var(--bg-secondary);
    --floral-white: var(--bg-primary);
    --light-gray: var(--text-muted);
    --crimson: var(--color-error);
    --sea-green: var(--color-success);
    --gold: var(--accent-tertiary);
    
    --ink-gradient: var(--ink-gradient-enhanced);
    --ochre-gradient: var(--ochre-gradient-enhanced);
    --blue-gradient: var(--blue-gradient-enhanced);
    --gold-gradient: var(--gold-gradient-enhanced);
  }
}

/* ===== 多套备选配色方案 ===== */

/* 护眼模式 */
.theme-eye-care {
  --text-primary: #2D2D2D;
  --text-secondary: #4A4A4A;
  --text-muted: #666666;
  --text-inverse: #FFFFFF;
  
  --bg-primary: #F7F5F3;
  --bg-secondary: #EDE8E3;
  --bg-tertiary: #E3DDD8;
  --bg-dark: #2D2D2D;
  
  --accent-primary: #8B5A2B;
  --accent-secondary: #4A6741;
  --accent-tertiary: #B8860B;
  
  --color-success: #2E5D31;
  --color-warning: #8B6914;
  --color-error: #8B2635;
  --color-info: #4A6741;
  
  --link-default: #4A6741;
  --link-hover: #2E5D31;
  --link-visited: #6B4E71;
  --link-active: #8B5A2B;
}

/* 强光环境模式 */
.theme-bright-environment {
  --text-primary: #000000;
  --text-secondary: #1A1A1A;
  --text-muted: #333333;
  --text-inverse: #FFFFFF;
  
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F8F8;
  --bg-tertiary: #F0F0F0;
  --bg-dark: #000000;
  
  --accent-primary: #6B3410;
  --accent-secondary: #1E3A5F;
  --accent-tertiary: #8B6914;
  
  --color-success: #1F4E23;
  --color-warning: #8B6914;
  --color-error: #8B1538;
  --color-info: #1E3A5F;
  
  --link-default: #1E3A5F;
  --link-hover: #6B3410;
  --link-visited: #4B2C5F;
  --link-active: #6B3410;
}