* { 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;
}

.topbar nav {
  margin-left:auto; /* pushes nav to the far right */
}

.topbar nav a {
  margin-left: 20px;
  padding: 8px 18px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: 0.3s;
}

/* Default button style */
.topbar nav a {
  background: orange;
  color: #fff;
  border: none;
}

/* Hover effect */
.topbar nav a:hover {
  background: #ff8f42;
  color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}



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

/* 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:200px;
  margin-bottom:20px;
}
.left-panel h1 {
  font-size:32px;
  margin-bottom:10px;
}
.left-panel p {
  font-size:16px;
  max-width:300px;
  line-height:1.5;
}

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

/* Form */
form { display:flex; flex-direction:column; gap:15px; }
.form-group label { display:block; margin-bottom:6px; font-size:14px; color:#444; }
form input, form select {
  width:100%; padding:12px 14px;
  border:1px solid #f1c8a8; border-radius:8px;
  background:#fff7f0; font-size:14px;
  transition:0.3s;
}
form input:focus, form select:focus {
  border-color:#ff7f32;
  box-shadow:0 0 0 3px rgba(255,127,50,0.25);
  outline:none;
}

/* Messages */
.message { padding:12px; border-radius:6px; margin-bottom:15px; font-size:14px; font-weight:500; }
.error { background:#f44336; color:#fff; }
.success { background:#4caf50; color:#fff; }

/* Button */
.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; }

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