/* ═══ 我的 AI 员工 · 页面样式 ═══ */

.crew-page { max-width: 1160px; margin: 0 auto; padding: 26px 24px 80px; }

/* ── 顶部（居中，与航线/合作页同版式，但压紧）── */
.c-head {
  text-align: center;
  padding-bottom: 22px; margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.c-head .eyebrow { display: flex; justify-content: center; }
.c-head h1 {
  font-family: var(--serif); font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700; line-height: 1.4; margin: 12px 0 10px;
}
.c-head h1 em { font-style: normal; color: var(--teal); }
.c-lede {
  font-size: 13.5px; line-height: 1.9; color: var(--ink-soft);
  max-width: 40em; margin: 0 auto;
}
.c-lede b { color: var(--ink); }
.ch-meta {
  display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
  margin-top: 16px; font-size: 11px; color: var(--ink-soft);
}
.ch-meta b { color: var(--teal); }
.ch-meta a { color: var(--teal); text-decoration: none; border-bottom: 1px dashed var(--teal); }
.ch-meta a:hover { color: var(--signal); border-color: var(--signal); }

/* ── 主体：左分类 / 右内容 ── */
.c-shell { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 32px; align-items: start; }
.c-side, .c-body { min-width: 0; }

.c-side { position: sticky; top: 22px; }
.cs-list { display: flex; flex-direction: column; gap: 2px; }
.cs-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--ink-soft);
  font-size: 14px; text-align: left;
  transition: background 0.18s, color 0.18s;
}
.cs-item i { font-size: 10px; letter-spacing: 0.08em; opacity: 0.6; font-style: normal; }
.cs-item span { flex: 1; }
.cs-item b { font-size: 10.5px; font-weight: 400; opacity: 0.55; }
.cs-item:hover { background: var(--card); color: var(--ink); }
.cs-item.on {
  background: var(--teal); color: var(--paper); font-weight: 600;
}
.cs-item.on i, .cs-item.on b { opacity: 0.75; }
.cs-tip {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--rule);
  font-size: 11.5px; line-height: 1.85; color: var(--ink-soft);
}

/* ── 分类标题 ── */
.cb-head { margin-bottom: 16px; }
.cb-head h2 { font-family: var(--serif); font-size: 21px; font-weight: 700; margin-bottom: 5px; }
.cb-head h2 i {
  font-style: normal; font-size: 10px; letter-spacing: 0.16em;
  color: var(--ink-soft); margin-left: 10px; vertical-align: 2px;
}
.cb-head p { font-size: 12.8px; line-height: 1.8; color: var(--ink-soft); max-width: 52em; }

/* ── 卡片网格 ── */
.cb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cb-grid.fade { animation: cb-in 0.25s ease; }
@keyframes cb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.crew-card {
  display: flex; flex-direction: column;
  padding: 14px 15px;
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--card);
  transition: border-color 0.2s;
}
.crew-card:hover { border-color: var(--teal); }
.crew-card.is-soon { opacity: 0.58; border-style: dashed; }

.crew-card h3 {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px;
}
.cc-badge {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; font-weight: 400;
  padding: 2px 7px; border-radius: 10px;
  color: var(--paper); background: var(--signal);
}
.cc-badge.soon { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); }

.cc-role { font-size: 12.3px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 8px; }

/* 「鱼总说」—— 本页真正值钱的一行 */
.cc-truth {
  position: relative;
  font-size: 12.2px; line-height: 1.7; color: var(--ink);
  padding-left: 10px; margin-bottom: 11px;
  border-left: 2px solid var(--teal);
}

.cc-foot {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: auto; padding-top: 9px;
  border-top: 1px dashed var(--rule);
}
.cc-price { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.cc-code {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; cursor: pointer;
  color: var(--signal); background: transparent;
  border: 1px dashed var(--signal); border-radius: 20px; padding: 2px 8px;
}
.cc-code i { font-style: normal; opacity: 0.6; }
.cc-code:hover { background: color-mix(in srgb, var(--signal) 10%, transparent); }
.cc-code.copied { border-style: solid; }
.cc-deal {
  font-size: 9.5px; color: var(--signal);
  border: 1px dashed var(--signal); border-radius: 20px; padding: 2px 8px;
}
.cc-go {
  margin-left: auto; font-size: 12px; font-weight: 600;
  color: var(--teal); text-decoration: none; white-space: nowrap;
}
.cc-go:hover { color: var(--signal); }
.cc-go.off { color: var(--ink-soft); font-weight: 400; }

/* ── CTA ── */
.c-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: 26px; padding: 20px 24px;
  background: var(--card); border: 1px solid var(--teal); border-radius: 14px;
}
.c-cta h2 { font-family: var(--serif); font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.c-cta p { font-size: 12.5px; color: var(--ink-soft); }
.cc-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-btns a { padding: 9px 18px; border-radius: 99px; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cc-btns .main { background: var(--teal); color: var(--paper); }
.cc-btns .main:hover { background: var(--signal); }
.cc-btns .ghost { border: 1px solid var(--rule); color: var(--ink); }
.cc-btns .ghost:hover { border-color: var(--teal); color: var(--teal); }

/* ── 响应式 ── */
@media (max-width: 1000px) { .cb-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 760px) {
  .crew-page { padding: 20px 18px 64px; }
  .lede-br { display: none; }
  .c-head { padding-bottom: 16px; margin-bottom: 16px; }
  .c-head h1 { margin: 9px 0 8px; }
  .ch-meta { margin-top: 12px; gap: 16px; }
  .shop-head { flex-wrap: wrap; row-gap: 10px; }
  .shop-nav { width: 100%; }
  .c-shell { grid-template-columns: 1fr; gap: 18px; }
  .c-side {
    position: sticky; top: 0; z-index: 10;
    padding: 10px 0;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
  }
  .cs-list {
    flex-direction: row; gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cs-list::-webkit-scrollbar { display: none; }
  .cs-item {
    width: auto; flex: none; padding: 7px 14px; border-radius: 20px;
    border: 1px solid var(--rule); background: var(--card); font-size: 13px;
  }
  .cs-item i, .cs-item b { display: none; }
  .cs-item.on { border-color: var(--teal); }
  .cs-tip { display: none; }
  .cb-grid { grid-template-columns: 1fr; }
  .c-cta { flex-direction: column; align-items: flex-start; }
}