:root {
    color-scheme: light;
    font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    color: #16213b;
    background: #eef5ff;
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(115, 165, 255, .28), transparent 30rem),
        radial-gradient(circle at 85% 85%, rgba(83, 217, 232, .22), transparent 28rem),
        linear-gradient(145deg, #f7fbff, #e9f2ff);
}

.shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px 18px;
}

.card {
    width: min(100%, 520px);
    padding: 34px;
    border: 1px solid rgba(80, 124, 206, .18);
    border-radius: 28px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 24px 70px rgba(38, 78, 145, .16);
    text-align: center;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #4c66b8;
    font-size: 15px;
    font-weight: 750;
}

.brand-mark {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg, #6c8dff, #50c9e8);
    box-shadow: 0 8px 18px rgba(82, 123, 235, .25);
}

.status-icon {
    width: 64px;
    height: 64px;
    margin: 28px auto 20px;
    border: 18px solid #e6efff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #7696ee;
}

.warning .status-icon { border-color: #fff1ce; box-shadow: inset 0 0 0 2px #e2a933; }
.success .status-icon { border-color: #dff8ec; box-shadow: inset 0 0 0 2px #3dbb83; }

h1 { margin: 0; color: #142143; font-size: clamp(25px, 6vw, 34px); line-height: 1.2; }
p { margin: 14px auto 0; max-width: 420px; color: #66728e; line-height: 1.75; }

.notice {
    margin: 24px 0;
    padding: 13px 15px;
    border-radius: 14px;
    color: #6f7890;
    background: #f5f8fd;
    font-size: 13px;
    line-height: 1.6;
}

.button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #6787f6, #4cbfdc);
    box-shadow: 0 12px 26px rgba(71, 112, 220, .24);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

form { margin-top: 24px; }
.spinner { width: 54px; height: 54px; margin: 30px auto 22px; border: 5px solid #e9effb; border-top-color: #6584ef; border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
    .card { padding: 28px 20px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; }
}