/* 基础样式与现代化UI */
:root{
  --bg:#FFF8F5;
  --text:#333333;
  --muted:#A4BAC7;
  --primary:#F6C1D1; /* 主色（温柔粉） */
  --primary-2:#E8A1BB; /* 强调色 */
  --border:#e5e7eb;
  --card:#ffffff;
  /* 女性主题主色与柔和背景 */
  --female-primary:#F6C1D1; /* 温柔粉 */
  --female-accent:#E8A1BB;  /* 强调粉 */
  --panel-bg:#fff;
  --panel-border:#e5e7eb;
  --soft-bg:#FFF8F5; /* 奶油白背景 */
  /* 日历徽章与分析图标的状态颜色（默认主题） */
  --badge-menstruation:#fca5a5;
  --badge-menstruation-text:#b91c1c;
  --badge-ovulation:#fcd34d;
  --badge-ovulation-text:#7c2d12;
  --badge-danger:#fecdd3;
  --badge-danger-text:#dc2626;
  --badge-safe:#93c5fd;
  --badge-safe-text:#1e40af;
  /* 主题联动阴影与渐变（默认基于强调粉 E8A1BB） */
  --shadow-1: rgba(232,161,187,0.12);
  --shadow-2: rgba(232,161,187,0.18);
  --shadow-strong: rgba(232,161,187,0.25);
  --grad-soft-top: rgba(246,193,209,0.12);
  --grad-soft-mid: rgba(246,193,209,0.18);
  --focus-ring: rgba(246,193,209,0.35);
}

/* 主题：莓紫暗色 */
:root[data-theme="plum"]{
  --bg:#2C2C36;
  --soft-bg:#2C2C36;
  --text:#F2F2F2;
  --muted:#B899B2;
  --primary:#8B5E83; /* 主色（莓紫） */
  --primary-2:#B899B2; /* 强调柔光 */
  --panel-bg:#2C2C36;
  --panel-border:#44464f;
  /* 状态颜色（与主题协调） */
  --badge-menstruation:#B899B2;
  --badge-menstruation-text:#2C2C36;
  --badge-ovulation:#8B5E83;
  --badge-ovulation-text:#F2F2F2;
  --badge-danger:#8B5E83;
  --badge-danger-text:#F2F2F2;
  --badge-safe:#666677;
  --badge-safe-text:#F2F2F2;
  /* 主题阴影与渐变 */
  --shadow-1: rgba(184,153,178,0.12);
  --shadow-2: rgba(184,153,178,0.18);
  --shadow-strong: rgba(184,153,178,0.25);
  --grad-soft-top: rgba(184,153,178,0.12);
  --grad-soft-mid: rgba(184,153,178,0.18);
  --focus-ring: rgba(139,94,131,0.35);
}

/* 主题：艾绿色（象牙白） */
:root[data-theme="green"]{
  --bg:#FAF9F6;
  --soft-bg:#FAF9F6;
  --text:#2C2C2C;
  --muted:#D4D4D4;
  --primary:#8EBF87; /* 主色（艾绿色） */
  --primary-2:#F7B7A3; /* 强调色（暖粉） */
  --panel-bg:#fff;
  --panel-border:#e5e7eb;
  /* 状态颜色（清新协调） */
  --badge-menstruation:#F7B7A3;
  --badge-menstruation-text:#6b2149;
  --badge-ovulation:#F7B7A3;
  --badge-ovulation-text:#7c2d12;
  --badge-danger:#F7B7A3;
  --badge-danger-text:#7f1d1d;
  --badge-safe:#8EBF87;
  --badge-safe-text:#245446;
  /* 主题阴影与渐变 */
  --shadow-1: rgba(247,183,163,0.12);
  --shadow-2: rgba(247,183,163,0.18);
  --shadow-strong: rgba(247,183,163,0.25);
  --grad-soft-top: rgba(247,183,163,0.12);
  --grad-soft-mid: rgba(247,183,163,0.18);
  --focus-ring: rgba(142,191,135,0.35);
}

