:root {
 --bg-red:#6e0000;
 --bg-grey:#1a1a1a;
 --accent1:#ff2d55;
 --accent2:#ff6b81;
 --muted:#9aa4ab;
}

body{
 margin:0;
 height:100vh;
 display:flex;
 justify-content:center;
 align-items:center;
 background:linear-gradient(135deg,var(--bg-red),var(--bg-grey));
 font-family:Inter,system-ui;
 color:#fff;
}

.logo-holder{
 display:flex;
 justify-content:center;
 margin-bottom:8px;
}

.logo{
 width:80px;
 height:80px;
 border-radius:15px;
 box-shadow:0 0 20px rgba(255,45,85,0.5);
}

.wrap{width:100%;display:flex;justify-content:center;}

.glass{
 background:rgba(255,255,255,0.04);
 border-radius:18px;
 padding:24px;
 border:1px solid rgba(255,255,255,0.1);
 backdrop-filter:blur(22px) saturate(140%);
 width:350px;
 text-align:center;
}

.title{margin:10px 0 4px;font-size:20px;font-weight:700}
.tagline{font-size:13px;color:var(--muted);margin-bottom:18px}

.tabs{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:6px;
 margin-bottom:16px;
}

.tab{
 padding:8px;
 font-size:12px;
 border-radius:10px;
 background:rgba(255,255,255,0.05);
 color:var(--muted);
 cursor:pointer;
 border:1px solid rgba(255,255,255,0.04);
}

.tab.active{
 background:linear-gradient(90deg,var(--accent1),var(--accent2));
 color:#14080a;
 font-weight:700;
}

.form{display:none;flex-direction:column;gap:10px;text-align:left}
.form.active{display:flex}

label{font-size:13px;font-weight:700}
.bm{font-size:11px;font-style:italic;color:var(--muted)}

input{
 width:100%;
 padding:10px;
 background:rgba(255,255,255,0.05);
 border-radius:10px;
 border:1px solid rgba(255,255,255,0.08);
 color:#fff;
}

.btn{
 margin-top:10px;
 padding:10px 12px;
 border:0;
 border-radius:12px;
 background:linear-gradient(90deg,var(--accent1),var(--accent2));
 font-weight:700;
 cursor:pointer;
}

.btn:hover{transform:translateY(-2px);transition:.25s}