* { box-sizing: border-box; }
:root { color-scheme: dark; --mint: #a3f4d5; --text: #eef5f5; --muted: #879b9f; --border: #ffffff16; }
body { margin: 0; min-height: 100svh; background: #080d16; color: var(--text); font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
[hidden] { display: none !important; }
button, a, input { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; }
#login-sky, .login-aurora, .login-grain { position: fixed; inset: 0; pointer-events: none; }
#login-sky { width: 100%; height: 100%; }
.login-aurora { background: radial-gradient(ellipse at 25% 60%, #157f6b1b, transparent 52%), radial-gradient(ellipse at 83% 30%, #2d50621a, transparent 44%); animation: aurora-drift 20s ease-in-out infinite alternate; }
.login-grain { opacity: .2; background-image: radial-gradient(#ffffff20 .6px, transparent .6px); background-size: 5px 5px; mask-image: linear-gradient(transparent, #0009, transparent); }
.login-header, .login-main, .login-footer { position: relative; z-index: 1; }
.login-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 4.5%; }
.login-brand { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 650; letter-spacing: 2px; }
.login-brand svg { width: 30px; height: 30px; color: var(--mint); }
.login-brand img { width: 38px; height: 38px; object-fit: contain; }
.brand-muted { color: var(--muted); font-weight: 450; }
.brand-wordmark-accent { color: var(--mint); font-weight: 450; }
.header-note { font-size: 10px; color: #78908e; letter-spacing: 3px; margin-right: auto; margin-left: 24px; }
.login-header-tag { display: flex; align-items: center; gap: 9px; color: #9aacae; font-size: 11px; }
.live-dot { flex: none; width: 5px; height: 5px; display: inline-block; background: var(--mint); border-radius: 50%; box-shadow: 0 0 13px #a3f4d560; }
.login-main { width: min(1200px, 91%); min-height: calc(100svh - 182px); margin: 0 auto; padding: 68px 0 74px; display: grid; grid-template-columns: minmax(0, 1fr) 386px; gap: 80px; align-items: center; }
.login-hero { padding-bottom: 8px; min-width: 0; }
.hero-eyebrow { display: flex; align-items: center; gap: 11px; color: #8dacaa; font-size: 9px; letter-spacing: 2.6px; animation: element-arrive .9s .05s both; }
.login-wordmark { font-size: clamp(76px, 9vw, 132px); line-height: 1.15; letter-spacing: -.075em; font-weight: 650; margin: 21px 0 25px; background: linear-gradient(110deg, #eef5f5 20%, #eef5f5 35%, #a3f4d5 45%, #fff 50%, #a3f4d5 55%, #eef5f5 65%); background-size: 250% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: wordmark-arrive 1.25s cubic-bezier(.16,1,.3,1) both, wordmark-shimmer 9s 1.25s ease-in-out infinite; }
.login-wordmark > span { color: var(--mint); font-weight: 450; }
.login-wordmark .wordmark-dot { color: #a3f4d554; }
.hero-lead { font-size: clamp(22px, 2.45vw, 33px); font-weight: 400; letter-spacing: -.8px; line-height: 1.4; margin: 0 0 20px; animation: element-arrive .9s .18s both; }
.hero-description { color: var(--muted); font-size: 13px; line-height: 1.9; margin: 0; animation: element-arrive .9s .25s both; }
.hero-features { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-top: 38px; animation: element-arrive .9s .32s both; }
.hero-features > span { display: inline-flex; align-items: center; gap: 8px; color: #9aaeb0; font-size: 10px; }
.hero-features svg { width: 17px; height: 17px; stroke: #a3f4d59c; stroke-width: 1.2; }
.hero-signature { display: flex; align-items: center; gap: 12px; margin-top: 57px; color: #57706f; font-size: 8px; letter-spacing: 2px; animation: element-arrive .9s .4s both; }
.signature-line { width: 35px; height: 1px; background: linear-gradient(to right, #a3f4d560, transparent); }
.login-panel { padding: 32px; border: 1px solid #a3f4d521; border-radius: 20px; background: linear-gradient(145deg, #1324269c, #101820c7 52%, #101920b3); box-shadow: 0 24px 80px #00000025, inset 0 1px #ffffff05; backdrop-filter: blur(22px); animation: element-arrive 1s .12s both; }
.panel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 27px; }
.panel-eyebrow { color: #9eb8b2; letter-spacing: 2.2px; font-size: 9px; }
.panel-symbol { color: #a3f4d573; font-size: 23px; line-height: 1; }
.login-panel h2 { font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -1.2px; margin: 0 0 11px; }
.login-panel h2 > span { color: var(--mint); }
.panel-description { font-size: 11px; color: var(--muted); margin: 0 0 30px; }
.login-panel label { display: block; color: #bdcccd; font-size: 11px; margin-bottom: 9px; }
.login-input-wrap { position: relative; margin-bottom: 21px; }
.login-input-wrap > svg { position: absolute; left: 15px; top: 17px; height: 16px; width: 16px; stroke: #738d8b; stroke-width: 1.2; pointer-events: none; }
.login-input-wrap input { width: 100%; min-height: 50px; border: 1px solid #ffffff13; border-radius: 9px; background: #080f176b; color: var(--text); padding: 13px 15px 13px 42px; outline: none; font-size: 13px; transition: border-color .2s, box-shadow .2s; }
.login-input-wrap input::placeholder { color: #526b70; }
.login-input-wrap input:focus { border-color: #a3f4d580; box-shadow: 0 0 0 3px #a3f4d50b; }
.login-input-wrap input:-webkit-autofill { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 100px #102028 inset; }
.password-wrap input { padding-right: 48px; }
.password-toggle { position: absolute; right: 7px; top: 7px; width: 36px; height: 36px; padding: 9px; border: 0; border-radius: 6px; color: #91aaa6; background: transparent; }
.password-toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.2; }
.password-toggle:hover { background: #a3f4d50b; color: var(--mint); }
.login-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 1px solid #a3f4d580; border-radius: 9px; min-height: 51px; padding: 13px 17px; margin-top: 28px; background: var(--mint); color: #112c26; font-size: 12px; font-weight: 600; box-shadow: 0 0 24px #a3f4d50a; transition: background .2s, transform .2s, box-shadow .2s; }
.login-submit:hover { background: #bbffe5; transform: translateY(-1px); box-shadow: 0 6px 28px #a3f4d518; }
.submit-arrow { font-size: 19px; font-weight: 400; transition: transform .2s; }
.login-submit:hover .submit-arrow { transform: translate(2px, -2px); }
.login-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.panel-footer { display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid var(--border); margin-top: 26px; padding-top: 21px; font-size: 9px; color: #6e8787; }
.panel-footer svg { width: 13px; height: 13px; flex-shrink: 0; stroke: #86a89c; stroke-width: 1; }
.login-message { border: 1px solid #f5b1a240; background: #7b302e26; color: #f6c9c1; padding: 12px; border-radius: 8px; font-size: 12px; line-height: 1.6; margin-bottom: 20px; }
.login-notice { color: var(--mint); background: #a3f4d50a; border-color: #a3f4d540; }
.login-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 4.5%; border-top: 1px solid #ffffff0a; padding: 24px 0; font-size: 8px; letter-spacing: 1.5px; color: #526b70; }
.footer-divider { color: #a3f4d54a; padding: 0 8px; }
.login-footer a { letter-spacing: 0; font-size: 10px; transition: color .2s; }
.login-footer a:hover { color: var(--mint); }
@keyframes wordmark-arrive { from { opacity: 0; filter: blur(10px); transform: translateY(16px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes wordmark-shimmer { 0%, 100% { background-position: 150% 50%; } 50% { background-position: -50% 50%; } }
@keyframes element-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aurora-drift { from { transform: translate(-2%, -1%) scale(1.05); } to { transform: translate(2%, 2%) scale(1.1); } }
.welcome-wordmark { position: fixed; z-index: 10; top: 0; left: 0; pointer-events: none; font-size: clamp(68px, 13vw, 180px); font-weight: 650; line-height: 1.15; letter-spacing: -.075em; white-space: nowrap; color: var(--text); transform-origin: top left; }
.welcome-wordmark span { color: var(--mint); font-weight: 450; }
.login-intro-running .login-brand > span { opacity: 0; }
.login-intro-running .login-hero, .login-intro-running .login-panel { opacity: 0; animation: none; }
.login-intro-running .login-hero > * { animation: none; }
.login-intro-finished .login-hero, .login-intro-finished .login-panel { animation: element-arrive .7s both; }
.login-intro-finished .login-wordmark { animation: wordmark-shimmer 9s ease-in-out infinite; }
.login-intro-finished .login-hero > :not(.login-wordmark) { animation: none; }
@media (min-width: 1600px) { .login-main { gap: 130px; } }
@media (max-width: 1050px) { .login-main { gap: 40px; grid-template-columns: minmax(0,1fr) 350px; } .header-note { display: none; } .login-panel { padding: 28px; } .hero-features { gap: 14px; } .hero-signature { letter-spacing: 1px; } }
@media (max-width: 760px) { .login-header { padding: 24px 6%; } .login-header-tag { font-size: 9px; } .login-main { width: min(430px, 88%); grid-template-columns: 1fr; gap: 35px; min-height: auto; padding: 30px 0 45px; } .login-wordmark { font-size: clamp(75px, 18vw, 110px); margin: 14px 0 16px; } .hero-eyebrow { font-size: 8px; letter-spacing: 1.7px; } .hero-lead { font-size: 24px; margin-bottom: 12px; } .hero-description { font-size: 12px; } .hero-features { margin-top: 22px; gap: 12px 20px; } .hero-features > span { font-size: 9px; } .hero-signature { display: none; } .login-panel { padding: 27px; } .login-panel h2 { font-size: 29px; } .login-input-wrap input { font-size: 16px; } .login-footer { margin: 0 6%; padding: 20px 0; flex-wrap: wrap; font-size: 7px; gap: 9px; } .login-footer a { font-size: 9px; } }
@media (max-width: 380px) { .login-header-tag { display: none; } .login-panel { padding: 23px; } .login-panel h2 { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .login-wordmark { background-position: 50% 50%; } }