少女漫画风

You are a Shoujo Manga design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Dark colors or dark backgrounds (bg-black, bg-gray-900, bg-slate-900)
- Sharp corners (rounded-sm, rounded-none)
- Brutalist style elements (thick borders border-4+, hard offset shadows)
- Monospace fonts (font-mono)
- RGB split shadows or neon glow effects
- CMY color scheme (cyan, magenta, yellow on black)

## Must Follow

- Pink-dominant palette: sakura pink #ffb7c5, pearl white #fff5f7
- Fully rounded elements: rounded-full (buttons), rounded-2xl (cards), rounded-3xl (panels)
- Soft sans-serif fonts: font-sans font-bold for headings, font-sans for body
- Gentle colored shadows: shadow-[0_4px_15px_color/opacity]
- Light backgrounds: bg-[#fff5f7] or bg-white/80
- Border width: border-2 for panels, border for inputs

## Color Palette

Primary:
- Sakura Pink: #ffb7c5 (main accent, buttons, borders)
- Pearl White: #fff5f7 (card backgrounds)
- Lavender Purple: #c4b5fd (secondary accent)
- Gold Sparkle: #fde68a (sparkle effects, decorative)
- Rose: #fecdd3 (tertiary, subtle accents)

## Unique Elements

- Screentone dot pattern: radial-gradient(circle, #ffb7c5 0.6px, transparent 0.6px) with 10px spacing at ~6% opacity
- Flower frame corners: Lucide Flower2 icons positioned at absolute corners of panels
- Ribbon banner titles: clip-path polygon tails with soft pink background for section headers
- Sparkle stars: gold #fde68a dots with glow shadow (shadow-[0_0_8px_#fde68a])
- Lace scallop borders: radial-gradient wave pattern at top/bottom of form cards
- Manga panel grid: asymmetric grid-cols-12 layout with col-span mixing for panel arrangement
- Cherry blossom petals: rotated rounded-[50%_0_50%_50%] divs as floating decorations

## Animation & Interaction Rules
- Dokidoki Bounce: hover 采用柔和 scale-105 和缓慢膨胀，表现心跳般节奏。
- Soft Focus Glow: 使用大范围低透明粉色阴影，避免硬边高对比发光。
- Screentone Shimmer: 网点纹理在 hover 时提升不透明度或轻微位移，增强漫画翻页感。
- Soft Squish: active 仅做温和 scale-95，不使用机械式强下沉。

/* Shoujo Manga Global Styles */

:root {
  --shoujo-pink: #ffb7c5;
  --shoujo-pearl: #fff5f7;
  --shoujo-lavender: #c4b5fd;
  --shoujo-gold: #fde68a;
  --shoujo-rose: #fecdd3;
}

/* Screentone dot pattern overlay */
.shoujo-screentone::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--shoujo-pink) 0.6px, transparent 0.6px);
  background-size: 10px 10px;
  opacity: 0.06;
  pointer-events: none;
}

/* Floating petals animation */
.shoujo-petals::before,
.shoujo-petals::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--shoujo-pink);
  border-radius: 50% 0 50% 50%;
  opacity: 0.3;
  animation: shoujoFloat 6s ease-in-out infinite;
}
.shoujo-petals::after {
  width: 8px;
  height: 8px;
  animation-delay: -3s;
  animation-duration: 8s;
}
@keyframes shoujoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

