:root {
    --brand-50:  #e6f4f1;
    --brand-100: #98d5cc;
    --brand-400: #0f766e;
    --brand-500: #0f766e;
    --brand-600: #0b5f59;
    --brand-700: #315f88;
    --violet-500: #0f766e;
    --ink-900: #16211f;
    --ink-700: #31423d;
    --ink-500: #63736d;
    --ink-400: #87958f;
    --ink-300: #b9c7c1;
    --line:    rgba(210, 220, 216, 0.88);
    --line-soft: #eef4f2;
    --bg:      #f6f8fb;
    --card:    #FFFFFF;
    --danger:  #DC2626;
    --danger-soft: #FEF2F2;
}

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

html, body { height: 100%; }

body.login-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
        -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
    color: var(--ink-700);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow: hidden;
}

/* —— 背景：双 radial blob + 极淡网格 —— */
body.login-body::before,
body.login-body::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
body.login-body::before {
    width: 520px; height: 520px;
    top: -160px; left: -160px;
    background: radial-gradient(circle, rgba(20,117,108,0.28), rgba(20,117,108,0) 70%);
}
body.login-body::after {
    width: 600px; height: 600px;
    bottom: -200px; right: -180px;
    background: radial-gradient(circle, rgba(13,95,88,0.22), rgba(13,95,88,0) 70%);
}
.bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(15,23,42,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
    pointer-events: none;
    z-index: 0;
}

/* —— 卡片 —— */
.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 408px;
    padding: 44px 40px 32px;
    background: var(--card);
    border: 1px solid rgba(230, 232, 240, 0.9);
    border-radius: 22px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px -8px rgba(15, 23, 42, 0.10),
        0 32px 64px -24px rgba(20, 117, 108, 0.18);
    animation: cardIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* —— 品牌区 —— */
.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 32px;
}
.login-brand-mark {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.35), rgba(255,255,255,0) 55%),
        linear-gradient(135deg, #0f766e 0%, #0b5f59 55%, #315f88 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0;
    margin-bottom: 18px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.3) inset,
        0 -2px 6px rgba(13,95,88,0.25) inset,
        0 12px 28px -10px rgba(15, 118, 110, 0.55),
        0 4px 10px -4px rgba(11, 95, 89, 0.35);
}
.login-title {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 700;
    color: var(--ink-900);
    letter-spacing: 0.18em;
    padding-left: 0.18em;
    line-height: 1.1;
}
.login-subtitle {
    margin: 0;
    font-size: 12px;
    color: var(--ink-400);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    padding-left: 0.32em;
}

/* —— 分隔线 —— */
.login-divider {
    height: 1px;
    margin: 28px 0 24px;
    background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

/* —— 表单 —— */
.login-form { display: flex; flex-direction: column; gap: 16px; }

.login-field { display: block; }
.login-field-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-500);
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}
.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.login-input-wrap svg {
    position: absolute;
    left: 14px;
    width: 16px; height: 16px;
    color: var(--ink-300);
    pointer-events: none;
    transition: color 180ms ease;
}
.login-field input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 15px;
    color: var(--ink-900);
    background: #FCFCFE;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
    font-family: inherit;
}
.login-field input::placeholder {
    color: var(--ink-300);
    font-size: 14px;
}
.login-field input:hover {
    border-color: #D2D6E1;
    background: #FFFFFF;
}
.login-field input:focus {
    outline: none;
    border-color: var(--brand-500);
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(20, 117, 108, 0.14);
}
.login-field input:focus + .login-input-wrap svg,
.login-input-wrap:focus-within svg {
    color: var(--brand-500);
}

/* —— 按钮 —— */
.login-submit {
    position: relative;
    width: 100%;
    height: 46px;
    margin-top: 12px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #0f766e 0%, #0b5f59 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 8px 18px -6px rgba(20, 117, 108, 0.45);
    transition: transform 160ms ease, box-shadow 200ms ease, filter 180ms ease;
    font-family: inherit;
}
.login-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.22) inset,
        0 12px 22px -6px rgba(20, 117, 108, 0.55);
    filter: brightness(1.03);
}
.login-submit:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.97);
}
.login-submit:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 4px rgba(20, 117, 108, 0.25),
        0 8px 18px -6px rgba(20, 117, 108, 0.45);
}
.login-submit:disabled {
    background: #C7CAD9;
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
    transform: none;
}

/* —— 错误提示 —— */
.login-error {
    display: none;
    margin-top: 14px;
    padding: 10px 12px 10px 36px;
    position: relative;
    border-radius: 10px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid #FECACA;
}
.login-error.is-visible {
    display: block;
    animation: errorIn 200ms ease-out both;
}
.login-error::before {
    content: "";
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") no-repeat center / contain;
}
@keyframes errorIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* —— 页脚 —— */
.login-footer {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    text-align: center;
    font-size: 11.5px;
    color: var(--ink-300);
    letter-spacing: 0.04em;
}
.login-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-400);
}
.login-footer-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--brand-400);
    display: inline-block;
}

/* —— 减少动画偏好 —— */
@media (prefers-reduced-motion: reduce) {
    .login-card { animation: none; }
    .login-error.is-visible { animation: none; }
    .login-submit, .login-field input, .login-input-wrap svg {
        transition: none;
    }
}

/* —— 小屏适配 —— */
@media (max-width: 380px) {
    .login-card { padding: 36px 24px 26px; border-radius: 20px; }
    .login-title { font-size: 26px; }
}