/* ========================================
   DESIGN TOKENS (moved to themes.css)
   ======================================== */

/* ========================================
   UTILITIES
   ======================================== */
.hidden {
  display: none !important;
}

/* ========================================
   MODAL OVERLAY
   ======================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
  animation: modal-fade-in 0.25s ease;
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ========================================
   RESET & BASE
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
  /* Hide default white scrollbar on root */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

html::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Webkit */
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-image) center / cover no-repeat fixed;
  color: var(--text-secondary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
  transition: background 0.5s ease;
}

/* Cute scrollbars — applied to body and other elements */
body, * {
  scrollbar-width: thin;
  scrollbar-color: rgba(205, 180, 255, 0.7) rgba(255, 255, 255, 0.08);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffafcc, #cdb4ff);
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffc8dd, #bde0fe);
}

/* Dark Background Overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg-dark-overlay);
  z-index: -1;
  pointer-events: none;
}

/* Premium Grain Texture Overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  z-index: 1000;
}

@keyframes floatBackground {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-20px, 20px) scale(1.05);
  }
}

@keyframes floatSparkles {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Premium Floating Background Shapes */
.bg-shapes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
}

/* Large faint blurred gradient blobs in corners for depth */
.bg-shapes::before,
.bg-shapes::after {
  content: '';
  position: absolute;
  filter: blur(120px);
  opacity: 0.35;
  border-radius: 50%;
  z-index: -1;
}

.bg-shapes::before {
  width: 700px;
  height: 700px;
  background: var(--pastel-lavender-light);
  top: -200px;
  right: -200px;
}

.bg-shapes::after {
  width: 800px;
  height: 800px;
  background: var(--pastel-blush);
  bottom: -300px;
  left: -200px;
}

.shape {
  position: absolute;
  filter: blur(80px);
  opacity: 0.4;
  border-radius: 50%;
  animation: floatShapes 25s infinite alternate ease-in-out;
}

.shape-1 {
  width: 400px;
  height: 400px;
  background: var(--pastel-blush);
  top: -100px;
  left: -100px;
  animation-delay: 0s;
}

.shape-2 {
  width: 500px;
  height: 500px;
  background: var(--pastel-lavender-light);
  bottom: -150px;
  right: -100px;
  animation-delay: -5s;
}

.shape-3 {
  width: 300px;
  height: 300px;
  background: var(--pastel-blue-light);
  top: 40%;
  left: 60%;
  animation-delay: -10s;
}

@keyframes floatShapes {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  33% {
    transform: translate(50px, 80px) rotate(10deg) scale(1.1);
  }

  66% {
    transform: translate(-30px, 40px) rotate(-10deg) scale(0.9);
  }

  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

/* Dreamy Pastel Clouds Background */
.clouds-parallax {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  /* Move slightly above body but below container */
  pointer-events: none;
  display: flex;
  align-items: flex-end;
}

.cloud {
  position: absolute;
  filter: blur(50px);
  border-radius: 50%;
  opacity: 0.85;
  /* Force high visibility */
  mix-blend-mode: normal;
  /* Normal ensures they don't fade into the background */
  animation: driftClouds 40s infinite alternate ease-in-out;
  pointer-events: none;
}

.cloud-1 {
  width: 800px;
  height: 400px;
  background: radial-gradient(circle at center, var(--pastel-blush) 0%, transparent 70%);
  bottom: -150px;
  left: -200px;
  animation-duration: 45s;
}

.cloud-2 {
  width: 900px;
  height: 500px;
  background: radial-gradient(circle at center, var(--pastel-lavender-light) 0%, transparent 70%);
  bottom: -200px;
  right: -250px;
  animation-duration: 55s;
  animation-delay: -5s;
}

.cloud-3 {
  width: 700px;
  height: 450px;
  background: radial-gradient(circle at center, var(--pastel-blue-light) 0%, transparent 70%);
  bottom: -100px;
  left: 30%;
  opacity: 0.5;
  animation-duration: 50s;
  animation-delay: -10s;
}

.cloud-4 {
  width: 600px;
  height: 350px;
  background: radial-gradient(circle at center, var(--pastel-rose-tint) 0%, transparent 70%);
  bottom: 0;
  right: 15%;
  opacity: 0.4;
  animation-duration: 60s;
  animation-delay: -15s;
}

@keyframes driftClouds {
  0% {
    transform: translateX(0) translateY(0) scale(1);
  }

  50% {
    transform: translateX(100px) translateY(-50px) scale(1.1);
  }

  100% {
    transform: translateX(-50px) translateY(20px) scale(0.95);
  }
}

/* Haze effect blending into clouds */
.clouds-parallax::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.15) 0%, transparent 40%);
  /* Reduced from 0.4 to prevent washing out clouds */
  pointer-events: none;
}

/* ========================================
   FLOATING HEARTS
   ======================================== */
.floating-hearts {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.heart {
  position: absolute;
  animation: float-up 10s ease-in infinite;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255, 175, 204, 0.3));
  color: var(--pastel-pink-soft);
  /* Very subtle pastel hearts */
}

@keyframes float-up {
  0% {
    opacity: 0;
    transform: translateY(100vh) rotate(0deg) scale(0.5);
  }

  10% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.3;
  }

  100% {
    opacity: 0;
    transform: translateY(-100px) rotate(360deg) scale(1);
  }
}

/* ========================================
   CONTAINER
   ======================================== */
/* ========================================
   CONTAINER
   ======================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md);
  position: relative;
  z-index: 10;
}

/* Template Grid Default */
/* ========================================
   INPUTS
   ======================================== */
.form-group {
  margin-bottom: 1.25rem;
  position: relative;
}

.form-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pastel-purple-gray);
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 1.25rem;
  color: var(--pastel-lavender-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: color var(--transition-normal);
  z-index: 2;
}

.form-input,
textarea.form-input {
  width: 100%;
  padding: 0.95rem 1.25rem;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--pastel-purple-gray);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-inner);
}

.form-input:focus,
textarea.form-input:focus {
  outline: none;
  border-color: var(--pastel-lavender-muted);
  box-shadow: 0 0 15px rgba(205, 180, 255, 0.25), var(--shadow-inner);
  background: #fff;
}

.form-input:focus+.input-icon {
  color: var(--primary-pink);
}

/* Specific fix for mobile input overlap */
@media (max-width: 480px) {
  .form-input {
    font-size: 16px !important;
    /* Prevent iOS zoom */
  }

  .input-icon {
    left: 1.25rem !important;
  }
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  padding: 0.85rem 1.75rem;
}

.btn-primary {
  background: linear-gradient(135deg, #FFAFCC 0%, #CDB4FF 50%, #EAF6FF 100%);
  color: var(--btn-primary-text, #fff);
  box-shadow: var(--shadow-button);
  text-shadow: none;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(205, 180, 255, 0.4);
  filter: brightness(1.05);
}

.btn-secondary {
  background: #fff;
  color: var(--pastel-purple-gray);
  border: 1px solid rgba(205, 180, 255, 0.4);
  box-shadow: 0 4px 12px rgba(205, 180, 255, 0.1);
}

.btn-secondary:hover {
  background: var(--pastel-lavender-light);
  transform: translateY(-1px);
}

/* ========================================
   SOCIAL BUTTONS
   ======================================== */
.btn-social {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid rgba(205, 180, 255, 0.3);
  padding: 0.85rem;
  border-radius: 50px;
  color: var(--pastel-purple-gray);
  font-weight: 500;
  font-size: 0.9rem;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.btn-social:hover {
  background: var(--pastel-lavender-light);
  border-color: var(--pastel-lavender-muted);
}

/* ========================================
   TYPOGRAPHY — High Contrast
   ======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
  color: #555;
}

h1 {
  font-size: clamp(3rem, 7vw, 5rem);
  /* Slightly larger */
  font-family: 'Dancing Script', cursive;
  color: var(--pastel-lavender-muted);
  /* Muted lavender */
  text-shadow: 0 4px 8px rgba(205, 180, 255, 0.3), 2px 2px 0 rgba(255, 255, 255, 0.8);
  /* Soft subtle shadow */
  font-weight: 700;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.title-heart {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--pastel-pink-soft);
  animation: pulse-heart 2s infinite ease-in-out;
}

@keyframes pulse-heart {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(255, 175, 204, 0.5));
  }
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.4rem;
}

p {
  color: #6b6b83;
  margin-bottom: var(--spacing-sm);
}

.subtext {
  color: #7a7a91;
  font-size: 0.95rem;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem;
  /* Better breathing room */
  font-size: 1.1rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: none;
  border-radius: 50px;
  /* Explicitly 50px pill radius */
  cursor: pointer;
  transition: all var(--transition-normal);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(205, 180, 255, 0.25);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--gradient-btn-dark);
  color: var(--btn-primary-text, #fff);
  box-shadow: 0 6px 20px rgba(109, 40, 217, 0.3);
  letter-spacing: 0.5px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(167, 139, 250, 0.5), 0 0 15px rgba(109, 40, 217, 0.3);
  filter: brightness(1.1);
}

.btn-secondary {
  background: #F3EFFF;
  color: #8c8ca1;
  border: 1px solid rgba(205, 180, 255, 0.5);
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(205, 180, 255, 0.1);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.btn-secondary:hover {
  background: white;
  color: #6b6b83;
  transform: translateY(-2px);
  border-color: rgba(205, 180, 255, 0.8);
  box-shadow: 0 6px 20px rgba(205, 180, 255, 0.2);
}

.btn-social {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.85rem var(--spacing-sm);
  font-size: 0.95rem;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  background: rgba(255, 255, 255, 0.9);
  color: #6b6b83;
  border: 1px solid rgba(224, 195, 252, 0.4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-normal);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(205, 180, 255, 0.25);
  box-shadow: 0 4px 12px rgba(161, 196, 253, 0.15);
}

.btn-social:hover {
  box-shadow: 0 6px 16px rgba(161, 196, 253, 0.25);
  transform: translateY(-2px);
  background: white;
  border-color: rgba(224, 195, 252, 0.8);
}

.btn-social svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* ========================================
   FORMS — Soft Pastel Inputs
   ======================================== */
.form-group {
  margin-bottom: 1.2rem;
  text-align: left;
}

.form-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.form-label {
  display: block;
  font-weight: 500;
  color: #8c8ca1;
  font-size: 0.9rem;
  margin-bottom: 0;
  /* Handled by wrapper or row */
}

/* Input Wrapper to position icons */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-icon {
  position: absolute;
  left: 1rem;
  color: #CDB4FF;
  /* Pastel icon color */
  font-size: 1.2rem;
  pointer-events: none;
  /* Let clicks pass through to input */
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.form-input,
textarea.form-input {
  width: 100%;
  padding: 0.9rem 1rem 0.9rem 2.8rem;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  border: 2px solid var(--glass-border);
  border-radius: 25px;
  background: var(--glass-bg);
  color: var(--text-primary);
  transition: all var(--transition-normal);
  box-shadow: var(--glass-shadow), inset 0 3px 6px rgba(167, 139, 250, 0.05);
}

.form-input:focus,
textarea.form-input:focus {
  outline: none;
  border-color: var(--accent-glow);
  box-shadow: 0 0 15px rgba(167, 139, 250, 0.2), inset 0 2px 4px rgba(167, 139, 250, 0.05);
  background: var(--glass-bg-strong);
}

.form-input::placeholder,
textarea.form-input::placeholder {
  color: var(--text-placeholder);
}

textarea.form-input {
  resize: vertical;
  min-height: 120px;
  line-height: 1.7;
  padding-left: 1rem;
  /* No icon for textarea usually */
}

/* Normalize placeholder alignment for inputs without icons */
.form-input {
  padding-left: 1.1rem;
}

.input-wrapper .form-input {
  padding-left: 2.8rem;
}

@media (max-width: 480px) {
  .input-wrapper .form-input {
    padding-left: 2.4rem;
  }
}

.form-hint {
  color: #a0a0b5;
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

.forgot-link {
  color: #CDB4FF;
  font-size: 0.85rem;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.forgot-link:hover {
  color: #ff85a2;
  text-decoration: underline;
}

/* ========================================
   MESSAGES
   ======================================== */
.error-message {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: center;
  color: #ff5252;
  animation: shake 0.5s ease;
  margin: var(--spacing-sm) 0;
  font-size: 0.9rem;
}

.success-message {
  background: rgba(168, 230, 207, 0.2);
  border: 1px solid rgba(168, 230, 207, 0.5);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: center;
  color: #3b8a66;
  margin: var(--spacing-sm) 0;
  font-size: 0.9rem;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-6px);
  }

  40%,
  80% {
    transform: translateX(6px);
  }
}

/* ========================================
   DASHBOARD HEADER
   ======================================== */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.2rem 1.8rem;
  background: rgba(30, 30, 60, 0.6);
  backdrop-filter: blur(16px);
  border-radius: var(--radius-md);
  margin-bottom: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.template-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.template-cost-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ff8ab3;
  background: rgba(255, 138, 179, 0.12);
  border: 1px solid rgba(255, 138, 179, 0.25);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.template-cost-badge.highlighted {
  color: #ff9dbd;
  background: rgba(255, 157, 189, 0.18);
  border-color: rgba(255, 157, 189, 0.4);
  box-shadow: 0 0 10px rgba(255, 157, 189, 0.15);
}

/* ========================================
   TEMPLATE CARD (Single template)
   ======================================== */
.template-hero {
  text-align: center;
  padding: 3rem 2rem;
  max-width: 600px;
  margin: 0 auto;
}

.template-hero-icon {
  font-size: 5rem;
  margin-bottom: 1.5rem;
  display: block;
  animation: gentle-bounce 3s ease-in-out infinite;
}

@keyframes gentle-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* ========================================
   MY PAGES LIST
   ======================================== */
.page-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  margin-bottom: 0.6rem;
  transition: all var(--transition-normal);
}

.page-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(4px);
}

.page-item .page-title {
  flex: 1;
  min-width: 0;
  color: #fff;
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-item .page-type {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
}

.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.3rem;
  transition: transform 0.2s;
  filter: grayscale(0.3);
}

.action-btn:hover {
  transform: scale(1.2);
  filter: grayscale(0);
}

/* ========================================
   EDITOR SECTIONS
   ======================================== */
.editor-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.editor-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Photo upload grid */
.photo-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.8rem;
}

.photo-upload-slot {
  aspect-ratio: 1;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(205, 180, 255, 0.25);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  overflow: hidden;
  position: relative;
}

.photo-upload-slot:hover {
  border-color: var(--primary-pink);
  color: var(--primary-pink);
  background: rgba(255, 77, 141, 0.05);
}

.photo-upload-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
}

.photo-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: rgba(20, 16, 35, 0.7);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 12px rgba(24, 18, 48, 0.25);
}

.photo-delete-btn:hover {
  background: rgba(255, 77, 141, 0.85);
}

.photo-upload-slot .upload-icon {
  font-size: 2rem;
  margin-bottom: 0.3rem;
}

/* ========================================
   VIEWER — ENVELOPE
   ======================================== */
.envelope-scene {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2rem;
  position: relative;
}

.envelope-container {
  width: min(320px, 88vw);
  aspect-ratio: 16 / 11;
  height: auto;
  position: relative;
  cursor: pointer;
  perspective: 800px;
  transition: transform 0.3s ease;
}

.envelope-container:hover {
  transform: scale(1.05);
}

.envelope-body {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .envelope-body {
  background: linear-gradient(135deg, #2d1b4d 0%, #1a1033 100%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.envelope-body::before {
  content: '💌';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  z-index: 5;
}

.envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background: #f9d5e5;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  will-change: transform;
}

[data-theme="dark"] .envelope-flap {
  background: #3b2463;
}

.envelope-container.open .envelope-flap {
  transform: rotateX(180deg);
  z-index: 0;
}

.envelope-letter {
  position: absolute;
  top: 20px;
  left: 10%;
  width: 80%;
  background: white;
  border-radius: 4px;
  padding: 1.2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  z-index: 2;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 0.5s ease 0.3s;
  opacity: 0;
  transform: translateY(0);
}

[data-theme="dark"] .envelope-letter {
  background: #25263a;
  color: var(--text-primary);
}

.envelope-container.open .envelope-letter {
  opacity: 1;
  transform: translateY(-200px);
}

.click-hint {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  margin-top: 2rem;
  animation: pulse-hint 2s ease-in-out infinite;
}

@keyframes pulse-hint {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

/* ========================================
   VIEWER — LETTER PAGE (Full Screen)
   ======================================== */
.letter-page {
  min-height: 100vh;
  display: block;
  padding: 2rem 1.5rem 6rem;
}

.letter-paper {
  background: #fffdf7;
  max-width: 650px;
  width: 100%;
  border-radius: 8px;
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
  margin: 0 auto;
  /* Notebook lines */
  background-image: linear-gradient(rgba(200, 200, 220, 0.2) 1px, transparent 1px);
  background-size: 100% 2rem;
  background-position: 0 2.5rem;
  transition: background 0.5s ease, color 0.5s ease;
}

[data-theme="dark"] .letter-paper {
  background: #1e1f2f;
  background-image: linear-gradient(rgba(100, 100, 150, 0.15) 1px, transparent 1px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.letter-paper .letter-date {
  color: #999;
  font-size: 0.85rem;
  text-align: right;
  margin-bottom: 1rem;
  font-family: 'Inter', sans-serif;
}

.letter-paper .letter-title {
  font-family: 'Pacifico', cursive;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--primary-pink);
  margin-bottom: 1.5rem;
}

.letter-paper .letter-skip {
  display: flex;
  justify-content: flex-end;
  margin: -0.4rem 0 1rem;
}

.letter-paper .letter-skip .btn-skip {
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
}

.letter-paper .letter-body {
  font-family: 'Caveat', cursive;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  line-height: 2rem;
  color: #333;
  white-space: pre-wrap;
  min-height: 200px;
  max-height: 52vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.4) transparent;
}

.letter-paper .letter-body::-webkit-scrollbar {
  width: 6px;
}
.letter-paper .letter-body::-webkit-scrollbar-track {
  background: transparent;
}
.letter-paper .letter-body::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.4);
  border-radius: 10px;
}

[data-theme="dark"] .letter-paper .letter-body {
  color: var(--text-primary);
}

.letter-paper .letter-body .typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.3em;
  background: var(--primary-pink);
  animation: blink-cursor 0.8s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
}

@keyframes blink-cursor {
  50% {
    opacity: 0;
  }
}

.letter-paper .letter-sender {
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  color: #555;
  text-align: right;
  margin-top: 2rem;
  opacity: 0;
  transition: opacity 0.5s ease;
}

[data-theme="dark"] .letter-paper .letter-sender {
  color: var(--text-secondary);
}

.letter-paper .letter-sender.visible {
  opacity: 1;
}

.letter-continue-btn {
  display: none;
  margin-top: 2rem;
  text-align: center;
}

.letter-continue-btn.visible {
  display: block;
}

.letter-continue-btn button {
  background: var(--gradient-btn-dark);
  color: var(--btn-primary-text, #fff);
  border: none;
  padding: 0.9rem 2.5rem;
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all var(--transition-normal);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(205, 180, 255, 0.25);
  box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
  animation: gentle-bounce 2s ease-in-out infinite;
}

.letter-continue-btn button:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 25px rgba(245, 87, 108, 0.5);
}