/* Sparkle star glow */
.shoujo-sparkle {
  position: relative;
}
.shoujo-sparkle::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  background: var(--shoujo-gold);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--shoujo-gold);
  animation: shoujoSparkle 2s ease-in-out infinite;
}
@keyframes shoujoSparkle {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Ribbon banner with clip-path tails */
.shoujo-ribbon {
  position: relative;
  display: inline-block;
  padding: 4px 40px;
  background: rgba(255, 183, 197, 0.15);
  border-radius: 2px;
}
.shoujo-ribbon::before,
.shoujo-ribbon::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
}
.shoujo-ribbon::before {
  left: -12px;
  background: rgba(255, 183, 197, 0.1);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.shoujo-ribbon::after {
  right: -12px;
  background: rgba(255, 183, 197, 0.1);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

/* Lace scallop border */
.shoujo-lace {
  position: relative;
}
.shoujo-lace::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 16px;
  right: 16px;
  height: 8px;
  background-image: radial-gradient(circle at 50% 100%, white 6px, transparent 6px),
    radial-gradient(circle at 50% 100%, var(--shoujo-pink) 7px, transparent 7px);
  background-size: 16px 8px;
  opacity: 0.3;
}

/* Soft glow */
.shoujo-glow {
  box-shadow: 0 0 20px rgba(255, 183, 197, 0.3);
}

{
  "border": {
    "width": "border-2",
    "color": "border-[#ffb7c5]/20",
    "radius": "rounded-2xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_2px_10px_#ffb7c520]",
    "md": "shadow-[0_4px_15px_#ffb7c530]",
    "lg": "shadow-[0_4px_20px_#ffb7c540]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_8px_30px_#ffb7c540]",
    "focus": "focus:shadow-[0_0_12px_#ffb7c540]",
    "colored": {
      "pink": "shadow-[0_4px_15px_#ffb7c560]",
      "lavender": "shadow-[0_4px_15px_#c4b5fd60]",
      "gold": "shadow-[0_4px_15px_#fde68a60]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-300 ease-in-out",
    "active": "active:scale-95",
    "hoverScale": "hover:scale-105"
  },
  "typography": {
    "heading": "font-sans font-bold",
    "body": "font-sans leading-relaxed",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-5xl md:text-7xl lg:text-8xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-4xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs md:text-sm"
    }
  },
  "spacing": {
    "section": "py-12 md:py-20 lg:py-28",
    "container": "px-4 md:px-8 lg:px-12",
    "card": "p-5 md:p-8",
    "gap": {
      "sm": "gap-3 md:gap-4",
      "md": "gap-4 md:gap-6",
      "lg": "gap-6 md:gap-10"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#fff5f7]",
      "secondary": "bg-white",
      "accent": [
        "bg-[#ffb7c5]",
        "bg-[#c4b5fd]",
        "bg-[#fde68a]",
        "bg-[#fecdd3]"
      ]
    },
    "text": {
      "primary": "text-[#4a5568]",
      "secondary": "text-[#ffb7c5]",
      "muted": "text-[#4a5568]/40"
    },
    "button": {
      "primary": "bg-[#ffb7c5] text-white shadow-[0_4px_15px_#ffb7c560]",
      "secondary": "bg-[#c4b5fd] text-white shadow-[0_4px_15px_#c4b5fd60]",
      "danger": "bg-[#fde68a] text-[#4a5568] shadow-[0_4px_15px_#fde68a60]"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-none",
      "rounded-sm",
      "border-4",
      "border-8",
      "font-mono",
      "bg-black",
      "bg-[#0a0a0a]",
      "bg-gray-900",
      "bg-slate-900",
      "shadow-[3px_3px",
      "shadow-[4px_4px",
      "border-2 border-[",
      "uppercase tracking-widest"
    ],
    "patterns": [
      "^rounded-(?:none|sm)$",
      "^border-(?:4|8)$",
      "^font-mono$",
      "^bg-(?:black|gray-900|slate-900|\\[#0a0a0a\\])$",
      "^shadow-\\[\\d+px_\\d+px_0px",
      "^text-\\[#(?:00ffff|ff00ff)\\]$"
    ],
    "reasons": {
      "rounded-none": "Shoujo Manga uses soft rounded shapes (rounded-full, rounded-2xl, rounded-3xl)",
      "border-4": "Shoujo Manga uses subtle borders (border or border-2), not heavy ones",
      "font-mono": "Shoujo Manga uses rounded sans-serif fonts exclusively",
      "bg-black": "Shoujo Manga uses light pastel backgrounds only (pearl white, sakura pink)",
      "shadow-[3px_3px": "Shoujo Manga uses soft diffused shadows with color tinting, not hard offset ones",
      "uppercase tracking-widest": "Used sparingly for ribbon banners only, never for main content"
    }
  },
  "required": {
    "button": [
      "rounded-full",
      "font-sans font-medium",
      "shadow-[0_4px_15px_#ffb7c560]",
      "transition-all duration-300 ease-in-out"
    ],
    "card": [
      "rounded-2xl",
      "bg-[#fff5f7]",
      "border-2 border-[#ffb7c5]/20",
      "shadow-[0_4px_20px_#ffb7c520]"
    ],
    "input": [
      "rounded-full",
      "border border-[#ffb7c5]/25",
      "bg-[#fff5f7]",
      "font-sans",
      "focus:outline-none"
    ]
  }
}