*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{
--primary:#2563eb;
--primary-dark:#1d4ed8;
--primary-soft:#eff6ff;
--dark:#0f172a;
--text:#334155;
--muted:#64748b;
--line:#e2e8f0;
--bg:#f6f8fb;
--white:#ffffff;
--shadow:0 20px 45px rgba(15,23,42,.08);
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:var(--bg);
color:var(--dark);
min-height:100vh;
line-height:1.7;
}

.topbar{
width:100%;
height:76px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 7%;
background:rgba(255,255,255,.96);
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:1000;
backdrop-filter:blur(14px);
}

.logo{
font-size:1.45rem;
font-weight:900;
letter-spacing:-.03em;
color:var(--primary);
}

.back-btn{
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 17px;
border-radius:14px;
font-size:.92rem;
font-weight:800;
background:var(--primary-soft);
color:var(--primary);
border:1px solid #dbeafe;
transition:.25s;
}

.back-btn:hover{
transform:translateY(-2px);
background:#dbeafe;
}

.auth-section,
.register-section,
.verify-section{
width:100%;
min-height:calc(100vh - 76px);
padding:70px 7%;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(circle at top right,rgba(37,99,235,.12),transparent 34%),
linear-gradient(180deg,#ffffff 0%,#f6f8fb 100%);
}

.auth-card,
.register-card,
.verify-card{
width:100%;
max-width:540px;
background:white;
border:1px solid var(--line);
border-radius:30px;
padding:42px;
box-shadow:var(--shadow);
}

.auth-badge{
display:inline-flex;
align-items:center;
width:max-content;
padding:8px 14px;
border-radius:999px;
background:var(--primary-soft);
color:var(--primary);
font-size:.72rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
margin-bottom:20px;
}

.auth-card h1,
.register-card h1,
.verify-card h1{
font-size:clamp(2rem,5vw,3rem);
line-height:1.08;
letter-spacing:-.05em;
font-weight:900;
color:var(--dark);
margin-bottom:14px;
}

.auth-card p,
.register-card p,
.verify-card p{
font-size:1rem;
color:var(--muted);
line-height:1.8;
margin-bottom:28px;
}

.input-group,
.form-group{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:20px;
}

.input-group label,
.form-group label{
font-size:.92rem;
font-weight:800;
color:#334155;
}

.input-group input,
.form-group input{
width:100%;
border:1px solid var(--line);
outline:none;
background:#f8fafc;
border-radius:17px;
padding:16px 18px;
font-family:'Inter',sans-serif;
font-size:1rem;
color:#0f172a;
transition:.25s;
}

.input-group input:focus,
.form-group input:focus{
background:white;
border-color:var(--primary);
box-shadow:0 0 0 5px rgba(37,99,235,.10);
}

.input-group input::placeholder,
.form-group input::placeholder{
color:#94a3b8;
}

.login-btn,
.register-btn,
.verify-btn,
.resend-btn{
width:100%;
border:none;
border-radius:17px;
padding:16px 18px;
font-family:'Inter',sans-serif;
font-size:1rem;
font-weight:900;
cursor:pointer;
transition:.25s;
}

.login-btn,
.register-btn,
.verify-btn{
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:white;
box-shadow:0 14px 28px rgba(37,99,235,.22);
}

.login-btn:hover,
.register-btn:hover,
.verify-btn:hover{
transform:translateY(-2px);
}

.resend-btn{
margin-top:12px;
background:var(--primary-soft);
color:var(--primary);
border:1px solid #dbeafe;
}

.resend-btn:hover{
background:#dbeafe;
}

.divider{
display:flex;
align-items:center;
gap:16px;
margin:24px 0;
color:#94a3b8;
font-weight:800;
}

.divider::before,
.divider::after{
content:"";
height:1px;
background:var(--line);
flex:1;
}

.social-btn{
width:100%;
padding:15px 16px;
border:1px solid var(--line);
border-radius:17px;
font-size:.98rem;
font-weight:800;
font-family:'Inter',sans-serif;
cursor:pointer;
background:white;
color:#334155;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
transition:.25s;
margin-bottom:14px;
}

.social-btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 26px rgba(15,23,42,.08);
border-color:#cbd5e1;
}

.social-btn svg{
width:22px;
height:22px;
flex-shrink:0;
}

.small,
.login-text{
text-align:center;
font-size:.96rem;
color:#64748b;
margin:18px 0 0;
}

.small a,
.login-text a{
color:var(--primary);
font-weight:900;
text-decoration:none;
}

.resend-msg{
text-align:center;
margin-top:12px;
font-size:.92rem;
font-weight:700;
color:#64748b;
}

.security-note{
margin-top:20px;
padding:14px 16px;
border-radius:16px;
background:#f8fafc;
border:1px solid var(--line);
color:#64748b;
font-size:.92rem;
font-weight:700;
text-align:center;
}

@media(max-width:560px){
.topbar{
height:68px;
padding:0 5%;
}

.logo{
font-size:1.25rem;
}

.back-btn{
padding:8px 13px;
font-size:.85rem;
border-radius:12px;
}

.auth-section,
.register-section,
.verify-section{
padding:42px 5%;
align-items:flex-start;
}

.auth-card,
.register-card,
.verify-card{
padding:30px 24px;
border-radius:24px;
}

.auth-card h1,
.register-card h1,
.verify-card h1{
font-size:2.05rem;
}

.auth-card p,
.register-card p,
.verify-card p{
font-size:.95rem;
}
}