:root {
    color-scheme: dark;
    font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --cyan: #75e9f4;
    --cyan-soft: rgba(168, 244, 249, .72);
    --card: rgba(101, 196, 206, .27);
    --field: rgba(105, 198, 210, .22);
    --line: rgba(216, 252, 255, .28);
    --text: #ecfeff;
    --muted: rgba(229, 252, 253, .72);
    --danger: #ffd4d4;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
    margin: 0;
    min-width: 320px;
    color: var(--text);
    background: #087f96 url("../img/login-bg-teal.webp") center center / cover fixed no-repeat;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 48%, rgba(59, 215, 225, .12), transparent 34%),
        linear-gradient(180deg, rgba(0, 34, 49, .18), rgba(0, 104, 128, .05));
}

button, input { font: inherit; }

.login-page {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
}

.login-card {
    width: min(440px, 100%);
    padding: 28px 42px 30px;
    border: 1px solid rgba(209, 250, 252, .34);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(115, 207, 214, .31), rgba(58, 156, 174, .20));
    box-shadow: 0 28px 70px rgba(0, 40, 56, .34), inset 0 1px 0 rgba(255, 255, 255, .16);
    backdrop-filter: blur(11px) saturate(120%);
    -webkit-backdrop-filter: blur(11px) saturate(120%);
}

.card-handle {
    width: 92px;
    height: 9px;
    margin: -12px auto 23px;
    border-radius: 999px;
    background: rgba(1, 91, 110, .78);
    box-shadow: inset 0 1px 3px rgba(0, 33, 45, .55), 0 1px 0 rgba(223, 255, 255, .25);
}

.login-header { text-align: center; margin-bottom: 24px; }
.eyebrow { margin: 0 0 5px; color: var(--cyan-soft); font-size: 11px; font-weight: 700; letter-spacing: .25em; }
.login-header h1 { margin: 0; font-size: 29px; font-weight: 650; letter-spacing: .13em; text-shadow: 0 2px 18px rgba(0, 62, 80, .34); }
.login-header .login-brand-logo { display: block; width: 210px; height: 72px; margin: 6px auto 0; object-fit: contain; }
.login-header p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 13px; }

.login-form { display: grid; gap: 16px; }

.field {
    min-width: 0;
    height: 62px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--field);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.field:focus-within {
    border-color: rgba(177, 249, 252, .72);
    background: rgba(117, 212, 221, .31);
    box-shadow: 0 0 0 3px rgba(85, 224, 236, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
    transform: translateY(-1px);
}

.field-icon { flex: 0 0 23px; color: rgba(196, 246, 248, .72); }
.field-icon svg { display: block; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field-content { min-width: 0; flex: 1; display: grid; gap: 2px; }
.field-label { color: rgba(224, 253, 254, .75); font-size: 11px; letter-spacing: .08em; }
.field input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 0; color: #fff; background: transparent; font-size: 15px; line-height: 25px; }
.field input::placeholder { color: rgba(221, 249, 251, .42); }
.field input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s ease-out; }

.password-toggle {
    flex: 0 0 auto;
    border: 0;
    padding: 8px 2px 8px 8px;
    color: rgba(223, 252, 254, .72);
    background: transparent;
    cursor: pointer;
    font-size: 12px;
}

.password-toggle:hover { color: #fff; }
.captcha-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 12px; }

.captcha-code {
    border: 1px solid rgba(207, 250, 252, .36);
    border-radius: 7px;
    color: rgba(239, 255, 255, .92);
    background:
        repeating-linear-gradient(-25deg, transparent 0 8px, rgba(255, 255, 255, .05) 9px 10px),
        rgba(48, 151, 174, .48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    cursor: pointer;
    font-family: Consolas, Monaco, monospace;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: .15em;
    text-shadow: 1px 2px 0 rgba(0, 73, 91, .48);
    user-select: none;
}

.captcha-code:hover { background-color: rgba(62, 171, 190, .58); }
.form-message { min-height: 19px; margin: -3px 2px -5px; color: var(--danger); font-size: 13px; text-align: center; }
.form-message.success { color: #d7ffea; }

.login-button {
    height: 49px;
    border: 1px solid rgba(222, 251, 252, .22);
    border-radius: 6px;
    color: #efffff;
    background: linear-gradient(180deg, rgba(79, 144, 178, .88), rgba(65, 122, 161, .92));
    box-shadow: 0 10px 24px rgba(0, 61, 85, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
    cursor: pointer;
    font-weight: 650;
    letter-spacing: .32em;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.login-button:hover { filter: brightness(1.08); box-shadow: 0 13px 30px rgba(0, 55, 77, .27); transform: translateY(-1px); }
.login-button:active { transform: translateY(0); }
.login-button:focus-visible, .captcha-code:focus-visible, .password-toggle:focus-visible { outline: 3px solid rgba(167, 247, 251, .34); outline-offset: 2px; }
.login-button[disabled] { cursor: wait; opacity: .72; transform: none; }
.button-loading { display: none; letter-spacing: .08em; }
.login-button.is-loading .button-label { display: none; }
.login-button.is-loading .button-loading { display: inline; }
.login-footer { margin-top: 21px; color: rgba(222, 250, 252, .5); font-size: 11px; letter-spacing: .08em; text-align: center; }

@media (max-width: 560px) {
    body { background-position: 42% center; }
    .login-page { padding: 20px 14px; }
    .login-card { padding: 25px 20px 24px; border-radius: 9px; }
    .login-header h1 { font-size: 25px; }
    .captcha-row { grid-template-columns: minmax(0, 1fr) 96px; gap: 9px; }
    .captcha-code { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}