*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      font-family: 'Nunito', sans-serif;
      background: #0f0024;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px 16px;
      position: relative;
      overflow-x: hidden;
    }

    /* Glowing blobs in the background */
    .bg-blob {
      position: fixed;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
    }
    .blob1 { width: 500px; height: 500px; background: rgba(120, 0, 220, 0.4); top: -150px; left: -150px; }
    .blob2 { width: 400px; height: 400px; background: rgba(255, 60, 130, 0.25); bottom: -100px; right: -100px; }
    .blob3 { width: 300px; height: 300px; background: rgba(255, 180, 0, 0.15); top: 40%; left: 60%; }

    /* Confetti dots floating */
    .confetti-layer {
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none; z-index: 0;
      overflow: hidden;
    }
    .cf {
      position: absolute;
      border-radius: 2px;
      opacity: 0.6;
      animation: fall linear infinite;
    }
    @keyframes fall {
      0%   { transform: translateY(-20px) rotate(0deg); opacity: 0.7; }
      100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
    }

    /* ── CARD ── */
    .card {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 620px;
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 32px;
      overflow: hidden;
      box-shadow: 0 40px 100px rgba(0,0,0,0.5);
    }

    /* Rainbow top stripe */
    .stripe {
      height: 6px;
      background: linear-gradient(90deg, #ff6b6b, #ffa94d, #ffe066, #69db7c, #4dabf7, #cc5de8, #ff6b6b);
      background-size: 200%;
      animation: rainbow 4s linear infinite;
    }
    @keyframes rainbow { 0%{background-position:0%} 100%{background-position:200%} }

    .card-body { padding: 44px 48px 40px; }

    /* Header */
    .tag-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,215,0,0.12);
      border: 1px solid rgba(255,215,0,0.3);
      border-radius: 50px;
      padding: 5px 16px;
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #ffd700;
      margin-bottom: 24px;
    }

    .main-title {
      font-family: 'Pacifico', cursive;
      font-size: 48px;
      line-height: 1.2;
      color: #fff;
      margin-bottom: 4px;
      text-shadow: 0 4px 30px rgba(200,100,255,0.5);
    }
    .main-title .name { color: #ffd700; }

    .subtitle {
      font-size: 13px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      margin-bottom: 32px;
    }

    /* Divider */
    .divider {
      display: flex; align-items: center; gap: 12px; margin-bottom: 28px;
    }
    .div-line { flex:1; height:1px; background: rgba(255,255,255,0.1); }
    .div-icon { font-size: 18px; }

    /* Photo placeholder */
    .photo-placeholder {
      width: 100%;
      height: 240px;
      border-radius: 20px;
      border: 2px dashed rgba(255, 215, 0, 0.35);
      background: rgba(255,255,255,0.03);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 32px;
      position: relative;
      overflow: hidden;
    }
    /* Corner accents */
    .photo-placeholder::before,
    .photo-placeholder::after {
      content: '';
      position: absolute;
      width: 24px; height: 24px;
      border-color: rgba(255,215,0,0.5);
      border-style: solid;
    }
    .photo-placeholder::before { top: 10px; left: 10px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
    .photo-placeholder::after  { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }

    .photo-icon { font-size: 52px; filter: grayscale(0.3); }
    .photo-main-label {
      font-size: 15px;
      font-weight: 600;
      color: rgba(255,255,255,0.5);
    }
    .photo-sub-label {
      font-size: 11px;
      color: rgba(255,215,0,0.35);
      letter-spacing: 1px;
    }

    /* Message card */
    .message-card {
      background: rgba(255,255,255,0.06);
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.08);
      padding: 28px 30px;
      margin-bottom: 28px;
      position: relative;
    }
    .open-quote {
      position: absolute;
      top: -8px; left: 20px;
      font-size: 70px;
      line-height: 1;
      color: rgba(255,215,0,0.2);
      font-family: Georgia, serif;
    }
    .message-text {
      font-size: 15.5px;
      font-weight: 400;
      line-height: 1.9;
      color: rgba(255,255,255,0.8);
      position: relative;
      z-index: 1;
    }

    /* From section */
    .from-section {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 22px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,100,150,0.06));
      border: 1px solid rgba(255,215,0,0.15);
    }
    .from-avatar {
      width: 50px; height: 50px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ffd700, #ff6b6b);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
      font-weight: 700;
      color: #1a0030;
      flex-shrink: 0;
      box-shadow: 0 4px 15px rgba(255,215,0,0.3);
    }
    .from-meta { flex: 1; }
    .from-label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,215,0,0.5); margin-bottom: 3px; }
    .from-name  { font-size: 16px; font-weight: 700; color: #fff; }

    /* Footer */
    .card-footer {
      text-align: center;
      padding: 16px 48px 28px;
    }
    .footer-emojis { font-size: 24px; letter-spacing: 6px; }
    .footer-brand  { font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,0.2); text-transform: uppercase; margin-top: 8px; }

    @media (max-width: 500px) {
      .card-body { padding: 28px 22px 24px; }
      .main-title { font-size: 34px; }
      .card-footer { padding: 12px 22px 22px; }
    }

    .styled-btn {
  display: inline-block;
  margin-top: 24px;          /* space above */
  margin-bottom: 16px;       /* space below */
  padding: 14px 28px;        /* balanced padding */
  background: linear-gradient(135deg, #ff6b6b, #ffd700);
  color: #1a0030;
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 2;                /* keeps it above background blobs */
}

.styled-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 25px rgba(255, 215, 0, 0.45);
}

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