便当盒布局

你是一个 Bento Grid 设计风格的前端开发专家。生成的所有代码必须严格遵守以下约束：

## 绝对禁止

- 所有卡片大小相同（必须有尺寸变化）
- 忽略响应式适配
- 卡片之间间隙不一致
- 卡片内容过于拥挤
- 使用直角（需要圆角）
- 使用硬边阴影（shadow-[Xpx_Ypx_0px]）

## 必须遵守

- 使用 CSS Grid: grid grid-cols-4
- 卡片跨越: col-span-2, row-span-2
- 一致间隙: gap-4 或 gap-6
- 圆角: rounded-xl, rounded-2xl, rounded-3xl
- 响应式: md:grid-cols-2, lg:grid-cols-4

## Animation & Interaction Rules

- Widget Feel: 每个卡片如独立 iOS 小组件。悬停时平滑上浮 + 微放大（hover:-translate-y-1 hover:scale-[1.01]），配合柔和宽广阴影（hover:shadow-[0_8px_30px_rgba(0,0,0,0.08)]）。
- Micro-interactions: 卡片内图标在 group-hover 时独立响应：变色（bg swap）、放大（scale-110）。
- Snappy Easing: 使用 ease-out 配合 duration-200 到 duration-300，让交互灵敏且现代。
- Active Feedback: 按下时 active:scale-95 或 active:scale-98，模拟物理按压。
- Smooth Focus: 输入框聚焦时 ring 过渡极度平滑（transition-all duration-200）。

## 布局规则

大卡片 (col-span-2 row-span-2):
- 放置主要内容或特色功能
- 可使用渐变背景
- 建议 1-2 个

中卡片 (col-span-2 或 row-span-2):
- 次要重要内容
- 建议 2-3 个

小卡片 (1x1):
- 图标、数字、标签等简短内容
- 填充剩余空间

## 配色建议

背景:
- 渐变: bg-gradient-to-br from-blue-500 to-purple-600
- 浅色: bg-zinc-50, bg-zinc-100
- 彩色: bg-orange-50, bg-green-50, bg-blue-50

文字:
- 主要: text-zinc-900
- 次要: text-zinc-500, text-zinc-600
- 白色: text-white (在深色背景上)

## 自检

每次生成代码后检查：
1. 有大小不一的卡片
2. 使用了 CSS Grid
3. 间隙一致
4. 有响应式处理
5. 圆角统一
6. 卡片有 hover 上浮 + 微放大效果
7. 内部图标有 group-hover 联动

/* Bento Grid 全局样式 */

/* 基础 Grid 容器 */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
}

/* 卡片尺寸变体 */
.bento-lg {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-wide {
  grid-column: span 2;
}

.bento-tall {
  grid-row: span 2;
}

/* Widget 卡片悬停 */
.bento-card {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  cursor: pointer;
}

.bento-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.bento-card:active {
  transform: scale(0.98);
}

/* 卡片内图标联动 */
.bento-card:hover .bento-icon {
  transform: scale(1.1);
}

.bento-icon {
  transition: transform 0.3s ease-out, background-color 0.3s ease-out, color 0.3s ease-out;
}
/* Bento Grid Design Tokens */
:root {
  --bento-grid-primary: #18181b;
  --bento-grid-secondary: #fafafa;
  --bento-grid-accent: #3b82f6;
  --bento-grid-glow: rgba(24, 24, 27, 0.3);
}

@keyframes bento-grid-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bento-grid-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.bento-grid-card {
  position: relative;
  overflow: hidden;
}

.bento-grid-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(24, 24, 27, 0.05), transparent);
  pointer-events: none;
}

.bento-grid-card:hover::before {
  opacity: 1;
}

.bento-grid-gradient {
  background: linear-gradient(135deg, #18181b, #3b82f6);
}

.bento-grid-gradient-text {
  background: linear-gradient(135deg, #18181b, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bento-grid-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(24, 24, 27, 0.08);
}

.bento-grid-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.bento-grid-animate-in {
  animation: bento-grid-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border",
    "color": "border-zinc-100 dark:border-zinc-800",
    "radius": "rounded-2xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-sm",
    "md": "shadow-md",
    "lg": "shadow-lg",
    "none": "shadow-none",
    "hover": "hover:shadow-md hover:-translate-y-0.5",
    "focus": "focus:shadow-md focus:ring-2 focus:ring-blue-500/20",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-200",
    "active": "active:scale-95",
    "hoverTranslate": "hover:-translate-y-0.5"
  },
  "typography": {
    "heading": "font-semibold text-zinc-900 dark:text-zinc-100",
    "body": "text-zinc-600 dark:text-zinc-400",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl md:text-5xl lg:text-6xl",
      "h1": "text-3xl md:text-4xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-12 md:py-16 lg:py-20",
    "container": "px-4 md:px-6 lg:px-8",
    "card": "p-4 md:p-6",
    "gap": {
      "sm": "gap-3 md:gap-4",
      "md": "gap-4 md:gap-6",
      "lg": "gap-6 md:gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-white dark:bg-zinc-900",
      "secondary": "bg-zinc-50 dark:bg-zinc-800",
      "accent": [
        "bg-gradient-to-br from-blue-500 to-purple-600",
        "bg-gradient-to-br from-orange-400 to-pink-500",
        "bg-gradient-to-br from-green-400 to-cyan-500"
      ]
    },
    "text": {
      "primary": "text-zinc-900 dark:text-zinc-100",
      "secondary": "text-zinc-600 dark:text-zinc-400",
      "muted": "text-zinc-400 dark:text-zinc-500"
    },
    "button": {
      "primary": "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900",
      "secondary": "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-none",
      "rounded-sm",
      "gap-1",
      "gap-2",
      "gap-8",
      "gap-10",
      "gap-12"
    ],
    "patterns": [
      "^rounded-none",
      "^rounded-sm"
    ],
    "reasons": {
      "rounded-none": "Bento Grid requires rounded corners (rounded-xl, rounded-2xl, or rounded-3xl)",
      "rounded-sm": "Bento Grid uses larger rounded corners for modern look",
      "gap-1": "Bento Grid uses consistent medium gaps (gap-4 or gap-6)"
    }
  },
  "required": {
    "button": [
      "px-4 py-2 md:px-6 md:py-3",
      "rounded-xl",
      "font-medium",
      "transition-colors"
    ],
    "card": [
      "rounded-2xl",
      "border border-zinc-100 dark:border-zinc-800",
      "shadow-sm",
      "hover:shadow-md hover:-translate-y-0.5",
      "transition-all duration-200"
    ],
    "input": [
      "bg-zinc-50 dark:bg-zinc-800",
      "border border-zinc-200 dark:border-zinc-700",
      "rounded-xl",
      "focus:outline-none focus:ring-2 focus:ring-blue-500/20",
      "focus:border-blue-500",
      "transition-all"
    ]
  }
}