@import"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap";#root{max-width:1280px;width:100%;padding:2rem;display:flex;justify-content:center;align-items:center}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto Mono,sans-serif;background-color:#f0f0f5;display:flex;justify-content:center;align-items:center;min-height:100vh;color:#333}.App{background-color:#fff;padding:40px;border-radius:12px;box-shadow:0 10px 30px #0000001a;width:100%;max-width:450px;display:flex;flex-direction:column;gap:25px;text-align:center}.form-group{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.label{font-size:1.1rem;font-weight:500;color:#5d3fd3;margin-bottom:5px}.input{width:100%;padding:12px 18px;border:2px solid #5d3fd3;border-radius:8px;font-size:1.1rem;color:#250633;outline:none;transition:border-color .3s ease}.input:focus{border-color:#8a2be2;box-shadow:0 0 0 3px #5d3fd333}.input::placeholder{color:#bbb}.total-tip-amount{display:flex;flex-direction:column;align-items:start;gap:5px;font-size:1.3rem;font-weight:600;color:#5d3fd3;margin-top:15px}.total-tip-amount:before{content:"";margin:0 auto;display:block;width:80%;height:2px;background-color:#fdc10b}.total-tip-amount span{display:block;font-size:1rem;font-weight:500;color:#fdc10b}.btn{background-color:#5d3fd3;color:#fff;padding:12px 25px;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:background-color .3s ease,transform .1s ease;align-self:center;width:100%;max-width:200px;margin-top:10px}.btn:hover{background-color:#fdc10b}.btn:active{transform:translateY(1px)}.add-friend:disabled{opacity:.5;cursor:not-allowed}.add-friend:disabled:hover{background-color:#5d3fd3}.friends-container{display:grid;gap:20px;margin-top:20px;grid-template-columns:repeat(2,1fr)}.friend-service-item{position:relative;margin-bottom:0;padding:10px;border-bottom:1px solid #ddd;gap:20px}.remove-friend-btn{position:absolute;top:5px;right:5px;z-index:10;width:20px;height:20px;display:flex;justify-content:center;align-items:center;background-color:#fdc00bc7;color:#fff;padding:5px;border:none;border-radius:50%;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .3s ease,transform .1s ease}@media (max-width: 768px){#root{padding:0}.label{font-size:1rem}.total-tip-amount{gap:3px}.btn{max-width:180px}}