/* Simple, clean "Hollow-esk" vibe */
:root{
  --ink:#1f1b24;
  --moss:#315b3a;
  --moss-2:#3b6a45;
  --dusk:#4b3d5a;
  --parchment:#efe8db;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(75,61,90,.35), transparent 60%),
    radial-gradient(900px 400px at 10% 110%, rgba(49,91,58,.28), transparent 60%),
    linear-gradient(180deg, #0e0f10 0%, #172018 60%, #0f1113 100%);
}

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

.brand h1{
  margin:0 0 8px;
  letter-spacing:.06em;
  font-weight:800;
  font-size:clamp(40px, 6vw, 72px);
  background: linear-gradient(135deg, var(--parchment), #d8cdbb);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 2px 32px rgba(239,232,219,.25);
}

.tag{
  margin:0;
  color:#e7e0d1;
  opacity:.9;
  font-size:clamp(14px, 2.2vw, 18px);
  text-align:center;
}

.card{
  width:min(680px, 92vw);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.92));
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:24px;
}

.card h2{margin-top:0; color:var(--moss)}

.form{
  display:flex;
  gap:12px;
  margin:16px 0 4px;
  flex-wrap:wrap;
}
.form input{
  flex:1 1 240px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #cfd3cf;
  outline:none;
}
.form button{
  padding:12px 18px;
  border-radius:12px;
  border:0;
  background:linear-gradient(135deg, var(--moss), var(--moss-2));
  color:white;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(49,91,58,.35);
}
.form button:hover{transform:translateY(-1px)}

.note{color:#566; font-size:14px}

.foot{color:#c9c2b4; font-size:13px}