<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <script src="/static/instance_theme.js?v=4"></script>
    <meta name="theme-color" content="#0b0d14">
    <meta name="apple-mobile-web-app-title" content="{{ pwa_app_name }}">
    <link rel="icon" href="/static/icons/favicon.ico" sizes="32x32">
    <link rel="icon" href="/static/icons/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/static/icons/apple-touch-icon.png">
    <link rel="manifest" href="/static/icons/manifest.webmanifest">
    <title>登录 · {{ pwa_app_name }}</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: #0a0a10;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 24px;
            color: #fff;
        }
        .login-theme-bar {
            width: 100%;
            max-width: 400px;
            display: flex;
            justify-content: flex-end;
            margin: 0 0 10px;
        }
        .login-box {
            background: #12121a;
            padding: 2.5rem;
            border-radius: 16px;
            width: 100%;
            max-width: 400px;
            border: 1px solid #242435;
            box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        }
        .login-box h2 {
            margin-bottom: 0.75rem;
            text-align: center;
            font-size: 1.5rem;
            background: linear-gradient(90deg, #4cc2ff, #7b42ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .form-group {
            margin-bottom: 1.25rem;
        }
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            color: #a9a9ff;
        }
        .form-group input {
            width: 100%;
            padding: 0.85rem 1rem;
            border-radius: 10px;
            border: 1px solid #2e2e45;
            background: #1a1a29;
            color: #fff;
            font-size: 0.95rem;
            outline: none;
        }
        .form-group input:focus {
            border-color: #4cc2ff;
        }
        .login-box > form > button {
            width: 100%;
            padding: 0.9rem;
            border-radius: 10px;
            border: none;
            background: linear-gradient(90deg, #4285f4, #7b42ff);
            color: #fff;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: 0.2s;
        }
        .login-box > form > button:hover {
            opacity: 0.9;
        }
        .flash {
            padding: 0.8rem;
            margin-bottom: 1rem;
            background: #331e24;
            color: #ff6666;
            border-radius: 8px;
            text-align: center;
            font-size: 0.85rem;
        }
        .exchange-line {
            text-align: center;
            font-size: 0.82rem;
            color: #8892b0;
            margin: 0 0 1.5rem;
        }
        .exchange-line strong {
            color: #b8f5d0;
            font-weight: 600;
        }
    </style>
    <link rel="stylesheet" href="/static/instance_theme.css?v=5">
</head>
<body>
    <div class="login-theme-bar">
        <div class="theme-toggle instance-theme-toggle" role="group" aria-label="界面主题">
            <button type="button" class="theme-toggle-btn is-active" data-theme-value="dark" aria-pressed="true" title="暗色主题">
                <svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
                    <path fill="currentColor" d="M12.1 3a9 9 0 1 0 8.9 11 6.5 6.5 0 1 1-8.9-11z"/>
                </svg>
            </button>
            <button type="button" class="theme-toggle-btn" data-theme-value="light" aria-pressed="false" title="亮色主题">
                <svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                    <circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
                </svg>
            </button>
        </div>
    </div>
    <div class="login-box">
        <h2>{{ pwa_app_name }}</h2>
        <p class="exchange-line">登录 · <strong>{{ exchange_display }}</strong></p>
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="flash">{{ messages[0] }}</div>
            {% endif %}
        {% endwith %}
        <form method="POST" autocomplete="off">
            <div class="form-group">
                <label>账号</label>
                <input type="text" name="username" required placeholder="请输入账号" autocomplete="off" autocapitalize="off" spellcheck="false">
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" name="password" required placeholder="请输入密码" autocomplete="new-password">
            </div>
            <button type="submit">登录</button>
        </form>
    </div>
</body>
</html>
