/* #region zone:desk.household-birthday-style — ฉลองด้วยสีของระบบและลดการเคลื่อนไหว */
:root {
  --birthday-surface: var(--panel);
  --birthday-text: var(--text);
  --birthday-border: color-mix(in srgb, var(--text) 30%, transparent);
  --birthday-accent: var(--accent);
  --birthday-accent-fg: var(--on-accent);
  --birthday-overlay: color-mix(in srgb, var(--text) 55%, transparent);
  --birthday-gold: var(--amber, var(--accent));
  --birthday-mint: var(--mint, var(--up, var(--accent)));
  --birthday-pad: 24px;
  --birthday-radius: 20px;
}
.household-birthday-card {
  background: var(--birthday-surface);
  color: var(--birthday-text);
  border: 1px solid var(--birthday-border);
  border-radius: var(--birthday-radius);
  padding: var(--birthday-pad);
  max-width: min(440px, calc(100vw - 40px));
  text-align: center;
  overflow: visible;
  font: inherit;
}
.household-birthday-card::backdrop {
  background: var(--birthday-overlay);
}
.household-birthday-card h2 {
  font-size: 1.4rem;
  overflow-wrap: anywhere;
}
.household-birthday-card button {
  padding: var(--space-3, 12px) var(--space-5, 20px);
  border-radius: var(--radius-md, 12px);
  min-height: 44px;
  font: inherit;
  cursor: pointer;
  background: var(--birthday-accent);
  color: var(--birthday-accent-fg);
  border: 0;
}
.household-birthday-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.household-birthday-confetti i {
  position: absolute;
  left: var(--birthday-x);
  top: -20px;
  width: 8px;
  height: 14px;
  background: var(--birthday-accent);
  animation: birthday-fall 1.8s ease-in var(--birthday-delay) both;
}
.household-birthday-confetti i:nth-child(3n) {
  background: var(--birthday-gold);
}
.household-birthday-confetti i:nth-child(3n + 1) {
  background: var(--birthday-mint);
}
@keyframes birthday-fall {
  to {
    transform: translateY(105vh) rotate(550deg);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .household-birthday-confetti {
    display: none;
  }
}
/* #endregion */