:root { --color-main-background: #0082c9; --color-error: #e9322d; --color-warning: #eca700; --border-radius: 3px; }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
body { background-color: var(--color-main-background); height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; overflow: hidden; }
.login-wrapper { width: 100%; max-width: 300px; z-index: 10; }
.logo { text-align: center; margin-bottom: 30px; }
.logo img { width: 175px; filter: brightness(0) invert(1); }
.warning-msg { background-color: var(--color-warning); color: #fff; padding: 10px; border-radius: var(--border-radius); font-size: 14px; text-align: center; margin-bottom: 10px; display: none; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: opacity 0.3s; }
.login-form { position: relative; }
.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); }
@keyframes shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-6px, 0, 0); } 40%, 60% { transform: translate3d(6px, 0, 0); } }
.fieldset { background: #fff; border-radius: var(--border-radius); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.input-group { position: relative; }
.input-group input { width: 100%; border: 1px solid #ddd; background-color: #fff; color: #333; padding: 12px 40px 12px 15px; font-size: 15px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.input-group:first-child input { border-radius: var(--border-radius) var(--border-radius) 0 0; border-bottom: none; }
.input-group:last-child input { border-radius: 0 0 var(--border-radius) var(--border-radius); }
.input-group input:focus { border-color: var(--color-main-background); box-shadow: 0 0 0 2px rgba(0, 130, 201, 0.3); z-index: 2; position: relative; }
.input-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; opacity: 0.4; pointer-events: none; z-index: 3; }
.submit-btn { width: 100%; padding: 12px; margin-top: 15px; background-color: rgba(255, 255, 255, 0.2); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--border-radius); font-size: 16px; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px; transition: background-color 0.2s, border-color 0.2s; }
.submit-btn:hover { background-color: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.6); }
.loader { width: 18px; height: 18px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; display: none; animation: rotation 1s linear infinite; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.actions { margin-top: 25px; text-align: center; }
.actions a { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.actions a:hover { color: #fff; }
footer { position: absolute; bottom: 20px; font-size: 12px; color: rgba(255, 255, 255, 0.5); text-align: center; width: 100%; }
footer a { color: rgba(255, 255, 255, 0.5); text-decoration: none; }
footer a:hover { text-decoration: underline; }