@media (max-width: 640px) {
  .letter-paper .letter-skip {
    justify-content: center;
    margin-top: 0;
  }

  .letter-paper .letter-skip .btn-skip {
    width: 100%;
    max-width: 220px;
  }
}

/* ========================================
   VIEWER — GALLERY PAGE
   ======================================== */
.gallery-page {
  min-height: 100vh;
  padding: 3rem 1.5rem;
}

.gallery-page h2 {
  text-align: center;
  font-family: 'Pacifico', cursive;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  color: var(--text-primary);
  margin-bottom: 2.5rem;
  text-shadow: 0 2px 15px rgba(167, 139, 250, 0.4);
}

.polaroid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.polaroid-card {
  background: white;
  padding: 0.8rem 0.8rem 2.5rem;
  border-radius: 4px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  transform: rotate(var(--rotate, 0deg));
  transition: transform 0.4s ease;
}

.polaroid-card:hover {
  transform: rotate(0deg) scale(1.05) translateY(-8px) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
  animation-play-state: paused, paused !important;
  z-index: 10;
}

.polaroid-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 2px;
}

.polaroid-card .caption {
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 1.15rem;
  color: #444;
  margin-top: 0.8rem;
  padding: 0 0.3rem;
}

/* Gallery reveal animation */
.polaroid-card {
  opacity: 0;
  transform: translateY(80px) scale(0.6) rotate(calc(var(--rotate, 0deg) - 10deg));
}

.polaroid-card.revealed {
  animation: card-reveal-dramatic 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, polaroid-float 6s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + 0.9s);
}

@keyframes card-reveal-dramatic {
  0% {
    opacity: 0;
    transform: translateY(80px) scale(0.6) rotate(calc(var(--rotate, 0deg) - 10deg));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(var(--rotate, 0deg));
  }
}

@keyframes polaroid-float {
  0% { transform: translateY(0) rotate(var(--rotate, 0deg)); }
  100% { transform: translateY(-8px) rotate(calc(var(--rotate, 0deg) + 2deg)); }
}

/* ========================================
   VIEWER — MUSIC BAR
   ======================================== */
.music-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.8rem 1.5rem;
  background: rgba(20, 20, 40, 0.9);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 100;
}

.music-bar .music-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-rose);
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  box-shadow: 0 3px 10px rgba(245, 87, 108, 0.3);
}

.music-bar .music-toggle:hover {
  transform: scale(1.1);
}

.music-bar .music-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-bar .music-bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 20px;
}

.music-bar .music-bars span {
  width: 3px;
  background: var(--primary-pink);
  border-radius: 2px;
  animation: music-eq 0.8s ease-in-out infinite alternate;
}

.music-bar .music-bars span:nth-child(1) {
  height: 8px;
  animation-delay: 0s;
}

.music-bar .music-bars span:nth-child(2) {
  height: 14px;
  animation-delay: 0.15s;
}

.music-bar .music-bars span:nth-child(3) {
  height: 6px;
  animation-delay: 0.3s;
}

.music-bar .music-bars span:nth-child(4) {
  height: 18px;
  animation-delay: 0.1s;
}

.music-bar .music-bars.paused span {
  animation: none;
  height: 4px;
}

@keyframes music-eq {
  to {
    height: 4px;
  }
}

/* ========================================
   HEART CONFETTI
   ======================================== */
.confetti-heart {
  position: fixed;
  animation: confettiFall 3.5s ease-in forwards;
  pointer-events: none;
  z-index: 9999;
}

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translateY(-50px) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg);
  }
}

/* ========================================
   CALCULATOR PIN INPUT
   ======================================== */
.calculator {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  max-width: 400px;
  margin: 0 auto;
}

.calculator-display {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: white;
  min-height: 60px;
  letter-spacing: 0.5rem;
}

.calculator-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.calculator-btn {
  padding: var(--spacing-md);
  font-size: 1.4rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: white;
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calculator-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: scale(1.05);
}

.calculator-btn:active {
  transform: scale(0.95);
}

.calculator-btn-clear {
  background: linear-gradient(135deg, #ff6b6b, #ff5252);
  border: none;
}

.calculator-btn-submit {
  background: var(--gradient-rose);
  border: none;
}


#tosModal .tos-text {
  overflow-y: auto;
  padding-right: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Hide scrollbar for cleaner look */
#tosModal .tos-text::-webkit-scrollbar {
  width: 4px;
}
#tosModal .tos-text::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
}

/* ========================================
   SPINNER
   ======================================== */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--primary-pink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: var(--spacing-md) auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   AUTH CONTAINER
   ======================================== */
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* ========================================
   DONATION
   ======================================== */
.donation-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 380px;
  margin: 0 auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.donation-qr {
  width: 250px;
  height: 250px;
  margin: 0 auto;
  display: block;
  border-radius: 12px;
  max-width: 100%;
  height: auto;
}

/* ========================================
   FLOWER ANIMATIONS
   ======================================== */
.sway-animation {
  animation: sway-animation 4s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes sway-animation {

  0%,
  100% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(3deg) translateY(-8px);
  }
}

/* ========================================
   ACCORDION (Editor)
   ======================================== */
.accordion-item {
  margin-bottom: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.accordion-header {
  padding: 1rem 1.2rem;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}

.accordion-header:hover {
  background: rgba(255, 255, 255, 0.08);
}

.accordion-header h3 {
  margin: 0;
  font-size: 1.05rem;
  color: white;
}

.accordion-icon {
  transition: transform 0.3s;
  color: white;
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(0, 0, 0, 0.1);
}

.accordion-item.active .accordion-content {
  padding: 1.5rem;
  max-height: 3000px;
}

/* ========================================
   UTILITIES
   ======================================== */
.text-center {
  text-align: center;
}

.hidden {
  display: none !important;
}

.fade-in {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Polaroid container */
.polaroid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.polaroid-item {
  flex: 0 1 280px;
  max-width: 300px;
}

/* Nav bottom btn */
.nav-center-bottom {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 3rem;
  padding-bottom: 2rem;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .glass-card {
    padding: var(--spacing-md);
  }

  .envelope-container {
    width: min(280px, 88vw);
  }

  .polaroid-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }

  body {
    background-attachment: scroll;
  }
}

@media (max-width: 480px) {
  .container {
    padding: var(--spacing-sm);
  }

  .form-input,
  .btn {
    font-size: 16px;
  }

  .calculator {
    padding: var(--spacing-md);
  }

  .calculator-display {
    font-size: 1.6rem;
  }

  .calculator-btn {
    font-size: 1.2rem;
    min-height: 50px;
  }

  .envelope-container {
    width: min(260px, 92vw);
  }

  /* Compact Form for Mobile */
  .form-group {
    margin-bottom: 1rem;
  }

  .form-input {
    padding: 0.75rem 1rem;
    font-size: 16px;
  }

  .input-wrapper .form-input {
    padding-left: 2.4rem;
  }

  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  /* Horizontal Scroll for Templates on Mobile */
  .template-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem !important;
    padding-bottom: 1rem;
    margin-right: -1rem;
    /* Allow scroll to hit edge */
    padding-right: 1rem;
    /* Spacing at end */
    grid-template-columns: none !important;
  }

  .template-card {
    min-width: 260px;
    scroll-snap-align: center;
    margin-bottom: 0;
  }
}

/* Welcome glass header */
.welcome-glass-header {
  background: rgba(30, 30, 60, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  margin-bottom: 2.5rem;
  text-align: center;
  color: white;
  animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.welcome-glass-header h1 {
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  margin-bottom: 0.8rem;
}

.welcome-glass-header p {
  font-size: clamp(0.9rem, 3vw, 1.1rem);
  color: rgba(255, 255, 255, 0.75);
}

/* Cat navigation */
.cat-button:hover div {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* ========================================
   VIDEO RESPONSIVE
   ======================================== */
@media (max-width: 900px) {
  .video-grid-container {
    flex-direction: column !important;
    gap: 2rem !important;
  }

  .video-polaroid-side {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }
}

/* Suggestion button */
.suggestion-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 56px;
  height: 56px;
  background: var(--gradient-romantic);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
  transition: all 0.3s;
  z-index: 1000;
  border: none;
  font-size: 1.5rem;
  color: white;
}

.suggestion-button:hover {
  transform: scale(1.1);
}

/* ========================================
   GALLERY & POLAROID
   ======================================== */
.gallery-page {
  padding: 2rem 0 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.gallery-page h2 {
  font-family: 'Caveat', cursive;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  text-align: center;
  margin-bottom: 2rem;
  text-shadow: 0 2px 12px rgba(255, 107, 157, 0.3);
}

.polaroid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  gap: 1.8rem;
  padding: 1rem 0;
  width: 100%;
  max-width: 1100px;
  overflow-x: clip;
  justify-content: center;
  justify-items: center;
  margin: 0 auto;
}

/* Force centering even if other grid rules override */
.polaroid-grid > * {
  justify-self: center;
}

.polaroid-card {
  background: var(--polaroid-accent, #fff);
  border-radius: 18px;
  padding: 1rem 1rem 2.4rem;
  box-shadow: 0 10px 28px rgba(32, 22, 61, 0.18);
  border: 1px solid color-mix(in srgb, var(--polaroid-accent-strong, #ffffff) 55%, #ffffff);
  transform: rotate(var(--rotate, 0deg));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  overflow: visible;
  cursor: zoom-in;
  transform-origin: center;
}

.polaroid-card:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.03);
  box-shadow: 0 12px 40px rgba(255, 107, 157, 0.3);
  z-index: 2;
}

.polaroid-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: color-mix(in srgb, var(--polaroid-accent-strong, #f6f3ff) 70%, #ffffff);
  padding: 0.45rem;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.polaroid-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  animation: pulse-placeholder 1.5s ease-in-out infinite;
}

@keyframes pulse-placeholder {

  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.polaroid-card img,
.polaroid-card .lazy-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(24, 18, 48, 0.16);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.polaroid-card img.loaded,
.polaroid-card .lazy-img.loaded {
  opacity: 1;
}

.polaroid-card .caption {
  font-family: 'Caveat', cursive;
  color: #555;
  font-size: 1.05rem;
  text-align: center;
  padding: 0.4rem 0.3rem 0;
  min-height: 2.5rem;
}

.polaroid-tape,
.polaroid-pin,
.polaroid-clip,
.polaroid-sticker {
  display: none;
}

.polaroid-tape {
  position: absolute;
  top: -10px;
  width: 64px;
  height: 22px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 12px rgba(24, 18, 48, 0.15);
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

.polaroid-tape::after {
  content: '';
  position: absolute;
  inset: 4px 6px;
  border: 1px dashed rgba(255, 166, 196, 0.55);
  border-radius: 4px;
}

.polaroid-tape.tape-left {
  left: 14px;
  transform: rotate(-8deg);
}

.polaroid-tape.tape-right {
  right: 14px;
  transform: rotate(10deg);
}

.polaroid-pin {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: radial-gradient(circle at 35% 35%, #ffd1e1, #ff86b5);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(255, 134, 181, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.polaroid-pin::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 26px;
  left: 50%;
  top: 12px;
  transform: translateX(-50%) rotate(8deg);
  background: linear-gradient(to bottom, rgba(120, 126, 150, 0.95), rgba(120, 126, 150, 0.1));
}

.polaroid-clip {
  position: absolute;
  top: -6px;
  left: 18px;
  width: 20px;
  height: 34px;
  border: 2px solid #b5b2c3;
  border-bottom: none;
  border-radius: 12px 12px 6px 6px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 10px rgba(24, 18, 48, 0.12);
}

.polaroid-clip::after {
  content: '';
  position: absolute;
  inset: 6px 5px auto 5px;
  height: 18px;
  border: 2px solid rgba(181, 178, 195, 0.7);
  border-top: none;
  border-radius: 10px 10px 6px 6px;
}

.polaroid-sticker {
  position: absolute;
  bottom: -10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe0ef, #ff86b5);
  box-shadow: 0 8px 16px rgba(255, 134, 181, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.polaroid-sticker::after {
  content: '♥';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  color: #fff;
  text-shadow: 0 2px 6px rgba(255, 255, 255, 0.6);
}

.polaroid-card.variant-tape .polaroid-tape,
.polaroid-card.variant-tape .polaroid-pin {
  display: block;
}

.polaroid-card.variant-double .polaroid-tape {
  display: block;
}

.polaroid-card.variant-pin .polaroid-pin {
  display: block;
}

.polaroid-card.variant-clip .polaroid-clip {
  display: block;
}

.polaroid-card.variant-sticker .polaroid-sticker {
  display: block;
}

.polaroid-card.variant-corner::before,
.polaroid-card.variant-corner::after {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 14px rgba(24, 18, 48, 0.12);
}

.polaroid-card.variant-corner::before {
  top: -6px;
  left: -6px;
  border-right: none;
  border-bottom: none;
  border-radius: 10px 0 10px 0;
}

.polaroid-card.variant-corner::after {
  bottom: -6px;
  right: -6px;
  border-left: none;
  border-top: none;
  border-radius: 0 10px 0 10px;
}

.polaroid-card.variant-washi .polaroid-tape {
  display: block;
  top: -8px;
  left: 50%;
  width: 86px;
  height: 24px;
  transform: translateX(-50%) rotate(-3deg);
}

.polaroid-card.variant-washi .polaroid-tape.tape-right {
  display: none;
}

.polaroid-card.variant-ribbon::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 10px;
  width: 70px;
  height: 28px;
  background: linear-gradient(135deg, rgba(255, 190, 221, 0.9), rgba(255, 132, 181, 0.9));
  border-radius: 6px 6px 12px 12px;
  box-shadow: 0 8px 16px rgba(255, 134, 181, 0.35);
}

.polaroid-card.variant-ribbon::after {
  content: '';
  position: absolute;
  top: 20px;
  right: 16px;
  width: 20px;
  height: 12px;
  background: rgba(255, 132, 181, 0.9);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Photo Modal */
.photo-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 24, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  padding: 1.2rem;
}

.photo-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.photo-modal {
  width: min(92vw, 820px);
  max-height: 90vh;
  background: transparent;
  border-radius: 18px;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  position: relative;
}

.photo-modal-figure {
  width: fit-content;
  max-width: 92vw;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
}

.photo-modal-img {
  width: auto;
  max-width: 86vw;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 14px;
  background: #f6f3ff;
  display: block;
  margin: 0 auto;
}

.photo-modal-caption {
  font-family: 'Caveat', cursive;
  font-size: 1.2rem;
  color: #5f518a;
  text-align: center;
}

.photo-swipe-hint {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: none;
}

.photo-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: rgba(20, 16, 35, 0.75);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.photo-modal-prev {
  left: -48px;
}

.photo-modal-next {
  right: -48px;
}

@media (max-width: 560px) {
  .photo-modal {
    width: 96vw;
  }

  .photo-modal-figure {
    width: 100%;
    max-width: 96vw;
    padding: 6px;
  }

  .photo-modal-img {
    width: 100%;
    max-width: 100%;
    max-height: 70vh;
    border-radius: 12px;
  }

  .photo-modal-nav {
    top: auto;
    bottom: 12px;
    transform: none;
  }

  .photo-modal-prev {
    left: 12px;
  }

  .photo-modal-next {
    right: 12px;
  }

  .photo-swipe-hint {
    display: block;
  }
}

body.modal-open {
  overflow: hidden;
}

/* ========================================
   LAZY CARD ANIMATIONS
   ======================================== */
.lazy-card {
  opacity: 0;
  transform: translateY(40px) scale(0.92);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: var(--delay, 0s);
}

.lazy-card.revealed {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--rotate, 0deg));
}

/* ========================================
   DASHBOARD PAGE LIST
   ======================================== */
.page-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s;
}

.page-item:last-child {
  border-bottom: none;
}

.page-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.page-title {
  font-weight: 600;
  color: white;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-type {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.15rem;
}

.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.3rem;
  border-radius: 8px;
  transition: background 0.2s, transform 0.15s;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.15);
}

/* ========================================
   CONFETTI
   ======================================== */
.confetti-heart {
  position: fixed;
  top: -30px;
  pointer-events: none;
  z-index: 9999;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }

  70% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg) scale(0.5);
  }
}

/* ========================================
   TEMPLATE HERO (Dashboard)
   ======================================== */
.template-hero {
  text-align: center;
  padding: 2rem 1rem;
}

.template-hero-icon {
  font-size: 3.5rem;
  display: block;
  margin-bottom: 1rem;
}

/* ========================================
   EDITOR SECTION TITLES
   ======================================== */
.editor-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

/* ========================================
   PHOTO UPLOAD GRID (Editor)
   ======================================== */
.photo-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

.photo-upload-slot {
  aspect-ratio: 1;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  gap: 0.3rem;
}

.photo-upload-slot:hover {
  border-color: var(--primary-pink);
  background: rgba(255, 77, 141, 0.05);
}

.photo-upload-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-icon {
  font-size: 1.8rem;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 640px) {
  .polaroid-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0.5rem 0.6rem 1rem;
  }

  .polaroid-card {
    max-width: 320px;
    width: 100%;
    margin: 0 auto;
    padding: 0.9rem 0.9rem 2rem;
    justify-self: center;
  }

  .polaroid-grid > .polaroid-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .photo-upload-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .calculator-btn {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.1rem !important;
  }

  .calculator-display {
    font-size: 1.6rem !important;
    letter-spacing: 0.6rem !important;
    padding: 0.5rem !important;
  }

  .pin-icon svg {
    width: 52px;
    height: 52px;
  }

  .wrong-pin-icon svg {
    width: 60px;
    height: 60px;
  }
}

/* ========================================
   CALCULATOR (PIN Pad)
   ======================================== */
.calculator {
  max-width: 260px;
  margin: 0 auto;
}

.calculator-display {
  font-size: 2rem;
  letter-spacing: 0.8rem;
  padding: 0.6rem 1rem;
  margin-bottom: 0.8rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 48px;
}

.calculator-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  justify-items: center;
}

.calculator-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calculator-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.08);
}

.calculator-btn:active {
  transform: scale(0.95);
  background: rgba(255, 107, 157, 0.3);
}

.calculator-btn-clear {
  background: rgba(255, 77, 77, 0.15);
  border-color: rgba(255, 77, 77, 0.3);
  color: #ff8a8a;
}

.calculator-btn-clear:hover {
  background: rgba(255, 77, 77, 0.3);
}

.calculator-btn-submit {
  background: rgba(76, 175, 80, 0.2);
  border-color: rgba(76, 175, 80, 0.35);
  color: #81c784;
}

.calculator-btn-submit:hover {
  background: rgba(76, 175, 80, 0.35);
}

/* ========================================
   PIN DOT STYLING
   ======================================== */
.pin-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease;
}

.pin-dot.filled {
  transform: scale(1.2);
  animation: pin-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pin-pop {
  0% {
    transform: scale(0.5);
  }

  60% {
    transform: scale(1.35);
  }

  100% {
    transform: scale(1.2);
  }
}

/* ========================================
   SVG ICON CONTAINERS
   ======================================== */
.pin-icon {
  margin-bottom: 0.8rem;
}

.pin-icon svg {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 12px rgba(255, 107, 157, 0.3));
  animation: icon-float 3s ease-in-out infinite;
}

