@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--primary-text: rgba(255, 255, 255, .95);--secondary-text: rgba(255, 255, 255, .7);--accent-color: rgb(31, 79, 225);--card-bg: rgba(20, 18, 30, .5);--shadow-color: rgba(4, 2, 10, .6);--error-color: #ff5050}*{margin:0;padding:0;box-sizing:border-box;cursor:default}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#fff;background-color:#000000f2;overflow:hidden}#root{height:100dvh;max-width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}input,textarea{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;cursor:text}button,button *{cursor:pointer}button:disabled,button:disabled *{cursor:not-allowed}input:disabled,input:disabled *{cursor:not-allowed}a,a *{cursor:pointer}.default-button{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border-radius:12px;font-size:15px;font-weight:500;border:none;transition:all .2s ease-out}.default-button.full{width:100%}.default-button:active{scale:.98}svg.loading{animation:button-spin 1s linear infinite}@keyframes button-spin{to{transform:rotate(360deg)}}.default-button.primary{background-color:var(--accent-color);color:#fff}.default-button.primary:hover{background-color:#496ddb}.default-button.destructive{background:#ff505033;color:#f8baba}.default-button.destructive:hover{background:#ff50504d;border-color:#ff505080;color:#fff}.default-button.secondary{background-color:#ffffff1a;color:#e0e0e0;border:none}.default-button.secondary:hover{background-color:#fff3}.remove-contact-button,.edit-profile-button,.logout-button,.add-contact-button{margin-top:auto}.create-group-button{margin-top:20px}.add-contact-button{margin:auto 5% 30px;width:90%!important}.auth-container{width:100%;display:flex;justify-content:center}.auth-card{position:relative;width:580px;padding:40px 5%;border-radius:34px;background:var(--card-bg);border:1px solid rgba(255,255,255,.1);box-shadow:0 0 100px var(--shadow-color);text-align:center;color:var(--primary-text)}.auth-card header{margin-bottom:30px}.auth-card h2{font-size:30px;font-weight:700}.auth-card p{font-size:15px;color:var(--secondary-text)}.form-group{margin-top:25px}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}.form-group input{width:100%;padding:24px 20px 12px;font-size:16px;border-radius:14px;color:var(--primary-text);transition:all .2s ease;background:#ffffff1a;border:1px solid rgba(255,255,255,.1)}.input-wrapper input:focus{outline:none;border-color:#496ddb;background:#ffffff26;box-shadow:0 0 0 2px #496ddb}.input-wrapper.error input{outline:none;border-color:var(--error-color);box-shadow:0 0 0 2px var(--error-color)}.placeholder-text{position:absolute;top:50%;left:20px;transform:translateY(-50%);font-size:16px;color:var(--secondary-text);pointer-events:none;transition:all .2s ease-out}.input-wrapper input.dirty+.placeholder-text,.input-wrapper input:focus+.placeholder-text,.input-wrapper input:not(:placeholder-shown)+.placeholder-text{transform:translateY(-150%);font-size:12px}.show-password{position:absolute;cursor:pointer;top:0;right:0;padding:18px 20px}.show-password *{cursor:pointer}.next-prev-buttons{display:flex;width:100%;justify-content:center;flex-direction:row;column-gap:5%}.next-prev-buttons button{margin-top:0;font-weight:600;padding:16px}.username-hint{float:left;text-align:left;color:var(--secondary-text);font-size:14px;margin:5px 5px 25px}.right-arrow{font-size:20px;margin-left:8px}.left-arrow{font-size:20px}.auth-card footer{margin-top:30px;font-size:14px;color:var(--secondary-text)}.auth-card footer a{color:#496ddb;text-decoration:none;font-weight:500}.error-message{display:flex;justify-content:start;padding:5px 20px;color:var(--error-color);margin-bottom:20px}.not-visible{width:0;height:0;visibility:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#fff6}*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
