:root{--ctc-blue-deep:#1a237e;--ctc-blue-mid:#283593;--ctc-blue-light:#3949ab;--ctc-blue-soft:#5c6bc0;--ctc-blue-pale:#e8eaf6;--ctc-white:#fff;--ctc-off-white:#f5f5f5;--ctc-text-main:#1c1c2e;--ctc-text-muted:#6b7280;--ctc-error:#c62828;--ctc-error-bg:#ffebee;--ctc-shadow-card:0 24px 64px #1a237e2e, 0 8px 24px #1a237e1a;--ctc-radius:16px;--ctc-transition:.2s cubic-bezier(.4, 0, .2, 1)}.login-root{background:linear-gradient(145deg, var(--ctc-blue-deep) 0%, var(--ctc-blue-mid) 40%, var(--ctc-blue-light) 75%, #5c6bc0 100%);justify-content:center;align-items:center;min-height:100dvh;padding:1.5rem;display:flex;position:relative;overflow:hidden}.login-bg{pointer-events:none;z-index:0;position:absolute;inset:0}.login-bg:before,.login-bg:after{content:"";filter:blur(80px);opacity:.35;border-radius:50%;position:absolute}.login-bg:before{background:radial-gradient(circle,#7986cb 0%,#0000 70%);width:500px;height:500px;animation:8s ease-in-out infinite alternate floatA;top:-120px;right:-100px}.login-bg:after{background:radial-gradient(circle,#9fa8da 0%,#0000 70%);width:400px;height:400px;animation:10s ease-in-out infinite alternate floatB;bottom:-100px;left:-80px}@keyframes floatA{0%{transform:translateY(0)scale(1)}to{transform:translateY(30px)scale(1.08)}}@keyframes floatB{0%{transform:translateY(0)scale(1)}to{transform:translateY(-25px)scale(1.05)}}.login-card{z-index:1;-webkit-backdrop-filter:blur(20px);border-radius:var(--ctc-radius);width:100%;max-width:420px;box-shadow:var(--ctc-shadow-card);background:#fffffff5;flex-direction:column;gap:1.5rem;padding:2.75rem 2.5rem 2.25rem;animation:.55s cubic-bezier(.22,1,.36,1) both cardIn;display:flex;position:relative}@keyframes cardIn{0%{opacity:0;transform:translateY(28px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.login-logo-wrap{justify-content:center;display:flex}.login-logo{object-fit:contain;border-radius:8px}.login-header{text-align:center}.login-title{color:var(--ctc-blue-deep);letter-spacing:-.02em;margin:0 0 .25rem;font-size:1.75rem;font-weight:700}.login-subtitle{color:var(--ctc-text-muted);letter-spacing:.02em;margin:0;font-size:.9rem}.login-form{flex-direction:column;gap:1.25rem;display:flex}.form-field{flex-direction:column;gap:.4rem;display:flex}.field-label{color:var(--ctc-blue-deep);letter-spacing:.03em;text-transform:uppercase;font-size:.8125rem;font-weight:600}.field-input{width:100%;color:var(--ctc-text-main);background:var(--ctc-off-white);transition:border-color var(--ctc-transition), box-shadow var(--ctc-transition), background var(--ctc-transition);box-sizing:border-box;border:1.5px solid #dde0f0;border-radius:10px;outline:none;padding:.75rem 1rem;font-size:.9375rem}.field-input::placeholder{color:#a0a8c0}.field-input:focus{border-color:var(--ctc-blue-light);background:var(--ctc-white);box-shadow:0 0 0 3px #3949ab1f}.login-submit-btn{letter-spacing:.04em;width:100%;color:var(--ctc-white);background:linear-gradient(135deg, var(--ctc-blue-deep) 0%, var(--ctc-blue-light) 100%);cursor:pointer;transition:transform var(--ctc-transition), box-shadow var(--ctc-transition), opacity var(--ctc-transition);border:none;border-radius:10px;margin-top:.25rem;padding:.85rem 1rem;font-size:1rem;font-weight:700;box-shadow:0 4px 18px #1a237e61}.login-submit-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 24px #1a237e7a}.login-submit-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 10px #1a237e4d}.login-submit-btn:disabled{opacity:.75;cursor:not-allowed}.btn-loading{justify-content:center;align-items:center;gap:.6rem;display:flex}.spinner{border:2px solid #ffffff59;border-top-color:var(--ctc-white);border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.login-error{background:var(--ctc-error-bg);color:var(--ctc-error);border:1px solid #ef9a9a;border-radius:8px;align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.875rem;font-weight:500;animation:.35s both shakeIn;display:flex}@keyframes shakeIn{0%{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}to{transform:translate(0)}}.login-footer-note{text-align:center;color:var(--ctc-text-muted);border-top:1px solid #eaecf5;margin:0;padding-top:.25rem;font-size:.8rem}@media (max-width:480px){.login-card{padding:2rem 1.5rem 1.75rem}.login-title{font-size:1.5rem}}