<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Bybit MCP{% endblock %}</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f1117; color: #e0e0e0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
  .card { background: #1a1d27; border: 1px solid #2a2d3a; border-radius: 12px; padding: 2rem; width: 100%; max-width: 440px; }
  h1 { font-size: 1.4rem; margin-bottom: 1.5rem; color: #fff; }
  label { display: block; font-size: 0.85rem; color: #9ca3af; margin-bottom: 0.3rem; }
  input[type="text"], input[type="password"], select { width: 100%; padding: 0.6rem 0.8rem; background: #0f1117; border: 1px solid #2a2d3a; border-radius: 6px; color: #e0e0e0; font-size: 0.95rem; margin-bottom: 1rem; }
  input:focus, select:focus { outline: none; border-color: #f7a600; }
  button { width: 100%; padding: 0.7rem; background: #f7a600; color: #000; border: none; border-radius: 6px; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
  button:hover { background: #e69500; }
  .error { background: #3b1a1a; border: 1px solid #6b2a2a; color: #f87171; padding: 0.6rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.85rem; }
  .success { background: #1a3b2a; border: 1px solid #2a6b3a; color: #6ee7b7; padding: 0.6rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.85rem; }
  .toggle { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
  .toggle input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: #f7a600; }
  .toggle label { margin-bottom: 0; }
  .subtitle { font-size: 0.85rem; color: #6b7280; margin-bottom: 1.5rem; }
</style>
</head>
<body>
<div class="card">
{% block content %}{% endblock %}
</div>
</body>
</html>