.wrong-pin-icon {
  margin-bottom: 1.2rem;
}

.wrong-pin-icon svg {
  width: 72px;
  height: 72px;
  animation: icon-shake 0.5s ease-in-out;
}

.wrong-pin-gif {
  width: 180px;
  max-width: 80vw;
  height: auto;
  margin: 0 auto 1.2rem;
  display: block;
  animation: icon-shake 0.5s ease-in-out;
}

.click-hint svg {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin-left: 0.3rem;
}

@keyframes icon-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes icon-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-8px);
  }

  40% {
    transform: translateX(8px);
  }

  60% {
    transform: translateX(-5px);
  }

  80% {
    transform: translateX(5px);
  }
}

/* ========================================
   SCROLL REVEAL (All Pages)
   ======================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children with nth-child delays */
.reveal-on-scroll:nth-child(2) {
  transition-delay: 0.08s;
}

.reveal-on-scroll:nth-child(3) {
  transition-delay: 0.16s;
}

.reveal-on-scroll:nth-child(4) {
  transition-delay: 0.24s;
}

.reveal-on-scroll:nth-child(5) {
  transition-delay: 0.32s;
}

.reveal-on-scroll:nth-child(6) {
  transition-delay: 0.40s;
}

/* ========================================
   DASHBOARD HEADER
   ======================================== */
/* ========================================
   DASHBOARD HEADER
   ======================================== */
.dashboard-header {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 2rem;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  gap: 0.8rem;
}

.dashboard-header-right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.user-welcome {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Dynamic typing title */
.typing-title {
  font-family: 'Pacifico', cursive;
  font-size: 1.3rem;
  color: white;
}

.typing-title-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--primary-pink);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: title-blink 0.7s step-end infinite;
}

@keyframes title-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@media (max-width: 480px) {
  .header-content {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
  }

  /* Target links inside header-content */
  .header-content>a {
    justify-content: center;
  }

  .dashboard-header-right {
    justify-content: center;
    gap: 0.6rem;
  }

  .user-welcome {
    max-width: 160px;
    font-size: 0.82rem;
  }
}

/* ========================================
   TEMPLATE CARDS
   ======================================== */
.template-card {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
}

.template-card:hover {
  transform: translateY(-6px);
}

.template-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.coming-soon-badge {
  text-align: center;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(102, 126, 234, 0.15);
  color: #a78bfa;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px dashed rgba(102, 126, 234, 0.3);
}

/* ========================================
   SUGGEST TEMPLATE CARD
   ======================================== */
.suggest-card {
  border: 2px dashed rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.suggest-card:hover {
  border-color: rgba(255, 107, 157, 0.4);
  background: rgba(255, 107, 157, 0.05);
}

.suggest-plus {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.2), rgba(240, 147, 251, 0.2));
  border: 2px solid rgba(255, 107, 157, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 300;
  color: #ff6b9d;
  transition: transform 0.3s, background 0.3s;
}

.suggest-card:hover .suggest-plus {
  transform: rotate(90deg) scale(1.1);
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.35), rgba(240, 147, 251, 0.35));
}

/* ========================================
   SUGGEST MODAL
   ======================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
}

.modal-overlay.hidden {
  display: none;
}

.suggest-contact {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.suggest-intro {
  font-size: 0.88rem;
  color: var(--modal-muted);
  text-align: center;
  margin-bottom: 1rem;
}

.suggest-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: #f7f5ff;
  border: 1px solid #ede9ff;
  color: #1a1a2e;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  text-align: left;
}

.suggest-link:hover {
  background: #ede9ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(167, 139, 250, 0.2);
}

.suggest-link .suggest-link-text {
  min-width: 0;
  text-align: left;
}

.suggest-link .suggest-link-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a1a2e;
  margin-bottom: 0.1rem;
}

.suggest-link .suggest-link-sub {
  font-size: 0.82rem;
  color: #5a5a72;
  word-break: break-all;
}

/* ========================================
   LOADING SPINNER
   ======================================== */
.spinner {
  width: 38px;
  height: 38px;
  border: 3px solid color-mix(in srgb, var(--glass-border) 65%, transparent);
  border-top-color: var(--accent-glow);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
  margin: 0 auto;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-glow) 45%, transparent));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   TOS / LEGAL
   ======================================== */
.tos-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tos-trigger {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.tos-trigger:hover {
  color: rgba(255, 255, 255, 0.8);
}

.tos-content {
  margin-top: 0.8rem;
  padding: 1.2rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

.tos-content::-webkit-scrollbar {
  width: 4px;
}

.tos-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

/* ========================================
   MODAL UTILITIES (Moved to end for priority)
   ======================================== */
.hidden {
  display: none !important;
}

.tos-content h4 {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  margin: 0.8rem 0 0.3rem;
}

.tos-content h4:first-child {
  margin-top: 0;
}

/* ========================================
   CREATIVE IMAGE ART
   ======================================== */
.frame-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.frame-option {
  text-align: center;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s;
}

.frame-option:hover {
  opacity: 1;
}

.frame-option.selected {
  opacity: 1;
  transform: scale(1.05);
}

.frame-option.selected .preview-box {
  border-color: var(--primary-pink);
  box-shadow: 0 0 15px rgba(255, 77, 141, 0.4);
}

.preview-box {
  width: 100%;
  aspect-ratio: 1;
  background: #222;
  margin-bottom: 0.5rem;
  border-radius: 4px;
  border: 2px solid transparent;
}

/* Frame Previews */
.preview-box.frame-classic {
  border: 8px solid #d4af37;
  outline: 2px solid #5c4d16;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.preview-box.frame-modern {
  border: 10px solid #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.preview-box.frame-painting {
  border: 12px solid #5a3a29;
  border-image: linear-gradient(#5a3a29, #3e261b) 30;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}

.preview-box.frame-none {
  border: 1px dashed rgba(255, 255, 255, 0.2);
}

/* Canvas Container in Editor & Viewer */
.art-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.art-preview-container canvas,
.art-preview-container img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Actual Frame Styles Applied to Container */
.art-preview-container.frame-classic {
  border: clamp(10px, 3vw, 20px) solid #d4af37;
  outline: 2px solid #5c4d16;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.8);
  background: #000;
  padding: 5px;
}

.art-preview-container.frame-modern {
  border: clamp(10px, 3vw, 30px) solid #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.art-preview-container.frame-painting {
  border: clamp(15px, 4vw, 40px) solid #5a3a29;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 0, 0, 0.8);
}

.art-preview-container.frame-none {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}

.art-page-title {
  font-family: 'Pacifico', cursive;
  font-size: clamp(2rem, 5vw, 3rem);
  text-align: center;
  margin-bottom: 2rem;
  text-shadow: 0 2px 10px rgba(255, 107, 157, 0.5);
}

/* ========================================
   TEXT ART STYLES (NEW)
   ======================================== */
.art-text-wrapper {
  font-family: 'Courier New', Courier, monospace;
  font-size: 8px;
  line-height: 0.6;
  white-space: pre;
  background: #111;
  display: inline-block;
  overflow: hidden;
  cursor: text;
  user-select: text;
  transform-origin: top center;
  /* For scaling */
}

/* ... existing art-line ... */

/* Ensure frames hug the content tightly */
/* Ensure frames hug the content tightly */
.art-preview-container {
  display: inline-block;
  width: max-content;
  height: max-content;
  max-width: none !important;
  /* Critical Fix for Mobile Shape */
  margin: 0;
  overflow: visible;
  /* Allow borders to spill slightly if needed */
  position: relative;
  line-height: 0;
  transform-origin: center center;
  /* Ensure scaling is centered */
}

/* ========================================
   NEW FRAMES & THEMES (ENHANCED)
   ======================================== */

/* Common Sticker Positioning */
.frame-option.preview-box::after {
  font-size: 1.5rem;
  position: absolute;
  bottom: -10px;
  right: -10px;
}

/* 1. CLASSIC FRAME (Ornate Gold) */
.frame-classic,
.preview-box.frame-classic {
  border: 20px solid #d4af37;
  /* SVG: Ornate Gold Pattern with High Contrast */
  border-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%23d4af37'/%3E%3Cpath d='M0 0 L10 10 L30 10 L40 0' fill='%23f1c40f'/%3E%3Cpath d='M0 40 L10 30 L30 30 L40 40' fill='%23b7950b'/%3E%3Cpath d='M0 0 L0 40 L10 30 L10 10 Z' fill='%23e6be5e'/%3E%3Cpath d='M40 0 L40 40 L30 30 L30 10 Z' fill='%23cfa027'/%3E%3Crect x='5' y='5' width='30' height='30' stroke='%23fff' stroke-width='1' fill='none' opacity='0.4'/%3E%3Cpath d='M2 2 L8 8 M38 2 L32 8 M38 38 L32 32 M2 38 L8 32' stroke='%23fff' stroke-width='1' opacity='0.6'/%3E%3C/svg%3E") 20 stretch;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  position: relative;
}

/* 2. MODERN FRAME (Sleek Geometric) */
.frame-modern,
.preview-box.frame-modern {
  border: 20px solid #ffffff;
  /* SVG: Modern Minimalist Lines with Contrast */
  border-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%23f8f9fa'/%3E%3Cpath d='M0 0 L40 40 M40 0 L0 40' stroke='%23dee2e6' stroke-width='2'/%3E%3Crect x='4' y='4' width='32' height='32' stroke='%23adb5bd' stroke-width='1' fill='none'/%3E%3Crect x='0' y='0' width='40' height='40' stroke='%23ced4da' stroke-width='4' fill='none'/%3E%3C/svg%3E") 20 stretch;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* 3. PAINTING FRAME (Wooden Texture with Nail) */
.frame-painting,
.preview-box.frame-painting {
  border: 18px solid #8b5a2b;
  /* Reduced width */
  /* SVG: Realistic Wood Grain - Darker & More Texture */
  border-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' fill='%23654321'/%3E%3Cfilter id='wood'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08 0.02' numOctaves='4' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0.4 0 0 0 0  0 0.4 0 0 0  0 0 0.4 0 0  0 0 0 0.6 0' in='noise' result='coloredNoise'/%3E%3CfeComposite operator='in' in='coloredNoise' in2='SourceGraphic' result='composite'/%3E%3CfeBlend mode='multiply' in='composite' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100' height='100' fill='%238b5a2b' filter='url(%23wood)' opacity='0.8'/%3E%3Cpath d='M0 0 L100 0' stroke='%234e342e' stroke-width='5'/%3E%3C/svg%3E") 18 stretch;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.6);
  position: relative;
}

/* NAIL FOR PAINTING FRAME */
.frame-painting::before {
  content: "";
  position: absolute;
  top: -35px;
  /* Position above the frame */
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 30% 30%, #b0c4de, #778899);
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

/* NAIL STRING (Optional, for realism) */
.frame-painting::after {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 15px;
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50% 50% 0 0;
  z-index: 10;
  pointer-events: none;
}

/* Fix preview box nail scaling */
.preview-box.frame-painting::before {
  top: -24px;
  width: 8px;
  height: 8px;
}

.preview-box.frame-painting::after {
  display: none;
  /* Hide string on tiny preview */
}

/* 1. HEARTS FRAME */
.frame-hearts,
.preview-box.frame-hearts {
  border: 20px solid #ff6b81;
  /* SVG: Pastel Pink Hearts Pattern */
  border-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 36 L18 34 C10 26 5 21 5 15 C5 10 9 6 14 6 C17 6 19 8 20 10 C21 8 23 6 26 6 C31 6 35 10 35 15 C35 21 30 26 22 34 L20 36 Z' fill='%23ff9a9e' fill-opacity='0.6'/%3E%3Cpath d='M10 20 L9 19 C5 15 2 12 2 9 C2 6 4 4 7 4 C8 4 10 5 10 6 C11 5 12 4 14 4 C16 4 18 6 18 9 C18 12 15 15 11 19 L10 20 Z' fill='%23ffc3d0'/%3E%3C/svg%3E") 20 round;
  box-shadow: 0 0 20px rgba(255, 107, 129, 0.6);
  position: relative;
}

.frame-hearts::before {
  content: "💖";
  position: absolute;
  top: -25px;
  left: -25px;
  font-size: 2rem;
  z-index: 10;
}

.frame-hearts::after {
  content: "💕";
  position: absolute;
  bottom: -25px;
  right: -25px;
  font-size: 2rem;
  z-index: 10;
}

.preview-box.frame-hearts::after {
  content: "💖";
}

/* 2. FLOWERS FRAME */
.frame-flowers,
.preview-box.frame-flowers {
  border: 20px solid #a8e6cf;
  /* SVG: Watercolor-style Flowers */
  border-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='10' fill='%23ffafbd'/%3E%3Ccircle cx='25' cy='25' r='5' fill='%23ffffc2'/%3E%3Cpath d='M25 10 Q30 5 35 10 T40 20' stroke='%23a8e6cf' stroke-width='2' fill='none'/%3E%3Cpath d='M10 30 Q15 25 20 30 T25 40' stroke='%23a8e6cf' stroke-width='2' fill='none'/%3E%3Ccircle cx='10' cy='10' r='4' fill='%23c9ffbf'/%3E%3Ccircle cx='40' cy='40' r='4' fill='%23c9ffbf'/%3E%3C/svg%3E") 20 round;
  box-shadow: 0 10px 30px rgba(168, 230, 207, 0.5);
  position: relative;
}

.frame-flowers::before {
  content: "🌸";
  position: absolute;
  top: -25px;
  right: -25px;
  font-size: 2rem;
  z-index: 10;
}

.frame-flowers::after {
  content: "🌻";
  position: absolute;
  bottom: -25px;
  left: -25px;
  font-size: 2rem;
  z-index: 10;
}

.preview-box.frame-flowers::after {
  content: "🌸";
}

/* 3. CLOUDS FRAME */
.frame-clouds,
.preview-box.frame-clouds {
  border: 20px solid #89cff0;
  /* SVG: Fluffy Clouds on Blue */
  border-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='60' height='60' fill='%2389cff0'/%3E%3Cpath d='M10 30 Q15 20 25 25 Q30 15 40 20 Q50 15 55 30 Q60 35 55 45 Q50 50 40 45 Q35 55 25 50 Q15 55 10 45 Q0 40 10 30 Z' fill='white' opacity='0.8'/%3E%3C/svg%3E") 20 round;
  box-shadow: 0 10px 30px rgba(137, 207, 240, 0.5);
  position: relative;
}

.frame-clouds::before {
  content: "☁️";
  position: absolute;
  top: -25px;
  right: -15px;
  font-size: 2rem;
  z-index: 10;
  animation: floatCloud 3s ease-in-out infinite;
}

/* 4. RIBBON FRAME */
.frame-ribbon,
.preview-box.frame-ribbon {
  border: 20px solid #ff6b6b;
  /* SVG: Red Bows */
  border-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 25 L10 15 Q5 10 10 5 Q15 0 25 10 Q35 0 40 5 Q45 10 40 15 L25 25 L15 40 M25 25 L35 40' stroke='%23ff4757' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='25' cy='25' r='4' fill='%23ff4757'/%3E%3C/svg%3E") 20 round;
  box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
  position: relative;
}

.frame-ribbon::after {
  content: "🎀";
  position: absolute;
  bottom: -25px;
  left: -15px;
  font-size: 2rem;
  z-index: 10;
}

.preview-box.frame-ribbon::after {
  content: "🎀";
}

/* 5. BLACK CATS FRAME */
.frame-cats,
.preview-box.frame-cats {
  border: 20px solid #333;
  /* SVG: Black Cats & Paws */
  border-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='60' height='60' fill='%23f1f2f6'/%3E%3Ccircle cx='15' cy='15' r='10' fill='%232f3542'/%3E%3Cpolygon points='8,8 6,2 12,6' fill='%232f3542'/%3E%3Cpolygon points='22,8 24,2 18,6' fill='%232f3542'/%3E%3Ccircle cx='12' cy='14' r='1' fill='white'/%3E%3Ccircle cx='18' cy='14' r='1' fill='white'/%3E%3Cpath d='M40 40 Q45 35 50 40 Q55 35 60 40' stroke='%232f3542' stroke-width='2' fill='none'/%3E%3Ccircle cx='45' cy='50' r='3' fill='%232f3542'/%3E%3Ccircle cx='55' cy='45' r='3' fill='%232f3542'/%3E%3C/svg%3E") 20 round;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  position: relative;
}

.frame-cats::before {
  content: "🐈‍⬛";
  position: absolute;
  top: -28px;
  left: -10px;
  font-size: 2rem;
  z-index: 10;
}

.frame-cats::after {
  content: "🐾";
  position: absolute;
  bottom: -20px;
  right: -10px;
  font-size: 1.5rem;
  z-index: 10;
  transform: rotate(20deg);
}

.preview-box.frame-cats::after {
  content: "🐾";
}

/* ========================================
   ANIMATION STATES
   ======================================== */

/* Phase 1: Typing (Black screen, white text) */
.typing-phase .art-text-wrapper span {
  color: white !important;
  /* Force white text */
  opacity: 1;
}

.typing-phase {
  background: black !important;
  /* Force black bg */
}

/* Phase 2: Reveal (Transition to color) */
.art-text-wrapper span {
  transition: color 2s ease-in-out;
}

/* ========================================
   ART PAGE LAYOUT 2.0 (FIXED UI)
   ======================================== */

/* Main Container: Centers the art */
.gallery-page.art-mode {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100vh !important;
  width: 100vw !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative;
  background: #000;
  /* Ensure dark background */
}

/* Fixed Top Title */
.art-fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  z-index: 100;
  text-align: center;
  pointer-events: none;
  /* Layout only */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
}

.art-page-title {
  font-family: 'Pacifico', cursive;
  font-size: clamp(2rem, 5vw, 3rem);
  color: white;
  text-shadow: 0 0 10px rgba(255, 107, 157, 0.5);
  margin: 0 !important;
  pointer-events: auto;
  /* Re-enable clicks on title if needed */
}

/* Fixed Bottom Controls */
.art-fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: 20px;
  /* Moved lower (was 30px) */
  padding-left: 20px;
  /* Safe area for mobile */
  padding-right: 20px;
  /* Safe area for mobile */
  z-index: 100;
  /* Removed background and border for islands */
  /* Removed background and border for islands */
  /* Removed background and border for islands */
  display: flex;
  flex-direction: row;
  /* Horizontal alignment */
  align-items: center;
  justify-content: center;
  /* Center them */
  gap: 15px;
  /* Slightly tighter gap */
  pointer-events: none;
  /* Container is click-through */
}

/* Glass Islands for controls */
.art-ui-island {
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 0 1.2rem;
  /* Remove top/bottom padding, use height for centering */
  height: 44px;
  /* fixed height for perfect alignment */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  /* clickable */
  transition: transform 0.2s ease, background 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.art-ui-island:hover {
  background: rgba(40, 40, 60, 0.7);
  transform: translateY(-2px);
}

/* CTA Button Specifics */
.art-cta-btn {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 1.2rem;
  color: white;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Zoom Wrapper: The thing that scales */
/* REMOVED MAX-WIDTH/HEIGHT CONSTRAINTS for Mobile Fix */
.zoom-wrapper {
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  /* Default transform if JS fails */
  transform: scale(var(--base-scale, 1));
}

/* INITIAL STATE: Zoomed in while typing */
.zoomed-in-waiting {
  transform: scale(calc(var(--base-scale, 1) * 3)) !important;
}

/* ON LOAD ZOOM ANIMATION (Updated) */
.zoom-out-reveal {
  /* Slower animation: 10s */
  animation: zoomReveal 10s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes zoomReveal {
  0% {
    transform: scale(calc(var(--base-scale, 1) * 3));
  }

  100% {
    transform: scale(var(--base-scale, 1));
  }
}

/* Adjustments for text preview specifically */
.art-html-preview {
  background: #111;
  padding: 0;
  /* If frame is 'none', add subtle rounding */
}

/* ========================================
   DASHBOARD LIVE PREVIEWS
   ======================================== */
.preview-scene {
  width: 100%;
  height: 200px;
  /* Taller for better view */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background set in HTML inline or varying classes */
}

/* --- Love Letter Mini --- */
.mini-envelope-scene {
  background: radial-gradient(circle at center, #ff9a9e 0%, #fecfef 100%);
}

.mini-envelope {
  position: relative;
  width: 140px;
  height: 90px;
  background: #ff4d8d;
  border-radius: 4px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(10px);
  animation: mini-float 6s ease-in-out infinite;
}

@keyframes mini-float {

  0%,
  100% {
    transform: translateY(10px);
  }

  50% {
    transform: translateY(0px);
  }
}

.mini-envelope:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 55px solid #ff85b3;
  /* Lighter Flap */
  transform-origin: top;
  z-index: 5;
}

.mini-envelope:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 70px solid #ff6b9d;
  border-right: 70px solid #ff5c96;
  border-top: 45px solid transparent;
  z-index: 3;
}

.mini-heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  animation: pulse 2s infinite;
}

/* --- Art Mini --- */
.mini-art-scene {
  background: #111;
  position: relative;
}

.mini-art-frame {
  width: 120px;
  height: 140px;
  background: #000;
  position: relative;
  /* Use the Classic Gold Frame we made */
  border: 12px solid #d4af37;
  border-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%23d4af37'/%3E%3Cpath d='M0 0 L10 10 L30 10 L40 0' fill='%23f1c40f'/%3E%3Cpath d='M0 40 L10 30 L30 30 L40 40' fill='%23b7950b'/%3E%3Crect x='5' y='5' width='30' height='30' stroke='%23fff' stroke-width='1' fill='none' opacity='0.4'/%3E%3C/svg%3E") 12 stretch;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-2deg);
  transition: transform 0.3s;
}

.template-card:hover .mini-art-frame {
  transform: rotate(0deg) scale(1.05);
}

.mini-art-content {
  color: white;
  font-family: 'Courier New', monospace;
  font-size: 8px;
  line-height: 8px;
  white-space: pre;
  text-align: center;
  opacity: 0.9;
}

@keyframes slowGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50px 50px 0 0;
  pointer-events: none;
}

/* ========================================
   CUSTOM CHECKBOX
   ======================================== */
.custom-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.checkbox-box {
  width: 22px;
  height: 22px;
  min-width: 22px;
  /* Prevent shrinking */
  border: 2px solid rgba(205, 180, 255, 0.6);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.6);
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: var(--shadow-inner);
}

.custom-checkbox input {
  display: none;
  /* Hide original */
}

.custom-checkbox input:checked+.checkbox-box {
  background: var(--pastel-lavender-muted);
  border-color: var(--pastel-lavender-muted);
}

.checkmark-svg {
  width: 14px;
  height: 14px;
  color: #fff !important;
  opacity: 0;
  transform: scale(0.5) rotate(-20deg);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.custom-checkbox input:checked+.checkbox-box .checkmark-svg {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.custom-checkbox:hover .checkbox-box {
  border-color: var(--pastel-lavender-muted);
  box-shadow: 0 0 10px rgba(205, 180, 255, 0.2);
}

.tos-text h4 {
  color: var(--pastel-purple-gray);
  font-size: 1.1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(205, 180, 255, 0.2);
  padding-bottom: 0.25rem;
}

.tos-text p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* Accessibility for low opacity credits */
.credits-text {
  color: var(--pastel-purple-gray) !important;
  opacity: 0.8;
  font-weight: 500;
}


.two-col {
  display: flex;
  gap: 1rem;
}

.two-col>.form-group {
  flex: 1;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mt-3 {
  margin-top: 1rem;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ========================================
   INTERACTIVE CANVAS EFFECTS & ENHANCED BACKGROUND
   ======================================== */

/* 1. Background Depth Enhancements */
.bg-shapes::before,
.bg-shapes::after {
  content: '';
  position: absolute;
  filter: blur(120px);
  opacity: 0.35;
  border-radius: 50%;
  z-index: -1;
}

.bg-shapes::before {
  width: 700px;
  height: 700px;
  background: var(--pastel-lavender-light);
  top: -200px;
  right: -200px;
}

.bg-shapes::after {
  width: 800px;
  height: 800px;
  background: var(--pastel-blush);
  bottom: -300px;
  left: -200px;
}

/* Gentle ambient glow area strictly behind the card */
.glass-card::after {
  content: '';
  position: absolute;
  inset: -60px;
  background: radial-gradient(circle at center, rgba(255, 241, 247, 0.4) 0%, rgba(205, 180, 255, 0.2) 40%, transparent 70%);
  z-index: -2;
  filter: blur(40px);
  pointer-events: none;
}



/* 5. Click Particle Effect */
.click-particle {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 9998;
  animation: particleBurst 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.particle-heart {
  background: transparent !important;
}

@keyframes particleBurst {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--rot));
    opacity: 0;
  }
}

/* Ensure no click particles on touch devices */
@media (pointer: coarse) {
  .click-particle {
    display: none !important;
  }
}

/* ========================================
   DASHBOARD REDESIGN (PASTEL THEME)
   ======================================== */

/* ========================================
   REFINED DASHBOARD NAVBAR & NAVIGATION
   ======================================== */

.dashboard-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: block;
  padding: 0;
  margin: 0;
  margin-bottom: 2rem;
  width: 100%;
  left: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 2rem;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.header-branding {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  min-width: 0;
}

.header-branding span {
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  min-width: 0;
  flex: 0 0 auto;
}

#profileToggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 14px;
  flex-shrink: 0;
  touch-action: manipulation;
}

#profileToggle svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.3;
  transition: transform 0.2s ease;
}

#profileToggle:hover svg {
  transform: scale(1.04);
}

#profileToggle:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 2px;
}

#profileToggle[aria-expanded="true"] {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.4);
}

