.user-name { color: #aebfba; font-size: 13px; }
.logout-form { margin: 0; }
.nav-button { border: 0; background: none; color: #d6e0db; font: inherit; padding: 0; cursor: pointer; }
.nav-button:hover, .topbar nav a:hover { color: #fff; }
.login-shell { position: relative; width: 100vw; min-height: calc(100vh - 144px); margin-left: calc(50% - 50vw); display: grid; place-items: center; padding: 54px 24px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 18% 22%, rgba(22,180,132,.18), transparent 28%), radial-gradient(circle at 82% 80%, rgba(230,185,79,.12), transparent 25%), #07130f; }
.login-shell::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .2; background-image: linear-gradient(rgba(118,211,181,.13) 1px, transparent 1px), linear-gradient(90deg,rgba(118,211,181,.13) 1px,transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom,transparent,#000 20%,#000 75%,transparent); }
.login-shell::after { content: ""; position: absolute; width: 520px; height: 520px; border: 1px solid rgba(83,199,160,.09); border-radius: 50%; right: -260px; top: -260px; box-shadow: 0 0 0 80px rgba(83,199,160,.025),0 0 0 160px rgba(83,199,160,.018); z-index: -1; }
.login-card { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; width: min(900px,100%); min-height: 560px; overflow: hidden; border: 1px solid rgba(141,210,188,.2); border-radius: 28px; background: rgba(10,27,21,.88); box-shadow: 0 35px 100px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(18px); }
.login-card::before,.login-card::after { content: ""; position: absolute; width: 48px; height: 48px; z-index: 2; pointer-events: none; }
.login-card::before { top: 14px; left: 14px; border-top: 1px solid #53c7a0; border-left: 1px solid #53c7a0; border-radius: 10px 0 0; }
.login-card::after { right: 14px; bottom: 14px; border-right: 1px solid #e6b94f; border-bottom: 1px solid #e6b94f; border-radius: 0 0 10px; }
.login-visual { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 42px; overflow: hidden; border-right: 1px solid rgba(141,210,188,.14); background: linear-gradient(145deg,rgba(18,62,48,.74),rgba(8,25,19,.86)); }
.login-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 25%,rgba(100,237,190,.055) 45%,transparent 65%); transform: translateX(-100%); animation: login-scan 7s ease-in-out infinite; }
.terminal-label { display: flex; align-items: center; gap: 8px; color: #9ecabd; font: 700 10px Manrope; letter-spacing: .2em; }
.terminal-label i { width: 7px; height: 7px; border-radius: 50%; background: #5ce0b2; box-shadow: 0 0 12px #5ce0b2; animation: login-pulse 2s ease-in-out infinite; }
.login-orbit { position: relative; align-self: center; width: 245px; height: 245px; display: grid; place-items: center; }
.orbit { position: absolute; inset: 14px; border: 1px solid rgba(108,218,181,.28); border-radius: 50%; }
.orbit-one { animation: orbit-spin 14s linear infinite; border-top-color: #5ce0b2; border-right-color: transparent; }
.orbit-two { inset: 42px; border-color: rgba(230,185,79,.22); border-left-color: #e6b94f; animation: orbit-spin 10s linear infinite reverse; }
.orbit-node { position: absolute; width: 7px; height: 7px; border-radius: 50%; z-index: 2; }
.node-one { top: 30px; right: 53px; background: #5ce0b2; box-shadow: 0 0 14px #5ce0b2; }
.node-two { bottom: 53px; left: 46px; background: #e6b94f; box-shadow: 0 0 14px #e6b94f; }
.login-coin { width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%; color: #142c24; background: linear-gradient(145deg,#f1cf78,#c58e28); font: 800 53px Manrope; box-shadow: 0 0 0 9px rgba(230,185,79,.07),0 0 45px rgba(230,185,79,.24); }
.visual-copy { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: end; }
.visual-copy span { color: #72ac99; font: 700 10px Manrope; letter-spacing: .17em; }
.visual-copy strong { grid-row: span 2; color: #e6b94f; font: 800 33px Manrope; }
.visual-copy small { color: #c1d4cd; margin-top: 6px; font-size: 11px; }
.login-content { display: flex; flex-direction: column; justify-content: center; padding: 58px 62px; color: #f4f8f6; }
.login-kicker { display: flex; align-items: center; gap: 9px; color: #62d3ad; font: 700 11px Manrope; letter-spacing: .16em; text-transform: uppercase; }
.login-kicker span { width: 22px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.login-content h1 { color: #fff; font: 800 43px/1.06 Manrope; letter-spacing: -1.7px; margin: 14px 0 13px; }
.login-intro { color: #91a8a0; font-size: 14px; line-height: 1.6; margin: 0; }
.login-form { margin-top: 29px; gap: 17px; }
.login-form label > span:first-child { display: block; color: #b5c7c0; font-size: 11px; letter-spacing: .06em; margin-bottom: 7px; }
.input-shell { position: relative; display: block; }
.input-shell svg { position: absolute; width: 17px; height: 17px; left: 15px; top: 50%; transform: translateY(-50%); fill: none; stroke: #679282; stroke-width: 1.5; z-index: 1; pointer-events: none; }
.login-form input[type=email],.login-form input[type=password] { width: 100%; height: 49px; margin: 0; padding: 0 15px 0 44px; color: #ecf4f1; caret-color: #5ce0b2; border: 1px solid rgba(123,168,152,.3); border-radius: 11px; outline: none; background: rgba(4,14,11,.48); font: 500 14px "DM Sans"; transition: border-color .2s,box-shadow .2s,background .2s; }
.login-form input::placeholder { color: #526961; }
.login-form input:focus { border-color: #4fc39c; background: rgba(5,22,16,.75); box-shadow: 0 0 0 3px rgba(79,195,156,.1),0 0 20px rgba(79,195,156,.07); }
.login-form .remember { display: flex; align-items: center; gap: 9px; color: #91a8a0; font-weight: 500; }
.login-form .remember input { accent-color: #43b990; width: 15px; height: 15px; margin: 0; }
.login-form .remember span { margin: 0; color: inherit; font-size: 12px; letter-spacing: 0; }
.login-button { display: flex; align-items: center; justify-content: space-between; height: 50px; margin-top: 2px; padding: 0 19px; border: 1px solid #5ed4ab; border-radius: 11px; color: #092018; background: linear-gradient(100deg,#58d1a8,#8be0c1); font: 800 13px Manrope; letter-spacing: .03em; cursor: pointer; box-shadow: 0 9px 25px rgba(54,186,140,.2); transition: transform .18s,box-shadow .18s,filter .18s; }
.login-button span:last-child { font-size: 20px; font-weight: 400; }
.login-button:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 13px 30px rgba(54,186,140,.3); }
.login-button:active { transform: translateY(0); }
.test-login-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 13px; color: #607a71; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.test-login-divider::before,.test-login-divider::after { flex: 1; height: 1px; content: ""; background: rgba(123,168,152,.2); }
.test-login-form { margin: 0; }
.test-login-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 8px 17px; border: 1px dashed rgba(230,185,79,.48); border-radius: 11px; color: #ecd690; background: rgba(230,185,79,.07); cursor: pointer; transition: border-color .2s,background .2s,transform .2s; }
.test-login-button > span:first-child { display: grid; gap: 1px; text-align: left; }
.test-login-button strong { font: 700 12px Manrope; letter-spacing: .04em; }
.test-login-button small { color: #8f8970; font-size: 10px; }
.test-login-button > span:last-child { font-size: 22px; }
.test-login-button:hover { transform: translateY(-1px); border-color: #e6b94f; background: rgba(230,185,79,.12); }
.encrypted-note { display: flex; align-items: center; justify-content: center; gap: 7px; color: #607a71; font-size: 10px; letter-spacing: .05em; margin-top: 22px; }
.encrypted-note svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.validation-errors,.field-error { color: #ff8d7f; font-size: 12px; }
.validation-errors:empty,.field-error:empty { display: none; }
.validation-errors ul { margin: 0; padding: 10px 13px 10px 28px; border: 1px solid rgba(255,141,127,.25); border-radius: 9px; background: rgba(167,65,53,.12); }
.button-link { display: inline-block; text-decoration: none; margin-top: 24px; }
.access-card { display: block; width: min(490px,100%); min-height: 0; }
.access-card .login-content { min-height: 390px; }
.access-button { margin-top: 28px; text-decoration: none; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes login-pulse { 50% { opacity: .45; box-shadow: 0 0 5px #5ce0b2; } }
@keyframes login-scan { 0%,25% { transform: translateX(-100%); } 70%,100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .orbit,.terminal-label i,.login-visual::after { animation: none; } }
@media (max-width: 760px) { .login-shell { padding: 28px 16px; } .login-card { grid-template-columns: 1fr; width: min(470px,100%); } .login-visual { min-height: 185px; padding: 27px 30px; border-right: 0; border-bottom: 1px solid rgba(141,210,188,.14); } .login-orbit { position: absolute; width: 170px; height: 170px; right: 10px; top: 6px; opacity: .74; } .login-coin { width: 70px; height: 70px; font-size: 35px; } .orbit-two { inset: 31px; } .visual-copy { width: 60%; } .login-content { padding: 40px 30px 38px; } }
@media (max-width: 480px) { .user-name { display: none; } .login-shell { min-height: calc(100vh - 128px); } .login-visual { min-height: 155px; } .login-orbit { width: 145px; height: 145px; } .login-content h1 { font-size: 37px; } .visual-copy small { display: none; } }