* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; }
body { background-color: #f8f9fa; }
.top-header { background: #fff; padding: 10px 50px; border-bottom: 3px solid #004a99; }
.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo-area { display: flex; align-items: center; }
.logo-area img { width: 70px; margin-right: 15px; }
.logo-area h1 { color: #004a99; font-size: 22px; }
.contact-info { text-align: right; font-size: 13px; color: #444; }
.blue-bar { background: #0056b3; color: white; text-align: center; padding: 12px; }
.blue-bar h2 { font-size: 16px; font-weight: 500; }
.wrapper { display: flex; max-width: 1200px; margin: 20px auto; gap: 20px; padding: 0 15px; }
.sidebar { flex: 0 0 300px; }
.menu-list { list-style: none; background: #fff; border: 1px solid #ddd; }
.menu-list li { padding: 12px; border-bottom: 1px solid #eee; font-size: 14px; }
.menu-list li span { background: #0056b3; color: #fff; padding: 2px 7px; border-radius: 50%; margin-right: 10px; }
.menu-list li.active { background: #e7f1ff; color: #0056b3; font-weight: bold; }
.main-content { flex: 1; display: flex; justify-content: center; }
.login-container { background: #fff; border: 1px solid #0056b3; width: 100%; max-width: 400px; }
.login-head { background: #0056b3; color: #fff; padding: 10px; font-weight: bold; }
form { padding: 20px; }
.input-group { margin-bottom: 15px; }
.input-field { display: flex; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; }
.input-field input { flex: 1; border: none; padding: 10px; outline: none; }
.domain { background: #f0f0f0; padding: 10px; border-left: 1px solid #ccc; font-size: 13px; }
.login-btn { background: #28a745; color: #fff; border: none; width: 100%; padding: 12px; border-radius: 4px; cursor: pointer; font-size: 16px; }
.site-footer { text-align: center; padding: 20px; background: #333; color: #fff; margin-top: 50px; }