.header-top-bar:hover {
  background: var(--glass-bg-strong);
}

.header-announcement {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(90deg, rgba(255, 77, 109, 0.12), rgba(205, 180, 255, 0.08), rgba(255, 77, 109, 0.12));
}

.header-announcement::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 100% 3px;
  opacity: 0.14;
}

.header-announcement-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--text-primary);
  width: 100%;
  padding: 0.52rem 1rem;
}

.announcement-label {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #ff5d7a, #ff2f56);
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(255, 77, 109, 0.35);
}

.header-announcement-track {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  font-family: "Courier New", monospace;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.header-announcement-track span {
  display: inline-block;
  padding-left: 100%;
  color: var(--text-primary);
  animation: announcement-scroll 18s linear infinite;
}

.header-announcement-track::after {
  content: '_';
  margin-left: 0.35rem;
  animation: teleprompter-caret 0.8s steps(1, end) infinite;
}

.header-announcement-link:hover .header-announcement-track {
  animation-play-state: paused;
}

@keyframes announcement-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes teleprompter-caret {
  0%, 48% {
    opacity: 1;
  }
  49%, 100% {
    opacity: 0;
  }
}

.icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: var(--text-secondary);
}

.icon-circle:hover {
  transform: translateY(-2px) scale(1.05);
  background: rgba(255, 255, 255, 0.18);
  color: var(--pastel-lavender-deep);
  box-shadow: 0 6px 18px rgba(205, 180, 255, 0.3);
}



.icon-circle:active {

  transform: scale(0.95);

  filter: brightness(0.88);

}

/* User Profile & Dropdown */
.profile-wrapper {
  position: relative;
}

.profile-circle {
  background: var(--gradient-btn-primary);
  border: 2px solid rgba(255,255,255,0.7) !important;
  box-shadow: 0 4px 15px rgba(205, 180, 255, 0.3);
  position: relative;
}



.profile-circle:hover,

.profile-circle:active {

  background: var(--gradient-btn-primary) !important;

  filter: brightness(1.18);

  color: white !important;

  box-shadow: 0 6px 22px rgba(167, 139, 250, 0.55) !important;

}

.warning-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff4d4d;
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1a1b32; /* Match dashboard header background better */
  box-shadow: 0 0 10px rgba(255, 77, 77, 0.4);
  z-index: 5;
  animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(255, 77, 77, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 250px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 1001;
  animation: dropdownFadeIn 0.3s ease;
  transform-origin: top right;
}

.user-dropdown.active {
  display: flex;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: all 0.2s;
  border: none;
  background: transparent;
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.dropdown-item:hover {
  background: var(--pastel-lavender-light);
  color: var(--text-muted-dark);
  padding-left: 1.2rem;
}

.dropdown-item svg {
  color: var(--accent-glow);
}

.dropdown-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 0.5rem 0;
}

.dropdown-section {
  padding: 0.5rem 1rem;
}

.dropdown-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted-dark);
  margin-bottom: 0.8rem;
}

.theme-switch-wrapper {
  display: flex;
  justify-content: center;
  padding: 0.2rem 0;
}

[data-theme="light"] .dropdown-item:hover {
  background: rgba(139, 92, 246, 0.1);
  color: var(--text-primary);
}

.dropdown-logout {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(205, 180, 255, 0.1);
  color: var(--pastel-rose-accent);
}

.dropdown-logout:hover {
  background: #FFF1F7;
  color: #ff4d8d;
}

/* Accessibility & Hierarchy: Dark Mode */
.header-welcome-area h1 {
  color: var(--text-primary) !important;
  text-shadow: 0 0 20px rgba(167, 139, 250, 0.3);
}

.header-welcome-area p {
  color: var(--text-secondary) !important;
}

.glass-container-header h2,
h2.section-title {
  color: var(--text-primary) !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.template-thumb-card h3,
.page-card h4 {
  color: var(--text-primary) !important;
  margin: 0;
}

.page-info p {
  color: var(--text-muted-dark) !important;
  font-weight: 500;
}

.btn-icon {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-secondary) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.btn-icon:hover {
  background: rgba(167, 139, 250, 0.2) !important;
  color: var(--accent-glow) !important;
  border-color: var(--accent-glow) !important;
}

.btn-delete:hover {
  background: rgba(255, 77, 141, 0.15) !important;
  color: #ff85a2 !important;
  border-color: #ff85a2 !important;
}

/* Main Glass Container Wrapper */
.glass-container {
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: 25px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

/* Subtle glow behind glass container */
.glass-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 25px;
  background: radial-gradient(circle at top right, rgba(167, 139, 250, 0.08), transparent 50%),
    radial-gradient(circle at bottom left, rgba(109, 40, 217, 0.05), transparent 50%);
  pointer-events: none;
  z-index: -1;
}

.glass-container-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.glass-container-footer {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
}

/* Horizontal Scroll Lists */
.horizontal-list {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1.5rem;
  /* Hide scrollbar for a cleaner look but keep scrolling functional */
  scrollbar-width: thin;
  scrollbar-color: rgba(205, 180, 255, 0.5) transparent;
}

.horizontal-list::-webkit-scrollbar {
  height: 6px;
}

.horizontal-list::-webkit-scrollbar-thumb {
  background: rgba(205, 180, 255, 0.5);
  border-radius: 10px;
}

/* Template Thumbnail Cards */
.template-thumb-card {
  flex: 0 0 240px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all var(--transition-normal);
  cursor: pointer;
}

.template-thumb-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 10px 25px rgba(167, 139, 250, 0.25);
}

/* Thumbnail Background Styles */
.template-thumb {
  height: 120px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background-image: var(--thumb-gradient);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

.thumb-icons {
  font-size: 2rem;
  filter: drop-shadow(0 8px 18px rgba(26, 16, 55, 0.22));
  z-index: 3;
  position: relative;
}

.thumb-preview {
  width: 100%;
  max-width: 212px;
  height: 106px;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 8px 22px rgba(22, 15, 47, 0.25);
  z-index: 3;
  position: relative;
}

.thumb-preview svg {
  width: 100%;
  height: 100%;
  display: block;
}

.template-thumb-card:hover .thumb-preview {
  transform: translateY(-1px) scale(1.01);
  transition: transform 0.25s ease;
}

.template-thumb::before,
.template-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.template-thumb::before {
  opacity: 0.5;
  mix-blend-mode: soft-light;
}

.template-thumb::after {
  background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.42), transparent 42%),
    radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.28), transparent 36%),
    radial-gradient(circle at 50% 85%, rgba(255, 255, 255, 0.2), transparent 44%);
  z-index: 1;
}

.bg-sweetheart {
  --thumb-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 183, 213, 0.92));
}

.bg-sweetheart::before {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), transparent 44%);
}

.bg-dreamy {
  --thumb-gradient: linear-gradient(145deg, rgba(231, 244, 255, 0.8), rgba(188, 174, 255, 0.82));
}

.bg-dreamy::before {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(139, 92, 246, 0.15));
}

.bg-starlight {
  --thumb-gradient: linear-gradient(145deg, rgba(29, 31, 47, 0.65), rgba(74, 32, 64, 0.62));
}

.bg-starlight::before {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.2), rgba(251, 146, 60, 0.2));
}

.template-thumb.thumb-loaded {
  background-image: var(--thumb-gradient), var(--thumb-image);
}

.thumb-icon-plus span {
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
}

.template-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
}

.template-info h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  color: #6b6b83;
  margin: 0;
}

.template-info p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted-dark);
  margin: 0;
  max-width: 220px;
}

.template-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.template-features span {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  background: rgba(167, 139, 250, 0.12);
  color: var(--text-secondary);
}

/* Rounded Select Button */
.btn-select {
  background: white;
  color: var(--pastel-lavender-muted);
  border: 1px solid rgba(205, 180, 255, 0.4);
  padding: 0.4rem 1.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(205, 180, 255, 0.1);
}

.btn-select:hover {
  background: var(--pastel-lavender-light);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(205, 180, 255, 0.2);
}

.btn-view-all {
  background: rgba(255, 255, 255, 0.8);
  color: #8c8ca1;
  border: none;
  padding: 0.5rem 2rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.btn-view-all:hover {
  background: white;
  color: var(--pastel-lavender-muted);
}

/* User Page Horizontal Cards */
.page-card {
  flex: 0 0 320px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  transition: all var(--transition-normal);
}

.page-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.page-thumb {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.page-info {
  flex: 1;
  min-width: 0;
}

.page-info h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin: 0 0 0.2rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-info p {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
}

.page-actions {
  display: flex;
  gap: 0.4rem;
}

/* Minimalist Action SVG Buttons */
.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  border: 1px solid rgba(205, 180, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #8c8ca1;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: var(--pastel-lavender-light);
  color: var(--pastel-lavender-muted);
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(205, 180, 255, 0.2);
}

.btn-delete:hover {
  background: #FFF1F7;
  color: #ff4d8d;
  border-color: #ff4d8d;
  box-shadow: 0 2px 8px rgba(255, 77, 141, 0.2);
}

/* ========================================
   THEME SWITCHER
   ======================================== */
.theme-switch-container {
  display: flex;
  align-items: center;
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: .4s;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3.5px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

input:checked+.slider {
  background: var(--gradient-btn-dark);
}

input:checked+.slider::before {
  transform: translateX(24px);
}

.sun,
.moon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  z-index: 1;
  transition: opacity 0.3s;
}

input:checked+.slider .sun {
  opacity: 0.3;
}

input:not(:checked)+.slider .moon {
  opacity: 0.3;
}

[data-theme="light"] .slider {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .slider::before {
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header-branding span {
  transition: color 0.3s ease;
}

/* Ensure Logo text is readable on light mode */
[data-theme="light"] .header-branding span {
  color: var(--pastel-lavender-deep) !important;
}

/* Navbar glass should be more subtle on light mode */
[data-theme="light"] .header-top-bar {
  background: rgba(255, 255, 255, 0.65) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .icon-circle {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  color: var(--text-secondary) !important;
}

/* ========================================
   DASHBOARD NAVBAR RESPONSIVE FIX
   ======================================== */
@media (max-width: 768px) {
  .dashboard-header {
    padding: 0 !important;
    text-align: left !important;
  }

  .dashboard-header .header-top-bar {
    padding: 0.65rem 0.8rem;
    gap: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }

  .dashboard-header .header-branding {
    min-width: 0;
    flex: 0 1 auto;
  }

  .dashboard-header .header-branding span {
    font-size: 0.95rem;
    line-height: 1;
    white-space: nowrap;
  }

  .dashboard-header .header-right {
    display: flex !important;
    align-items: center;
    gap: 0.6rem !important;
    flex-wrap: nowrap;
    margin-left: auto;
  }

  .dashboard-header .stat-pill {
    min-width: 0;
    padding: 0.3rem 0.5rem;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .dashboard-header #profileToggle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 12px;
  }

  .dashboard-header .user-dropdown {
    width: min(90vw, 300px);
    right: 0;
  }

  .header-announcement-link {
    gap: 0.6rem;
    padding: 0.44rem 0.7rem;
  }

  .announcement-label {
    font-size: 0.62rem;
    padding: 0.18rem 0.42rem;
  }

  .header-announcement-track {
    font-size: 0.74rem;
  }

  .header-announcement-track span {
    animation-duration: 16s;
  }
}

@media (max-width: 480px) {
  .dashboard-header .header-top-bar {
    padding: 0.5rem;
    gap: 0.4rem;
    flex-wrap: wrap;
    /* Allow wrapping on very small screens if it overflows */
  }

  .dashboard-header .header-branding {
    gap: 0.3rem !important;
  }

  .dashboard-header .header-branding span {
    font-size: 0.85rem;
  }

  .dashboard-header .header-right {
    gap: 0.35rem !important;
  }

  .dashboard-header .stat-pill {
    padding: 0.2rem 0.4rem;
    font-size: 0.65rem;
    min-width: 0;
    /* Override the 86px min-width */
  }

  .dashboard-header #profileToggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 11px;
  }

  .dashboard-header #profileToggle svg {
    width: 16px;
    height: 16px;
  }

  .header-announcement-link {
    padding: 0.38rem 0.55rem;
  }

  .announcement-label {
    font-size: 0.58rem;
    padding: 0.16rem 0.36rem;
  }

  .header-announcement-track {
    font-size: 0.66rem;
  }

  .header-announcement-track span {
    animation-duration: 14s;
  }
}

/* ========================================
   THEME + TOAST + PILLS
   ======================================== */
.theme-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  padding: 0.5rem 0;
}

.theme-card {
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  background: var(--glass-bg);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.theme-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent-glow);
}

.theme-card-selected {
  border-color: var(--accent-glow);
  box-shadow: var(--shadow-glow);
}

#artThemeGrid .theme-card,
#pageThemeGrid .theme-card,
#themeGridDashboard .theme-card {
  background: var(--glass-bg-strong);
}

