:root{
  --bg:#e0e5ec;
  --txt:#4a5568;
  --accent:#4f46e5;
  --muted:#6b7280;
  --muted2:#9ca3af;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  background: var(--bg);
  color: var(--txt);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

.page{
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
}

.neu-box{
  width: 100%;
  max-width: 448px; /* sama kayak max-w-md */
  text-align:center;
  background: var(--bg);
  border-radius: 24px;
  padding: 32px;
  box-shadow:
    9px 9px 16px rgba(163,177,198,0.60),
    -9px -9px 16px rgba(255,255,255,0.50);
}

@media (min-width: 768px){
  .neu-box{ padding: 48px; } /* md:p-12 */
}

.giftWrap{
  display:flex;
  justify-content:center;
  margin-bottom: 24px;
}

.neu-icon{
  width:64px;
  height:64px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  color: #7c3aed; /* text-purple-600 feel */
  background: var(--bg);
  box-shadow:
    6px 6px 10px rgba(163,177,198,0.70),
    -6px -6px 10px rgba(255,255,255,0.80);
}

h1{
  font-size: 24px;
  font-weight: 800;
  color: #374151; /* text-gray-700 */
  margin-bottom: 8px;
}

.sub{
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 32px;
}

.form{
  display:flex;
  flex-direction:column;
  gap: 24px; /* space-y-6 */
}

.group{
  text-align:left;
}

.label{
  display:block;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin-left: 12px;
  margin-bottom: 8px;
  letter-spacing: .06em;
}

.neu-input{
  width:100%;
  padding: 16px 24px; /* py-4 px-6 */
  border-radius: 12px; /* rounded-xl */
  border:none;
  outline:none;
  background: var(--bg);
  color: var(--txt);
  box-shadow:
    inset 6px 6px 10px rgba(163,177,198,0.70),
    inset -6px -6px 10px rgba(255,255,255,0.80);
  transition: box-shadow .2s ease;
}

.neu-input:focus{
  box-shadow:
    inset 4px 4px 8px rgba(163,177,198,0.70),
    inset -4px -4px 8px rgba(255,255,255,0.80);
}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;}

.neu-btn{
  width:100%;
  padding: 16px 0; /* py-4 */
  border-radius: 12px;
  border:none;
  cursor:pointer;
  background: var(--bg);
  color: var(--accent);
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow:
    6px 6px 10px rgba(163,177,198,0.70),
    -6px -6px 10px rgba(255,255,255,0.80);
  transition: transform .1s ease, box-shadow .1s ease;
  margin-top: 16px; /* mt-4 */
}

.neu-btn:active{
  box-shadow:
    inset 4px 4px 8px rgba(163,177,198,0.70),
    inset -4px -4px 8px rgba(255,255,255,0.80);
  transform: translateY(2px);
}

.msg{
  margin-top: 16px;
  font-size: 13px;
  color: #b42318;
  font-weight: 700;
  text-align:center;
}

.foot{
  margin-top: 32px;
  font-size: 12px;
  color: var(--muted2);
}
.msg.ok{ color:#0f766e; }
.msg.err{ color:#b42318; }