body{
margin:0;
font-family:Inter,system-ui,Arial;
background:#0f1115;
color:white;
}

.container{
max-width:1200px;
margin:auto;
padding:20px;
}

.header{
background:#12151c;
border-bottom:1px solid #1f2430;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-weight:700;
font-size:20px;
}

nav a{
margin-left:15px;
text-decoration:none;
color:white;
opacity:0.8;
}

nav a:hover{
opacity:1;
}

.btn{
padding:10px 16px;
border-radius:8px;
background:#222;
}

.primary{
background:linear-gradient(135deg,#5b8cff,#7b5cff);
box-shadow:0 0 15px rgba(91,140,255,0.3);
transition:all 0.25s ease;
}

.primary:hover{
transform:translateY(-2px);
box-shadow:0 0 25px rgba(91,140,255,0.5);
}

.hero{
padding:120px 0;
text-align:center;
}

.hero h1{
font-size:48px;
margin-bottom:20px;
}

.hero p{
opacity:0.8;
}

.large{
font-size:18px;
}

.features{
padding:60px 0;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.card{
background:#151922;
padding:30px;
border-radius:12px;
}

.footer{
border-top:1px solid #1f2430;
text-align:center;
padding:20px;
opacity:0.6;
} 

.hero p{
opacity:0.8;
margin-bottom:30px;
} 

.hero h1{
font-size:48px;
margin-bottom:20px;
letter-spacing:-1px;
} 

/* Auth UI */
.auth-wrap{
min-height: calc(100vh - 140px);
display:flex;
align-items:center;
justify-content:center;
padding:40px 20px;
position:relative;
overflow:hidden;
}

.auth-wrap::before{
content:"";
position:absolute;
inset:-200px;
background:
radial-gradient(circle at 20% 20%, rgba(91,140,255,0.25), transparent 45%),
radial-gradient(circle at 80% 30%, rgba(123,92,255,0.22), transparent 50%),
radial-gradient(circle at 50% 80%, rgba(0,255,170,0.10), transparent 55%);
filter: blur(10px);
pointer-events:none;
}

.auth-card{
width: min(520px, 100%);
background: rgba(18,21,28,0.72);
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 26px;
position:relative;
box-shadow: 0 20px 80px rgba(0,0,0,0.45);
}

.auth-card h1{
margin: 0 0 10px;
font-size: 28px;
letter-spacing: -0.6px;
}

.auth-sub{
opacity:0.75;
margin: 0 0 18px;
}

.form-row{ margin-top: 14px; }
.form-row label{ display:block; font-size:13px; opacity:0.85; margin-bottom:6px; }

.input{
width:100%;
padding:12px 14px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.10);
background: rgba(15,17,21,0.55);
color:#fff;
outline:none;
}

.input:focus{
border-color:#5b8cff;
box-shadow: 0 0 0 4px rgba(91,140,255,0.15);
}

.auth-actions{
display:flex;
gap:10px;
margin-top:18px;
}

.btn.full{ width:100%; text-align:center; display:inline-block; }
.muted-link{ opacity:0.8; color:#fff; text-decoration:none; }
.muted-link:hover{ opacity:1; text-decoration:underline; }

.alert{
margin-top:14px;
padding:12px 14px;
border-radius:12px;
border:1px solid rgba(255,90,120,0.35);
background: rgba(255,0,80,0.07);
}
.alert ul{ margin:0; padding-left:18px; } 

.logo a{
text-decoration:none;
color:#fff;
font-weight:700;
font-size:20px;
letter-spacing:-0.5px;
}

.logo a:hover{
opacity:0.85;
} 

.card{
transition: all 0.2s ease;
cursor:pointer;
}

.card:hover{
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}