/* 熊猫心情日记官网 / 法务站样式
   设计基调：安静、克制、不打扰 —— 与 App「树洞」气质一致。
   零外部资源（无字体 CDN、无 JS），CSP script-src 'none' 下也能完整渲染。

   🔴 主色 #FE6655 取自**2020 年上架的老版 App 图标**，不是自拟色。
   老版已积累 4.61 分 / 18 条评价，这套配色经过 6 年市场验证，
   改品牌色属于要向市场解释的动作 —— 没有强理由不要动。
   浅色档 #FE6655 / 深档 #D8433A / 底 #FFF0EE 由此推导。
   心情色仍与 lib/data/models/mood.dart 的 Mood.color 逐一对齐。 */

:root {
  /* 主色取自 2020 上架的老版 App 图标（#FE6655，评分 4.61）——
     已过 6 年市场验证的品牌资产，比自拟色更有依据。
     深色/浅色档由此推导，保证按钮、链接、徽章同一色相。 */
  --brand: #FE6655;          /* 老版 logo 主背景 */
  --brand-deep: #D8433A;    /* hover / 强调 */
  --brand-lift: #FE6655;    /* 浅色下与正色相同（变量统一存在，暗色再提亮） */
  --brand-soft: #FFF0EE;    /* 浅色底 */
  --panda-ink: #3E3E3E;     /* 老版 logo 的黑眼圈色 */
  --panda-white: #FFFFFF;
  --panda-paper: #FFFFFF;
  --logo-accent: #FFDEB2;   /* 老版书签的奶油黄 */
  --ink: #1f2328;
  --ink-soft: #57606a;
  --line: #e3e8ea;
  --bg: #ffffff;
  --bg-soft: #f7faf9;
  --radius: 16px;
  --maxw: 980px;

  /* 心情色 —— 与 mood.dart 的 Mood.color 逐一对齐 */
  --mood-happy: #F2B33D;
  --mood-calm: #8FBF9F;
  --mood-fulfilled: #7EA8D8;
  --mood-surprised: #B79BD8;
  --mood-low: #8C9AAB;
  --mood-lonely: #7D8AA0;
  --mood-irritated: #D98C7A;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #FE6655;          /* 暗色也用正色：按钮填充与 logo 严格一致 */
    --brand-lift: #FF8878;     /* 文字/链接的提亮档（正色在深底发闷） */
    --brand-deep: #FFA79A;
    --brand-soft: #3A1F1D;
    --panda-ink: #3a3f46;   /* 暗色下纯黑会和背景糊在一起，抬到 #3a3f46 */
    --panda-white: #e9eceb;
    --panda-paper: #22292c;
    --ink: #e8eceb;
    --ink-soft: #a8b2ae;
    --line: #33272A;
    --bg: #171110;
    --bg-soft: #1E1618;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 页头 ---------- */

.site-head {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.site-head nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.brand svg { width: 30px; height: 30px; display: block; }

/* brand mark 现在是新 logo 的 PNG（不再是内嵌 SVG），
   必须给 border-radius 让它在导航栏里也有圆角，否则是个方块。 */
.brand-mark {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: block;
}

.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  margin-left: 18px;
  font-size: 15px;
  transition: color .15s;
}

.nav-links a:hover, .nav-links a.on { color: var(--brand-lift, var(--brand)); }

/* ---------- 主体 ---------- */

main { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 72px; }

section { position: relative; }

.hero {
  padding: 64px 0 44px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 44px; }
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 14px;
  background: var(--brand-soft);
  padding: 5px 13px;
  border-radius: 999px;
}

h1 {
  font-size: clamp(30px, 5.4vw, 46px);
  line-height: 1.26;
  margin: 0 0 18px;
  letter-spacing: -.015em;
}

h2 {
  font-size: clamp(21px, 3.2vw, 27px);
  line-height: 1.4;
  margin: 58px 0 14px;
  letter-spacing: -.005em;
}

h3 { font-size: 17px; margin: 0 0 8px; }

.lead { font-size: 18px; color: var(--ink-soft); margin: 0 0 22px; max-width: 46ch; }

.section-lead { color: var(--ink-soft); margin: 0 0 8px; max-width: 56ch; }

/* Hero 底部的四条承诺，与隐私区的四张卡一一呼应 */
.hero-badges {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-badges li {
  margin: 0;
  font-size: 13.5px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 5px 13px;
  font-weight: 600;
}

.meta { color: var(--ink-soft); font-size: 14px; margin: 32px 0 8px; }

.note {
  background: var(--brand-soft);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--ink-soft);
  font-size: 15px;
}

.note.small { font-size: 14px; }

ul { padding-left: 22px; }
li { margin: 6px 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0 8px; }

a { color: var(--brand-lift, var(--brand)); }

/* ---------- 心情卡（App 里的 7 个心情，逐一对齐 Mood 枚举与色值） ---------- */

.moods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 12px;
  margin: 26px 0 8px;
  /* 🔴 全局有 ul{padding-left:22px}，不清掉会在卡片左侧漏出默认项目符号圆点 */
  padding: 0;
  list-style: none;
}

