﻿* { box-sizing: border-box; margin: 0; padding: 0; }

body,
html { height: 96%; margin: 0; font-family: Arial, sans-serif; background-color: rgb(4, 14, 30); }

.container { display: flex; height: 99%; }

.left,
.right { flex: 1; padding: 20px; transition: opacity 0.3s ease, visibility 0.3s ease; }

.h1 { background: -webkit-linear-gradient(135deg, #0eaf6d, #ff6ac6 25%, #147b96 50%, #e6d205 55%, #2cc4e0 60%, #8b2ce0 80%, #ff6384 95%, #08dfb4); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: flowCss 12s infinite linear; }

@-webkit-keyframes flowCss {
    0% { background-position: 0 0; }

    100% { background-position: -400% 0; }
}


#app { color: var(--fg); display: flex; flex-direction: column; margin: auto; padding: 16px; align-items: center; justify-content: center; box-sizing: border-box; }


.logo { margin-bottom: 50px; text-align: center; color: rgb(198, 186, 255); font-size: 26px; }


.dark #set-div-dynamic { color: var(--bg); font-weight: 600; font-size: 1.2em; background-image: linear-gradient(315deg, hsl(var(--shimmer-hue-1), var(--shimmer-sat-1), var(--shimmer-lit-1)) 0.00%, hsl(var(--shimmer-hue-2), var(--shimmer-sat-2), var(--shimmer-lit-2)) 47%, hsl(var(--shimmer-hue-3), var(--shimmer-sat-3), var(--shimmer-lit-3)) 100.00%); padding: .8em 1.4em; position: relative; isolation: isolate; box-shadow: 0 2px 3px 1px hsl(var(--glow-hue) 50% 20% / 50%); border: none; outline: none; border-radius: 0.66em; scale: 1; transition: all var(--spring-duration) var(--spring-easing); text-transform: normal; }

.container3 { width: 100%; /* 让容器占据全部宽度，这样align-items才能生效 */ display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中（但这里由于外层已经设置了，所以实际上对垂直居中不起作用） */ height: 100%; /* 让容器的高度也是100% */ }

#set-div-dynamic .text { color: transparent; -webkit-background-clip: text; background-clip: text; background-color: var(--bg); background-image: linear-gradient(120deg, transparent, hsla(var(--shimmer-hue-1), 100%, 80%, 0.66) 40%, hsla(var(--shimmer-hue-2), 100%, 90%, .9) 50%, transparent 52%); background-repeat: no-repeat; background-size: 300% 300%; background-position: center 200%; }

#set-div-dynamic:not([disabled]) .shimmer::before,
#set-div-dynamic:not([disabled]) .shimmer::after { opacity: 1; }

#set-div-dynamic:not([disabled]) .shimmer { -webkit-mask-image: conic-gradient(from var(--mask, 0deg), transparent 0%, transparent 10%, black 36%, black 45%, transparent 50%, transparent 60%, black 85%, black 95%, transparent 100%); mask-image: conic-gradient(from var(--mask, 0deg), transparent 0%, transparent 10%, black 36%, black 45%, transparent 50%, transparent 60%, black 85%, black 95%, transparent 100%); -webkit-mask-size: cover; mask-size: cover; -webkit-animation: spin 3s linear infinite both -0.5s; animation: spin 3s linear infinite both -0.5s; }

#set-div-dynamic:not([disabled])[data-effect=wipe] .shimmer { -webkit-mask-image: linear-gradient(90deg, transparent 20%, black 88%, transparent 90%); mask-image: linear-gradient(90deg, transparent 20%, black 88%, transparent 90%); -webkit-mask-size: 200% 200%; mask-size: 200% 200%; -webkit-mask-position: center; mask-position: center; -webkit-animation: wipe 1.5s linear infinite both -0.5s; animation: wipe 1.5s linear infinite both -0.5s; }

#set-div-dynamic:not([disabled])[data-effect=wave] .shimmer { -webkit-mask-image: linear-gradient(90deg, transparent 15%, black 45%, black 55%, transparent 85%); mask-image: linear-gradient(90deg, transparent 15%, black 45%, black 55%, transparent 85%); -webkit-mask-size: 200% 200%; mask-size: 200% 200%; -webkit-mask-position: center; mask-position: center; -webkit-animation: wipe 3s linear infinite both -0.5s; animation: wipe 3s linear infinite both -0.5s; }

#set-div-dynamic:not([disabled])[data-effect=throb] .shimmer { -webkit-mask-image: none; mask-image: none; -webkit-animation: pulse 3s ease infinite both -0.5s; animation: pulse 3s ease infinite both -0.5s; }

#set-div-dynamic:not([disabled])[data-effect=pulse] .shimmer { -webkit-mask-image: none; mask-image: none; -webkit-animation: pulse2 3s ease infinite both -0.5s; animation: pulse2 3s ease infinite both -0.5s; }

#set-div-dynamic:not([disabled])[data-effect=flicker] .shimmer { -webkit-mask-image: none; mask-image: none; -webkit-animation: flicker 3.33s ease infinite both -0.5s; animation: flicker 3.33s ease infinite both -0.5s; }

:root { --shimmer-hue-1: 213deg; --shimmer-sat-1: 95%; --shimmer-lit-1: 91%; --shimmer-hue-2: 248deg; --shimmer-sat-2: 100%; --shimmer-lit-2: 86%; --shimmer-hue-3: 293deg; --shimmer-sat-3: 78%; --shimmer-lit-3: 89%; --glow-hue: 222deg; --shadow-hue: 180deg; --spring-easing: linear(0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%, 1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%, 1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%, 0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%, 0.998 84%, 1); --spring-duration: 1.33s; }

@property --mask { syntax: "<angle>"; inherits: false; initial-value: 33deg; }

@-webkit-keyframes spin {
    0% { --mask: 0deg; }

    100% { --mask: 360deg; }
}

@keyframes spin {
    0% { --mask: 0deg; }

    100% { --mask: 360deg; }
}

@-webkit-keyframes wipe {
    0% { -webkit-mask-position: 200% center; mask-position: 200% center; }

    100% { -webkit-mask-position: 0% center; mask-position: 0% center; }
}

@keyframes wipe {
    0% { -webkit-mask-position: 200% center; mask-position: 200% center; }

    100% { -webkit-mask-position: 0% center; mask-position: 0% center; }
}

@-webkit-keyframes pulse {

    0%, 90%, 100% { opacity: 0; }

    20% { opacity: 1; }
}

@keyframes pulse {

    0%, 90%, 100% { opacity: 0; }

    20% { opacity: 1; }
}

@-webkit-keyframes pulse2 {
    0% { opacity: 0; }

    8% { opacity: 1; }

    14% { opacity: 0; }

    20% { opacity: 1; }

    100% { opacity: 0; }
}

@keyframes pulse2 {
    0% { opacity: 0; }

    8% { opacity: 1; }

    14% { opacity: 0; }

    20% { opacity: 1; }

    100% { opacity: 0; }
}

@-webkit-keyframes flicker {
    0% { opacity: 0.1; -webkit-mask-image: none; mask-image: none; }

    1% { opacity: 1; }

    2% { opacity: 0.5; }

    3% { opacity: 0.1; }

    4% { opacity: 0.7; }

    5% { opacity: 1; }

    7% { opacity: 0.7; -webkit-mask-image: linear-gradient(90deg, transparent 15%, black 45%, black 55%, transparent 85%); mask-image: linear-gradient(90deg, transparent 15%, black 45%, black 55%, transparent 85%); }

    8% { opacity: 0.1; }

    10% { opacity: 0.4; }

    13% { opacity: 1; }

    15% { opacity: 0.1; -webkit-mask-image: linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, transparent 45%, black 65%, black 90%, transparent 100%); mask-image: linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, transparent 45%, black 65%, black 90%, transparent 100%); }

    17% { opacity: 0.8; }

    19% { opacity: 0.3; }

    21.5% { opacity: 0; }

    23% { opacity: 1; }

    39% { opacity: 0.7; }

    45% { opacity: 0.2; }

    49% { opacity: 0.9; }

    52% { opacity: 0.7; }

    53.5% { opacity: 0.2; -webkit-mask-image: linear-gradient(90deg, black 15%, black 45%, rgba(0, 0, 0, 0.4) 75%, transparent 85%); mask-image: linear-gradient(90deg, black 15%, black 45%, rgba(0, 0, 0, 0.4) 75%, transparent 85%); }

    57% { opacity: 0.8; }

    63% { opacity: 1; }

    75% { opacity: .85; }

    77% { opacity: 1; }

    80% { opacity: .9; }

    82% { opacity: .95; }

    83% { opacity: .85; }

    86% { opacity: 1; }

    89% { opacity: .85; }

    91% { opacity: 1; }

    92% { opacity: .9; }

    100% { opacity: 1; }
}

