<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录 · 期货量化</title>
<style>
  :root {
    --bg: #f8fafc; --surface: #fff; --fg: #1e293b; --sub: #64748b;
    --border: #e2e8f0; --accent: #3b82f6; --danger: #ef4444;
  }
  [data-theme="dark"] {
    --bg: #0f172a; --surface: #1e293b; --fg: #e2e8f0; --sub: #94a3b8;
    --border: #334155; --accent: #60a5fa; --danger: #f87171;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
    background: var(--bg); color: var(--fg);
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
  }
  .login-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 40px; width: 360px; max-width: 90vw;
  }
  .login-box h1 { font-size: 1.3rem; text-align: center; margin-bottom: 8px; }
  .login-box .sub { color: var(--sub); font-size: 0.85rem; text-align: center; margin-bottom: 28px; }
  .form-group { margin-bottom: 16px; }
  .form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--sub); margin-bottom: 5px; }
  .form-group input {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: 6px; font-size: 0.9rem; background: var(--bg); color: var(--fg);
  }
  .form-group input:focus { outline: none; border-color: var(--accent); }
  .btn {
    width: 100%; padding: 10px; border: none; border-radius: 6px;
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    background: var(--accent); color: #fff; margin-top: 8px;
  }
  .btn:hover { opacity: 0.9; }
  .error {
    background: #fef2f2; color: var(--danger); padding: 10px 14px;
    border-radius: 6px; font-size: 0.85rem; margin-bottom: 16px; text-align: center;
  }
  .toggle-btn {
    position: fixed; top: 16px; right: 24px;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--fg); padding: 6px 14px; border-radius: 6px;
    cursor: pointer; font-size: 0.82rem; z-index: 10;
  }
  .toggle-btn:hover { opacity: 0.8; }
</style>
</head>
<body>
<button class="toggle-btn" id="themeToggle">🌙 暗色模式</button>
<div class="login-box">
  <h1>📊 期货量化系统</h1>
  <p class="sub">请输入账号密码</p>

  {% if error %}
  <div class="error">{{ error }}</div>
  {% endif %}

  <form method="post">
    <div class="form-group">
      <label>用户名</label>
      <input type="text" name="username" required autofocus>
    </div>
    <div class="form-group">
      <label>密码</label>
      <input type="password" name="password" required>
    </div>
    <button type="submit" class="btn">登 录</button>
  </form>
</div>

<script>
var themeBtn = document.getElementById('themeToggle');
themeBtn.addEventListener('click', toggleTheme);
function setTheme(dark) {
  if (dark) {
    document.documentElement.setAttribute('data-theme', 'dark');
    document.documentElement.style.colorScheme = 'dark';
    themeBtn.textContent = '☀️ 亮色模式';
  } else {
    document.documentElement.removeAttribute('data-theme');
    document.documentElement.style.colorScheme = 'light';
    themeBtn.textContent = '🌙 暗色模式';
  }
  try { localStorage.setItem('ft-theme', dark ? 'dark' : 'light'); } catch(e) {}
}
function toggleTheme() {
  setTheme(document.documentElement.getAttribute('data-theme') !== 'dark');
}
(function() {
  try {
    var s = localStorage.getItem('ft-theme');
    if (s === 'dark' || (!s && matchMedia('(prefers-color-scheme: dark)').matches)) setTheme(true);
  } catch(e) {}
})();
</script>
</body>
</html>
