:root{--teal: #00798A;--teal-hover: #008fa2;--teal-dark: #005f6d;--purple-left: #6E1C5C;--purple-right: #8B1A7A;--bg: #0E0E14;--card-bg: rgba(18, 18, 26, .7);--card-border: rgba(255, 255, 255, .06);--text-primary: #e8e8ec;--text-secondary: #8888a0;--input-bg: rgba(14, 14, 20, .6);--input-border: rgba(255, 255, 255, .08);--input-focus-border: var(--teal);--error-bg: rgba(220, 50, 50, .08);--error-border: rgba(220, 50, 50, .25);--error-text: #e05555}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:Seravek,Inter,Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='rail' width='60' height='20' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Cline x1='0' y1='6' x2='60' y2='6' stroke='white' stroke-width='1'/%3E%3Cline x1='0' y1='14' x2='60' y2='14' stroke='white' stroke-width='1'/%3E%3Cline x1='10' y1='3' x2='10' y2='17' stroke='white' stroke-width='0.7'/%3E%3Cline x1='30' y1='3' x2='30' y2='17' stroke='white' stroke-width='0.7'/%3E%3Cline x1='50' y1='3' x2='50' y2='17' stroke='white' stroke-width='0.7'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23rail)'/%3E%3C/svg%3E")}#app{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem 1rem}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:3rem}.logo{width:320px;height:auto}.login-card{width:100%;max-width:400px;background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:16px;padding:2.5rem 2rem 2rem;box-shadow:0 4px 24px #0000004d,inset 0 1px #ffffff0a;position:relative;overflow:hidden}.login-card:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:.5}.form-group{margin-bottom:1.25rem}.form-group label{display:block;font-size:.78rem;font-weight:500;color:var(--text-secondary);margin-bottom:.5rem;letter-spacing:.5px;text-transform:uppercase}.form-group input{width:100%;padding:.8rem 1rem;background:var(--input-bg);backdrop-filter:blur(8px);border:1px solid var(--input-border);border-radius:10px;color:var(--text-primary);font-size:.95rem;font-family:inherit;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;outline:none}.form-group input::placeholder{color:var(--text-secondary);opacity:.4}.form-group input:focus{border-color:var(--input-focus-border);box-shadow:0 0 0 3px #00798a1f;background:#0e0e14cc}.btn-submit{width:100%;padding:1rem;margin-top:.75rem;background:linear-gradient(135deg,var(--teal) 0%,#005c6a 50%,#1a4a5a 100%);color:#fff;border:none;border-bottom:2px solid rgba(0,0,0,.2);border-radius:10px;font-size:.82rem;font-weight:600;font-family:inherit;cursor:pointer;letter-spacing:2px;text-transform:uppercase;position:relative;overflow:hidden;transition:opacity .2s ease}.btn-submit:hover{opacity:.9}.btn-submit:active{border-bottom-width:0;border-top:2px solid transparent}.btn-submit span{position:relative;z-index:1}.btn-submit:disabled{opacity:.7;cursor:not-allowed;transform:none}.btn-submit.loading{color:transparent}.btn-submit.loading:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;z-index:2}@keyframes spin{to{transform:rotate(360deg)}}.error-message{margin-top:1.25rem;padding:.75rem 1rem;background:var(--error-bg);border:1px solid var(--error-border);border-radius:10px;color:var(--error-text);font-size:.85rem;line-height:1.4;text-align:center;opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease}.error-message.visible{opacity:1;transform:translateY(0)}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-6px)}30%{transform:translate(5px)}45%{transform:translate(-4px)}60%{transform:translate(3px)}75%{transform:translate(-2px)}}.shake{animation:shake .5s ease-in-out}.footer{margin-top:3rem;font-size:.7rem;color:var(--text-secondary);opacity:.35;letter-spacing:.5px}@media(max-width:480px){.login-card{padding:2rem 1.5rem 1.5rem;border-radius:12px}.logo{width:180px}}