/* 主题：状态/阶段色板（安全/危险/经期/平稳） */
:root[data-theme="phase"]{
  --bg:#FFFFFF;
  --soft-bg:#FFFFFF;
  --text:#333333;
  --muted:#A4BAC7;
  --primary:#F7B5A7; /* 用作柔和主色 */
  --primary-2:#FF8C94; /* 强调色 */
  --panel-bg:#fff;
  --panel-border:#e5e7eb;
  /* 按照状态表设置徽章 */
  --badge-menstruation:#D792BC;
  --badge-menstruation-text:#5e2a54;
  --badge-ovulation:#FF8C94;
  --badge-ovulation-text:#7c2d12;
  --badge-danger:#FF8C94;
  --badge-danger-text:#7f1d1d;
  --badge-safe:#F7B5A7;
  --badge-safe-text:#7c2d12;
  /* 主题阴影与渐变（使用强调色） */
  --shadow-1: rgba(255,140,148,0.12);
  --shadow-2: rgba(255,140,148,0.18);
  --shadow-strong: rgba(255,140,148,0.25);
  --grad-soft-top: rgba(255,140,148,0.12);
  --grad-soft-mid: rgba(255,140,148,0.18);
  --focus-ring: rgba(247,181,167,0.35);
}

html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:var(--bg);line-height:1.6;transition: background-color .25s ease, color .25s ease}
/* 顶部与语言切换 */
.site-header{max-width:1000px;margin:0 auto;padding:24px 16px;text-align:center}
.site-header h1{margin:0;font-size:28px;color:var(--primary)}
.subtitle{color:var(--muted);margin-top:6px}
.lang-switcher select{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#fff}
main{ background: var(--soft-bg); max-width:1000px; margin:0 auto; padding:16px; }
.card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;padding:16px;box-shadow:0 6px 18px var(--shadow-1);margin-bottom:16px;transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease}
/* 结果区域与SVG居中（避免移动端靠右） */
.results{padding:12px; display:flex; justify-content:center;}
#imgResults{width:100%; display:flex; justify-content:center;}
.results svg{display:block; max-width:100%; height:auto;margin-left:-15px;}
/* 让 SVG 容器在移动端填满宽度、保持卡片内边距 */
@media (max-width:640px){
  .card{padding:12px}
  .results{padding:0}
  #imgResults{width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:16px; padding:12px; background:#fff;margin-top:12px;}
}
/* 表单三列网格（桌面）、两列（平板）、一列（手机） */
.calculator{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.calculator{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.calculator{grid-template-columns:1fr}}
/* 表单字段样式 */
.field label{display:block;font-weight:600;color:var(--muted);margin-bottom:6px}
.field input{width:100%; box-sizing:border-box; height:44px; padding:0 12px; border:1px solid var(--border); border-radius:10px; font-size:14px; background:#fff}
.field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring)}
/* 两个月面板边界容器 */
.month-panels{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.month-panel{background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:16px;padding:12px;box-shadow:0 6px 20px var(--shadow-1);transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease}
/* 分析模块卡片化样式 */
.analysis{ margin-top: 16px; margin-bottom: 16px; padding: 16px; background: linear-gradient(180deg, var(--soft-bg), #ffffff); border-radius: 16px; box-shadow: 0 8px 24px var(--shadow-1); transition: background-color .25s ease, box-shadow .25s ease }
.analysis h3{ text-align:center; color: var(--primary); font-weight:800; letter-spacing:0.5px; }
.analysis-content{ display:grid; grid-template-columns:1fr; gap:12px; }
.analysis-item{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:12px; padding:12px; box-shadow: 0 4px 14px rgba(17,24,39,0.06); color: var(--muted); }
.analysis-item .icon{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; }
.analysis-item.period .icon{ background: var(--badge-menstruation); color: var(--badge-menstruation-text); }
.analysis-item.ovulation .icon{ background: var(--badge-ovulation); color: var(--badge-ovulation-text); }
.analysis-item.danger .icon{ background: var(--badge-danger); color: var(--badge-danger-text); }
.analysis-item.safe .icon{ background: var(--badge-safe); color: var(--badge-safe-text); }
@media (min-width: 900px){ .analysis-content{ grid-template-columns:1fr 1fr; } }
/* 其他列表与关键词 */
.results .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.disclaimer{margin-top:12px;color:var(--muted)}
.seo{margin-top:24px}
.keywords{display:flex;flex-wrap:wrap;gap:8px;padding-left:0;list-style:none}
.keywords li{background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px;transition: background-color .25s ease, border-color .25s ease, color .25s ease}
/* 页脚 */
.site-footer{max-width:1000px;margin:24px auto;padding:16px;color:var(--muted);text-align:center}
/* Language tabs */
.lang-switcher { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lang-switcher .lang-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lang-switcher .lang-tab { display: inline-block; padding: 6px 10px; border-radius: 16px; text-decoration: none; font-size: 14px; color: var(--text); background: var(--soft-bg); border: 1px solid var(--primary-2); transition: background-color .25s ease, border-color .25s ease, color .25s ease }
.lang-switcher .lang-tab:hover { background: var(--primary); color: var(--text); border-color: var(--primary-2); }
.lang-switcher .lang-tab.active { background: var(--primary-2); color: #fff; border-color: var(--primary-2); font-weight: 600; }
/* Theme selector */
.theme-selector { display:flex; align-items:center; gap:8px; margin-top:8px; }
.theme-selector label { color: var(--muted); font-size: 12px; }
.theme-selector select { padding:6px 8px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text); }
/* 信息卡片（精准预测/隐私保护/健康管理） */
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; background: linear-gradient(180deg, var(--grad-soft-top), rgba(255,255,255,0.98)); border-radius: 16px; padding: 12px; }
@media (max-width: 900px){ .info-cards{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .info-cards{ grid-template-columns: 1fr; } }
.info-card { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 16px; padding: 16px; text-align: center; box-shadow: 0 8px 24px var(--shadow-1); position: relative; overflow: hidden; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease }
.info-card::before { content: '📅'; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; margin: 8px auto 6px; background: var(--primary); color: #fff; font-size: 28px; box-shadow: 0 10px 28px var(--shadow-strong); opacity: 0.92; }
.info-card:nth-child(2)::before { content: '🔒'; }
.info-card:nth-child(3)::before { content: '❤️'; }
.info-card h4 { margin: 8px 0 4px; font-size: 16px; font-weight: 800; color: var(--primary-2); letter-spacing: 0.3px; }
.info-card p { margin: 0 12px 10px; color: var(--muted); }
.info-card:hover { box-shadow: 0 12px 32px var(--shadow-2); transform: translateY(-1px); transition: all .18s ease; }

/* 健康小贴士模块（增强样式，含图标与柔和渐变） */
.tips{ position: relative; padding: 24px; border-radius: 18px; background: linear-gradient(180deg, var(--grad-soft-mid), rgba(255,255,255,0.98)); box-shadow: 0 10px 28px var(--shadow-1); transition: background-color .25s ease, box-shadow .25s ease }
.tips h2{ text-align:center; color: var(--primary); font-size: 22px; font-weight: 800; letter-spacing: 0.4px; margin: 0 0 12px; }
.tips h2::before{ content: '❤️'; /* 心形图标 */ display:block; width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 8px; background: var(--primary); color: #fff; font-size: 26px; line-height: 48px; text-align:center; box-shadow: 0 12px 30px var(--shadow-strong); }
.tips h2::after{ content: ''; display:block; width: 120px; height: 4px; margin: 8px auto 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-2)); opacity: 0.85; }
.tips-grid{ display:grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; }
@media (min-width: 900px){ .tips-grid{ grid-template-columns: 1fr; } }
.tips-grid > div{ position: relative; display:flex; align-items:center; gap:12px; background:#fff; border: 1px solid var(--panel-border); border-radius: 14px; padding: 14px 16px; box-shadow: 0 8px 22px rgba(17,24,39,0.06); }
.tips-grid > div::before{ content: '🍎'; /* 苹果 */ display:inline-flex; align-items:center; justify-content:center; width: 48px; height: 48px; min-width: 48px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 26px; box-shadow: 0 10px 28px var(--shadow-2); }
.tips-grid > div:nth-child(2)::before{ content: '🏃'; /* 跑步 */ }
.tips-grid > div:nth-child(3)::before{ content: '🛌'; /* 床 */ }
.tips-grid h3{ margin: 0; font-size: 16px; font-weight: 800; color: var(--primary-2); }
.tips-grid p{ margin: 2px 0 0; color: var(--muted); }
/* 计算说明模块一致化样式（与小贴士保持统一视觉） */
.notes{ background: linear-gradient(180deg, var(--grad-soft-top), rgba(255,255,255,0.98)); border-radius: 16px; box-shadow: 0 10px 28px var(--shadow-1); transition: background-color .25s ease, box-shadow .25s ease }
.notes h2{ text-align: left; color: var(--primary); font-weight: 800; letter-spacing: 0.4px; }
.notes-list{ margin: 10px 0 0; padding-left: 18px; }
.notes-list li{ margin: 6px 0; color: var(--muted); }
/* SEO关键词模块微调，让标签更柔和、突出主题色 */
.seo{ background: linear-gradient(180deg, var(--grad-soft-top), rgba(255,255,255,0.98)); border-radius: 16px; box-shadow: 0 8px 24px var(--shadow-1); }
.seo h2{ color: var(--primary); }
.seo p{ color: var(--muted); }
.keywords li{ background: rgba(255,255,255,0.95); border: 1px solid var(--primary-2); color: var(--text); }
.keywords li:hover{ background: var(--primary); color: #fff; border-color: var(--primary-2); transition: all .18s ease; }
/* 计算区域标题颜色随主题 */
.card h2{ color: var(--primary); }
.seo{ background: linear-gradient(180deg, var(--grad-soft-top), rgba(255,255,255,0.98)); border-radius: 16px; box-shadow: 0 8px 24px var(--shadow-1); }
.seo h2{ color: var(--primary); }
.keywords li{ background: rgba(255,255,255,0.95); border: 1px solid var(--primary-2); color: var(--text); }
.keywords li:hover{ background: var(--primary); color: #fff; border-color: var(--primary-2); transition: all .18s ease; }
/* 主题：石墨灰（杏色背景/柔红强调） */
:root[data-theme="graphite"]{
  --bg:#F3EDE7;
  --soft-bg:#F3EDE7;
  --text:#1F1F1F;
  --muted:#CFC6BE;
  --primary:#4A4A4A;
  --primary-2:#D98C8C;
  --panel-bg:#fff;
  --panel-border:#e5e7eb;
  --badge-menstruation:#D98C8C;
  --badge-menstruation-text:#1F1F1F;
  --badge-ovulation:#D98C8C;
  --badge-ovulation-text:#1F1F1F;
  --badge-danger:#D98C8C;
  --badge-danger-text:#1F1F1F;
  --badge-safe:#CFC6BE;
  --badge-safe-text:#1F1F1F;
  /* 主题阴影与渐变 */
  --shadow-1: rgba(217,140,140,0.12);
  --shadow-2: rgba(217,140,140,0.18);
  --shadow-strong: rgba(217,140,140,0.25);
  --grad-soft-top: rgba(217,140,140,0.12);
  --grad-soft-mid: rgba(217,140,140,0.18);
  --focus-ring: rgba(74,74,74,0.35);
}
/* 主题：紫灰（珍珠白/雾粉辅色/淡紫强调） */
:root[data-theme="violetgray"]{
  --bg:#F5F5F8;
  --soft-bg:#F5F5F8;
  --text:#33354A;
  --muted:#E6C7CF;
  --primary:#8C8AA6;
  --primary-2:#BFA2DB;
  --panel-bg:#fff;
  --panel-border:#e5e7eb;
  --badge-menstruation:#E6C7CF;
  --badge-menstruation-text:#33354A;
  --badge-ovulation:#BFA2DB;
  --badge-ovulation-text:#33354A;
  --badge-danger:#BFA2DB;
  --badge-danger-text:#33354A;
  --badge-safe:#8C8AA6;
  --badge-safe-text:#F5F5F8;
  /* 主题阴影与渐变 */
  --shadow-1: rgba(191,162,219,0.12);
  --shadow-2: rgba(191,162,219,0.18);
  --shadow-strong: rgba(191,162,219,0.25);
  --grad-soft-top: rgba(191,162,219,0.12);
  --grad-soft-mid: rgba(191,162,219,0.18);
  --focus-ring: rgba(140,138,166,0.35);
}
/* 主题：酒红（裸粉白/玫瑰灰辅色/柔红强调） */
:root[data-theme="wine"]{
  --bg:#FAF3F1;
  --soft-bg:#FAF3F1;
  --text:#2B2B2B;
  --muted:#C9A9A6;
  --primary:#7A3E48;
  --primary-2:#E89A9A;
  --panel-bg:#fff;
  --panel-border:#e5e7eb;
  --badge-menstruation:#E89A9A;
  --badge-menstruation-text:#2B2B2B;
  --badge-ovulation:#E89A9A;
  --badge-ovulation-text:#2B2B2B;
  --badge-danger:#E89A9A;
  --badge-danger-text:#2B2B2B;
  --badge-safe:#C9A9A6;
  --badge-safe-text:#2B2B2B;
  /* 主题阴影与渐变 */
  --shadow-1: rgba(232,154,154,0.12);
  --shadow-2: rgba(232,154,154,0.18);
  --shadow-strong: rgba(232,154,154,0.25);
  --grad-soft-top: rgba(232,154,154,0.12);
  --grad-soft-mid: rgba(232,154,154,0.18);
  --focus-ring: rgba(122,62,72,0.35);
}
/* 主题：海盐青（冷白/浅灰辅色/淡橘强调） */
:root[data-theme="seasalt"]{
  --bg:#F4F6F7;
  --soft-bg:#F4F6F7;
  --text:#263238;
  --muted:#D9DEE2;
  --primary:#5FA8A4;
  --primary-2:#F6B26B;
  --panel-bg:#fff;
  --panel-border:#e5e7eb;
  --badge-menstruation:#F6B26B;
  --badge-menstruation-text:#263238;
  --badge-ovulation:#F6B26B;
  --badge-ovulation-text:#263238;
  --badge-danger:#F6B26B;
  --badge-danger-text:#263238;
  --badge-safe:#5FA8A4;
  --badge-safe-text:#263238;
  /* 主题阴影与渐变 */
  --shadow-1: rgba(246,178,107,0.12);
  --shadow-2: rgba(246,178,107,0.18);
  --shadow-strong: rgba(246,178,107,0.25);
  --grad-soft-top: rgba(246,178,107,0.12);
  --grad-soft-mid: rgba(246,178,107,0.18);
  --focus-ring: rgba(95,168,164,0.35);
}
/* 主题：奶咖（奶油白/浅棕辅色/珊瑚强调） */
:root[data-theme="latte"]{
  --bg:#FBF7F2;
  --soft-bg:#FBF7F2;
  --text:#3A342E;
  --muted:#D8C3B5;
  --primary:#C8A27A;
  --primary-2:#F28C8C;
  --panel-bg:#fff;
  --panel-border:#e5e7eb;
  --badge-menstruation:#F28C8C;
  --badge-menstruation-text:#3A342E;
  --badge-ovulation:#F28C8C;
  --badge-ovulation-text:#3A342E;
  --badge-danger:#F28C8C;
  --badge-danger-text:#3A342E;
  --badge-safe:#D8C3B5;
  --badge-safe-text:#3A342E;
  /* 主题阴影与渐变 */
  --shadow-1: rgba(242,140,140,0.12);
  --shadow-2: rgba(242,140,140,0.18);
  --shadow-strong: rgba(242,140,140,0.25);
  --grad-soft-top: rgba(242,140,140,0.12);
  --grad-soft-mid: rgba(242,140,140,0.18);
  --focus-ring: rgba(200,162,122,0.35);
}
/* 主题：雾霾蓝（米白/豆沙灰辅色/柔粉强调） */
:root[data-theme="smogblue"]{
  --bg:#F6F4EF;
  --soft-bg:#F6F4EF;
  --text:#2F2F2F;
  --muted:#B8AFA8;
  --primary:#6F8FAF;
  --primary-2:#E6A4B4;
  --panel-bg:#fff;
  --panel-border:#e5e7eb;
  --badge-menstruation:#E6A4B4;
  --badge-menstruation-text:#2F2F2F;
  --badge-ovulation:#E6A4B4;
  --badge-ovulation-text:#2F2F2F;
  --badge-danger:#E6A4B4;
  --badge-danger-text:#2F2F2F;
  --badge-safe:#6F8FAF;
  --badge-safe-text:#F6F4EF;
  /* 主题阴影与渐变 */
  --shadow-1: rgba(230,164,180,0.12);
  --shadow-2: rgba(230,164,180,0.18);
  --shadow-strong: rgba(230,164,180,0.25);
  --grad-soft-top: rgba(230,164,180,0.12);
  --grad-soft-mid: rgba(230,164,180,0.18);
  --focus-ring: rgba(111,143,175,0.35);
}
@media (min-width: 900px){ .analysis-content{ grid-template-columns:1fr 1fr; } }
/* 其他列表与关键词 */
.results .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.disclaimer{margin-top:12px;color:var(--muted)}
.seo{margin-top:24px}
.keywords{display:flex;flex-wrap:wrap;gap:8px;padding-left:0;list-style:none}
.keywords li{background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px;transition: background-color .25s ease, border-color .25s ease, color .25s ease}
/* 页脚 */
.site-footer{max-width:1000px;margin:24px auto;padding:16px;color:var(--muted);text-align:center}
/* Language tabs */
.lang-switcher { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lang-switcher .lang-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lang-switcher .lang-tab { display: inline-block; padding: 6px 10px; border-radius: 16px; text-decoration: none; font-size: 14px; color: var(--text); background: var(--soft-bg); border: 1px solid var(--primary-2); transition: background-color .25s ease, border-color .25s ease, color .25s ease }
.lang-switcher .lang-tab:hover { background: var(--primary); color: var(--text); border-color: var(--primary-2); }
.lang-switcher .lang-tab.active { background: var(--primary-2); color: #fff; border-color: var(--primary-2); font-weight: 600; }
/* Theme selector */
.theme-selector { display:flex; align-items:center; gap:8px; margin-top:8px; }
.theme-selector label { color: var(--muted); font-size: 12px; }
.theme-selector select { padding:6px 8px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text); }
/* 信息卡片（精准预测/隐私保护/健康管理） */
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; background: linear-gradient(180deg, var(--grad-soft-top), rgba(255,255,255,0.98)); border-radius: 16px; padding: 12px; }
@media (max-width: 900px){ .info-cards{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .info-cards{ grid-template-columns: 1fr; } }
.info-card { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 16px; padding: 16px; text-align: center; box-shadow: 0 8px 24px var(--shadow-1); position: relative; overflow: hidden; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease }
.info-card::before { content: '📅'; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; margin: 8px auto 6px; background: var(--primary); color: #fff; font-size: 28px; box-shadow: 0 10px 28px var(--shadow-strong); opacity: 0.92; }
.info-card:nth-child(2)::before { content: '🔒'; }
.info-card:nth-child(3)::before { content: '❤️'; }
.info-card h4 { margin: 8px 0 4px; font-size: 16px; font-weight: 800; color: var(--primary-2); letter-spacing: 0.3px; }
.info-card p { margin: 0 12px 10px; color: var(--muted); }
.info-card:hover { box-shadow: 0 12px 32px var(--shadow-2); transform: translateY(-1px); transition: all .18s ease; }

/* 健康小贴士模块（增强样式，含图标与柔和渐变） */
.tips{ position: relative; padding: 24px; border-radius: 18px; background: linear-gradient(180deg, var(--grad-soft-mid), rgba(255,255,255,0.98)); box-shadow: 0 10px 28px var(--shadow-1); transition: background-color .25s ease, box-shadow .25s ease }
.tips h2{ text-align:center; color: var(--primary); font-size: 22px; font-weight: 800; letter-spacing: 0.4px; margin: 0 0 12px; }
.tips h2::before{ content: '❤️'; /* 心形图标 */ display:block; width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 8px; background: var(--primary); color: #fff; font-size: 26px; line-height: 48px; text-align:center; box-shadow: 0 12px 30px var(--shadow-strong); }
.tips h2::after{ content: ''; display:block; width: 120px; height: 4px; margin: 8px auto 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-2)); opacity: 0.85; }
.tips-grid{ display:grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; }
@media (min-width: 900px){ .tips-grid{ grid-template-columns: 1fr; } }
.tips-grid > div{ position: relative; display:flex; align-items:center; gap:12px; background:#fff; border: 1px solid var(--panel-border); border-radius: 14px; padding: 14px 16px; box-shadow: 0 8px 22px rgba(17,24,39,0.06); }
.tips-grid > div::before{ content: '🍎'; /* 苹果 */ display:inline-flex; align-items:center; justify-content:center; width: 48px; height: 48px; min-width: 48px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 26px; box-shadow: 0 10px 28px var(--shadow-2); }
.tips-grid > div:nth-child(2)::before{ content: '🏃'; /* 跑步 */ }
.tips-grid > div:nth-child(3)::before{ content: '🛌'; /* 床 */ }
.tips-grid h3{ margin: 0; font-size: 16px; font-weight: 800; color: var(--primary-2); }
.tips-grid p{ margin: 2px 0 0; color: var(--muted); }
/* 计算说明模块一致化样式（与小贴士保持统一视觉） */
.notes{ background: linear-gradient(180deg, var(--grad-soft-top), rgba(255,255,255,0.98)); border-radius: 16px; box-shadow: 0 10px 28px var(--shadow-1); transition: background-color .25s ease, box-shadow .25s ease }
.notes h2{ text-align: left; color: var(--primary); font-weight: 800; letter-spacing: 0.4px; }
.notes-list{ margin: 10px 0 0; padding-left: 18px; }
.notes-list li{ margin: 6px 0; color: var(--muted); }
/* SEO关键词模块微调，让标签更柔和、突出主题色 */
.seo{ background: linear-gradient(180deg, var(--grad-soft-top), rgba(255,255,255,0.98)); border-radius: 16px; box-shadow: 0 8px 24px var(--shadow-1); }
.seo h2{ color: var(--primary); }
.seo p{ color: var(--muted); }
.keywords li{ background: rgba(255,255,255,0.95); border: 1px solid var(--primary-2); color: var(--text); }
.keywords li:hover{ background: var(--primary); color: #fff; border-color: var(--primary-2); transition: all .18s ease; }
/* 计算区域标题颜色随主题 */
.card h2{ color: var(--primary); }
.seo{ background: linear-gradient(180deg, var(--grad-soft-top), rgba(255,255,255,0.98)); border-radius: 16px; box-shadow: 0 8px 24px var(--shadow-1); }
.seo h2{ color: var(--primary); }
.keywords li{ background: rgba(255,255,255,0.95); border: 1px solid var(--primary-2); color: var(--text); }
.keywords li:hover{ background: var(--primary); color: #fff; border-color: var(--primary-2); transition: all .18s ease; }