@keyframes flicker {
    0% { opacity: 0.1; -webkit-mask-image: none; mask-image: none; }

    1% { opacity: 1; }

    2% { opacity: 0.5; }

    3% { opacity: 0.1; }

    4% { opacity: 0.7; }

    5% { opacity: 1; }

    7% { opacity: 0.7; -webkit-mask-image: linear-gradient(90deg, transparent 15%, black 45%, black 55%, transparent 85%); mask-image: linear-gradient(90deg, transparent 15%, black 45%, black 55%, transparent 85%); }

    8% { opacity: 0.1; }

    10% { opacity: 0.4; }

    13% { opacity: 1; }

    15% { opacity: 0.1; -webkit-mask-image: linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, transparent 45%, black 65%, black 90%, transparent 100%); mask-image: linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, transparent 45%, black 65%, black 90%, transparent 100%); }

    17% { opacity: 0.8; }

    19% { opacity: 0.3; }

    21.5% { opacity: 0; }

    23% { opacity: 1; }

    39% { opacity: 0.7; }

    45% { opacity: 0.2; }

    49% { opacity: 0.9; }

    52% { opacity: 0.7; }

    53.5% { opacity: 0.2; -webkit-mask-image: linear-gradient(90deg, black 15%, black 45%, rgba(0, 0, 0, 0.4) 75%, transparent 85%); mask-image: linear-gradient(90deg, black 15%, black 45%, rgba(0, 0, 0, 0.4) 75%, transparent 85%); }

    57% { opacity: 0.8; }

    63% { opacity: 1; }

    75% { opacity: .85; }

    77% { opacity: 1; }

    80% { opacity: .9; }

    82% { opacity: .95; }

    83% { opacity: .85; }

    86% { opacity: 1; }

    89% { opacity: .85; }

    91% { opacity: 1; }

    92% { opacity: .9; }

    100% { opacity: 1; }
}

