卡片

<div class="demo-row">
  <div class="card" style="width:230px">
    <div class="card-head">
      <div>
        <h3 class="card-title">默认卡片</h3>
        <p class="card-desc">bg card + 内阴影</p>
      </div>
    </div>
    <div class="card-body">纸面质感的基础容器，适合承载一组相关信息。</div>
    <div class="card-foot">
      <span class="card-meta">更新于 2 小时前</span>
      <span class="card-action"><button class="btn btn-sm">查看</button></span>
    </div>
  </div>
  <div class="card card--elevated" style="width:230px">
    <div class="card-head"><div><h3 class="card-title">浮起卡片</h3><p class="card-desc">shadow-card 硬投影</p></div></div>
    <div class="card-body">比默认更靠前一级，用于强调。</div>
  </div>
  <div class="card card--outlined" style="width:230px">
    <div class="card-head"><div><h3 class="card-title">描边卡片</h3><p class="card-desc">粗描边、无阴影</p></div></div>
    <div class="card-body">低噪声场景使用，如嵌套在面板里。</div>
  </div>
  <div style="padding:18px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--token-glow),var(--token-glow-cold))">
    <div class="card card--glass" style="width:210px">
      <div class="card-head"><div><h3 class="card-title">玻璃卡片</h3><p class="card-desc">surface-glass + 背景模糊</p></div></div>
      <div class="card-body">叠在彩色背景上呈现磨砂质感。</div>
    </div>
  </div>
  <div class="card card--interactive" style="width:230px">
    <div class="card-head"><div><h3 class="card-title">可交互卡片</h3><p class="card-desc">hover 浮起（.lift 同款）</p></div></div>
    <div class="card-body">鼠标悬停试试：上移 1px + 投影 + 描边变色。</div>
  </div>
  <div class="card is-selected" style="width:230px">
    <div class="card-head"><div><h3 class="card-title">选中态</h3><p class="card-desc">.is-selected 双圈高亮</p></div></div>
    <div class="card-body">accent 2px 内圈 + 底色 4px 外圈。</div>
  </div>
</div>