:root {
  --background: 32 42% 96%;
  --foreground: 250 24% 8%;
  --primary: 350 84% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 259 64% 54%;
  --secondary-foreground: 0 0% 100%;
  --muted: 28 28% 90%;
  --muted-foreground: 250 8% 40%;
  --destructive: 2 72% 53%;
  --destructive-foreground: 0 0% 100%;
  --border: 30 22% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 10px 30px rgba(35, 24, 45, 0.08);
  --shadow-md: 0 22px 60px rgba(35, 24, 45, 0.13);
  --shadow-lg: 0 34px 100px rgba(35, 24, 45, 0.22);
  --transition-fast: 150ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;
}
.dark {
  --background: 276 28% 8%;
  --foreground: 280 28% 96%;
  --primary: 338 88% 62%;
  --primary-foreground: 0 0% 100%;
  --secondary: 255 72% 68%;
  --secondary-foreground: 276 28% 8%;
  --muted: 276 18% 17%;
  --muted-foreground: 275 12% 70%;
  --destructive: 2 82% 64%;
  --destructive-foreground: 0 0% 100%;
  --border: 275 16% 24%;
  --card: 276 24% 12%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: hsl(var(--foreground));
  background:
    radial-gradient(circle at 0% 0%, hsl(var(--primary) / .14), transparent 30rem),
    radial-gradient(circle at 92% 2%, hsl(var(--secondary) / .14), transparent 28rem),
    linear-gradient(180deg, #fff8f4 0%, hsl(var(--background)) 48%, #fff 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size: max(16px, 1rem); }
button, a { transition: transform var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); }
button:hover, a:hover { transform: translateY(-1px); }
button:active, a:active { transform: scale(.98); }
.bg-1 { background: hsl(var(--background)); }
.bg-2 { background: hsl(var(--card)); }
.bg-3 { background: hsl(var(--muted)); }
.bg-4 { background: hsl(var(--foreground)); }
.text-primary { color: hsl(var(--foreground)); }
.text-secondary { color: hsl(var(--muted-foreground)); }
.text-tertiary { color: hsl(var(--muted-foreground) / .78); }
.accent { color: hsl(var(--primary)); }
.masonry { column-count: 1; column-gap: 1.15rem; }
@media (min-width: 640px) { .masonry { column-count: 2; } }
@media (min-width: 900px) { .masonry { column-count: 3; } }
@media (min-width: 1180px) { .masonry { column-count: 4; } }
.pin-card { break-inside: avoid; margin-bottom: 1.15rem; animation: rise .42s ease both; transform: translateZ(0); }
.pin-card:hover { box-shadow: var(--shadow-md); }
.pin-card genmb-image { width: 100%; height: 100%; display: block; }
.pin-card img, genmb-image::part(img) { object-fit: cover; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.skeleton { background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--card)), hsl(var(--muted))); background-size: 200% 100%; animation: shimmer 1.35s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
genmb-uploader { display: block; border: 1px dashed hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; background: hsl(var(--muted) / .42); min-height: 180px; }
.safe-bottom { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
.safe-top { padding-top: env(safe-area-inset-top); }
.glass-panel { background: hsl(var(--card) / .76); backdrop-filter: blur(18px); border: 1px solid hsl(var(--border) / .8); box-shadow: var(--shadow-md); }