/* 站点 6 · blossom：柔粉渐变与圆角卡片，图集式首屏，花瓣装饰。 */

:root {
  --bg: #fff6fa;
  --surface: #ffffff;
  --surface-2: #fdeef4;
  --text: #3a2130;
  --muted: #8a6b7b;
  --line: #f4dde8;
  --accent: #e0477f;
  --accent-2: #8b5cf6;
  --accent-contrast: #ffffff;
  --radius: 26px;
  --radius-sm: 14px;
  --head-font: var(--font-sans);
}

body {
  background:
    radial-gradient(720px 520px at 88% -6%, rgba(139, 92, 246, 0.14), transparent 62%),
    radial-gradient(680px 480px at 4% 2%, rgba(224, 71, 127, 0.16), transparent 60%),
    var(--bg);
}

h1 { letter-spacing: -0.02em; font-weight: 750; }
h2 { font-weight: 700; }

.site-head {
  background: rgba(255, 246, 250, 0.86);
  border-bottom: 1px solid var(--line);
}
.brand-mark { border-radius: 14px; }
.brand-text strong { color: var(--accent); }
.brand-text em { border-color: #f3d3e0; color: var(--accent-2); background: #fff; }
.site-nav a { color: var(--muted); border-radius: 999px; }
.site-nav a.is-active { color: var(--accent); background: #fff; box-shadow: 0 4px 14px rgba(224, 71, 127, 0.14); }
.head-cta { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; }
.sub-nav { background: rgba(255, 255, 255, 0.6); }

.eyebrow { color: var(--accent-2); letter-spacing: 0.2em; }
.hero--gallery { position: relative; }
.hero--gallery::after {
  content: "";
  position: absolute;
  right: 6%;
  top: 8%;
  width: 92px;
  height: 92px;
  background: radial-gradient(circle at 30% 30%, rgba(224, 71, 127, 0.28), transparent 62%);
  border-radius: 62% 38% 55% 45% / 48% 55% 45% 52%;
  filter: blur(2px);
  pointer-events: none;
}
.hero--gallery h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  background: linear-gradient(100deg, #3a2130 6%, var(--accent) 58%, var(--accent-2) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero--gallery .lead { color: #77596a; }
.hero-mosaic { gap: 0.8rem; }
.hero-mosaic .cover { border-radius: 20px; box-shadow: 0 14px 30px rgba(224, 71, 127, 0.12); }
.hero-mosaic a:nth-child(2) .cover { transform: translateY(-10px); }
.hero-mosaic a:nth-child(5) .cover { transform: translateY(-6px); }
.hero-mosaic span { color: var(--muted); font-size: 0.76rem; text-align: center; }

.btn { border-radius: 999px; }
.btn--primary { background: linear-gradient(120deg, var(--accent), #f272a1); }
.btn--ghost { border-color: #f0cede; background: #fff; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.card {
  border-color: #f7e3ec;
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(224, 71, 127, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(224, 71, 127, 0.12); }
.card-cover .cover { border-radius: 20px 20px 0 0; }
.card-state { background: rgba(255, 255, 255, 0.88); border-color: #f6dbe6; color: var(--accent); border-radius: 999px; }
.card-title { font-size: 1rem; }
.card-note { color: #9b7c8c; }
.chip { border-color: #f4dde8; color: #96707f; background: #fffafc; }
.chip:hover { border-color: var(--accent); color: var(--accent); }

.section-head h2::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 0.6rem;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  vertical-align: 0.3em;
}
.topic-grid a {
  background: linear-gradient(180deg, #ffffff, #fff8fb);
  border-color: #f7e3ec;
  border-radius: 20px;
}
.topic-grid a:hover { border-color: #f2bcd2; }
.topic-grid strong { color: #4a2a3a; }
.topic-grid span { color: var(--accent); }
.guide-grid a, .doc-cards a, details, .panel, .steps li, .detail-aside {
  background: #ffffff;
  border-color: #f7e3ec;
  border-radius: 18px;
}
details[open] { border-color: #f2bcd2; }
details summary::after { color: var(--accent); }
.steps--vertical li { border-radius: 18px; }
.step-no { color: var(--accent); }
.article-card { border-top: none; background: #fff; border: 1px solid #f7e3ec; border-radius: 20px; padding: 1.1rem; }
.article-meta { color: var(--accent-2); }
.info-table { border: 1px solid #f7e3ec; border-radius: 14px; overflow: hidden; }
.info-table th { background: #fff8fb; }
.link-list li { border-bottom-color: #f7e3ec; }
.site-foot { background: #fff1f7; }
.cover--fallback { background: linear-gradient(135deg, #fde7f1, #efe7ff); }