.mood {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 10px 14px;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}

.mood:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35);
}

.mood .face {
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  line-height: 1;
  /* 底色由 HTML 内联的 --c（= Mood.color）派生，rgba 无法直接用 hex+alpha，
     故用 color-mix 之外退而求其次：色值以 rgb 三通道写在 --c-rgb 里太啰嗦，
     这里统一用 color-mix，兼容性已由现代 Safari/Chrome 保证。 */
  background: color-mix(in srgb, var(--c) 26%, transparent);
}

.mood b { display: block; font-size: 14px; font-weight: 600; }

.mood i {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 3px;
}

/* ---------- 熊猫插画 ---------- */

/* 🔴 grid item 默认 min-width:auto，窄列下会把 SVG 压到内容宽以下，
   表现为熊猫被缩小、日记本被裁。这里显式给宽度并禁用压缩。 */
.hero-art {
  display: grid;
  place-items: center;
  min-width: 0;
}

.panda-hero {
  display: grid;
  place-items: center;
  position: relative;
  width: min(100%, 300px);
}

/* Hero 熊猫是一张抠成透明的 PNG（浅/暗共用，无底色）。
   保持等比且不去掉圆角——透明底图上圆角只会切到熊猫本体。 */
.panda-hero img {
  width: min(100%, 330px);
  height: auto;
  display: block;
  margin: 0 auto;
}

.panda-float {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .4);
}

/* 偏移量必须留出安全边距：
   .panda-hero 的高度由 230px 宽的 SVG 决定，若百分比贴边（top:0 / left:0），
   圆形会溢出到导航栏和 Hero 文案上（实测飘到页头、压住徽章）。 */
.panda-float.a { top: 6%; left: -4%; }
.panda-float.b { top: 38%; right: -4%; }
.panda-float.c { bottom: 8%; left: 2%; }

@media (prefers-reduced-motion: no-preference) {
  .panda-float { animation: bob 4.5s ease-in-out infinite; }
  .panda-float.b { animation-delay: -1.5s; }
  .panda-float.c { animation-delay: -3s; }
  @keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
  }
}

/* ---------- 7 只熊猫表情（Qwen Image 2.1 生成 + rembg 抠成透明 PNG） ---------- */

/* 7 只熊猫要能排成整行：auto-fit 在 1080px 下会算出 6 列，
   把第 7 只挤到第二行单独一行，非常难看。
   改用固定 7 列，窄屏再按断点降列（7 → 4 → 2）。 */
.pandas {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 8px;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) {
  .pandas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .pandas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.panda {
  margin: 0;
  text-align: center;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px 8px 12px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.panda:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .4);
}

.panda img {
  width: 100%;
  height: auto;
  display: block;
  /* V3 表情是竖版（380x512，比例 0.742）。
     `width:100% + height:auto` 会等比缩放，比例是对的；
     但 7 列布局下单卡净宽只有约 100px，缩到 74px 高的熊猫
     在移动端几乎看不清表情。给一个最小高度兜底，
     让窄屏下 panda 主体不至于缩成一个小点。 */
  min-height: 92px;
  object-fit: contain;
  /* 图本身已透明，这里只给个极淡的暖色晕，凸显轮廓 */
  background: radial-gradient(circle at 50% 78%,
    color-mix(in srgb, var(--c) 13%, transparent), transparent 68%);
  border-radius: 14px;
}

.panda b {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c);
}

/* ---------- 卡片 ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 16px;
  margin: 22px 0 8px;
}

.cards article {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}

/* 功能卡里的标签：与心情卡同源，用 --c 上色，避免 emoji */
.cards article .ico {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 9px;
  padding: 3px 11px;
  border-radius: 999px;
  color: var(--c, var(--brand-deep));
  background: color-mix(in srgb, var(--c, var(--brand)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--brand)) 32%, transparent);
}

.cards p { margin: 0; color: var(--ink-soft); font-size: 15px; }

.feature-block p { max-width: 68ch; }

/* ---------- 真实截图 ---------- */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 18px;
  margin: 24px 0 8px;
}

.shots figure { margin: 0; text-align: center; }

.shots img {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--line);
  display: block;
  background: var(--bg-soft);
}

.shots figcaption {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 9px;
}

/* ---------- CTA ---------- */

.cta { margin: 26px 0 8px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  transition: background .15s, transform .15s;
}

.btn:hover { background: var(--brand-deep); transform: translateY(-1px); }

.btn svg { width: 19px; height: 19px; }

@media (prefers-color-scheme: dark) {
  .btn { color: #fff; }  /* 正色底上白字，与浅色口径一致 */
}

.cta-block {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 8px);
  padding: 46px 32px;
  margin-top: 58px;
  text-align: center;
}

.cta-block h2 { margin-top: 0; }
.cta-block .note { background: transparent; padding: 14px 0 0; }

/* ---------- 页脚 ---------- */

footer {
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 14px;
  text-align: center;
  padding: 26px 24px 40px;
}

footer a { color: var(--ink-soft); text-decoration: none; margin: 0 4px; }
footer a:hover { color: var(--brand-lift, var(--brand)); }