* { margin:0; padding:0; box-sizing:border-box; font-family:"Segoe UI", sans-serif; }
body { background:#f9fafc; display:flex; flex-direction:column; min-height:100vh; }

/* Top Bar */
.topbar {
  background:#fff;
  border-bottom:1px solid #eee;
  padding:12px 40px;
  display:flex;
  align-items:center;
  box-shadow:0 2px 5px rgba(0,0,0,0.05);
}
.topbar .logo {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:bold;
  color:#333;
}

.forgot-container {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 350px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  text-align: center;
}

.forgot-container h2 {
  margin-bottom: 20px;
  color: #333;
}

.forgot-container input {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
}

.login-btn {
  display: inline-block;
  width: 100%;
  padding: 12px 20px;
  margin-top: 15px;
  background: linear-gradient(135deg, #ff7b00, #6a0dad);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.login-btn:hover {
  background: linear-gradient(135deg, #ff9a33, #8a2be2);
  transform: translateY(-2px);
}

.error, .success {
  padding: 12px;
  margin: 15px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Error message */
.error {
  background: #ffe6e6;
  color: #b30000;
  border: 1px solid #ff9999;
}

/* Success message */
.success {
  background: #e6ffe6;
  color: #006600;
  border: 1px solid #99ff99;
}


.topbar .logo img {
  height:32px;
}
.topbar nav {
  margin-left:auto;
}
.topbar nav a {
  margin-left: 20px;
  padding: 8px 18px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: 0.3s;
  background: orange;
  color: #fff;
}
.topbar nav a:hover {
  background: #ff8f42;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

/* Layout */
.split-container {
  flex:1;
  display:flex;
  min-height:calc(100vh - 120px);
}

/* Left Panel */
.left-panel {
  flex:1;
  background:linear-gradient(135deg,#ff7f32,#e56d20);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:40px;
  text-align:center;
}
.left-panel img {
  max-width:160px;
  margin-bottom:20px;
}
.left-panel h1 {
  font-size:32px;
  margin-bottom:10px;
}
.left-panel p {
  font-size:15px;
  max-width:320px;
  line-height:1.6;
}

/* Right Panel */
.right-panel {
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#fff7f0;
  padding:40px;
}
.form-box {
  background:#fff;
  padding:40px;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  width:100%;
  max-width:420px;
  text-align:center;
}
.form-box h2 {
  font-size:24px;
  margin-bottom:10px;
  color:#ff7f32;
}
.form-box p {
  font-size:14px;
  margin-bottom:20px;
  color:#555;
}

/* Form */
form { display:flex; flex-direction:column; gap:15px; }
form input {
  width:100%;
  padding:12px 14px;
  border:1px solid #f1c8a8;
  border-radius:8px;
  background:#fff7f0;
  font-size:14px;
  transition:0.3s;
}
form input:focus {
  border-color:#ff7f32;
  box-shadow:0 0 0 3px rgba(255,127,50,0.25);
  outline:none;
}
.btn-submit {
  padding:12px;
  border:none;
  border-radius:8px;
  background:#ff7f32;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
}
.btn-submit:hover { background:#e56d20; }

/* Message */
.msg {
  margin:10px 0;
  padding:10px;
  background:#e8f0fe;
  border-left:4px solid #0078d4;
  font-size:14px;
  text-align:left;
}

/* Footer */
footer {
  text-align:center;
  background:#000;
  color:#fff;
  padding:12px;
  font-size:13px;
}