.theme-card-icon, .theme-card-name {
  display: none !important;
}

.theme-card-swatches {
  display: flex;
  gap: 5px;
}

.theme-card-swatches i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

/* ========================================
   BIRTHDAY TEMPLATE
   ======================================== */
body.birthday-black-bg {
  background: #000 !important;
}

body.birthday-black-bg::before {
  background: rgba(0, 0, 0, 0) !important;
}

body.birthday-black-bg::after {
  opacity: 0 !important;
}

body.birthday-black-bg .floating-hearts {
  display: none !important;
}

body.birthday-madefor-style .container {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

body.birthday-madefor-style #pageContainer {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.birthday-page {
  max-width: none;
  width: 100%;
  margin: 0;
  min-height: 100dvh;
  padding: 0;
  background: #000;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.birthday-page::before,
.birthday-page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.birthday-page::before {
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.86) 98%, transparent 100%),
    radial-gradient(1px 1px at 78% 14%, rgba(213, 234, 255, 0.78) 98%, transparent 100%),
    radial-gradient(1.5px 1.5px at 30% 82%, rgba(255, 232, 216, 0.72) 98%, transparent 100%),
    radial-gradient(1px 1px at 60% 54%, rgba(232, 208, 255, 0.68) 98%, transparent 100%),
    radial-gradient(1px 1px at 88% 72%, rgba(255, 255, 255, 0.78) 98%, transparent 100%);
  opacity: 0.75;
}

.birthday-page::after {
  background:
    radial-gradient(circle at 22% 18%, rgba(62, 82, 150, 0.16), transparent 34%),
    radial-gradient(circle at 74% 30%, rgba(88, 39, 121, 0.14), transparent 38%),
    radial-gradient(circle at 52% 82%, rgba(34, 71, 130, 0.12), transparent 36%);
  animation: birthdayGalaxyDrift 14s ease-in-out infinite alternate;
}

@keyframes birthdayGalaxyDrift {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-8px) scale(1.02); }
}

.birthday-film-bg {
  position: absolute;
  inset: -10% -20%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  transform: rotate(-5deg);
}

.birthday-film-row {
  display: flex;
  gap: 10px;
  width: max-content;
  margin-bottom: 16px;
  animation: birthdayFilmScroll 44s linear infinite;
}

.birthday-film-row.alt {
  animation-direction: reverse;
  animation-duration: 50s;
}

.birthday-film-frame {
  position: relative;
  width: 108px;
  height: 76px;
  padding: 7px 7px 14px;
  border-radius: 5px;
  background: #111217;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.birthday-film-frame::before,
.birthday-film-frame::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  height: 4px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0 5px, transparent 5px 10px);
  opacity: 0.45;
}

.birthday-film-frame::before {
  top: 2px;
}

.birthday-film-frame::after {
  bottom: 3px;
}

.birthday-film-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  filter: saturate(0.85) contrast(1.05);
}

@keyframes birthdayFilmScroll {
  from { transform: translateX(-10%); }
  to { transform: translateX(-55%); }
}

.birthday-countdown {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: transparent;
}

.birthday-countdown.active {
  display: flex;
}

.birthday-countdown-canvas {
  width: min(98vw, 1240px);
  height: min(90vh, 840px);
  display: block;
}

.birthday-hack-intro {
  position: fixed;
  inset: 0;
  z-index: 16;
  display: none;
  overflow: hidden;
  background: transparent;
}

.birthday-hack-intro.active {
  display: block;
}

.birthday-binary-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  overflow: hidden;
}

.birthday-rain-col {
  display: none;
}

.birthday-text-wall {
  position: absolute;
  inset: 0;
}

.birthday-text-cell {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: clamp(0.94rem, 1.7vw, 1.45rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: #050505;
  text-align: center;
  opacity: 0.98;
  user-select: none;
  text-shadow: none;
}

.birthday-runner-line {
  position: absolute;
  top: -35%;
  height: 160%;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent 0%, currentColor 16%, #f8d2ff 50%, currentColor 84%, transparent 100%) !important;
  filter: blur(0.35px);
  mix-blend-mode: screen;
  box-shadow: 0 0 14px currentColor, 0 0 36px color-mix(in srgb, currentColor 70%, transparent), 0 0 60px color-mix(in srgb, #ffffff 20%, transparent);
  opacity: 0;
  animation-name: birthdayRunnerDrop;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes birthdayRunnerDrop {
  0% { transform: translateY(-100%); opacity: 0; }
  8% { opacity: 0.95; }
  55% { opacity: 0.92; }
  100% { transform: translateY(110%); opacity: 0.04; }
}

@keyframes birthdayRainDrop {
  from { transform: translate3d(0, -10%, 0); opacity: 0; }
  10% { opacity: 0.95; }
  to { transform: translate3d(0, 130vh, 0); opacity: 0.08; }
}

.birthday-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.birthday-hack-title {
  position: absolute;
  inset: 0;
  display: none;
  place-content: center;
  text-align: center;
  gap: 0.1rem;
  pointer-events: none;
  mix-blend-mode: screen;
}

.birthday-hack-title span {
  font-family: 'Courier New', monospace;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: clamp(1.8rem, 8vw, 5.3rem);
  color: rgba(255, 224, 133, 0.2);
}

@keyframes birthdayCountPop {
  0% { opacity: 0; transform: scale(0.6); }
  20% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.95; transform: scale(0.95); }
}

.birthday-fade-up {
  opacity: 0;
  transform: translateY(12px);
  animation: birthdayFadeUp 0.7s ease forwards;
}

@keyframes birthdayFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.birthday-hero,
.birthday-letter,
.birthday-interaction,
.birthday-gallery,
.birthday-closing {
  background: rgba(19, 19, 24, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: clamp(1rem, 3vw, 1.5rem);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.32);
  margin-bottom: 1rem;
}

.birthday-section {
  position: relative;
}

.birthday-polaroid {
  background: linear-gradient(180deg, rgba(255, 249, 252, 0.93), rgba(250, 242, 255, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  color: #2f213b;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.greeting-polaroid {
  transform: rotate(-1deg);
}

.letter-polaroid {
  transform: rotate(0.9deg);
}

.gallery-polaroid {
  transform: rotate(-0.8deg);
}

.note-polaroid {
  transform: rotate(0.6deg);
}

.closing-polaroid {
  transform: rotate(-0.5deg);
}

.polaroid-pin {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 999px;
  background: #ff7da3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.polaroid-tape-left,
.polaroid-tape-right {
  position: absolute;
  top: -9px;
  width: 56px;
  height: 16px;
  background: rgba(255, 248, 198, 0.55);
  border: 1px solid rgba(199, 182, 121, 0.4);
}

.polaroid-tape-left {
  left: 18px;
  transform: rotate(-9deg);
}

.polaroid-tape-right {
  right: 18px;
  transform: rotate(8deg);
}

.birthday-intro-scene {
  min-height: 100dvh;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.45s ease, transform 0.45s ease;
  position: relative;
  z-index: 2;
}

.birthday-intro-scene.birthday-candle-visible {
  z-index: 14;
}

.birthday-intro-scene.scene-fade-out {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
}

.birthday-intro-inner {
  text-align: center;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.2rem);
  position: relative;
  z-index: 1;
}

  filter: drop-shadow(0 0 18px rgba(255, 95, 168, 0.35)) drop-shadow(0 0 28px rgba(181, 76, 255, 0.26));
.birthday-intro-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.68rem;
  margin-bottom: 0.65rem;
}

.birthday-intro-inner h1 {
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(2rem, 5.2vw, 3.1rem);
  line-height: 1.15;
  font-weight: 700;
  color: #f3f5ff;
  margin-bottom: 1.05rem;
}

.birthday-candle-wrap {
  position: relative;
  width: 250px;
  height: 320px;
  margin: 0 auto 1.1rem;
  display: block;
  cursor: pointer;
  transition: transform 0.28s ease;
}

.birthday-candle-wrap:hover {
  transform: translateY(-2px) scale(1.01);
}

.birthday-candle-glow {
  position: absolute;
  left: 50%;
  top: 52px;
  width: 180px;
  height: 180px;
  margin-left: -90px;
  background: radial-gradient(circle, rgba(255, 174, 84, 0.38), rgba(255, 125, 67, 0.08) 55%, transparent 75%);
  filter: blur(4px);
}

.birthday-candle-body {
  position: absolute;
  left: 50%;
  top: 110px;
  width: 88px;
  height: 170px;
  margin-left: -44px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff7f1 0%, #ffd7d0 52%, #ffb5a6 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 14px 34px rgba(0, 0, 0, 0.42);
}

.birthday-candle-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  width: 9px;
  height: 100%;
  background: rgba(255, 141, 132, 0.45);
  border-radius: 9px;
}

.birthday-candle-body::after {
  content: "";
  position: absolute;
  top: 0;
  right: 17px;
  width: 7px;
  height: 100%;
  background: rgba(255, 255, 255, 0.36);
  border-radius: 9px;
}

.birthday-candle-wick {
  position: absolute;
  left: 50%;
  top: 92px;
  width: 6px;
  height: 18px;
  margin-left: -3px;
  border-radius: 8px;
  background: #332018;
}

.birthday-candle-flame {
  position: absolute;
  left: 50%;
  top: 48px;
  width: 36px;
  height: 56px;
  margin-left: -18px;
  border-radius: 52% 52% 46% 46%;
  background: radial-gradient(circle at 44% 34%, #fff6c9 0%, #ffc36a 36%, #ff8f3f 65%, #ff5d2d 100%);
  box-shadow: 0 0 28px rgba(255, 177, 72, 0.9), 0 0 56px rgba(255, 96, 39, 0.44);
  transform-origin: center bottom;
  animation: candleFlicker 1.2s ease-in-out infinite, flamePulse 2s ease-in-out infinite;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.birthday-candle-flame.blown {
  opacity: 0;
  transform: scale(0.18) translateY(-16px);
}

.birthday-candle-smoke {
  position: absolute;
  left: 50%;
  top: 56px;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 228, 243, 0.7), rgba(192, 202, 230, 0.08));
  opacity: 0;
  transform: translateY(0) scale(0.6);
}

.birthday-candle-smoke.active {
  animation: candleSmoke 1.2s ease-out forwards;
}

.birthday-candle-plate {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 170px;
  height: 24px;
  margin-left: -85px;
  border-radius: 999px;
  background: linear-gradient(180deg, #331f24, #140d14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 22px rgba(0, 0, 0, 0.45);
}

.birthday-hero {
  text-align: center;
}

.birthday-hero h1 {
  font-family: 'Pacifico', cursive;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.2;
  color: #f3ecff;
  margin-bottom: 0.5rem;
}

.birthday-hero p {
  color: #d0c5e7;
  max-width: 560px;
  margin: 0 auto 0.9rem;
}

@keyframes candleFlicker {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  20% { transform: rotate(6deg) scale(0.93); }
  40% { transform: rotate(-2deg) scale(1.11); }
  65% { transform: rotate(7deg) scale(0.9); }
}

@keyframes flamePulse {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.3); }
}

.birthday-experience {
  opacity: 0;
  transform: translateY(24px);
  position: relative;
  z-index: 2;
}

.birthday-experience.birthday-experience-visible {
  animation: birthdayFadeUp 0.7s ease forwards;
}

@keyframes candleSmoke {
  0% { opacity: 0.15; transform: translateY(0) scale(0.45); }
  20% { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-56px) scale(1.6); }
}

.birthday-soft-btn {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: #f6efff;
  padding: 0.62rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}

.birthday-letter h2,
.birthday-hero h2,
.birthday-gallery h3,
.birthday-interaction h3 {
  color: #3f2d52;
  margin-bottom: 0.5rem;
}

.birthday-letter-body {
  color: #4e3a63;
  line-height: 1.8;
  min-height: 120px;
  white-space: normal;
  font-family: 'Caveat', cursive;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}

.birthday-interaction p {
  color: #66507c;
}

.birthday-interaction p.revealed {
  color: #3b2855;
  font-weight: 700;
}

.birthday-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}

.birthday-photo-card {
  background: #fff;
  border: 1px solid rgba(214, 196, 233, 0.7);
  border-radius: 6px;
  padding: 8px 8px 14px;
  overflow: hidden;
  transform: rotate(var(--photo-tilt, -1deg));
  box-shadow: 0 8px 20px rgba(39, 23, 61, 0.22);
}

.birthday-photo-card:nth-child(2n) { --photo-tilt: 1.4deg; }
.birthday-photo-card:nth-child(3n) { --photo-tilt: -1.8deg; }
.birthday-photo-card:nth-child(4n) { --photo-tilt: 0.6deg; }

.birthday-photo-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
  border-radius: 2px;
}

.birthday-photo-card:hover img {
  transform: scale(1.04);
}

.birthday-photo-card figcaption {
  padding: 0.58rem 0.4rem 0;
  font-size: 0.86rem;
  color: #5f4d79;
  font-family: 'Caveat', cursive;
}

.birthday-empty {
  color: #5f4d79;
  font-size: 1rem;
  font-family: 'Caveat', cursive;
}

.birthday-closing {
  text-align: center;
}

.birthday-closing p {
  color: #3c2b4f;
  font-family: 'Caveat', cursive;
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  line-height: 1.2;
}

.birthday-sign {
  margin-top: 0.35rem;
  color: #66507c;
  font-size: 1rem;
}

.birthday-note-btn {
  border: 1px solid rgba(199, 173, 239, 0.9);
  background: linear-gradient(145deg, #f7ebff, #fbe9f3);
  color: #4f3473;
  padding: 0.68rem 1.15rem;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(127, 86, 181, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.birthday-note-btn:hover {
  transform: translateY(-1px) scale(1.02);
}

@media (max-width: 560px) {
  .birthday-intro-scene {
    min-height: calc(100vh - 1.4rem);
  }

  .birthday-candle-wrap {
    width: 200px;
    height: 270px;
  }

  .birthday-candle-body {
    width: 72px;
    height: 140px;
    margin-left: -36px;
    top: 94px;
  }

  .birthday-candle-wick {
    top: 80px;
  }

  .birthday-candle-flame {
    width: 30px;
    height: 46px;
    margin-left: -15px;
    top: 42px;
  }
}

.birthday-book-stage {
  min-height: calc(100vh - 2rem);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  padding: 1rem 0;
}

.birthday-book-stage.birthday-book-stage-visible {
  animation: birthdayFadeUp 0.55s ease forwards;
}

.birthday-book-cover {
  position: relative;
  width: min(92vw, 430px);
  min-height: clamp(380px, 70vh, 560px);
  border-radius: 10px 18px 18px 10px;
  border: 1px solid rgba(255, 233, 168, 0.2);
  background: linear-gradient(120deg, #4f1829 0%, #6b233b 48%, #7c2f47 100%);
  color: #fff6d7;
  box-shadow: -18px 16px 35px rgba(0, 0, 0, 0.55), inset 8px 0 0 rgba(26, 7, 10, 0.5), inset 0 0 0 1px rgba(255, 218, 146, 0.25);
  padding: clamp(1rem, 3vw, 1.4rem);
  text-align: center;
  cursor: pointer;
  transition: transform 0.34s ease, box-shadow 0.34s ease, opacity 0.32s ease;
  transform-style: preserve-3d;
}

.birthday-book-cover:hover {
  transform: translateY(-3px) rotate(-0.8deg);
  box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.62), inset 8px 0 0 rgba(26, 7, 10, 0.5), inset 0 0 0 1px rgba(255, 218, 146, 0.25);
}

.birthday-book-cover.opening {
  opacity: 0;
  transform: perspective(1200px) rotateY(-92deg) scale(0.98);
  transform-origin: left center;
}

.birthday-cover-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.17), transparent 30%, transparent 64%, rgba(255, 255, 255, 0.12));
  border-radius: inherit;
  pointer-events: none;
}

.birthday-book-cover h1 {
  font-family: 'Pacifico', cursive;
  font-size: clamp(2rem, 7vw, 3rem);
  margin: 0.4rem 0;
  color: #ffe9a6;
  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.birthday-book-cover p {
  color: #ffe7ef;
  opacity: 0.95;
  max-width: 270px;
  margin: 0.2rem auto 0;
}

.birthday-cover-kicker,
.birthday-cover-hint {
  display: block;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.birthday-cover-hint {
  margin-top: 1.1rem;
  color: #ffe4b4;
}

.birthday-book {
  width: min(96vw, 980px);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.birthday-book.visible {
  opacity: 1;
  transform: translateY(0);
}

.birthday-book-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  color: #f8e9bd;
  margin-bottom: 0.7rem;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
}

.birthday-book-shell {
  perspective: 1800px;
  border-radius: 16px;
  background: linear-gradient(130deg, rgba(72, 43, 26, 0.6), rgba(38, 23, 18, 0.84));
  border: 1px solid rgba(255, 213, 171, 0.16);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.46);
  padding: clamp(0.6rem, 2vw, 1rem) clamp(0.65rem, 2vw, 1rem) clamp(0.6rem, 2vw, 1rem) clamp(1.1rem, 3vw, 1.5rem);
  position: relative;
}

.birthday-book-shell::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.75rem;
  bottom: 0.75rem;
  width: clamp(14px, 3vw, 20px);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(52, 24, 14, 0.95), rgba(22, 11, 6, 0.95));
  box-shadow: inset -2px 0 3px rgba(255, 255, 255, 0.08), inset 2px 0 5px rgba(0, 0, 0, 0.45);
}

.birthday-book-shell::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 1rem;
  bottom: 1rem;
  width: 10px;
  border-radius: 0 6px 6px 0;
  background: repeating-linear-gradient(180deg, #efe3c2 0 6px, #e6d6af 6px 8px);
  opacity: 0.9;
}

.birthday-book-sheet {
  background: linear-gradient(180deg, #fffef5, #fff9e8);
  border: 1px solid rgba(227, 206, 158, 0.72);
  border-radius: 10px;
  min-height: min(70vh, 640px);
  padding: clamp(0.9rem, 2.2vw, 1.6rem);
  transform-origin: left center;
  transform-style: preserve-3d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), inset 10px 0 24px rgba(166, 129, 81, 0.11), 0 6px 16px rgba(49, 29, 11, 0.16);
  position: relative;
}

.birthday-book-sheet::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0.9rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(184, 156, 117, 0.1), rgba(184, 156, 117, 0.45), rgba(184, 156, 117, 0.1));
}

.birthday-book-sheet.turn-next {
  animation: birthdayTurnNext 0.68s ease;
}

.birthday-book-sheet.turn-prev {
  animation: birthdayTurnPrev 0.68s ease;
}

@keyframes birthdayTurnNext {
  0% { transform: rotateY(0deg); filter: brightness(1); }
  50% { transform: rotateY(-92deg); filter: brightness(0.86); }
  100% { transform: rotateY(0deg); filter: brightness(1); }
}

