body{
 margin:0;
 font-family:Segoe UI,Arial;
 background:#eef2f6;
}

.header{
 background:#0f172a;
 color:#fff;
 padding:16px 30px;
 font-size:18px;
 font-weight:600;
}

.layout{
 display:flex;
}

.sidebar{
 width:220px;
 background:#111827;
 min-height:100vh;
 color:#fff;
 padding-top:20px;
}

.sidebar div{
 padding:14px 20px;
 cursor:pointer;
}

.sidebar div:hover{
 background:#1f2937;
}

.content{
 flex:1;
 padding:40px;
 display:flex;
 justify-content:center;
 align-items:flex-start;
}

.card{
 background:#fff;
 padding:25px;
 border-radius:10px;
 box-shadow:0 4px 12px rgba(0,0,0,0.1);
 max-width:500px;
}

input{
 width:100%;
 padding:12px;
 margin-top:10px;
 border:1px solid #ccc;
 border-radius:6px;
}

button{
 margin-top:12px;
 padding:12px;
 width:100%;
 background:#0b7dda;
 color:#fff;
 border:none;
 border-radius:6px;
 font-weight:600;
 cursor:pointer;
}

button:hover{
 background:#095ea8;
}
#loginArea{
 display:flex;
 justify-content:center;
 align-items:center;
 height:calc(100vh - 60px);
}