:root {
  --background: 350 62% 98%;
  --foreground: 352 44% 14%;
  --primary: 353 86% 44%;
  --primary-foreground: 0 0% 100%;
  --secondary: 18 94% 58%;
  --secondary-foreground: 0 0% 100%;
  --muted: 350 34% 92%;
  --muted-foreground: 352 18% 42%;
  --destructive: 0 78% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 350 30% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 18px hsla(353, 86%, 24%, 0.08);
  --shadow-md: 0 18px 38px hsla(353, 86%, 24%, 0.14);
  --shadow-lg: 0 28px 70px hsla(353, 86%, 24%, 0.2);
  --transition-fast: 160ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.6rem;
}

.dark {
  --background: 352 38% 8%;
  --foreground: 350 40% 96%;
  --primary: 353 88% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 18 90% 62%;
  --secondary-foreground: 352 44% 10%;
  --muted: 352 28% 15%;
  --muted-foreground: 350 18% 74%;
  --destructive: 0 84% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 352 22% 24%;
  --card: 352 35% 11%;
  --shadow-sm: 0 8px 18px hsla(0, 0%, 0%, 0.22);
  --shadow-md: 0 18px 38px hsla(0, 0%, 0%, 0.32);
  --shadow-lg: 0 28px 70px hsla(0, 0%, 0%, 0.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 10%, hsla(353, 86%, 44%, 0.14), transparent 28rem),
    radial-gradient(circle at 92% 18%, hsla(18, 94%, 58%, 0.16), transparent 24rem),
    hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid hsla(353, 86%, 44%, 0.35); outline-offset: 3px; }
.blood-drop {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 55% 55% 55% 8%;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  box-shadow: var(--shadow-md);
}
.blood-drop::after {
  content: "";
  position: absolute;
  inset: 11px 11px auto auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
}
.glass-card {
  background: hsla(var(--card), 0.86);
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}
@keyframes pulseDrop {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.08); opacity: 1; }
}
.pulse-soft { animation: pulseDrop 2.4s ease-in-out infinite; }