* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; color: #222; background: #f6f8fa; }
.site-header { background: #2c3e50; color: #fff; }
.nav { max-width: 980px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }
.nav-left { font-weight: 600; }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
.nav-links a { color: #dfe6ec; text-decoration: none; font-size: 14px; }
.btn-home { background: #409eff; color: #fff; text-decoration: none; padding: 8px 12px; border-radius: 4px; font-size: 14px; font-weight: 500; transition: background 0.3s; }
.btn-home:hover { background: #337ecc; }
.container { max-width: 980px; margin: 24px auto; padding: 0 16px; }
.breadcrumb { color: #667; font-size: 13px; margin-bottom: 12px; }
.breadcrumb a { color: #409eff; text-decoration: none; }
.page-title { font-size: 22px; font-weight: 600; color: #1f2d3d; text-align: center; margin: 16px 0 20px; }
.card { background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.04); padding: 18px; margin-bottom: 20px; }
.card h2 { font-size: 18px; border-left: 3px solid #409eff; padding-left: 8px; color: #273444; margin: 0 0 16px 0; }

/* 表单样式 */
.bazi-form { margin-top: 16px; }
.form-row { display: flex; gap: 16px; margin-bottom: 16px; }
.input-group { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.input-group.full-width { flex: 1 1 100%; }
.input-group label { font-size: 13px; color: #555; font-weight: 500; }
.input-group input, .input-group select { padding: 10px 12px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 14px; transition: border-color 0.3s; }
.input-group input:focus, .input-group select:focus { outline: none; border-color: #409eff; box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1); }
.input-group input::placeholder { color: #c0c4cc; }

/* 按钮样式 */
.btn { padding: 10px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.3s; border: none; }
.btn-primary { background: #409eff; color: #fff; }
.btn-primary:hover { background: #337ecc; }
.btn-secondary { background: #fff; color: #409eff; border: 1px solid #409eff; }
.btn-secondary:hover { background: #ecf5ff; }
.btn-copy { background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; padding: 6px 12px; font-size: 12px; }
.btn-copy:hover { background: #e0f2fe; }
.btn-share { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; padding: 6px 12px; font-size: 12px; }
.btn-share:hover { background: #dcfce7; }
.btn-print { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; padding: 6px 12px; font-size: 12px; }
.btn-print:hover { background: #fef3c7; }
.actions { display: flex; gap: 12px; margin-top: 20px; }

/* 结果展示样式 */
.result-section { margin-bottom: 24px; }
.result-section h3 { font-size: 16px; color: #2c3e50; margin: 0 0 12px 0; border-left: 3px solid #409eff; padding-left: 8px; }

/* 基本信息网格 */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.info-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.info-label { color: #5e6d82; font-size: 13px; font-weight: 500; min-width: 80px; }
.info-value { color: #1f2d3d; font-size: 14px; font-weight: 500; }

/* 详细信息表格 */
.detailed-table-container { overflow-x: auto; margin-top: 16px; }
.detailed-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.detailed-table th { background: #f8fafc; color: #374151; font-weight: 600; padding: 12px 8px; text-align: center; border-bottom: 1px solid #e5e7eb; font-size: 13px; }
.detailed-table td { padding: 10px 8px; text-align: center; border-bottom: 1px solid #f3f4f6; font-size: 13px; color: #374151; }
.detailed-table tr:last-child td { border-bottom: none; }
.detailed-table tr:nth-child(even) { background: #fafbfc; }
.detailed-table tr:hover { background: #f0f9ff; }

/* 天干地支留意 */
.tiangan-dizhi-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
.tiangan-dizhi-info .info-item { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; }
.tiangan-dizhi-info h4 { color: #2c3e50; font-size: 14px; margin: 0 0 8px 0; font-weight: 600; }
.tiangan-dizhi-info .info-content { color: #5e6d82; font-size: 13px; line-height: 1.6; white-space: pre-line; }

/* 五行分析 */
.wuxing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 16px; }
.wuxing-item { text-align: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; }
.wuxing-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.wuxing-count { font-size: 20px; font-weight: 700; color: #1e293b; }

/* 五行颜色 */
.wuxing-item:nth-child(1) .wuxing-label { color: #dc2626; } /* 金 */
.wuxing-item:nth-child(2) .wuxing-label { color: #059669; } /* 木 */
.wuxing-item:nth-child(3) .wuxing-label { color: #2563eb; } /* 水 */
.wuxing-item:nth-child(4) .wuxing-label { color: #dc2626; } /* 火 */
.wuxing-item:nth-child(5) .wuxing-label { color: #92400e; } /* 土 */

/* 十神分析 */
.shishen-container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 16px; }
.shishen-group { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; text-align: center; }
.shishen-group h4 { color: #2c3e50; font-size: 12px; margin: 0 0 8px 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.shishen-items { display: flex; flex-direction: column; gap: 6px; }
.shishen-item { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; background: #fff; border-radius: 4px; border: 1px solid #e5e7eb; }
.shishen-label { color: #5e6d82; font-size: 12px; font-weight: 500; }
.shishen-value { color: #1f2d3d; font-size: 14px; font-weight: 600; background: #f0f9ff; color: #0369a1; padding: 2px 6px; border-radius: 3px; min-width: 20px; text-align: center; }

/* 结果操作按钮 */
.result-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* 帮助内容 */
.help-content { margin-top: 12px; }
.help-content h3 { color: #2c3e50; font-size: 16px; margin: 16px 0 8px 0; border-left: 3px solid #409eff; padding-left: 8px; }
.help-content ul { margin: 8px 0; padding-left: 20px; }
.help-content li { margin: 6px 0; line-height: 1.5; }
.example { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px; margin: 12px 0; }
.example p { margin: 6px 0; }
.desc { color: #5e6d82; font-size: 14px; }

/* 版权信息样式 */
.site-footer { background: #2c3e50; color: #fff; text-align: center; padding: 20px 0; margin-top: 40px; }
.footer-content p { margin: 0; font-size: 14px; color: #dfe6ec; }

/* 移动端适配 */
@media (max-width: 768px) {
  .nav-right { flex-direction: column; gap: 8px; }
  .nav-links { display: none; }
  .btn-home { align-self: flex-end; }
  .page-title { font-size: 18px; }
  .card { padding: 16px; }
  .container { padding: 0 12px; }
  .form-row { flex-direction: column; gap: 12px; }
  .actions { flex-direction: column; gap: 8px; }
  .btn { padding: 12px 16px; font-size: 15px; }
  .info-grid { grid-template-columns: 1fr; gap: 8px; }
  .detailed-table th, .detailed-table td { padding: 8px 6px; font-size: 12px; }
  .tiangan-dizhi-info { grid-template-columns: 1fr; gap: 12px; }
  .wuxing-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .shishen-container { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .shishen-group { padding: 10px; }
  .shishen-group h4 { font-size: 11px; }
  .shishen-item { padding: 3px 6px; }
  .shishen-label { font-size: 11px; }
  .shishen-value { font-size: 12px; padding: 1px 4px; }
  .result-actions { flex-direction: column; gap: 8px; }
  .wuxing-count { font-size: 18px; }
}

@media (max-width: 480px) {
  .page-title { font-size: 16px; }
  .card h2 { font-size: 16px; }
  .card { padding: 14px; }
  .container { padding: 0 10px; }
  .form-row { gap: 10px; }
  .input-group input, .input-group select { padding: 12px; font-size: 16px; }
  .detailed-table th, .detailed-table td { padding: 6px 4px; font-size: 11px; }
  .wuxing-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .wuxing-item { padding: 10px; }
  .wuxing-count { font-size: 16px; }
  .shishen-container { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .shishen-group { padding: 8px; }
  .shishen-group h4 { font-size: 10px; }
  .shishen-item { padding: 2px 4px; }
  .shishen-label { font-size: 10px; }
  .shishen-value { font-size: 11px; padding: 1px 3px; }
  .result-actions { gap: 6px; }
}

/* iPhone 6s Plus 及以后机型优化 (414px+) */
@media (min-width: 414px) {
  .nav { padding: 14px 16px; }
  .nav-left { font-size: 17px; }
  .page-title { font-size: 19px; }
  .card { padding: 18px; }
  .container { padding: 0 16px; }
  .form-row { gap: 14px; }
  .input-group input, .input-group select { padding: 12px; font-size: 16px; }
  .detailed-table th, .detailed-table td { padding: 10px 8px; font-size: 13px; }
  .wuxing-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .wuxing-item { padding: 12px; }
  .wuxing-count { font-size: 20px; }
  .shishen-container { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .shishen-group { padding: 10px; }
  .shishen-group h4 { font-size: 11px; }
  .shishen-item { padding: 4px 6px; }
  .shishen-label { font-size: 11px; }
  .shishen-value { font-size: 12px; padding: 2px 5px; }
  .tiangan-dizhi-info { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .tiangan-dizhi-info .info-item { padding: 16px; }
  .tiangan-dizhi-info h4 { font-size: 14px; }
  .tiangan-dizhi-info .info-content { font-size: 13px; }
  .result-actions { gap: 10px; }
}

/* iPhone 13/14/15 标准版优化 (390px-413px) */
@media (min-width: 390px) and (max-width: 413px) {
  .nav { padding: 12px 14px; }
  .nav-left { font-size: 16px; }
  .page-title { font-size: 18px; }
  .card { padding: 16px; }
  .container { padding: 0 14px; }
  .form-row { gap: 12px; }
  .input-group input, .input-group select { padding: 11px 12px; font-size: 15px; }
  .detailed-table th, .detailed-table td { padding: 9px 7px; font-size: 12px; }
  .wuxing-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .wuxing-item { padding: 11px; }
  .wuxing-count { font-size: 18px; }
  .shishen-container { grid-template-columns: repeat(5, 1fr); gap: 7px; }
  .shishen-group { padding: 9px; }
  .shishen-group h4 { font-size: 10px; }
  .shishen-item { padding: 3px 5px; }
  .shishen-label { font-size: 10px; }
  .shishen-value { font-size: 11px; padding: 1px 4px; }
  .tiangan-dizhi-info { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tiangan-dizhi-info .info-item { padding: 14px; }
  .tiangan-dizhi-info h4 { font-size: 13px; }
  .tiangan-dizhi-info .info-content { font-size: 12px; }
  .result-actions { gap: 8px; }
}

/* iPhone SE 2/3 优化 (375px-389px) */
@media (min-width: 375px) and (max-width: 389px) {
  .nav { padding: 11px 13px; }
  .nav-left { font-size: 15px; }
  .page-title { font-size: 17px; }
  .card { padding: 15px; }
  .container { padding: 0 13px; }
  .form-row { gap: 11px; }
  .input-group input, .input-group select { padding: 10px 11px; font-size: 14px; }
  .detailed-table th, .detailed-table td { padding: 8px 6px; font-size: 11px; }
  .wuxing-grid { grid-template-columns: repeat(5, 1fr); gap: 7px; }
  .wuxing-item { padding: 10px; }
  .wuxing-count { font-size: 17px; }
  .shishen-container { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .shishen-group { padding: 8px; }
  .shishen-group h4 { font-size: 10px; }
  .shishen-item { padding: 3px 5px; }
  .shishen-label { font-size: 10px; }
  .shishen-value { font-size: 11px; padding: 1px 4px; }
  .tiangan-dizhi-info { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tiangan-dizhi-info .info-item { padding: 12px; }
  .tiangan-dizhi-info h4 { font-size: 12px; }
  .tiangan-dizhi-info .info-content { font-size: 11px; }
  .result-actions { gap: 7px; }
}

/* iPhone 12 mini 优化 (360px-374px) */
@media (min-width: 360px) and (max-width: 374px) {
  .nav { padding: 10px 12px; }
  .nav-left { font-size: 14px; }
  .page-title { font-size: 16px; }
  .card { padding: 14px; }
  .container { padding: 0 12px; }
  .form-row { gap: 10px; }
  .input-group input, .input-group select { padding: 9px 10px; font-size: 13px; }
  .detailed-table th, .detailed-table td { padding: 7px 5px; font-size: 10px; }
  .wuxing-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .wuxing-item { padding: 9px; }
  .wuxing-count { font-size: 16px; }
  .shishen-container { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .shishen-group { padding: 7px; }
  .shishen-group h4 { font-size: 9px; }
  .shishen-item { padding: 2px 4px; }
  .shishen-label { font-size: 9px; }
  .shishen-value { font-size: 10px; padding: 1px 3px; }
  .tiangan-dizhi-info { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tiangan-dizhi-info .info-item { padding: 10px; }
  .tiangan-dizhi-info h4 { font-size: 11px; }
  .tiangan-dizhi-info .info-content { font-size: 10px; }
  .result-actions { gap: 6px; }
}

/* 通用移动端优化 - 确保所有手机都有良好的触摸体验 */
@media (max-width: 768px) {
  .btn { min-height: 44px; min-width: 44px; }
  .input-group input, .input-group select { min-height: 44px; }
  .bazi-column { min-height: 80px; }
  .wuxing-item { min-height: 60px; }
  .shishen-item { min-height: 40px; }
}

/* 现代iPhone横屏优化 */
@media (max-width: 768px) and (orientation: landscape) and (min-width: 360px) {
  .detailed-table th, .detailed-table td { padding: 6px 4px; font-size: 10px; }
  .wuxing-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .shishen-container { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .tiangan-dizhi-info { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .shishen-group { padding: 6px; }
  .shishen-group h4 { font-size: 9px; }
  .shishen-item { padding: 2px 4px; }
  .shishen-label { font-size: 9px; }
  .shishen-value { font-size: 10px; padding: 1px 3px; }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .tiangan, .dizhi { text-rendering: optimizeLegibility; }
  .wuxing-count { text-rendering: optimizeLegibility; }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: #e5e5e5; }
  .card { background: #2d2d2d; border: 1px solid #404040; }
  .card h2 { color: #e5e5e5; }
  .input-group input, .input-group select { background: #2d2d2d; border-color: #404040; color: #e5e5e5; }
  .input-group input:focus, .input-group select:focus { border-color: #409eff; }
  .detailed-table { background: #2d2d2d; }
  .detailed-table th { background: #3a3a3a; color: #e5e5e5; border-bottom-color: #404040; }
  .detailed-table td { color: #e5e5e5; border-bottom-color: #404040; }
  .detailed-table tr:nth-child(even) { background: #3a3a3a; }
  .detailed-table tr:hover { background: #4a4a4a; }
  .tiangan-dizhi-info .info-item { background: #2d2d2d; border-color: #404040; }
  .tiangan-dizhi-info h4 { color: #e5e5e5; }
  .tiangan-dizhi-info .info-content { color: #a0a0a0; }
  .wuxing-item { 
    background: #2d2d2d; 
    border-color: #404040; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
  }
  .wuxing-item:hover {
    background: #3a3a3a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
  .wuxing-label { 
    color: #e5e5e5; 
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
  .wuxing-count { 
    color: #e5e5e5; 
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
  /* 五行颜色在深色模式下的优化 */
  .wuxing-item:nth-child(1) { 
    border-color: #f87171; 
    background: linear-gradient(135deg, #2d2d2d 0%, #3a1a1a 100%);
  }
  .wuxing-item:nth-child(1) .wuxing-label { 
    color: #f87171; 
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.3);
  }
  .wuxing-item:nth-child(2) { 
    border-color: #4ade80; 
    background: linear-gradient(135deg, #2d2d2d 0%, #1a3a1a 100%);
  }
  .wuxing-item:nth-child(2) .wuxing-label { 
    color: #4ade80; 
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
  }
  .wuxing-item:nth-child(3) { 
    border-color: #60a5fa; 
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a3a 100%);
  }
  .wuxing-item:nth-child(3) .wuxing-label { 
    color: #60a5fa; 
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
  }
  .wuxing-item:nth-child(4) { 
    border-color: #fb7185; 
    background: linear-gradient(135deg, #2d2d2d 0%, #3a1a1a 100%);
  }
  .wuxing-item:nth-child(4) .wuxing-label { 
    color: #fb7185; 
    text-shadow: 0 0 8px rgba(251, 113, 133, 0.3);
  }
  .wuxing-item:nth-child(5) { 
    border-color: #fbbf24; 
    background: linear-gradient(135deg, #2d2d2d 0%, #3a3a1a 100%);
  }
  .wuxing-item:nth-child(5) .wuxing-label { 
    color: #fbbf24; 
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
  }
  .shishen-group { background: #2d2d2d; border-color: #404040; }
  .shishen-group h4 { color: #e5e5e5; }
  .shishen-item { background: #3a3a3a; border-color: #404040; }
  .info-label, .shishen-label { color: #a0a0a0; }
  .info-value, .shishen-value { color: #e5e5e5; background: #4a4a4a; }
  .result-section h3 { color: #e5e5e5; }
  
  /* 优化一级菜单名显示效果 */
  .help-content h3 { color: #e5e5e5; border-left-color: #409eff; }
  .help-content h3::before { content: "📋 "; margin-right: 4px; }
  
  /* 优化注意事项的重要提醒 */
  .example { background: #3a3a3a; border-color: #555; }
  .example p { color: #e5e5e5; }
  .example p strong { color: #ff6b6b; font-weight: 600; }
  .example ul { color: #d1d5db; }
  .example li { color: #d1d5db; }
  .example li strong { color: #fbbf24; }
  
  /* 优化按钮在深色模式下的显示 */
  .btn-copy { background: #1e3a8a; color: #93c5fd; border-color: #3b82f6; }
  .btn-copy:hover { background: #1e40af; }
  .btn-share { background: #166534; color: #86efac; border-color: #22c55e; }
  .btn-share:hover { background: #15803d; }
  .btn-print { background: #92400e; color: #fde68a; border-color: #f59e0b; }
  .btn-print:hover { background: #b45309; }
  
  /* 优化表单标签 */
  .input-group label { color: #d1d5db; }
  
  /* 优化面包屑导航 */
  .breadcrumb { color: #9ca3af; }
  .breadcrumb a { color: #60a5fa; }
}