/* Bloom Design System · v2 · 蜂蜜糖感 + Nectar 学习 */
:root {
  /* 基础色板(原蜂蜜糖感保留) */
  --cream: #fff5ec;
  --milk: #fffaf3;
  --peach: #ff8a5c;
  --peach-deep: #ff6b3d;
  --honey: #ffb547;
  --strawberry: #ff5588;
  --rose: #ffe0d6;
  --candy: #ffd6a8;
  --ink: #2d1810;
  --bark: #6b4a32;
  --muted: #a08570;
  --line: rgba(45,24,16,0.12);
  --line-soft: rgba(45,24,16,0.08);
  --success: #2d8659;
  --danger: #c44536;

  /* 新增 · Nectar 风暗底(用于对比 section / footer) */
  --dark-deep: #2d1810;
  --dark-soft: #3d2820;

  /* 新增 · 温暖 paste 标签胶囊配色(抄 Nectar 截图 3) */
  --tag-hot-bg: #fdf2db;
  --tag-hot-text: #6b4a1a;
  --tag-hot-border: #f0e0c0;

  --tag-trend-bg: #e6f4ea;
  --tag-trend-text: #2d5f3f;
  --tag-trend-border: #c5e3cd;

  --tag-low-bg: #fce8e8;
  --tag-low-text: #8b3a3a;
  --tag-low-border: #f0caca;

  --tag-avg-bg: #f0f0f0;
  --tag-avg-text: #555555;
  --tag-avg-border: #d8d8d8;

  /* 4 业态新色(浅底+深字 替代纯背景色) */
  --biz-b2c-bg: #fdf2db;
  --biz-b2c-text: #6b4a1a;
  --biz-b2c-border: #e8d5a8;

  --biz-b2b-bg: #fef0e4;
  --biz-b2b-text: #8b4a1a;
  --biz-b2b-border: #f0ccaa;

  --biz-proj-bg: #fde8ee;
  --biz-proj-text: #8b3a5a;
  --biz-proj-border: #f0c5d8;

  --biz-srv-bg: #fff4d1;
  --biz-srv-text: #6b521a;
  --biz-srv-border: #ead68d;
}

/* 字体系统 · 引入细体作为副标题/装饰 */
/* Otto Light 替代品: 用 Inter Light + 字距收缩模拟 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap');

.font-light {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.font-otto {
  /* 模拟 Otto Light · 用 Inter 300 + 极紧字距 */
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.04;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  background: var(--cream);
  color: var(--ink); line-height: 1.55;
  font-size: 15px;
}

/* === Top Bar === */
.topbar {
  display: flex; gap: 12px; padding: 14px 28px;
  background: var(--milk); color: var(--ink);
  font-size: 13px; align-items: center;
  border-bottom: 2px solid var(--ink);
  position: sticky; top: 0; z-index: 90;
}
.topbar .brand {
  font-weight: 900; font-size: 20px;
  letter-spacing: -0.5px;
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--ink); cursor: pointer;
}
.brand-dot {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--peach) 0%, var(--strawberry) 100%);
  border-radius: 50%;
  border: 2px solid var(--ink);
  position: relative;
}
.brand-dot::after {
  content: ''; position: absolute;
  width: 8px; height: 8px;
  background: var(--milk); border-radius: 50%;
  top: 4px; left: 5px;
}
.topbar .nav { display: flex; gap: 20px; margin-left: 28px; }
.topbar .nav a {
  color: var(--bark); text-decoration: none; font-weight: 600;
  font-size: 14px;
}
.topbar .nav a:hover, .topbar .nav a.active { color: var(--ink); }
.topbar .right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.topbar .right a { text-decoration: none; color: var(--bark); font-weight: 600; font-size: 13px; }

/* App nav badge */
.nav-badge {
  background: var(--strawberry); color: white;
  padding: 2px 8px; font-size: 10px; font-weight: 800;
  margin-left: 4px; border-radius: 999px;
}

