:root {
            --bg-1: #f7f8fb;
            --bg-2: #eef2ff;
            --card: #ffffff;
            --line: #d9e0ef;
            --text: #1e2a3f;
            --muted: #5b6780;
            --brand: #2f5ef5;
            --brand-hover: #244ad0;
            --danger-bg: #fff1f1;
            --danger-text: #c92323;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            min-height: 100vh;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at 15% 10%, #d8e2ff 0%, transparent 48%),
                radial-gradient(circle at 90% 80%, #dff3ff 0%, transparent 46%),
                linear-gradient(160deg, var(--bg-1), var(--bg-2));
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }
        .card {
            width: min(420px, 100%);
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 16px;
            box-shadow: 0 16px 48px rgba(34, 54, 100, 0.12);
            padding: 28px;
        }
        h1 {
            font-size: 22px;
            line-height: 1.2;
            margin-bottom: 8px;
        }
        .desc {
            font-size: 14px;
            color: var(--muted);
            margin-bottom: 18px;
        }
        label {
            display: block;
            font-size: 13px;
            margin-bottom: 8px;
            color: var(--muted);
        }
        input[type="password"],
        input[type="tel"],
        input[type="text"] {
            width: 100%;
            height: 44px;
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 0 12px;
            font-size: 15px;
            outline: none;
            transition: border-color .15s ease, box-shadow .15s ease;
        }
        input[type="password"]:focus,
        input[type="tel"]:focus,
        input[type="text"]:focus {
            border-color: var(--brand);
            box-shadow: 0 0 0 3px rgba(47, 94, 245, 0.16);
        }
        .field { margin-bottom: 14px; }
        .code-row {
            display: flex;
            gap: 10px;
            align-items: stretch;
        }
        .code-row input { flex: 1; }
        .code-btn {
            flex: 0 0 auto;
            width: auto;
            margin-top: 0;
            padding: 0 14px;
            height: 44px;
            font-size: 14px;
            white-space: nowrap;
            background: #eef2ff;
            color: var(--brand);
            border: 1px solid var(--line);
        }
        .code-btn:hover:not(:disabled) { background: #e3e9ff; }
        .code-btn:disabled { color: var(--muted); cursor: default; opacity: .75; }
        .error {
            margin-top: 10px;
            border: 1px solid #ffd4d4;
            background: var(--danger-bg);
            color: var(--danger-text);
            border-radius: 10px;
            padding: 10px 12px;
            font-size: 13px;
        }
        .notice {
            margin-top: 10px;
            border: 1px solid #cfe6d4;
            background: #f2fbf4;
            color: #2f7d44;
            border-radius: 10px;
            padding: 10px 12px;
            font-size: 13px;
        }
        button {
            width: 100%;
            height: 44px;
            margin-top: 16px;
            border: 0;
            border-radius: 10px;
            background: var(--brand);
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color .15s ease;
        }
        button:hover { background: var(--brand-hover); }
        button:disabled { cursor: default; opacity: .7; }
        .tips {
            margin-top: 14px;
            font-size: 12px;
            color: var(--muted);
        }
        .link-btn {
            display: inline;
            width: auto;
            height: auto;
            margin: 0;
            padding: 0;
            background: none;
            color: var(--brand);
            font-size: 13px;
            font-weight: 500;
            text-decoration: underline;
            cursor: pointer;
        }
        .link-btn:hover { background: none; color: var(--brand-hover); }
        .switch-row { margin-top: 16px; text-align: center; }
        .restoring {
            margin-top: 10px;
            font-size: 13px;
            color: var(--brand);
            display: none;
        }
        .restoring.show { display: block; }
        .hidden { display: none; }