:root{--login-primary-color: var(--app-header-bg-color, #16a34a);--hero-bg-image: url(https://source.unsplash.com/1600x900/?school,library);--hero-overlay-color: rgba(0, 0, 0, .5);--hero-text-color: #ffffff}body{padding:0;margin:0;font-family:var(--font-family-main);background-color:var(--background-color-main)}.login-page-wrapper{display:flex;min-height:100vh;width:100%}.login-hero{flex:1;background-image:var(--hero-bg-image);background-size:cover;background-position:center;position:relative;display:flex;justify-content:center;align-items:center;color:var(--hero-text-color);text-align:center;padding:2rem}.hero-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--hero-overlay-color);z-index:1}.hero-content{position:relative;z-index:2;animation:fadeIn 1.2s ease-out}.hero-content h1{font-size:2.5rem;font-weight:600;margin:0 0 .5rem;text-shadow:2px 2px 8px rgba(0,0,0,.5)}.hero-content p{font-size:1.2rem;max-width:500px;opacity:.9;text-shadow:1px 1px 4px rgba(0,0,0,.5)}.login-form-container{flex:1;display:flex;justify-content:center;align-items:center;padding:2rem;background-color:var(--background-color-main)}.login-container{width:100%;max-width:420px;background-color:var(--background-color-card);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;animation:fadeIn .6s ease-out}.login-header{padding:30px;text-align:center}.login-header img{width:80px;height:80px;margin-bottom:15px;object-fit:contain;border-radius:var(--border-radius-full);box-shadow:var(--shadow-md);border:3px solid var(--background-color-card)}.login-header h1{color:var(--text-color-primary);font-size:1.5em;font-weight:600;margin:0}.login-tabs{display:flex}.tab-button{flex:1;padding:15px;border:none;background-color:var(--background-color-main);font-size:1em;font-weight:500;cursor:pointer;color:var(--text-color-secondary);transition:background-color .3s,color .3s,border-bottom-color .3s;border-bottom:3px solid transparent}.tab-button.active{color:var(--login-primary-color);background-color:var(--background-color-card);border-bottom-color:var(--login-primary-color)}.tab-content{display:none;padding:25px 30px 30px;animation:contentFadeIn .5s}.tab-content.active{display:block}@keyframes contentFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.form-group{text-align:left;margin-bottom:20px;position:relative}.input-wrapper{position:relative}.input-wrapper i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#ccc;z-index:2;transition:color .3s}.login-container .form-group input:focus+i{color:var(--login-primary-color)}.login-container .tab-content .form-group input,.login-modal .form-group input{width:100%;box-sizing:border-box;padding:12px 12px 12px 45px;border:1px solid var(--border-color-light);border-radius:var(--border-radius-md);transition:border-color .2s,box-shadow .2s;background-color:var(--input-bg);color:var(--text-color)}.login-container .form-group input:focus,.login-modal .form-group input:focus{outline:none;border-color:var(--login-primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--login-primary-color) 20%,transparent)}.btn-login{width:100%;padding:12px;font-size:1.1em;font-weight:600;background-color:var(--login-primary-color);color:var(--text-color-light);border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:transform .2s,filter .2s;display:flex;justify-content:center;align-items:center;gap:.5rem}.btn-login:hover{filter:brightness(110%);transform:translateY(-2px)}.btn-login:active{transform:translateY(0)}#error-message{background-color:#f8d7da;color:#721c24;padding:12px;border-radius:var(--border-radius-md);margin:0 30px 15px;text-align:center;display:none}.form-feedback{display:none;padding:.75rem 1rem;border-radius:var(--border-radius-md);margin-bottom:1rem;font-size:.95rem;font-weight:500}.form-feedback.success,.form-feedback.error{display:block}.form-feedback.success{background-color:#ecfdf5;color:#047857}.form-feedback.error{background-color:#fef2f2;color:#b91c1c}.login-help{margin:1rem 30px 0;text-align:center}.link-button{border:none;background:none;color:var(--login-primary-color);font-weight:600;cursor:pointer;padding:0;font-size:.95rem;display:inline-flex;align-items:center;gap:.35rem}.link-button:hover,.link-button:focus{text-decoration:underline;outline:none}.form-label{display:block;font-weight:600;margin-bottom:.35rem;color:var(--text-color-secondary)}.field-hint{display:block;margin-top:.35rem;color:var(--text-color-tertiary);font-size:.85rem}.login-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0f172a8c;display:none;justify-content:center;align-items:center;padding:1.5rem;z-index:2500}.login-modal-overlay.active{display:flex}.login-modal{width:min(500px,100%);background-color:var(--background-color-card);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-xl);padding:2rem;position:relative;max-height:90vh;overflow-y:auto}.modal-close-btn{position:absolute;top:1rem;right:1rem;border:none;background:none;color:var(--text-color-secondary);font-size:1.5rem;cursor:pointer;line-height:1}.modal-close-btn:hover,.modal-close-btn:focus{color:var(--login-primary-color);outline:none}.modal-description{margin:.5rem 0 1rem;color:var(--text-color-secondary)}.modal-guide{margin:0 0 1.5rem 1.25rem;padding:0;color:var(--text-color-secondary);font-size:.95rem}.modal-guide li{margin-bottom:.5rem;line-height:1.5}.autocomplete-suggestions{position:absolute;top:100%;left:0;right:0;background:var(--background-color-card);border:1px solid var(--border-color-light);border-top:none;border-radius:0 0 var(--border-radius-md) var(--border-radius-md);max-height:200px;overflow-y:auto;z-index:1000;display:none;padding:0;margin:0;list-style-type:none;box-shadow:var(--shadow-md)}.autocomplete-suggestions li{padding:10px 12px;cursor:pointer;font-size:15px}.autocomplete-suggestions li:hover{background-color:var(--background-color-hover)}@media (max-width: 768px){.login-page-wrapper{flex-direction:column}.login-hero{flex:0;min-height:250px}.login-form-container{padding:1rem}.login-container{margin:0}.login-modal{padding:1.5rem}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}