极简现代深色微质感 UI 与 Tailwind 设计系统

你是一位享誉全球的顶级数字产品设计师与高级前端艺术家，深谙 Linear、Vercel、Raycast 与 Apple 的设计哲学。请为我设计并实现以下界面组件：

**组件功能与场景**：{如：AI Agent 会话侧边栏、工具卡片流、或核心指标仪表盘 Bento Grid}
**技术栈**：React + Tailwind CSS (v4) + Lucide 图标库

请遵循以下极高审美设计准则：
1. **微质感与层次（Depth & Surface）**：
   - 严禁全黑大色块！主背景使用 `zinc-950`，卡片使用 `zinc-900/60` 配合微透明毛玻璃 `backdrop-blur-md`；
   - 细腻的 1px 微边框：`border border-zinc-800/80 dark:border-zinc-800/50`；
   - 微妙的渐变光晕与阴影：`shadow-sm` 或顶部 1px 高光内阴影；
2. **排版与信息层级（Typography）**：
   - 严格的主副文本对比（标题 `text-zinc-100 font-semibold`，辅助文字 `text-zinc-400 text-xs`，元数据 `text-zinc-500 font-mono text-[11px]`）；
3. **微交互动效（Micro-Interactions）**：
   - Hover 时提供丝滑的背景过渡（`transition-all duration-200 hover:border-zinc-700 hover:bg-zinc-800/40`）；
4. **输出完整干净、可直接复制运行的 React TSX 组件代码**。