/* 
组件样式文件 - components.css
内容结构：
- 导航组件：顶部导航栏、移动端导航、面包屑导航样式
- 卡片组件：产品卡片、案例卡片、服务卡片等各种卡片样式
- 按钮组件：主要按钮、次要按钮、文本按钮、图标按钮等样式
- 表单组件：输入框、选择框、复选框、单选框、提交按钮等表单元素样式
- 模态框组件：弹窗、对话框、抽屉等覆盖层组件样式
- 标签组件：标签、徽章、状态指示器等小组件样式
- 列表组件：各种列表样式，包括导航列表、内容列表等
*/

/* ===== components.css ===== */

/* 按钮 */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius: 12px; padding: 10px 14px; font-weight:600; font-size:14px;
    border:1px solid transparent; cursor:pointer; transition: .2s;
  }
  .btn--primary{ background: var(--primary); color: var(--primary-contrast); }
  .btn--primary:hover{ filter: brightness(0.92); }
  .btn--outline{ background:#fff; color:var(--text); border-color: var(--line); }
  .btn--outline:hover{ background:#f8fafc; }
  .btn--ghost{ background:transparent; color:var(--text); border-color: var(--line); }
  .btn--sm{ padding: 8px 12px; font-size:13px; }
  .btn--block{ width:100%; }
  .btn:hover, .button:hover, .btn-primary:hover {
    background-color: var(--primary-hover);
  }
  
  .btn--ghost:hover{ background:#f8fafc; }
  .btn--primary:disabled{ opacity:.6; cursor:not-allowed; }
  
  /* 链接 */
  .link{ color: var(--text); font-weight:600; border-bottom:1px solid rgba(15,23,42,.2); }
  .link:hover{ opacity:.8; }
  
  /* 卡片 */
  .cards{ }
  .card{
    background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
    padding: 16px; box-shadow: var(--shadow); min-height: 120px;
  }
  .card__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .card__title{ font-weight:700; font-size: 16px; line-height:1.3; }
  .card__desc{ color: var(--text-2); margin-top:8px; }
  .list--compact li{ color: var(--text-2); margin-top:6px; }
  
  .step{ }
  .step__kicker{ font-size:12px; color:var(--muted); }
  .step__title{ font-size:15px; font-weight:700; margin:4px 0 6px; }
  
  /* 骨架屏 */
  .card--skeleton{ position:relative; overflow:hidden; }
  .sk{ height:12px; background: linear-gradient(90deg,#eef2f7, #f5f7fb, #eef2f7); border-radius:8px; }
  .sk--title{ height:18px; width:60%; margin-bottom:10px; }
  .sk--line{ width:100%; margin-top:8px; }
  .sk--line.short{ width:70%; }
  
  /* 徽章 */
  .badge{
    border:1px solid var(--line); border-radius:999px; padding:4px 8px;
    font-size:11px; color: var(--muted); background:#f8fafc;
  }
  
  /* 悬浮 CTA */
  .fab{
    position: fixed; right: 16px; bottom: 16px;
    display:flex; gap:10px; z-index: 70;
  }
  .fab__btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:44px; padding: 0 14px; border-radius: 999px; border:1px solid var(--line);
    background:#fff; color: var(--text); box-shadow: var(--shadow);
  }
  .fab__btn--primary{
    background: var(--primary); color: var(--primary-contrast); border-color: transparent;
  }
  .fab__btn--outline{ background:#fff; }
  .fab__btn--ghost{ background:#fff; width:44px; padding:0; }
  .fab__icon{ display:block; }
  
  /* 小组件 */
  .inline-cta{ margin-top: 16px; }