/* === Buttons === */
.btn {
  padding: 12px 26px; border: 2px solid var(--ink);
  font-size: 14px; font-weight: 800; cursor: pointer;
  text-decoration: none; display: inline-block;
  transition: all 0.15s; letter-spacing: 0.2px;
  border-radius: 999px; font-family: inherit;
  background: var(--milk); color: var(--ink);
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn-primary {
  background: var(--peach-deep); color: white;
  box-shadow: 3px 3px 0 var(--ink);
}
.btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}
.btn-honey {
  background: var(--honey); color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn-sm {
  padding: 6px 14px; font-size: 12px;
  box-shadow: 2px 2px 0 var(--ink);
}
.btn-lg {
  padding: 16px 36px; font-size: 16px;
}

/* === Cards === */
.card {
  background: var(--milk); border: 2px solid var(--ink);
  border-radius: 20px; padding: 24px;
  transition: all 0.15s;
}
.card-shadow {
  box-shadow: 6px 6px 0 var(--ink);
}
.card-shadow-peach { box-shadow: 6px 6px 0 var(--peach-deep); }
.card-shadow-strawberry { box-shadow: 6px 6px 0 var(--strawberry); }

.card.hover-rise:hover {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 var(--ink);
}

/* === Sections === */
.screen {
  max-width: 1280px; margin: 0 auto; padding: 32px 24px;
}
.screen-label {
  display: inline-block; padding: 6px 14px;
  background: var(--candy); color: var(--ink);
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  margin-bottom: 16px; text-transform: uppercase;
  border-radius: 999px; border: 2px solid var(--ink);
}

/* === Eyebrow + Hero === */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--ink); color: var(--cream);
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
  margin-bottom: 28px; text-transform: uppercase;
  border-radius: 999px;
}

/* === Forms === */
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 12px; font-weight: 800;
  letter-spacing: 1px; margin-bottom: 8px; text-transform: uppercase;
  color: var(--ink);
}
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px;
  border: 2px solid var(--ink); background: var(--cream);
  font-size: 14px; font-family: inherit;
  border-radius: 14px;
  font-weight: 600; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--rose);
}
.field textarea { min-height: 96px; resize: vertical; }

/* === Tags v2 · Nectar 浅底深字风(替代原纯背景色) === */
.tag {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}
.tag-b2c {
  background: var(--biz-b2c-bg);
  color: var(--biz-b2c-text);
  border-color: var(--biz-b2c-border);
}
.tag-b2b {
  background: var(--biz-b2b-bg);
  color: var(--biz-b2b-text);
  border-color: var(--biz-b2b-border);
}
.tag-proj {
  background: var(--biz-proj-bg);
  color: var(--biz-proj-text);
  border-color: var(--biz-proj-border);
}
.tag-srv {
  background: var(--biz-srv-bg);
  color: var(--biz-srv-text);
  border-color: var(--biz-srv-border);
}
.tag-hot {
  background: var(--tag-hot-bg);
  color: var(--tag-hot-text);
  border-color: var(--tag-hot-border);
}
.tag-trending {
  background: var(--tag-trend-bg);
  color: var(--tag-trend-text);
  border-color: var(--tag-trend-border);
}
.tag-low {
  background: var(--tag-low-bg);
  color: var(--tag-low-text);
  border-color: var(--tag-low-border);
}
.tag-avg {
  background: var(--tag-avg-bg);
  color: var(--tag-avg-text);
  border-color: var(--tag-avg-border);
}
.tag-cream {
  background: var(--cream);
  color: var(--bark);
  border-color: var(--line);
}

/* === 1px Grid System(局部使用 · Nectar 风) === */
.grid-line {
  border-color: var(--line);
}
.grid-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.grid-cell:last-child { border-right: none; }

/* === 4 业态 icons === */
/* SVG icons · stroke 跟随 currentColor · 默认 14px */
.biz-icon {
  display: inline-block;
  width: 14px; height: 14px;
  vertical-align: -2px;
  flex-shrink: 0;
}
.biz-icon-lg { width: 20px; height: 20px; }
.biz-icon-xl { width: 28px; height: 28px; }
.biz-icon-2xl { width: 36px; height: 36px; }

/* === Honey blobs === */
.honey-blob {
  position: absolute;
  border: 3px solid var(--ink);
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
  box-shadow: 5px 5px 0 var(--ink);
  z-index: 1;
}
.honey-blob.honey { background: var(--honey); }
.honey-blob.peach { background: var(--peach); border-radius: 50%; }
.honey-blob.strawberry { background: var(--strawberry); border-radius: 50%; }
.honey-blob.candy { background: var(--candy); border-radius: 50%; }

/* === Utility === */
.muted { color: var(--bark); }
.divider {
  height: 2px; background: var(--ink); opacity: 0.1;
  margin: 24px 0;
}
.divider-dashed {
  border-top: 2px dashed var(--ink);
  opacity: 0.15;
  margin: 24px 0;
}

/* Navigation back to index */
.bar-back {
  background: var(--ink); color: var(--cream);
  padding: 8px 24px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: space-between;
}
.bar-back a {
  color: var(--honey); text-decoration: none; font-weight: 700;
}

/* Stripe banner (trial) */
.banner-trial {
  background: var(--honey); color: var(--ink);
  padding: 10px 28px; font-size: 13px; font-weight: 700;
  border-bottom: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: space-between;
}

@media (max-width: 760px) {
  .topbar { padding: 12px 16px; flex-wrap: wrap; }
  .topbar .nav { margin-left: 0; gap: 12px; font-size: 13px; }
  .screen { padding: 24px 16px; }
}