@-webkit-keyframes shine {
    0% { opacity: 0; }

    15% { opacity: 1; }

    55% { opacity: 1; }

    100% { opacity: 0; }
}

@keyframes shine {
    0% { opacity: 0; }

    15% { opacity: 1; }

    55% { opacity: 1; }

    100% { opacity: 0; }
}

@-webkit-keyframes text {
    0% { background-position: 100% center; }

    100% { background-position: -100% center; }
}

@keyframes text {
    0% { background-position: 100% center; }

    100% { background-position: -100% center; }
}

.shimmer { position: absolute; inset: -40px; border-radius: inherit; mix-blend-mode: color-dodge; mix-blend-mode: plus-lighter; pointer-events: none; }

    .shimmer::before,
    .shimmer::after { transition: all 0.5s ease; opacity: 0; content: ""; border-radius: inherit; position: absolute; inset: 40px; }

    .shimmer::before { box-shadow: 0 0 3px 2px hsl(var(--shimmer-hue-1) 20% 95%), 0 0 7px 4px hsl(var(--shimmer-hue-1) 20% 80%), 0 0 13px 8px hsl(var(--shimmer-hue-2) 40% 60%), 0 0 22px 6px hsl(var(--shimmer-hue-2) 20% 40%); z-index: -1; }

    .shimmer::after { box-shadow: inset 0 0 0 1px hsl(var(--shimmer-hue-2) 70% 95%), inset 0 0 3px 1px hsl(var(--shimmer-hue-2) 100% 80%), inset 0 0 9px 1px hsl(var(--shimmer-hue-2) 100% 70%); z-index: 2; }


.group { display: flex; line-height: 30px; align-items: center; position: relative; }

.input { width: 100%; height: 45px; line-height: 30px; padding: 0 5rem; padding-left: 3rem; border: 2px solid transparent; border-radius: 10px; outline: none; background-color: #f8fafc; color: #0d0c22; transition: .5s ease; }

    .input::placeholder { color: #94a3b8; }

    .input:focus,
    .input:hover { outline: none; border-color: rgba(129, 140, 248); background-color: #fff; box-shadow: 0 0 0 5px rgb(129 140 248 / 30%); }

.icon { position: absolute; left: 1rem; fill: none; width: 1rem; height: 1rem; }

.loginButton { font-size: 1.4em; padding: 0.6em 0.8em; border-radius: 0.5em; border: none; background-color: rgb(16, 7, 32); color: #fff; cursor: pointer; box-shadow: 2px 2px 3px #000000b4; width: 100%; }

.container2 { position: relative; padding: 3px; background: linear-gradient(90deg, #03a9f4, #f441a5); border-radius: 0.9em; transition: all 0.4s ease; }

    .container2::before { content: ""; position: absolute; inset: 0; margin: auto; border-radius: 0.9em; z-index: -10; filter: blur(0); transition: filter 0.4s ease; }

    .container2:hover::before { background: linear-gradient(120deg, #03a9f4, #f441a5); filter: blur(1.2em); }

    .container2:active::before { filter: blur(0.2em); }

.footer { color: #fff; text-align: center; padding: 10px 0; margin-top: auto; font-size:30px; }

@media (max-width: 768px) {
    .left { opacity: 0; visibility: hidden; position: absolute; width: 0; }
    .right { font-size: 20px; margin-top: 10%; margin-left: 10%; }
    .group { display: flex; line-height: 60px; align-items: center; position: relative; }
    .input { width: 100%; height: 60px; line-height: 50px; padding: 0 5rem; padding-left: 3rem; border: 2px solid transparent; border-radius: 10px; outline: none; background-color: #f8fafc; color: #0d0c22; transition: .5s ease; }
        .input::placeholder { color: #94a3b8; }
        .input:focus,
        .input:hover { outline: none; border-color: rgba(129, 140, 248); background-color: #fff; box-shadow: 0 0 0 5px rgb(129 140 248 / 30%); }
    .icon { position: absolute; left: 1rem; fill: none; width: 1rem; height: 1rem; }
}
