:root{--login-bg: #f0f4f8;--card-bg: #ffffff;--card-radius: 16px;--card-shadow: 0 4px 24px rgba(0, 0, 0, .08);--card-padding: 2.25rem;--teal: #12b3b6;--teal-hover: #0f9ea1;--teal-light: rgba(18, 179, 182, .08);--teal-border: rgba(18, 179, 182, .35);--text-primary: #111827;--text-secondary: #6b7280;--text-placeholder: #9ca3af;--input-border: #e5e7eb;--input-border-focus: #12b3b6;--input-bg: #ffffff;--input-bg-focus: #ffffff;--input-radius: 10px;--input-height: 48px;--label-size: .8125rem;--label-weight: 500;--label-color: #374151;--error-color: #dc2626;--success-color: #16a34a}.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background-color:var(--login-bg);padding:2rem 1rem}.login-wrapper{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center}.login-brand{display:flex;justify-content:center}.login-brand>div{margin-bottom:0!important}.login-brand .logo-img{height:100px;width:auto}.login-card{width:100%;background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:var(--card-padding)}.login-card__header{text-align:center;margin-bottom:1.75rem}.login-card__title{font-size:1.375rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em;margin:0 0 .375rem;line-height:1.3}.login-card__subtitle{font-size:.875rem;color:var(--text-secondary);margin:0;line-height:1.5}.input-group{margin-bottom:1.125rem}.input-label{display:block;font-size:var(--label-size);font-weight:var(--label-weight);color:var(--label-color);margin-bottom:.4rem}.input-wrapper{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:13px;color:var(--text-placeholder);pointer-events:none;flex-shrink:0;transition:color .15s}.input-field{width:100%;height:var(--input-height);padding:0 2.75rem 0 2.5rem;font-size:.9375rem;color:var(--text-primary);background:var(--input-bg);border:1.5px solid var(--input-border);border-radius:var(--input-radius);outline:none;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-appearance:none}.input-field::-moz-placeholder{color:var(--text-placeholder);font-size:.9rem}.input-field::placeholder{color:var(--text-placeholder);font-size:.9rem}.input-field:focus{border-color:var(--input-border-focus);box-shadow:0 0 0 3px var(--teal-light);background:var(--input-bg-focus)}.input-field:focus+.input-icon,.input-wrapper:focus-within .input-icon{color:var(--teal)}.input-field.error{border-color:var(--error-color)}.input-field.error:focus{box-shadow:0 0 0 3px #dc262614}.toggle-password{position:absolute;right:13px;background:none;border:none;cursor:pointer;color:var(--text-placeholder);padding:0;display:flex;align-items:center;transition:color .15s}.toggle-password:hover{color:var(--text-secondary)}.error-message{display:none;align-items:center;gap:.375rem;font-size:.8rem;color:var(--error-color);margin-top:.375rem}.error-message.show{display:flex}.password-strength{margin-top:.5rem}.strength-label{display:flex;justify-content:space-between;margin-bottom:.25rem}.strength-bars{display:flex;gap:4px}.strength-bar{height:4px;flex:1;border-radius:4px;background:var(--input-border);transition:background .25s}.strength-bar.active{background:var(--error-color)}.strength-bar.active.medium{background:#d97706}.strength-bar.active.strong{background:var(--success-color)}.btn-submit{width:100%;height:48px;background:var(--teal);color:#fff;font-size:.9375rem;font-weight:600;border:none;border-radius:var(--input-radius);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:background .15s,transform .1s;letter-spacing:-.01em}.btn-submit:hover{background:var(--teal-hover)}.btn-submit:active{transform:scale(.99)}.loader{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .65s linear infinite}.btn-submit.loading .loader{display:block}.btn-submit.loading .btn-text{opacity:.7}@keyframes spin{to{transform:rotate(360deg)}}.login-divider{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0;color:var(--text-placeholder);font-size:.8125rem}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:var(--input-border)}.btn-social{width:100%;height:46px;display:flex;align-items:center;justify-content:center;gap:.625rem;font-size:.9rem;font-weight:500;border-radius:var(--input-radius);border:1.5px solid var(--input-border);background:#ffffff;color:var(--text-primary);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;margin-bottom:.625rem}.btn-social:last-of-type{margin-bottom:0}.btn-social:hover{background:#f9fafb;border-color:#d1d5db;box-shadow:0 1px 4px #0000000f}.btn-github{background:#0d1117;border-color:#0d1117;color:#fff}.btn-github:hover{background:#161b22;border-color:#161b22;box-shadow:0 1px 4px #0000002e}.btn-facebook{background:#1877f2;border-color:#1877f2;color:#fff}.btn-facebook:hover{background:#1464d8;border-color:#1464d8;box-shadow:0 1px 4px #1877f24d}.btn-guest{width:100%;height:46px;display:flex;align-items:center;justify-content:center;gap:.625rem;font-size:.9rem;font-weight:500;border-radius:var(--input-radius);border:1.5px dashed var(--teal-border);background:var(--teal-light);color:var(--teal);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}.btn-guest:hover{background:rgba(18,179,182,.13);border-color:var(--teal)}.login-signup{text-align:center;font-size:.875rem;color:var(--text-secondary);margin-top:1.5rem;margin-bottom:0}.login-signup__link{color:var(--teal);font-weight:600;text-decoration:none;transition:color .15s}.login-signup__link:hover{color:var(--teal-hover);text-decoration:underline}.login-footer{font-size:.78rem;color:var(--text-placeholder);text-align:center;margin-top:1.5rem;margin-bottom:0}.notification{display:none;position:fixed;top:1.25rem;right:1.25rem;background:#ffffff;border:1px solid #d1fae5;border-radius:10px;padding:.75rem 1rem;box-shadow:0 4px 16px #0000001a;z-index:9999;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary)}.notification.show{display:flex;animation:slideIn .25s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 480px){.login-card{padding:1.75rem 1.375rem;border-radius:14px}.login-screen{padding:1.5rem .875rem}}