:root {
  color-scheme: light;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  color: #245747;
  background: #effbf3;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.92) 0 5%, transparent 25%),
    linear-gradient(135deg, #effcf4 0%, #dff5e6 50%, #e8f9f1 100%);
}

.page-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  position: relative;
  isolation: isolate;
  padding: 32px 20px;
}

.orb {
  position: fixed;
  z-index: -1;
  width: min(39vw, 420px);
  aspect-ratio: 1;
  border-radius: 999px;
  filter: blur(1px);
  opacity: 0.72;
}

.orb-left { left: -14%; bottom: -10%; background: #b6eeca; }
.orb-right { right: -13%; top: -15%; background: #d3f3a2; }

.friend-card {
  width: min(100%, 450px);
  padding: clamp(28px, 7vw, 44px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 24px 70px rgba(37, 105, 71, 0.14), inset 0 1px rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  animation: card-enter 650ms cubic-bezier(.2, .8, .2, 1) both;
}

.card-header { display: flex; align-items: center; gap: 11px; }

.brand-mark {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 13px;
  background: linear-gradient(145deg, #15b959, #62c739);
  box-shadow: 0 8px 18px rgba(35, 177, 78, 0.24);
}

.brand-mark span { width: 4px; border-radius: 99px; background: white; }
.brand-mark span:nth-child(1) { height: 10px; }
.brand-mark span:nth-child(2) { height: 17px; }
.brand-mark span:nth-child(3) { height: 7px; }

.eyebrow { margin: 0; color: #62aa6b; font-size: 11px; font-weight: 700; letter-spacing: .16em; }

.intro { margin: 30px 0 28px; }
h1 { margin: 0; color: #205d45; font-size: clamp(30px, 8vw, 39px); font-weight: 700; letter-spacing: -.05em; line-height: 1.16; }
.intro p { margin: 12px 0 0; color: #6e9680; font-size: 15px; line-height: 1.8; }

.qr-frame {
  display: grid;
  position: relative;
  aspect-ratio: 689 / 1154;
  place-items: center;
  overflow: hidden;
  padding: 15px;
  border: 1px solid #dcf2e2;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(35, 115, 69, 0.09);
}

.qr-frame img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }

.scan-line {
  position: absolute;
  left: 10%;
  width: 80%;
  height: 1px;
  opacity: .5;
  background: linear-gradient(90deg, transparent, #52ca69, transparent);
  animation: scan 3s ease-in-out infinite;
}

.leaf { position: absolute; z-index: 1; top: 12px; right: 16px; color: #82d571; font-size: 19px; }

.qr-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
  border-radius: 12px;
  color: #72ad80;
  text-align: center;
  background: linear-gradient(135deg, #f1fbf3, #e4f7e9);
}

.qr-placeholder[hidden] { display: none; }
.placeholder-icon { color: #41b85a; font-size: 48px; }
.qr-placeholder p { margin: 8px 0 0; font-size: 13px; }

.scan-tip { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; color: #67a176; font-size: 13px; }
.tip-icon { display: inline-grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: #6ccd69; font-size: 17px; }
.closing { margin: 26px 0 0; color: #8caf97; font-size: 13px; text-align: center; }

@keyframes card-enter { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes scan { 0%, 100% { top: 15%; opacity: 0; } 18%, 82% { opacity: .55; } 50% { top: 85%; } }

@media (prefers-reduced-motion: reduce) { .friend-card, .scan-line { animation: none; } }