:root{
  --bg1: #0b1020;
  --bg2: #131a33;
  --card: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --accent: #ff4d7d;
  --good: rgba(34,197,94,.12);
  --bad: rgba(239,68,68,.12);
  --goodBorder: rgba(34,197,94,.35);
  --badBorder: rgba(239,68,68,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 20%, rgba(255,77,125,.18), transparent 60%),
              radial-gradient(900px 700px at 80% 70%, rgba(99,102,241,.16), transparent 55%),
              linear-gradient(160deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

body.theme-green{
  background: radial-gradient(1200px 800px at 20% 20%, rgba(34,197,94,.20), transparent 60%),
              radial-gradient(900px 700px at 80% 70%, rgba(99,102,241,.16), transparent 55%),
              linear-gradient(160deg, #07120c, #0f1f16);
}
body.theme-red{
  background: radial-gradient(1200px 800px at 20% 20%, rgba(239,68,68,.22), transparent 60%),
              radial-gradient(900px 700px at 80% 70%, rgba(99,102,241,.16), transparent 55%),
              linear-gradient(160deg, #1a0708, #241112);
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.card{
  position:relative;
  width:min(520px, 96vw);
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 22px;
  padding: 22px 20px 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 35px rgba(0,0,0,.35);
}

.top{margin-bottom:14px}
.title{
  margin:0 0 6px 0;
  font-size: 22px;
  letter-spacing:.2px;
}
.subtitle{
  margin:0;
  font-size:14px;
  color:var(--muted);
  line-height:1.35;
}
.field{margin-top:14px; display:flex; gap:10px; align-items:flex-end}
label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline:none;
  font-size: 15px;
}
input:focus{border-color: rgba(255,77,125,.55); box-shadow: 0 0 0 4px rgba(255,77,125,.12)}
.btn{
  white-space:nowrap;
  padding: 12px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,77,125,.45);
  background: rgba(255,77,125,.16);
  color: var(--text);
  font-weight: 600;
  cursor:pointer;
  transition: transform .05s ease;
}
.btn:active{transform: translateY(1px)}
.hint{margin-top:10px; font-size:12px; color:var(--muted)}
.notice{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.9);
}

.notice.good{border-color: var(--goodBorder); background: var(--good)}
.notice.bad{border-color: var(--badBorder); background: var(--bad)}

.codeBox{
  display:flex;
  gap:10px;
  margin-top:14px;
}
.codeBox input{
  text-transform: uppercase;
  letter-spacing: .25em;
  text-align:center;
}
.small{
  font-size:12px; color:var(--muted)
}

.hearts{
  position:absolute; inset:-10px;
  pointer-events:none;
  overflow:hidden;
  border-radius:22px;
}
.heart{
  position:absolute;
  width:14px; height:14px;
  transform: rotate(45deg);
  opacity:.8;
  background: rgba(255,77,125,.35);
  filter: blur(.2px);
}
.heart:before,.heart:after{
  content:'';
  position:absolute;
  width:14px; height:14px;
  border-radius:50%;
  background: inherit;
}
.heart:before{left:-7px}
.heart:after{top:-7px}

@keyframes floatUp{
  0%{ transform: translateY(0) rotate(45deg); opacity:0}
  10%{opacity:.9}
  100%{ transform: translateY(-120vh) rotate(45deg); opacity:0}
}

@import url("secret-text.css");