/* 登录页。刻意不做卡片：一个居中的表单直接落在白底上。
   取值是原来那套设计令牌里抄下来的字面值，这一页不依赖任何其它样式表。 */

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, p { margin: 0; padding: 0; }

body {
    min-height: 100vh;
    background: #fff;
    color: #16181d;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
    font-size: 14px;
    line-height: 22px;
    -webkit-font-smoothing: antialiased;
}

.auth {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
}

.auth__form { width: 100%; max-width: 320px; }

.auth__title { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.012em; }

.auth__desc { margin: 8px 0 32px; font-size: 13px; color: #59606b; }

.auth__submit { margin-top: 24px; }

.field { display: block; }
.field + .field { margin-top: 16px; }

.field__label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #59606b;
}

.input {
    width: 100%;
    height: 34px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #e2e4e9;
    border-radius: 6px;
    color: #16181d;
    font: inherit;
    font-size: 13px;
    transition: border-color 90ms cubic-bezier(.2, .6, .35, 1), box-shadow 90ms cubic-bezier(.2, .6, .35, 1);
}

.input:hover { border-color: #cfd3da; }

.input:focus {
    outline: none;
    border-color: #3355d6;
    box-shadow: 0 0 0 3px rgba(51, 85, 214, .28);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 90ms cubic-bezier(.2, .6, .35, 1);
}

/* 主操作用墨色而不是彩色：整页只允许有一个 */
.btn--primary { background: #1b1e24; color: #fff; }
.btn--primary:hover:not(.is-pending) { background: #000; }

.btn--block { width: 100%; }

.btn.is-pending { cursor: default; opacity: .6; }
.btn__spinner { display: none; }
.btn.is-pending .btn__spinner { display: block; }

.spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.flash {
    padding: 12px;
    margin-bottom: 16px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 20px;
}

.flash--error { background: #fbecea; color: #be3a2f; }