<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Partner Login — Society Rides</title>
<style>
:root {
  --green: #1D9E75; --green-d: #0F6B4F; --navy: #0A2342;
  --paper: #F7F5F0; --white: #fff; --ink: #1A2A1A;
  --muted: #5A6B5A; --rule: #D8E8DC; --red: #E53935;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--navy); min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.card {
  background: var(--white); border-radius: 16px;
  padding: 36px 32px; width: 100%; max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.brand { text-align: center; margin-bottom: 28px; }
.brand-name {
  font-size: 1.5rem; font-weight: 700; color: var(--navy);
  display: block; margin-bottom: 4px;
}
.brand-name span { color: var(--green); }
.brand-sub { font-size: 0.8rem; color: var(--muted); letter-spacing: .04em; }
.badge {
  display: inline-block; background: var(--green);
  color: white; font-size: 0.72rem; font-weight: 600;
  padding: 4px 12px; border-radius: 20px; margin-bottom: 20px;
}
h1 {
  font-size: 1.1rem; color: var(--ink);
  font-weight: 600; margin-bottom: 20px; text-align: center;
}
label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 5px; font-weight: 500; }
input[type=text], input[type=password] {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--rule); border-radius: 8px;
  font-size: 0.95rem; color: var(--ink); margin-bottom: 16px;
  outline: none; transition: border-color .2s;
  background: var(--paper);
}
input:focus { border-color: var(--green); background: white; }
.btn {
  width: 100%; padding: 14px;
  background: var(--green); color: white;
  border: none; border-radius: 8px;
  font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: background .2s; margin-bottom: 16px;
}
.btn:hover { background: var(--green-d); }
.error {
  background: #fdecea; border: 1px solid #f5c6c6;
  border-radius: 8px; padding: 10px 14px;
  color: var(--red); font-size: 0.85rem; margin-bottom: 16px;
}
.help {
  text-align: center; font-size: 0.8rem; color: var(--muted);
}
.help a { color: var(--green); text-decoration: none; font-weight: 500; }
</style>
</head>
<body>
<div class="card">
  <div class="brand">
    <span class="brand-name">Society <span>Rides</span></span>
    <span class="brand-sub">Community Partner Portal</span>
  </div>
  <div style="text-align:center">
    <span class="badge">Partner Login</span>
  </div>
  <h1>Welcome back</h1>

  
  <form method="POST" autocomplete="on">
    <label>Username</label>
    <input type="text" name="username" placeholder="e.g. priya-4821"
           value=""
           autocomplete="username" autofocus required>

    <label>Password</label>
    <input type="password" name="password"
           autocomplete="current-password" required>

    <button type="submit" class="btn">Sign in →</button>
  </form>

  <div class="help">
    Trouble logging in?
    <a href="https://wa.me/919810266874?text=Hi,+I+am+a+Society+Rides+partner+and+need+help+with+my+assignment." target="_blank">WhatsApp us</a>
  </div>
</div>
</body>
</html>