@keyframes birthdayTurnPrev {
  0% { transform: rotateY(0deg); filter: brightness(1); }
  50% { transform: rotateY(92deg); filter: brightness(0.86); }
  100% { transform: rotateY(0deg); filter: brightness(1); }
}

.birthday-book-page h2 {
  color: #643627;
  font-family: 'Pacifico', cursive;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  margin-bottom: 0.7rem;
}

.birthday-book-page-body {
  color: #5a4232;
}

.birthday-book-letter {
  line-height: 1.75;
  min-height: 160px;
  font-family: 'Caveat', cursive;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.birthday-book-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.birthday-book-photo {
  margin: 0;
  background: #fff;
  border: 1px solid rgba(211, 188, 150, 0.75);
  border-radius: 7px;
  padding: 0.4rem 0.4rem 0.7rem;
  transform: rotate(var(--book-photo-tilt, -1deg));
  box-shadow: 0 7px 18px rgba(81, 51, 24, 0.2);
}

.birthday-book-photo:nth-child(2n) { --book-photo-tilt: 1.1deg; }
.birthday-book-photo:nth-child(3n) { --book-photo-tilt: -1.6deg; }

.birthday-book-photo img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.birthday-book-photo figcaption {
  margin-top: 0.4rem;
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  color: #6a4e3a;
}

.birthday-book-empty {
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  color: #6a4e3a;
}

.birthday-book-note-lead {
  margin-bottom: 0.8rem;
  font-size: 1rem;
}

.birthday-book-note-lead.revealed {
  color: #462c79;
  font-weight: 700;
}

.birthday-book-closing {
  margin-top: 1rem;
  font-family: 'Caveat', cursive;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: #6f2e4b;
}

.birthday-book-sign {
  margin-top: 0.35rem;
  color: #76534a;
  font-size: 0.95rem;
}

.birthday-book-controls {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.85rem;
}

.birthday-book-btn {
  border: 1px solid rgba(255, 221, 167, 0.48);
  background: rgba(255, 248, 221, 0.12);
  color: #ffe8b8;
  border-radius: 999px;
  padding: 0.52rem 1rem;
  font-weight: 700;
  cursor: pointer;
  min-width: 92px;
}

.birthday-book-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .birthday-hack-title span {
    font-size: clamp(1.5rem, 10vw, 3.4rem);
  }

  .birthday-book-shell {
    padding: 0.45rem;
  }

  .birthday-book-shell::before,
  .birthday-book-shell::after {
    display: none;
  }

  .birthday-book-sheet {
    min-height: min(72vh, 600px);
    padding: 0.8rem;
  }

  .birthday-book-gallery {
    grid-template-columns: 1fr;
  }

  .birthday-book-photo img {
    height: 210px;
  }

  .birthday-book-toolbar {
    font-size: 0.8rem;
  }
}

/* Birthday overrides: hacker rain intensity, age-candle stage, and fixed book footprint */
.birthday-rain-col {
  font-size: clamp(1.25rem, 2.9vw, 2.15rem);
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 0.98;
  color: rgba(255, 95, 168, 0.88);
  text-shadow: 0 0 12px rgba(255, 95, 168, 0.42), 0 0 26px rgba(181, 76, 255, 0.2);
}

.birthday-candle-stage {
  position: relative;
  width: min(92vw, 620px);
  height: clamp(290px, 46vh, 420px);
  margin: 0 auto 1.1rem;
  cursor: pointer;
  transition: transform 0.28s ease;
}

.birthday-candle-stage:hover {
  transform: translateY(-2px);
}

.birthday-cake-shadow {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: min(84%, 520px);
  height: 42px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.05) 70%, transparent 100%);
}

.birthday-cake-plate {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: min(86%, 540px);
  height: 30px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #403247, #1c1422);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 8px 20px rgba(0, 0, 0, 0.42);
}

.birthday-cake-bottom,
.birthday-cake-middle,
.birthday-cake-top {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 6px 14px rgba(255, 255, 255, 0.12), inset 0 -8px 20px rgba(0, 0, 0, 0.2);
}

