*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --pink: #ffb3d1; --yellow: #fff0a0; --mint: #b8f0d8;
  --blue: #b3d9ff; --lavender: #d4b3ff; --text: #6a4a6a; --shadow: #e8a0c8;
}
body {
  font-family: 'Nunito', sans-serif;
  background: var(--blue);
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
}
.bg-blobs { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.bg-blobs span { position: absolute; border-radius: 50%; opacity: 0.35; animation: blobbie var(--d) ease-in-out infinite alternate; }
.bg-blobs span:nth-child(1){ width:320px;height:320px;background:var(--pink);   top:-80px;   left:-80px;  --d:7s; }
.bg-blobs span:nth-child(2){ width:260px;height:260px;background:var(--mint);   bottom:-60px;right:-60px; --d:9s; }
.bg-blobs span:nth-child(3){ width:180px;height:180px;background:var(--yellow); top:40%;     left:5%;     --d:6s; }
.bg-blobs span:nth-child(4){ width:140px;height:140px;background:var(--lavender);top:10%;    right:8%;    --d:8s; }
.bg-blobs span:nth-child(5){ width:100px;height:100px;background:var(--blue);   bottom:15%;  left:15%;    --d:5s; }
@keyframes blobbie { from{transform:translate(0,0) scale(1)} to{transform:translate(20px,15px) scale(1.08)} }

.floaties { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.floatie { position: absolute; opacity: 0.55; animation: floatie var(--d) ease-in-out infinite alternate; user-select: none; }
@keyframes floatie { from{transform:translateY(0) rotate(-8deg)} to{transform:translateY(-18px) rotate(8deg)} }

.card {
  position: relative; z-index: 1;
  background: white; border-radius: 32px;
  padding: 2.8rem 3.2rem;
  box-shadow: 0 8px 0 var(--shadow), 0 16px 40px rgba(180,100,160,0.15);
  text-align: center; max-width: 420px; width: 92%;
  animation: popin 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes popin { from{transform:scale(0.7) translateY(30px);opacity:0} to{transform:none;opacity:1} }
.card::before { content:'✦'; position:absolute; top:-18px; right:24px; font-size:2.2rem; color:var(--yellow); -webkit-text-stroke:2px #e8c840; animation:spin 4s linear infinite; }
.card::after  { content:'✦'; position:absolute; bottom:-14px; left:28px; font-size:1.5rem; color:var(--pink); -webkit-text-stroke:2px #e87ab0; animation:spin 6s linear infinite reverse; }
@keyframes spin { to{transform:rotate(360deg)} }

.logo {
  font-size: 4.5rem; font-weight: 900; letter-spacing: -2px; line-height: 1;
  margin-bottom: 0.2rem;
  background: linear-gradient(135deg, #ff80b3, #c080ff, #80c8ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 3px 0 #e8a0d0);
}
.tagline { font-size: 0.78rem; font-weight: 800; color: #c098b8; letter-spacing: 0.12em; margin-bottom: 2.2rem; }

/* Tabs */
.tabs { display: flex; gap: 8px; margin-bottom: 1.6rem; background: #fff0f8; border-radius: 50px; padding: 5px; }
.tab {
  flex: 1; padding: 0.6rem; border: none; border-radius: 50px; cursor: pointer;
  font-family: 'Nunito', sans-serif; font-size: 0.88rem; font-weight: 900;
  color: #c098b8; background: transparent;
  transition: all 0.2s;
}
.tab.active {
  background: linear-gradient(135deg, #ff80b3, #c080ff);
  color: white;
  box-shadow: 0 3px 0 #c060b0;
}

.panel { display: none; animation: slideIn 0.3s cubic-bezier(0.34,1.3,0.64,1) both; }
.panel.active { display: block; }
@keyframes slideIn { from{opacity:0;transform:translateY(10px) scale(0.97)} to{opacity:1;transform:none} }

.input-wrap { position: relative; margin-bottom: 1rem; }
.input-wrap .input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; pointer-events: none; }
input[type="text"] {
  width: 100%; border: 2.5px solid #f0c0dc; border-radius: 18px;
  background: #fff5fa; font-family: 'Nunito', sans-serif;
  font-size: 1rem; font-weight: 700; color: var(--text);
  padding: 0.85rem 1rem 0.85rem 2.6rem; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  box-shadow: 0 4px 0 #f0c0dc;
}
input[type="text"]::placeholder { color: #d0a8c0; font-weight: 700; }
input[type="text"]:focus {
  border-color: #c080ff;
  box-shadow: 0 4px 0 #c080ff, 0 0 0 4px rgba(192,128,255,0.15);
  transform: translateY(-2px); background: #fdf5ff;
}

/* Code boxes */
.code-boxes { display: flex; gap: 10px; justify-content: center; margin-bottom: 1.2rem; }
.code-boxes input {
  width: 64px; height: 72px; padding: 0;
  text-align: center; font-size: 1.8rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0;
  border-radius: 16px; box-shadow: 0 4px 0 #f0c0dc;
  caret-color: transparent;
}
.code-boxes input:focus { border-color: #c080ff; box-shadow: 0 4px 0 #c080ff, 0 0 0 4px rgba(192,128,255,0.15); transform: translateY(-3px) scale(1.06); }
.code-boxes input.filled { border-color: #ff80b3; box-shadow: 0 4px 0 #ff80b3; background: #fff0f6; }

.btn {
  width: 100%; border: none; border-radius: 50px;
  padding: 0.88rem 2rem; margin-top: 0.3rem;
  font-family: 'Nunito', sans-serif; font-size: 1.05rem; font-weight: 900;
  letter-spacing: 0.08em; cursor: pointer; color: white;
  background: linear-gradient(135deg, #ff80b3, #c080ff);
  box-shadow: 0 5px 0 #c060b0, 0 8px 20px rgba(200,100,180,0.3);
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 7px 0 #c060b0, 0 12px 24px rgba(200,100,180,0.35); }
.btn:active { transform: translateY(3px);  box-shadow: 0 2px 0 #c060b0; }
.btn:disabled { opacity: 0.6; pointer-events: none; }

.hint { margin-top: 0.9rem; font-size: 0.72rem; font-weight: 800; color: #d0a8c8; }

.toast {
  position: fixed; bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: white; border-radius: 50px; padding: 0.65rem 1.5rem;
  font-family: 'Nunito', sans-serif; font-size: 0.88rem; font-weight: 800; color: var(--text);
  box-shadow: 0 6px 0 var(--shadow), 0 10px 28px rgba(180,100,160,0.2);
  z-index: 999; transition: transform 0.4s cubic-bezier(0.34,1.3,0.64,1), opacity 0.4s;
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }