:root { color-scheme: light; font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; color: #172219; background: #eef2ee; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 520px) minmax(0, 1fr); background: #fff; }
.login-panel { width: min(100%, 440px); margin: auto; padding: 48px; }
.brand-mark { width: 44px; height: 44px; display: inline-block; object-fit: cover; border-radius: 10px; box-shadow: 0 9px 24px rgba(101,43,160,.22); vertical-align: middle; }
.brand-copy { display: inline-flex; flex-direction: column; margin-left: 10px; vertical-align: middle; }
.brand-copy span { font-size: 18px; font-weight: 800; }
.brand-copy small { color: #738078; margin-top: 2px; }
.login-heading { margin: 64px 0 28px; }
.login-heading h1 { margin: 0 0 10px; font-size: 30px; letter-spacing: 0; }
.login-heading p, .security-note { margin: 0; color: #738078; }
.login-form { display: grid; gap: 20px; }
.login-form label span { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.login-form input { width: 100%; height: 48px; border: 1px solid #cfd8d1; border-radius: 6px; padding: 0 14px; font: inherit; outline: none; }
.login-form input:focus { border-color: #8f4fd0; box-shadow: 0 0 0 3px rgba(143,79,208,.14); }
.login-form button { height: 48px; border: 0; border-radius: 7px; background: linear-gradient(110deg,#5f299f,#9b56d4 58%,#c89c45); color: #fff; box-shadow: 0 10px 24px rgba(103,44,164,.2); font: inherit; font-weight: 800; cursor: pointer; transition: transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.login-form button:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 14px 28px rgba(103,44,164,.28); }
.login-error { margin: -6px 0 0; color: #b42318; font-size: 14px; }
.login-success { margin: -6px 0 0; color: #1d6b42; font-size: 14px; }
.security-note a { color: #7b3ab7; font-weight: 700; text-decoration: none; }
.login-form small { display: block; margin-top: 6px; color: #738078; font-size: 12px; }
.security-note { margin-top: 28px; text-align: center; font-size: 13px; }
.visual-panel { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; background: #120823; }
.visual-panel img { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; opacity: .93; filter: saturate(1.12) contrast(1.06); animation: visual-breathe 10s ease-in-out infinite alternate; }
.visual-panel::before { content: ""; position: absolute; z-index: 1; inset: -20%; pointer-events: none; background: radial-gradient(circle at 67% 45%, rgba(183,103,255,.26), transparent 22%), radial-gradient(circle at 72% 53%, rgba(255,200,93,.14), transparent 34%); mix-blend-mode: screen; animation: aura-pulse 3.6s ease-in-out infinite; }
.visual-panel::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(17,5,35,.04) 34%, rgba(12,5,24,.18) 62%, rgba(9,3,18,.88)), linear-gradient(90deg, rgba(12,4,25,.38), transparent 34%); }
.visual-energy-ring { position: absolute; z-index: 2; top: 50%; left: 66%; width: min(56vw,72vh); aspect-ratio: 1; border: 1px solid rgba(224,184,255,.3); border-radius: 50%; translate: -50% -50%; box-shadow: 0 0 32px rgba(161,75,255,.34), inset 0 0 28px rgba(245,194,95,.15); animation: energy-spin 17s linear infinite; }
.visual-energy-ring::before,.visual-energy-ring::after { content: ""; position: absolute; border-radius: inherit; inset: 8%; border: 2px dashed rgba(246,192,91,.34); animation: energy-spin 11s linear infinite reverse; }
.visual-energy-ring::after { inset: 19%; border-style: solid; border-color: rgba(187,103,255,.32) transparent; animation-duration: 7s; animation-direction: normal; }
.visual-scan { position: absolute; z-index: 3; inset: -30% 0; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(229,193,255,.04) 47%, rgba(229,193,255,.3) 50%, rgba(255,211,113,.08) 53%, transparent 58%); translate: -75% 0; animation: scan-sweep 6.5s ease-in-out infinite; }
.visual-particles { position: absolute; z-index: 3; inset: 0; pointer-events: none; background-image: radial-gradient(circle,rgba(255,210,111,.95) 0 1px,transparent 2px),radial-gradient(circle,rgba(207,139,255,.9) 0 1.5px,transparent 2.5px),radial-gradient(circle,rgba(255,255,255,.75) 0 1px,transparent 2px); background-size: 83px 91px,137px 121px,191px 173px; animation: particles-rise 18s linear infinite; opacity: .58; }
.visual-particles-b { scale: 1.25; opacity: .34; filter: blur(.4px); animation-duration: 27s; animation-direction: reverse; }
.visual-copy { position: absolute; z-index: 5; left: 6%; bottom: 14%; width: min(76%,760px); color: #fff; display: grid; gap: 8px; text-shadow: 0 3px 18px rgba(0,0,0,.78); animation: marketing-reveal 1.2s ease-out both,copy-glow 4s 1.2s ease-in-out infinite; }
.visual-copy small { color:rgba(235,207,255,.76); font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.visual-copy strong { font-size: clamp(25px,2.2vw,36px); background: linear-gradient(90deg,#fff 0%,#e9d1ff 45%,#f4cf7b 72%,#fff 100%); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation: marketing-gradient 6s linear infinite; }
.typewriter-stack { display:grid; gap:5px; min-height:5.4em; opacity:1; transition:opacity .65s ease,translate .65s ease,filter .65s ease; }
.typewriter-stack.is-leaving { opacity:0; translate:0 -8px; filter:blur(5px); }
.typewriter-text { position:relative; display:block; min-height:1.55em; width:max-content; max-width:100%; overflow:hidden; background:linear-gradient(90deg,#dcb8ff,#fff 48%,#f2cc79); background-size:180% auto; -webkit-background-clip:text; background-clip:text; color:transparent; font-size:clamp(13px,1.02vw,17px); font-weight:700; letter-spacing:.03em; opacity:0; translate:0 7px; transition:opacity .45s ease,translate .45s ease; animation:marketing-gradient 5s linear infinite; }
.typewriter-text.is-visible { opacity:1; translate:0 0; }
.typewriter-text.is-visible::before { content:"◆"; display:inline-block; margin-right:8px; color:#d9a9ff; -webkit-text-fill-color:#d9a9ff; font-size:.65em; filter:drop-shadow(0 0 5px rgba(194,103,255,.85)); }
.typewriter-text:last-child::after { content:""; display:inline-block; width:2px; height:1.05em; margin-left:5px; translate:0 2px; background:linear-gradient(#e5c1ff,#f1c76b); box-shadow:0 0 9px rgba(201,128,255,.9); animation:typewriter-cursor .78s steps(1) infinite; }
@keyframes visual-breathe { 0% { transform: scale(1.035) translate3d(0,0,0); filter: saturate(1.08) contrast(1.04) brightness(.94); } 100% { transform: scale(1.095) translate3d(-.6%,-.8%,0); filter: saturate(1.22) contrast(1.1) brightness(1.08); } }
@keyframes aura-pulse { 0%,100% { opacity:.52; transform:scale(.96); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes energy-spin { to { transform:rotate(360deg); } }
@keyframes scan-sweep { 0%,18% { translate:-78% 0; opacity:0; } 35% { opacity:1; } 70%,100% { translate:78% 0; opacity:0; } }
@keyframes particles-rise { from { background-position:0 0,0 0,0 0; } to { background-position:32px -210px,-44px -300px,28px -390px; } }
@keyframes copy-glow { 0%,100% { filter:drop-shadow(0 0 0 transparent); } 50% { filter:drop-shadow(0 0 9px rgba(186,105,255,.42)); } }
@keyframes marketing-reveal { from { opacity:0; translate:0 24px; filter:blur(9px); } to { opacity:1; translate:0 0; filter:blur(0); } }
@keyframes marketing-gradient { to { background-position:220% center; } }
@keyframes typewriter-cursor { 0%,48% { opacity:1; } 49%,100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .visual-panel img,.visual-panel::before,.visual-energy-ring,.visual-energy-ring::before,.visual-energy-ring::after,.visual-scan,.visual-particles,.visual-copy,.visual-copy strong,.typewriter-stack,.typewriter-text,.typewriter-text::after { animation:none !important; transition:none !important; } .typewriter-text { opacity:1; translate:0 0; } }
@media (max-width: 760px) { .login-layout { display: block; min-height: 100vh; padding: 28px 20px; } .login-panel { padding: 24px 4px; } .visual-panel { display: none; } .login-heading { margin-top: 52px; } }