.birthday-cake-bottom {
  bottom: 68px;
  width: min(74%, 460px);
  height: 120px;
  background: linear-gradient(180deg, #ffca8a, #ff8a80);
}

.birthday-cake-middle {
  bottom: 158px;
  width: min(58%, 360px);
  height: 88px;
  background: linear-gradient(180deg, #ffc6de, #ff8fc2);
}

.birthday-cake-top {
  bottom: 226px;
  width: min(42%, 260px);
  height: 62px;
  background: linear-gradient(180deg, #fff0ac, #ffd26b);
}

.birthday-icing-drip {
  position: absolute;
  bottom: 214px;
  width: 24px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg, #fff8de, #ffe7a6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.birthday-icing-drip.drip-1 { left: 40%; height: 34px; }
.birthday-icing-drip.drip-2 { left: 48%; height: 42px; }
.birthday-icing-drip.drip-3 { left: 56%; height: 28px; }

.birthday-age-candles {
  position: absolute;
  left: 50%;
  bottom: 270px;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

.age-digit-candle {
  position: relative;
  width: clamp(64px, 8vw, 88px);
  height: clamp(118px, 20vh, 156px);
  border-radius: 18px;
  background: linear-gradient(180deg, #f8faff 0%, #eec2ff 40%, #ca8bff 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 6px 0 8px rgba(255, 255, 255, 0.36), inset -8px 0 16px rgba(113, 59, 141, 0.24), 0 10px 24px rgba(0, 0, 0, 0.28);
}

.age-candle-digit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: clamp(2.3rem, 5vw, 3.4rem);
  font-weight: 900;
  color: #5e257e;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.4);
}

.age-candle-wick {
  position: absolute;
  left: 50%;
  top: -14px;
  width: 4px;
  height: 14px;
  margin-left: -2px;
  border-radius: 4px;
  background: #2f1c11;
}

.age-candle-flame {
  position: absolute;
  left: 50%;
  top: -48px;
  width: 24px;
  height: 38px;
  margin-left: -12px;
  border-radius: 50% 50% 48% 48%;
  background: radial-gradient(circle at 44% 34%, #fff6c9 0%, #ffc36a 36%, #ff8f3f 65%, #ff5d2d 100%);
  box-shadow: 0 0 22px rgba(255, 184, 74, 0.86), 0 0 48px rgba(255, 100, 41, 0.45);
  animation: candleFlicker 1.2s ease-in-out infinite, flamePulse 2s ease-in-out infinite;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.age-candle-flame.blown {
  opacity: 0;
  transform: scale(0.2) translateY(-14px);
}

.birthday-book-frame {
  width: min(96vw, 980px);
  min-height: min(70vh, 640px);
  position: relative;
}

.birthday-book-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
}

.birthday-book-cover.opening {
  transform: perspective(1400px) rotateY(-100deg);
}

.birthday-book {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  transform: none;
  transition: opacity 0.28s ease;
}

.birthday-book.visible {
  transform: none;
}

@media (max-width: 560px) {
  .birthday-candle-stage {
    height: 300px;
  }

  .birthday-cake-top {
    width: min(58%, 220px);
  }

  .birthday-age-candles {
    bottom: 248px;
    gap: 10px;
  }

  .age-digit-candle {
    width: 64px;
    height: 116px;
  }
}

/* Guest Warning Box */
.warning-box {
  background: rgba(255, 175, 204, 0.1);
  border: 1px solid rgba(255, 175, 204, 0.35);
  border-radius: 16px;
  padding: 0.9rem;
  margin: 0.4rem 0;
}

.warning-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffafcc;
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.warning-box p {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-muted-dark);
  margin-bottom: 0;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 0.34rem 0.72rem;
  font-size: 0.78rem;
  min-width: 86px;
  justify-content: center;
}

.stat-pill-clickable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.stat-pill-clickable:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-glow) 52%, var(--glass-border));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.stat-pill-value {
  font-weight: 700;
}

.credit-shop-modal {
  text-align: left;
  margin-top: -0.5rem;
}

.credit-shop-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff4d87, #ff9b4d);
  color: #fff;
  padding: 0.25rem 0.62rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 0.55rem;
}

.credit-shop-title {
  margin: 0 0 0.15rem;
  color: #1a1a2e;
  font-size: 1.15rem;
  font-weight: 800;
}

.credit-shop-sub {
  margin: 0 0 0.5rem;
  color: #5a5a72;
  font-size: 0.8rem;
}

.credit-shop-note {
  margin: 0 0 0.75rem;
  color: #474764;
  font-size: 0.78rem;
  line-height: 1.4;
}

.credit-shop-packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.credit-shop-uid-wrap {
  margin: 0 0 0.9rem;
  padding: 0.62rem 0.68rem;
  border-radius: 10px;
  background: #f9f8ff;
  border: 1px solid #e7e4ff;
}

.credit-shop-uid-label {
  font-size: 0.74rem;
  color: #5f5c7c;
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.credit-shop-uid-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.credit-shop-uid {
  flex: 1;
  min-width: 0;
  display: inline-block;
  font-size: 0.72rem;
  color: #23233d;
  background: #ffffff;
  border: 1px dashed #ccc7f7;
  border-radius: 8px;
  padding: 0.42rem 0.5rem;
  overflow-wrap: anywhere;
}

.credit-shop-copy {
  border: 0;
  background: #2a63ff;
  color: #fff;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.44rem 0.62rem;
  cursor: pointer;
  white-space: nowrap;
}

.credit-shop-copy:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.credit-pack-card {
  background: #f7f7ff;
  border: 1px solid #e8e9f8;
  border-radius: 9px;
  padding: 0.45rem 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: center;
}

.credit-pack-card strong {
  font-size: 0.68rem;
  color: #4a4a66;
  white-space: nowrap;
}

.credit-pack-card span {
  font-size: 0.88rem;
  font-weight: 800;
  color: #1a1a2e;
}

.credit-pack-card.featured {
  border-color: #ff9b4d;
  box-shadow: 0 0 0 1px rgba(255, 155, 77, 0.2);
  background: linear-gradient(145deg, #fff8f0, #fff3e7);
}

.credit-shop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.credit-shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 9px;
  padding: 0.5rem 0.4rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff !important;
}

.credit-shop-btn.fb {
  background: linear-gradient(135deg, #1877f2, #0b57ca);
}

.credit-shop-btn.tt {
  background: linear-gradient(135deg, #161823, #fe2c55);
}

.credit-shop-footer {
  margin: 0;
  font-size: 0.72rem;
  color: #6b6b88;
  text-align: center;
}

@media (max-width: 480px) {
  .credit-shop-packages {
    gap: 0.35rem;
  }
  .credit-pack-card {
    padding: 0.4rem 0.25rem;
  }
  .credit-pack-card span {
    font-size: 0.825rem;
  }
}

.toast-container {
  position: fixed;
  top: 0.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  z-index: 3000;
  pointer-events: none;
}

.toast-notification {
  pointer-events: auto;
  width: min(430px, calc(100vw - 1.1rem));
  display: grid;
  grid-template-columns: 28px 1fr 24px;
  align-items: center;
  gap: 0.55rem;
  background: color-mix(in srgb, var(--glass-bg-strong) 82%, #ffffff 18%);
  border: 1px solid color-mix(in srgb, var(--glass-border) 82%, #ffffff 18%);
  border-radius: 16px;
  padding: 0.58rem 0.72rem;
  color: var(--text-primary);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.2s ease;
}

.toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-exit {
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
}

.toast-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent-glow) 22%, transparent);
}

.toast-type {
  font-size: 0.72rem;
  opacity: 0.78;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.toast-message {
  font-size: 0.88rem;
  font-weight: 500;
}

.toast-close {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.dropdown-user {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-bg);
  margin-bottom: 0.35rem;
}

.dropdown-user-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
}

.dropdown-user-email {
  font-size: 0.75rem;
  color: var(--text-secondary);
  word-break: break-all;
}

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

  .modal-overlay {
    align-items: flex-start;
    padding-top: calc(1rem + env(safe-area-inset-top));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  .modal-content {
    width: min(94vw, 520px);
    padding: 1.4rem;
  }

  .modal-title {
    font-size: 1.5rem;
  }

  .modal-message {
    font-size: 0.98rem;
  }

  .modal-actions {
    flex-direction: column !important;
    align-items: stretch;
  }

  .modal-actions .modal-btn {
    width: 100%;
  }

  .modal-close {
    top: 0.8rem;
    right: 0.8rem;
  }
}

/* ========================================
   FULL PAGE LOADER
   ======================================== */
.page-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 20, 0.46);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.page-loader-overlay.active {
  display: flex;
}

.page-loader-card {
  min-width: 210px;
  max-width: 88vw;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow);
  color: var(--text-primary);
  text-align: center;
  padding: 1.1rem 1.2rem;
}

.page-loader-message {
  margin: 0.65rem 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* ========================================
   CALENDAR
   ======================================== */
.calendar-editor-view {
  background: rgba(0,0,0,0.1);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,0.05);
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.month-label {
  font-weight: 700;
  font-size: 1.1rem;
  color: white;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.day-header {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding-bottom: 0.5rem;
  text-transform: uppercase;
}

.calendar-day {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba(255,255,255,0.03);
  position: relative;
}

.calendar-day:hover {
  background: rgba(255,107,157,0.15);
  border-color: rgba(255,107,157,0.3);
  transform: translateY(-2px);
}

.calendar-day.other-month {
  opacity: 0.15;
  cursor: default;
  pointer-events: none;
}

.calendar-day.is-today {
  border: 1.5px solid var(--accent-glow);
  background: rgba(139, 92, 246, 0.1);
}

.calendar-day.has-events {
  background: rgba(255,107,157,0.08);
}

.day-num {
  font-weight: 500;
}

.event-dots {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  font-size: 0.5rem;
  color: var(--accent-glow);
}

.btn-nav {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-nav:hover {
  background: rgba(255,255,255,0.1);
}

/* Viewer Calendar Specific */
.calendar-page {
  padding: 2rem 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.calendar-main-title {
  font-family: 'Pacifico', cursive;
  text-align: center;
  margin-bottom: 2.5rem;
  font-size: 2.2rem;
  color: var(--text-primary);
  text-shadow: 0 4px 15px rgba(255, 107, 157, 0.3);
}

.calendar-view-box {
  padding: 1.5rem;
  background: rgba(26, 28, 44, 0.8);
  border-radius: 12px;
}

/* ========================================
   MODALS (Recreated: Simple + Toast-like)
   ======================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 10, 24, 0.75) 0%, rgba(19, 34, 74, 0.78) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-content {
  width: min(520px, 94vw);
  --modal-bg: #ffffff;
  --modal-text: #1a1a2e;
  --modal-muted: #5a5a72;
  --modal-border: #e2e0f0;
  --modal-accent: var(--accent-glow);
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(167, 139, 250, 0.12);
  border-radius: 18px;
  padding: 1.8rem 2rem;
  color: var(--modal-text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  position: relative;
  overflow: hidden;
}

.modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  text-align: center;
  color: var(--modal-text);
}

.modal-message {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--modal-muted);
  text-align: center;
  margin-bottom: 1rem;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  border-top: 1px solid color-mix(in srgb, var(--modal-border) 70%, #ffffff 30%);
  padding-top: 0.9rem;
}

.modal-btn {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: var(--modal-text);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.modal-btn:hover {
  background: color-mix(in srgb, var(--modal-text) 8%, transparent);
}

.modal-btn.btn-primary {
  background: transparent;
  border: none;
  color: var(--modal-accent);
}

.modal-btn.btn-primary:hover {
  background: color-mix(in srgb, var(--modal-accent) 12%, transparent);
}

.modal-btn.btn-secondary {
  color: var(--modal-text);
}

.modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  border: none;
  background: transparent;
  color: var(--modal-muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

/* Specific to ToS modal in index.html */
#tosModal .modal-content {
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
}

#tosModal .tos-text {
  color: var(--modal-muted);
}

#tosModal .tos-text h4 {
  color: var(--modal-text);
  border-bottom-color: color-mix(in srgb, var(--modal-border) 70%, #ffffff 30%);
}

#tosModal .tos-text p {
  color: var(--modal-muted);
}

/* Guest prompt: no hover motion on Okay */
.modal-overlay.modal-no-hover .modal-btn:hover,
.modal-overlay.modal-no-hover .btn:hover {
  background: inherit;
  border-color: inherit;
  color: inherit;
}

@media (max-width: 560px) {
  .modal-content {
    padding: 1.4rem;
  }

  .modal-title {
    font-size: 1.2rem;
  }

  .modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-actions .modal-btn {
    width: 100%;
  }

  .credit-shop-packages {
    grid-template-columns: 1fr;
  }

  .credit-shop-actions {
    grid-template-columns: 1fr;
  }

  .credit-shop-uid-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Birthday inspired style overrides (MadeForAnita-like vibe) */
body.birthday-madefor-style .birthday-hack-intro {
  background: transparent;
}

body.birthday-madefor-style .birthday-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body.birthday-madefor-style .birthday-stars-persistent {
  z-index: 1;
  opacity: 0.95;
}

body.birthday-madefor-style .birthday-star {
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 220, 244, 0.9);
  box-shadow: 0 0 8px rgba(255, 160, 214, 0.55);
  animation-name: birthdayTwinkle;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes birthdayTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.2); }
}

body.birthday-madefor-style .birthday-text-cell {
  color: #070707;
  opacity: 0.94;
}

body.birthday-madefor-style .birthday-book-frame {
  filter: drop-shadow(0 12px 42px rgba(0, 0, 0, 0.5));
}

body.birthday-madefor-style .birthday-book-cover {
  background: linear-gradient(135deg, #7f1d5a 0%, #8b2bd4 46%, #4a154b 100%);
  border: 1px solid rgba(255, 202, 238, 0.35);
  box-shadow: -14px 14px 32px rgba(0, 0, 0, 0.45), inset 7px 0 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 225, 247, 0.22);
}

body.birthday-madefor-style .birthday-cover-kicker,
body.birthday-madefor-style .birthday-cover-hint {
  color: #ffd8f1;
}

body.birthday-madefor-style .birthday-book-cover h1 {
  color: #ffe6f7;
  text-shadow: 0 8px 22px rgba(44, 6, 34, 0.5);
}

body.birthday-madefor-style .birthday-book-shell {
  background: linear-gradient(130deg, rgba(71, 28, 73, 0.82), rgba(35, 14, 44, 0.92));
  border-color: rgba(237, 189, 255, 0.22);
}

body.birthday-madefor-style .birthday-book-sheet {
  background: linear-gradient(180deg, #fff9fd, #fff1f9);
  border-color: rgba(235, 177, 223, 0.72);
}

body.birthday-madefor-style .birthday-book-page h2 {
  color: #7b2e65;
}

/* Two-page full-book spread */
body.birthday-madefor-style .birthday-book-frame {
  width: min(96vw, 1060px);
  min-height: min(74vh, 700px);
}

body.birthday-madefor-style .birthday-book {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

body.birthday-madefor-style .birthday-book-shell {
  padding: clamp(0.55rem, 1.6vw, 0.95rem);
}

body.birthday-madefor-style .birthday-book-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: min(66vh, 620px);
  perspective: 1700px;
}

body.birthday-madefor-style .birthday-book-page-side {
  position: relative;
  background: linear-gradient(180deg, #fffdf9, #fff5fb);
  border: 1px solid rgba(222, 184, 211, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

body.birthday-madefor-style .birthday-book-left {
  border-radius: 10px 0 0 10px;
  border-right: none;
  box-shadow: inset -16px 0 22px rgba(77, 44, 71, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

body.birthday-madefor-style .birthday-book-right {
  border-radius: 0 10px 10px 0;
  border-left: none;
  box-shadow: inset 16px 0 22px rgba(77, 44, 71, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

body.birthday-madefor-style .birthday-book-left::after,
body.birthday-madefor-style .birthday-book-right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(177, 139, 167, 0.35);
}

body.birthday-madefor-style .birthday-book-left::after {
  right: 0;
}

body.birthday-madefor-style .birthday-book-right::before {
  left: 0;
}

body.birthday-madefor-style .birthday-book-page {
  height: 100%;
  padding: clamp(0.75rem, 1.6vw, 1.15rem);
}

body.birthday-madefor-style .birthday-book-placeholder {
  display: grid;
  place-content: center;
  text-align: center;
  color: #7a5f74;
}

body.birthday-madefor-style .birthday-book-spread.turn-next .birthday-book-right {
  transform-origin: left center;
  animation: birthdaySpreadTurnNext 0.68s ease;
}

body.birthday-madefor-style .birthday-book-spread.turn-prev .birthday-book-left {
  transform-origin: right center;
  animation: birthdaySpreadTurnPrev 0.68s ease;
}

@keyframes birthdaySpreadTurnNext {
  0% { transform: rotateY(0deg); filter: brightness(1); }
  50% { transform: rotateY(-170deg); filter: brightness(0.84); }
  100% { transform: rotateY(0deg); filter: brightness(1); }
}

@keyframes birthdaySpreadTurnPrev {
  0% { transform: rotateY(0deg); filter: brightness(1); }
  50% { transform: rotateY(170deg); filter: brightness(0.84); }
  100% { transform: rotateY(0deg); filter: brightness(1); }
}

@media (max-width: 760px) {
  body.birthday-madefor-style .birthday-book-frame {
    width: min(98vw, 880px);
    min-height: min(66vh, 560px);
  }

  body.birthday-madefor-style .birthday-book-spread {
    min-height: min(58vh, 500px);
  }
}

body.birthday-madefor-style .birthday-floating-controls {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10020;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.birthday-madefor-style .birthday-music-control,
body.birthday-madefor-style .birthday-settings-button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  outline: none;
}

body.birthday-madefor-style .birthday-music-control {
  background: none;
  color: rgb(205, 202, 202);
  font-size: 17px;
  box-shadow: 0 4px 15px rgba(250, 250, 250, 0.4);
}

body.birthday-madefor-style .birthday-music-control:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.6);
}

body.birthday-madefor-style .birthday-music-control.playing {
  animation: birthdayMusicPulse 1.5s infinite;
}

body.birthday-madefor-style .birthday-music-control.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

@keyframes birthdayMusicPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(255, 107, 157, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 107, 157, 0.8);
  }
}

body.birthday-madefor-style .birthday-settings-button {
  background: linear-gradient(135deg, #b20404, #2a1717);
  color: #fff;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

/* ========================================
   GALLERY MODULE
   ======================================== */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  width: 100%;
}

.photo-item {
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.photo-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.photo-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 6, 16, 0.9);
  padding: 20px;
}

.lightbox.hidden {
  display: none !important;
}

.lightbox-content {
  position: relative;
  width: min(90vw, 860px);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#lightbox-img {
  max-width: 100%;
  max-height: 76vh;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.lightbox-counter {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}

.lightbox-close,
.lightbox-nav {
  border: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: 16px;
}

.lightbox-next {
  right: 16px;
}

body.birthday-madefor-style .birthday-settings-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.6);
}

body.birthday-madefor-style .birthday-settings-hint {
  position: fixed;
  top: 70px;
  right: 90px;
  z-index: 10021;
  opacity: 0;
  pointer-events: none;
  animation: birthdayShowHint 3s ease-in-out forwards;
}

body.birthday-madefor-style .birthday-hint-text {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@keyframes birthdayShowHint {
  0% { opacity: 0; transform: translateY(-10px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

body.birthday-madefor-style .birthday-candle-stage {
  width: min(92vw, 560px);
  height: clamp(280px, 44vh, 400px);
  display: grid;
  place-items: center;
  cursor: pointer;
}

body.birthday-madefor-style .birthday-gift-image {
  width: min(86vw, 430px);
  max-height: 68vh;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: none;
  display: block;
  margin-inline: auto;
  justify-self: center;
  align-self: center;
  transform-origin: center bottom;
  will-change: transform;
}

body.birthday-madefor-style .birthday-gift-image.gift-pop-in {
  animation:
    birthdayGiftRevealSlow 2.2s ease-out forwards,
    birthdayGiftFloatDance 4.8s ease-in-out 2.2s infinite;
}

@keyframes birthdayGiftRevealSlow {
  0% {
    opacity: 0;
    transform: scale(0.08);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes birthdayGiftFloatDance {
  0% {
    transform: translate3d(0, 0, 0) rotate(-3deg) scale(1);
  }

  22% {
    transform: translate3d(0, -14px, 0) rotate(-1.2deg) scale(1.02);
  }

  48% {
    transform: translate3d(0, -24px, 0) rotate(3.2deg) scale(1.03);
  }

  74% {
    transform: translate3d(0, -12px, 0) rotate(1deg) scale(1.02);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(-3deg) scale(1);
  }
}

body.birthday-madefor-style .birthday-candle-stage.candle-blown {
  pointer-events: none;
}

body.birthday-madefor-style .birthday-gift-image.gift-hidden {
  opacity: 0;
  transform: scale(0.76);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

body.birthday-madefor-style .birthday-gift-image.gift-gone {
  display: none !important;
}

body.birthday-madefor-style .birthday-gift-image.gift-pushed-away {
  transform: translateX(-36vw) scale(0.72);
}

body.birthday-madefor-style .birthday-wish-overlay {
  position: absolute;
  inset: 0;
  z-index: 28;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

body.birthday-madefor-style .birthday-wish-overlay.active {
  opacity: 1;
}

body.birthday-madefor-style .birthday-comet-gif {
  position: absolute;
  top: 0;
  left: 0;
  width: min(34vw, 220px);
  height: auto;
  opacity: 0;
  transform: translate3d(120vw, -18vh, 0) scale(0.26) rotate(14deg) scaleX(-1);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.42));
}

body.birthday-madefor-style .birthday-comet-photo-train {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.22s ease;
}

body.birthday-madefor-style .birthday-comet-photo-train.active {
  opacity: 1;
}

body.birthday-madefor-style .birthday-comet-rope-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

body.birthday-madefor-style .birthday-comet-rope-head,
body.birthday-madefor-style .birthday-comet-rope-link {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.birthday-madefor-style .birthday-comet-rope-head {
  stroke: rgba(229, 206, 168, 0.88);
  stroke-width: 2.6;
  filter: drop-shadow(0 0 3px rgba(214, 186, 148, 0.38));
}

body.birthday-madefor-style .birthday-comet-rope-link {
  stroke: rgba(215, 188, 149, 0.82);
  stroke-width: 2.2;
}

body.birthday-madefor-style .birthday-comet-photo-card {
  position: absolute;
  --rocket-accent: #d78fa7;
  --rocket-fin: rgba(124, 83, 44, 0.42);
  --rocket-flame-1: rgba(255, 232, 138, 0.95);
  --rocket-flame-2: rgba(255, 153, 71, 0.88);
  width: min(15vw, 118px);
  aspect-ratio: 4 / 5;
  padding: 8px 8px 22px;
  margin: 0;
  border-radius: 14px 14px 18px 18px;
  background: linear-gradient(160deg, #f7f1e8, #e9dfd1);
  border: 2px solid var(--rocket-accent);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  isolation: isolate;
}

body.birthday-madefor-style .birthday-comet-photo-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: calc(100% + 30px);
  height: calc(100% - 14px);
  transform: translate(-50%, -50%);
  background:
    linear-gradient(132deg, var(--rocket-fin) 0 50%, transparent 51%) left center / 16px 48px no-repeat,
    linear-gradient(228deg, var(--rocket-fin) 0 50%, transparent 51%) right center / 16px 48px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 32%) center 10px / calc(100% - 16px) 30px no-repeat;
  z-index: -1;
  pointer-events: none;
}

body.birthday-madefor-style .birthday-comet-photo-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 26px;
  height: 28px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 26%, var(--rocket-flame-1) 0 32%, transparent 56%),
    radial-gradient(circle at 50% 74%, var(--rocket-flame-2) 0 48%, transparent 74%);
  clip-path: polygon(50% 0, 88% 30%, 68% 100%, 32% 100%, 12% 30%);
  filter: drop-shadow(0 0 5px rgba(255, 173, 74, 0.4));
  animation: birthdayRocketFlame 0.52s ease-in-out infinite alternate;
  pointer-events: none;
}

body.birthday-madefor-style .birthday-comet-photo-card.card-tone-pink {
  --rocket-accent: #d88bb0;
  --rocket-fin: rgba(160, 83, 119, 0.52);
  --rocket-flame-2: rgba(255, 141, 90, 0.9);
  background: linear-gradient(162deg, #ffe6f1, #f6bfd8 72%, #efafcb);
}

body.birthday-madefor-style .birthday-comet-photo-card.card-tone-yellow {
  --rocket-accent: #d9b96b;
  --rocket-fin: rgba(168, 134, 68, 0.5);
  --rocket-flame-2: rgba(255, 164, 69, 0.9);
  background: linear-gradient(162deg, #fff8d9, #f4e6aa 72%, #e8d286);
}

body.birthday-madefor-style .birthday-comet-photo-card.card-tone-green {
  --rocket-accent: #8ebf7f;
  --rocket-fin: rgba(85, 130, 86, 0.52);
  --rocket-flame-2: rgba(255, 135, 72, 0.9);
  background: linear-gradient(162deg, #e7f7df, #bfe7ba 72%, #a9daa2);
}

body.birthday-madefor-style .birthday-comet-photo-card.card-tone-blue {
  --rocket-accent: #7da8da;
  --rocket-fin: rgba(72, 107, 153, 0.52);
  --rocket-flame-2: rgba(255, 145, 78, 0.9);
  background: linear-gradient(162deg, #e2efff, #bad5f8 72%, #a4c3ee);
}

body.birthday-madefor-style .birthday-comet-photo-card:hover {
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

body.birthday-madefor-style .birthday-comet-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  filter: contrast(1.02) saturate(0.9) sepia(0.14);
}

@keyframes birthdayRocketFlame {
  0% {
    transform: translateX(-50%) scale(0.94);
    opacity: 0.82;
  }
  100% {
    transform: translateX(-50%) scale(1.06);
    opacity: 1;
  }
}

body.birthday-madefor-style .birthday-wish-trail {
  position: absolute;
  top: clamp(4%, 7vh, 9%);
  left: 50%;
  margin: 0;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
  font-family: 'Caveat', 'Dancing Script', cursive;
  font-size: clamp(1.45rem, 3.8vw, 2.45rem);
  letter-spacing: 0.035em;
  color: rgba(241, 241, 241, 0.96);
  text-shadow: 0 0 9px rgba(241, 241, 241, 0.42), 0 0 26px rgba(182, 182, 182, 0.3);
  background: linear-gradient(90deg, rgba(4, 4, 4, 0.34), rgba(12, 12, 12, 0.12));
  border: 1px solid rgba(240, 240, 240, 0.16);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateX(-62%);
  filter: blur(0.2px);
}

body.birthday-madefor-style .birthday-wish-trail.active {
  animation: birthdayWishTrailRun 5.7s linear forwards;
}

body.birthday-madefor-style .birthday-wish-trail.typing::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 50%;
  width: 28px;
  height: 14px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(230, 230, 230, 0.55) 0%, rgba(230, 230, 230, 0.16) 55%, transparent 100%);
  filter: blur(2px);
  opacity: 0.75;
}

body.birthday-madefor-style .birthday-wish-trail .smoke-char {
  display: inline-block;
  opacity: 0;
  filter: blur(11px);
  transform: translateY(7px) scale(0.82);
  animation: birthdaySmokeGlyph 1s ease-out forwards, birthdayWishLetterFloat 2.35s ease-in-out infinite;
}

body.birthday-madefor-style .birthday-wish-message {
  position: absolute;
  left: 50%;
  bottom: clamp(14%, 18vh, 22%);
  transform: translateX(-50%) translateY(16px) scale(0.96);
  width: min(84vw, 620px);
  margin: 0;
  padding: 0.95rem 1.2rem;
  border-radius: 14px;
  text-align: center;
  font-family: 'Caveat', 'Dancing Script', cursive;
  font-size: clamp(1.35rem, 3.1vw, 2rem);
  line-height: 1.2;
  color: #fff7d6;
  background: linear-gradient(140deg, rgba(18, 11, 42, 0.86), rgba(54, 22, 62, 0.76));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 236, 173, 0.4);
  letter-spacing: 0.02em;
  opacity: 0;
  display: none;
}

body.birthday-madefor-style .birthday-wish-overlay.active .birthday-comet-gif,
body.birthday-madefor-style .birthday-comet-gif.active {
  animation: birthdayCommetFlyLand 4.3s cubic-bezier(0.2, 0.72, 0.2, 1) forwards;
}

body.birthday-madefor-style .birthday-comet-photo-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  padding: 1rem;
}

body.birthday-madefor-style .birthday-comet-photo-modal.show {
  display: flex;
}

body.birthday-madefor-style .birthday-comet-photo-modal-card {
  width: min(92vw, 760px);
  max-height: 88vh;
  overflow: auto;
  border-radius: 16px;
  padding: 0.8rem 0.8rem 1rem;
  background: linear-gradient(150deg, #f8f3eb, #ece1d3);
  border: 1px solid rgba(56, 44, 31, 0.3);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.48);
}

body.birthday-madefor-style .birthday-comet-photo-modal-close {
  display: block;
  margin-left: auto;
  border: 1px solid rgba(88, 67, 45, 0.36);
  border-radius: 999px;
  padding: 0.3rem 0.82rem;
  background: #fff9ef;
  color: #49331f;
  font-size: 0.82rem;
  cursor: pointer;
}

body.birthday-madefor-style .birthday-comet-photo-modal-img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  margin-top: 0.5rem;
}

body.birthday-madefor-style .birthday-comet-photo-modal-caption {
  margin: 0.6rem 0 0;
  text-align: center;
  color: #513821;
  font-size: 0.95rem;
}

body.birthday-madefor-style .birthday-wish-overlay.active .birthday-wish-message {
  animation: birthdayWishMessageReveal 0.7s ease forwards;
}

body.birthday-madefor-style .birthday-wish-message.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

body.birthday-madefor-style .birthday-letter-sequence {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  pointer-events: none;
}

body.birthday-madefor-style .birthday-letter-sequence.active {
  pointer-events: auto;
}

body.birthday-madefor-style .birthday-envelope {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(55vw, -50%) rotate(-8deg) scale(0.88);
  width: min(34vw, 240px);
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 230, 191, 0.72);
  border-radius: 14px;
  background: linear-gradient(155deg, #fff4de, #f5e1c7);
  color: #8c5c2c;
  font-size: clamp(2rem, 5vw, 3rem);
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
}

body.birthday-madefor-style .birthday-envelope-svg {
  width: 100%;
  height: 100%;
  display: block;
}

body.birthday-madefor-style .birthday-envelope .env-shadow {
  fill: rgba(72, 44, 18, 0.25);
}

body.birthday-madefor-style .birthday-envelope .env-body {
  fill: url(#envBodyGrad);
  stroke: rgba(126, 86, 39, 0.42);
  stroke-width: 2;
}

body.birthday-madefor-style .birthday-envelope .env-pocket,
body.birthday-madefor-style .birthday-envelope .env-inner-fold {
  fill: none;
  stroke: rgba(166, 121, 70, 0.45);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.birthday-madefor-style .birthday-envelope .env-flap {
  fill: url(#envFlapGrad);
  stroke: rgba(149, 106, 56, 0.52);
  stroke-width: 2;
  transform-origin: 160px 74px;
  transition: transform 0.45s ease;
}

body.birthday-madefor-style .birthday-envelope .env-seal {
  fill: #d86b8f;
  stroke: rgba(139, 43, 79, 0.52);
  stroke-width: 2;
}

body.birthday-madefor-style .birthday-envelope .env-heart {
  fill: #fff4f8;
}

body.birthday-madefor-style .birthday-envelope .env-line {
  fill: none;
  stroke: rgba(142, 103, 58, 0.36);
  stroke-width: 2;
  stroke-linecap: round;
}

body.birthday-madefor-style .birthday-envelope:hover .env-flap {
  transform: rotateX(12deg) translateY(-2px);
}

body.birthday-madefor-style .birthday-letter-sequence.active .birthday-envelope {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

body.birthday-madefor-style .birthday-envelope.opened {
  opacity: 0;
  transform: translate(-50%, -56%) rotate(-4deg) scale(0.9);
}

body.birthday-madefor-style .birthday-paper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: min(86vw, 720px);
  max-height: min(70vh, 560px);
  overflow: auto;
  border-radius: 16px;
  padding: 1.25rem 1.1rem 1.3rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 31px, rgba(211, 157, 204, 0.24) 32px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 31px, rgba(211, 157, 204, 0.24) 32px),
    linear-gradient(150deg, #fff4fb, #f5eaff 52%, #ffeef5);
  background-size: 100% 32px, 100% 32px, 100% 100%;
  border: 1px solid rgba(199, 151, 213, 0.62);
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.64);
  color: #5f2a55;
  opacity: 0;
  transition: opacity 0.42s ease, transform 0.42s ease;
}

body.birthday-madefor-style .birthday-paper.open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

body.birthday-madefor-style .birthday-paper h3 {
  margin: 0.35rem 0 0.4rem;
  text-align: center;
  font-size: clamp(1.3rem, 3.2vw, 1.85rem);
  color: #8d2f72;
  font-family: 'Dancing Script', 'Caveat', cursive;
}

body.birthday-madefor-style .birthday-paper-close {
  position: sticky;
  top: 0;
  margin-left: auto;
  display: block;
  border: 1px solid rgba(171, 94, 155, 0.54);
  border-radius: 999px;
  background: rgba(255, 248, 255, 0.86);
  color: #8d2f72;
  padding: 0.26rem 0.82rem;
  font-size: 0.82rem;
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(107, 35, 93, 0.14);
  z-index: 2;
}

body.birthday-madefor-style .birthday-paper-close.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.birthday-madefor-style .birthday-paper-skip {
  position: sticky;
  top: 0;
  float: left;
  border: 1px solid rgba(92, 116, 221, 0.48);
  border-radius: 999px;
  background: linear-gradient(135deg, #e9f1ff, #cfe0ff 58%, #d9d3ff);
  color: #3a4f95;
  padding: 0.26rem 0.88rem;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(62, 83, 163, 0.2);
  z-index: 2;
}

body.birthday-madefor-style .birthday-paper-skip.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.birthday-madefor-style .birthday-paper-skip.is-live {
  animation: birthdaySkipPulse 1.2s ease-in-out infinite;
}

@keyframes birthdaySkipPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 6px 15px rgba(62, 83, 163, 0.2);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(79, 105, 204, 0.34);
  }
}

body.birthday-madefor-style .birthday-paper-close:hover {
  background: rgba(255, 255, 255, 0.95);
}

body.birthday-madefor-style .birthday-paper-skip:hover {
  filter: brightness(1.03);
}

body.birthday-madefor-style .birthday-paper-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed rgba(181, 113, 172, 0.42);
  font-size: clamp(0.78rem, 2vw, 0.92rem);
  color: #8b5e89;
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.birthday-madefor-style .birthday-paper-text {
  margin: 0;
  min-height: 120px;
  font-family: 'Caveat', 'Dancing Script', cursive;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.6;
  color: #6a2b60;
  white-space: pre-wrap;
}

body.birthday-madefor-style .birthday-letter-typing-gif {
  display: block;
  margin: 0.9rem auto 0;
  width: min(220px, 42vw);
  height: auto;
  border-radius: 10px;
}

body.birthday-madefor-style .birthday-create-own-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #5f4c58;
  background: linear-gradient(180deg, #ffffff, #f5f9ff 62%, #edf4ff);
  border: 1px solid rgba(195, 215, 240, 0.9);
  box-shadow: 0 12px 24px rgba(23, 35, 61, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.85);
  z-index: 1;
}

body.birthday-madefor-style .birthday-create-own-btn:hover {
  filter: brightness(1.03);
  transform: translateY(-2px) scale(1.01);
}

body.birthday-madefor-style .birthday-footer-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.62rem 0.9rem calc(0.72rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(10, 8, 18, 0), rgba(10, 8, 18, 0.82) 34%, rgba(10, 8, 18, 0.94));
}

body.birthday-madefor-style .birthday-footer-cta .birthday-create-own-btn {
  margin: 0;
}

body.birthday-madefor-style .birthday-footer-credit {
  margin: 0;
  font-size: 0.72rem;
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 0.03em;
  color: rgba(243, 236, 252, 0.76);
  text-align: center;
}

@media (max-width: 680px) {
  body.birthday-madefor-style .birthday-footer-cta {
    padding-top: 0.56rem;
    gap: 0.28rem;
  }

  body.birthday-madefor-style .birthday-footer-credit {
    font-size: 0.67rem;
  }
}

@keyframes birthdayCommetFlyLand {
  0% {
    opacity: 0;
    transform: translate3d(120vw, -18vh, 0) scale(0.26) rotate(14deg) scaleX(-1);
  }

  12% {
    opacity: 1;
    transform: translate3d(68vw, 8vh, 0) scale(0.36) rotate(18deg) scaleX(-1);
  }

  28% {
    opacity: 1;
    transform: translate3d(-22vw, 20vh, 0) scale(0.45) rotate(-20deg) scaleX(-1);
  }

  44% {
    opacity: 1;
    transform: translate3d(74vw, 34vh, 0) scale(0.58) rotate(21deg) scaleX(-1);
  }

  60% {
    opacity: 1;
    transform: translate3d(-10vw, 12vh, 0) scale(0.68) rotate(-16deg) scaleX(-1);
  }

  78% {
    opacity: 1;
    transform: translate3d(60vw, 6vh, 0) scale(0.82) rotate(10deg) scaleX(-1);
  }

  100% {
    opacity: 1;
    transform: translate3d(calc(78vw - min(34vw, 220px) / 2), 6vh, 0) scale(0.94) rotate(0deg) scaleX(-1);
  }
}

@keyframes birthdayWishTrailRun {
  0% {
    opacity: 0;
    transform: translateX(-76%);
  }
  8% {
    opacity: 1;
  }
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0.98;
    transform: translateX(-50%);
  }
}

@keyframes birthdaySmokeGlyph {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(7px) scale(0.82);
  }
  45% {
    opacity: 0.88;
    filter: blur(2px);
    transform: translateY(1px) scale(1.02);
  }
  100% {
    opacity: 0.98;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes birthdayWishLetterFloat {
  0% {
    transform: translateY(0) rotate(-2.2deg);
  }
  50% {
    transform: translateY(-4px) rotate(1.9deg);
  }
  100% {
    transform: translateY(0) rotate(-2.2deg);
  }
}

@keyframes birthdayWishMessageReveal {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(16px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

body.birthday-madefor-style .birthday-candle-smoke {
  left: 50%;
  top: 42%;
}

body.birthday-madefor-style .birthday-image-hint {
  margin-top: 1.35rem;
  font-size: clamp(0.95rem, 2.7vw, 1.08rem);
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: rgba(240, 244, 255, 0.85);
  letter-spacing: 0.02em;
  animation: birthdayHintPulse 1.8s ease-in-out infinite;
  transition: opacity 0.24s ease, transform 0.24s ease;
  position: relative;
  top: 10px;
}

body.birthday-madefor-style .birthday-image-hint.is-hidden {
  opacity: 0;
  transform: translateY(4px);
}

@keyframes birthdayHintPulse {
  0%, 100% { opacity: 0.62; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

@media screen and (max-height: 500px) and (orientation: landscape) {
  body.birthday-madefor-style .birthday-floating-controls {
    top: 10px;
    right: 10px;
    gap: 8px;
  }

  body.birthday-madefor-style .birthday-music-control,
  body.birthday-madefor-style .birthday-settings-button {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }

  body.birthday-madefor-style .birthday-settings-hint {
    top: 52px;
    right: 66px;
  }

  body.birthday-madefor-style .birthday-content-display {
    width: 45vw;
    min-height: 56px;
    max-height: 84px;
    padding: 8px 10px;
    top: 10px;
  }

  body.birthday-madefor-style #birthdayContentText {
    font-size: 1.1rem;
    line-height: 1.1;
  }

  body.birthday-madefor-style .birthday-book-frame {
    width: min(78vw, 560px);
    min-height: min(68vh, 360px);
  }

  body.birthday-madefor-style .birthday-book-sheet {
    min-height: min(62vh, 300px);
    padding: 0.55rem;
  }

  body.birthday-madefor-style .birthday-book-cover h1 {
    font-size: clamp(1.3rem, 4vw, 2rem);
  }

  body.birthday-madefor-style .birthday-book-cover p {
    font-size: 0.82rem;
    max-width: 220px;
  }

  body.birthday-madefor-style .birthday-candle-stage {
    height: 220px;
  }

  body.birthday-madefor-style .birthday-gift-image {
    width: min(46vw, 270px);
    max-height: 46vh;
  }
}

body.birthday-madefor-style .birthday-content-display {
  position: fixed;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: min(86vw, 660px);
  min-height: 140px;
  max-height: 220px;
  padding: 28px 26px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(254, 250, 255, 0.98));
  box-shadow: 0 20px 60px rgba(255, 105, 180, 0.15), 0 10px 30px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  z-index: 17;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

body.birthday-madefor-style .birthday-content-display.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

body.birthday-madefor-style .birthday-content-display::after {
  content: '💕';
  position: absolute;
  top: 12px;
  right: 16px;
  opacity: 0.6;
  animation: heartbeat 2s ease-in-out infinite;
}

body.birthday-madefor-style #birthdayContentText {
  margin: 0;
  text-align: center;
  font-family: 'Dancing Script', 'Caveat', cursive;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.2;
  letter-spacing: 0.3px;
  background: linear-gradient(45deg, #8b4513, #a0522d, #8b4513, #6b3410);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: romanticText 8s ease-in-out infinite;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

body.birthday-madefor-style #birthdayContentText.show-word {
  opacity: 1;
  transform: translateY(0);
}

@keyframes romanticText {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 0.9; }
}

@media (max-width: 560px) {
  body.birthday-madefor-style .birthday-content-display {
    min-height: 92px;
    max-height: 128px;
    padding: 14px 14px;
    top: 1.2%;
  }
}

/* ========================================
   DASHBOARD DRAWER + GLASS MODAL REFRESH
   ======================================== */
body.drawer-open {
  overflow: hidden;
}

.dashboard-header .header-top-bar {
  background: linear-gradient(135deg, color-mix(in srgb, var(--glass-bg-strong) 86%, #ffd9e7 14%), color-mix(in srgb, var(--glass-bg-strong) 90%, #d8d6ff 10%));
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 84%, #ffffff 16%);
  box-shadow: 0 10px 40px rgba(8, 10, 23, 0.35);
}

#profileToggle {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 76%, #ffffff 24%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--glass-bg-strong) 86%, #ffffff 14%), color-mix(in srgb, var(--glass-bg) 84%, #ffdbe9 16%));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

#profileToggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

#profileToggle[aria-expanded="true"] {
  transform: translateY(-1px) scale(0.99);
}

.user-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  background: rgba(8, 10, 22, 0.6);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: opacity 0.28s ease;
}

.user-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.user-drawer {
  width: min(360px, 90vw);
  height: 100%;
  padding: 1rem 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-left: 1px solid color-mix(in srgb, var(--glass-border) 80%, #ffffff 20%);
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(255, 154, 193, 0.2), transparent 58%),
    radial-gradient(120% 90% at 0% 100%, rgba(167, 139, 250, 0.18), transparent 60%),
    color-mix(in srgb, var(--glass-bg-strong) 92%, #111625 8%);
  box-shadow: -16px 0 45px rgba(0, 0, 0, 0.35);
  transform: translateX(102%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
}

.user-drawer-overlay.active .user-drawer {
  transform: translateX(0);
}

.drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.15rem;
}

.drawer-top h2 {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.drawer-close-btn {
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 80%, #ffffff 20%);
  border-radius: 11px;
  background: color-mix(in srgb, var(--glass-bg) 76%, #ffffff 24%);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.2s ease;
}

.drawer-close-btn:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--glass-bg) 62%, #ffffff 38%);
}

.drawer-user-card {
  margin-bottom: 0;
  border-radius: 15px;
  background: color-mix(in srgb, var(--glass-bg) 92%, #ffffff 8%);
}

.drawer-warning {
  padding-bottom: 0.1rem;
}

.drawer-warning .warning-box {
  margin: 0;
}

.drawer-nav {
  display: grid;
  gap: 0.46rem;
}

.drawer-item {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--glass-border) 80%, #ffffff 20%);
  background: color-mix(in srgb, var(--glass-bg) 80%, #ffffff 20%);
  color: var(--text-primary);
  border-radius: 13px;
  padding: 0.72rem 0.82rem;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.drawer-item:hover {
  transform: translateX(-2px);
  border-color: color-mix(in srgb, var(--accent-glow) 42%, var(--glass-border));
  background: color-mix(in srgb, var(--glass-bg-strong) 82%, #ffffff 18%);
}

.drawer-theme-section {
  border: 1px solid color-mix(in srgb, var(--glass-border) 80%, #ffffff 20%);
  background: color-mix(in srgb, var(--glass-bg) 86%, #ffffff 14%);
  border-radius: 15px;
  padding: 0.8rem 0.75rem;
}

.drawer-theme-section .dropdown-label {
  margin-bottom: 0.6rem;
}

.drawer-logout-btn {
  margin-top: auto;
  border-color: color-mix(in srgb, #ff4d8d 50%, var(--glass-border));
  color: #ff7aa7;
}

.drawer-logout-btn:hover {
  border-color: #ff7aa7;
  background: rgba(255, 122, 167, 0.14);
}

.modal-overlay {
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(209, 121, 255, 0.14), rgba(10, 6, 26, 0.2) 45%, rgba(6, 4, 18, 0.76) 100%),
    rgba(8, 5, 22, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.modal-content {
  width: min(540px, 94vw);
  border-radius: 24px;
  border: 1px solid rgba(199, 168, 255, 0.34);
  background:
    radial-gradient(130% 100% at 80% 0%, rgba(168, 122, 255, 0.2), transparent 60%),
    radial-gradient(120% 80% at 0% 0%, rgba(255, 88, 193, 0.15), transparent 56%),
    linear-gradient(165deg, rgba(45, 24, 90, 0.74), rgba(24, 12, 56, 0.84));
  color: #f2ebff;
  box-shadow: 0 26px 62px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(26px) saturate(1.15);
  -webkit-backdrop-filter: blur(26px) saturate(1.15);
  padding: 1.45rem 1.5rem 1.3rem;
  position: relative;
  overflow: hidden;
  transform: translateY(16px) scale(0.96);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.28s ease;
}

.modal-content::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
  pointer-events: none;
}

.modal-content > * {
  position: relative;
  z-index: 1;
}

.modal-overlay.active .modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-title {
  color: #f7f0ff;
  font-size: 1.38rem;
  line-height: 1.2;
  margin-bottom: 0.25rem;
  text-align: left;
  padding-right: 2.5rem;
}

.modal-message {
  color: rgba(232, 223, 255, 0.86);
  text-align: left;
}

.modal-actions {
  border-top: 1px solid rgba(210, 187, 255, 0.2);
  justify-content: flex-end;
}

.modal-btn {
  border: 1px solid rgba(208, 183, 255, 0.24);
  background: rgba(126, 95, 178, 0.22);
  color: #f3ecff;
  border-radius: 12px;
  padding: 0.56rem 1.06rem;
}

.modal-btn:hover {
  background: rgba(154, 116, 219, 0.3);
}

.modal-btn.btn-primary {
  border-color: rgba(241, 98, 210, 0.45);
  background: linear-gradient(135deg, rgba(229, 71, 178, 0.38), rgba(145, 93, 229, 0.42));
  color: #fff5ff;
}

.modal-btn.btn-secondary {
  color: rgba(241, 233, 255, 0.95);
}

.modal-close {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(224, 205, 255, 0.3);
  background: rgba(171, 153, 201, 0.26);
  color: #f7f2ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
}

.modal-close:hover {
  background: rgba(190, 168, 231, 0.36);
}

.credit-shop-title,
.credit-shop-sub,
.credit-shop-note,
.credit-shop-footer,
.credit-pack-card strong,
.credit-pack-card span,
.credit-shop-uid,
.credit-shop-uid-label {
  color: var(--text-primary);
}

.credit-shop-title,
.credit-shop-sub,
.credit-shop-note,
.credit-shop-footer {
  display: none;
}

.credit-pack-card,
.credit-shop-uid-wrap {
  background: rgba(117, 89, 170, 0.2);
  border-color: rgba(210, 186, 255, 0.2);
}

.credit-shop-uid {
  background: rgba(62, 43, 101, 0.45);
}

.credit-shop-packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.credit-pack-card {
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.26rem;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid rgba(210, 186, 255, 0.24);
  padding: 0.6rem 0.42rem;
}

.credit-pack-card strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: #f4eeff;
  line-height: 1.2;
}

.credit-pack-get {
  font-size: 0.72rem;
  color: rgba(236, 224, 255, 0.82);
  line-height: 1.2;
}

.credit-pack-card span {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
}

.credit-pack-save {
  margin-top: 0.1rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #ff9cdc;
  letter-spacing: 0.01em;
}

.credit-pack-save.placeholder {
  visibility: hidden;
}

.credit-pack-card.featured {
  border-color: rgba(242, 56, 174, 0.8);
  background: linear-gradient(145deg, rgba(120, 30, 115, 0.38), rgba(52, 19, 89, 0.46));
  box-shadow: 0 0 0 1px rgba(242, 56, 174, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.credit-pack-card.featured strong::after {
  content: "";
  display: none;
}

.credit-shop-actions {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin: 0;
}

.credit-shop-btn.icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(215, 190, 255, 0.32);
  background: rgba(125, 95, 179, 0.24);
  color: #efe2ff !important;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.credit-shop-btn.icon:hover {
  background: rgba(156, 115, 222, 0.36);
  transform: translateY(-1px);
}

.credit-contact-instruction {
  margin: 0.62rem 0 0;
  text-align: center;
  font-size: 0.73rem;
  line-height: 1.35;
  color: rgba(232, 220, 255, 0.86);
}

#customModal .modal-actions {
  justify-content: center;
  align-items: center;
  border-top: 0;
  margin-top: 0.45rem;
  padding-top: 0.35rem;
  background: transparent;
}

#customModal .modal-content::before {
  display: none;
}

#customModal .modal-title {
  margin-bottom: 0.72rem;
  padding-bottom: 0.58rem;
  border-bottom: 1px solid rgba(214, 187, 255, 0.28);
}

#customModal .modal-message {
  margin-top: 0.12rem;
}

#customModal .modal-btn {
  appearance: none;
  -webkit-appearance: none;
  min-width: 140px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(241, 98, 210, 0.45);
  background: linear-gradient(135deg, rgba(229, 71, 178, 0.45), rgba(145, 93, 229, 0.5));
  color: #fff8ff;
  box-shadow: 0 8px 18px rgba(123, 62, 187, 0.35);
}

#customModal .modal-btn::before,
#customModal .modal-btn::after,
#customModal .modal-btn.btn-primary::before,
#customModal .modal-btn.btn-primary::after {
  content: none !important;
  display: none !important;
}

#customModal .modal-btn:hover,
#customModal .modal-btn:focus-visible {
  background: linear-gradient(135deg, rgba(237, 82, 188, 0.52), rgba(157, 102, 239, 0.58));
  border-color: rgba(247, 145, 226, 0.58);
  box-shadow: 0 10px 20px rgba(130, 70, 194, 0.42);
}

#customModal.modal-overlay.modal-no-hover .modal-btn:hover {
  background: linear-gradient(135deg, rgba(237, 82, 188, 0.52), rgba(157, 102, 239, 0.58));
  border-color: rgba(247, 145, 226, 0.58);
  color: #fff8ff;
}

#customModal .modal-close {
  z-index: 6;
  pointer-events: auto;
}

@media (max-width: 560px) {
  .credit-shop-packages {
    grid-template-columns: repeat(3, minmax(96px, 1fr));
    gap: 0.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.2rem;
  }

  .credit-pack-card {
    aspect-ratio: 1 / 1;
    min-width: 96px;
    padding: 0.52rem 0.34rem;
  }

  .credit-pack-card strong {
    font-size: 0.78rem;
  }

  .credit-pack-card span {
    font-size: 0.74rem;
  }
}

@media (max-width: 768px) {
  .dashboard-header .header-right .stat-pill {
    display: inline-flex;
  }

  .dashboard-header .stat-pill {
    min-width: 0;
    padding: 0.28rem 0.46rem;
    font-size: 0.7rem;
  }

  .dashboard-header .header-right {
    gap: 0.38rem !important;
    flex-wrap: nowrap;
  }

  .user-drawer {
    width: min(350px, 70vw);
    max-width: 70vw;
  }
}

@media (max-width: 560px) {
  .user-drawer {
    width: 70vw;
    max-width: 70vw;
    min-width: 220px;
  }

  .drawer-item {
    font-size: 0.84rem;
    padding: 0.66rem 0.76rem;
  }

  .modal-content {
    border-radius: 22px;
    padding: 1.35rem;
  }
}