<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Login — DASH</title>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230D0D14'/%3E%3Ctext x='16' y='23' text-anchor='middle' font-family='Arial,sans-serif' font-weight='900' font-size='22' fill='%23E8C547'%3ED%3C/text%3E%3C/svg%3E">
  <style>
    :root { --bg: #F5F0E8; --card: #fff; --navy: #1A1A2E; --yellow: #E8C547; --text: #1A1A1A; --meta: #555; --border: #D4C5A9; --red: #e53935; }
    @media (prefers-color-scheme: dark) {
      :root { --bg: #121212; --card: #1E1E1E; --text: #E8E8E8; --meta: #AAA; --border: #333; }
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif;
           display: flex; align-items: center; justify-content: center; min-height: 100vh; }
    .login-box { background: var(--card); border: 1px solid var(--border); border-radius: 16px;
                 padding: 48px 40px; width: 340px; text-align: center; }
    .login-box .logo { font-size: 28px; font-weight: 900; color: var(--yellow); letter-spacing: 4px; margin-bottom: 6px; }
    .login-box .sub { font-size: 11px; color: var(--meta); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 28px; }
    .login-box input[type=password] { width: 100%; padding: 12px 16px; border: 1px solid var(--border);
      border-radius: 8px; background: var(--bg); color: var(--text); font-size: 14px; margin-bottom: 16px; }
    .login-box input:focus { outline: 2px solid var(--yellow); border-color: var(--yellow); }
    .login-box button { width: 100%; padding: 12px; border: none; border-radius: 8px;
      background: var(--yellow); color: var(--navy); font-size: 14px; font-weight: 700;
      cursor: pointer; letter-spacing: 1px; }
    .login-box button:hover { opacity: 0.9; }
    .error { color: var(--red); font-size: 12px; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form class="login-box" method="POST" action="/login">
    <div class="logo">DASH</div>
    <div class="sub">play · ClawdBot</div>
    
    <input type="password" name="password" placeholder="Password" autofocus>
    <button type="submit">Login</button>
  </form>
</body>
</html>