@import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";:root{--Purple-600: hsl(238, 40%, 52%);--Pink-400: hsl(358, 79%, 66%);--Purple-200: hsl(239, 57%, 85%);--Pink-200: hsl(357, 100%, 86%);--Grey-800: hsl(212, 24%, 26%);--Grey-500: hsl(211, 10%, 45%);--Grey-100: hsl(223, 19%, 93%);--Grey-50: hsl(228, 33%, 97%);--White: hsl(0, 100%, 100%);--Font-size: ;--Font-family: "Rubik", sans-serif}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--Font-family);font-size:var(--Font-size);background-color:var(--Grey-50);color:var(--Grey-800)}.app{min-height:100vh;display:flex}.container{margin:auto;width:100%;max-width:850px;padding:2rem 1rem}.comments-list{display:flex;flex-direction:column;gap:1.1rem}.comment-block{display:flex;flex-direction:column;gap:10px}.comment{display:flex;flex-direction:column;gap:12px;padding:16px;background-color:var(--White);border-radius:8px}.comment-main{flex:1;display:flex;flex-direction:column;gap:8px}.comment-votes{display:flex;flex-direction:row;align-items:center;gap:10px;padding:6px 10px;background-color:var(--Grey-50);border-radius:8px;color:var(--Purple-600);font-weight:500}.comment-votes button{border:none;background:transparent;cursor:pointer;color:inherit;font-size:16px;line-height:1}.comment-votes span{font-size:14px}.comment-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.user-info{display:flex;align-items:center;gap:10px}.avatar{width:32px;height:32px;border-radius:50%}.username{font-weight:600;font-size:1rem;color:var(--Grey-800)}.you-badge{background-color:var(--Purple-600);color:var(--White);font-size:.8rem;padding:2px 6px;border-radius:3px}.time{font-size:.9rem;color:var(--Grey-500)}.comment-body p{margin:0;font-size:1rem;color:var(--Grey-500);line-height:1.5}.mention{color:var(--Purple-600);font-weight:500}.comment-actions{display:flex;align-items:center;gap:16px;font-size:14px;font-weight:600}.comment-actions button{border:none;background:transparent;cursor:pointer}.reply-btn,.edit-btn{font-size:.9rem;font-weight:600;color:var(--Purple-600)}.delete-btn{color:var(--Pink-400)}.mobile-row{display:flex;justify-content:space-between;align-items:center}.replies-wrapper{display:flex;gap:16px}.replies-line{width:2px;background-color:var(--Grey-100);margin-left:24px}.replies-list{flex:1;display:flex;flex-direction:column;gap:16px}.reply-form-wrapper{margin-left:40px}.comment-form{display:flex;align-items:flex-start;gap:16px;padding:1.5rem;margin-top:4px;background-color:var(--White);border-radius:8px}.comment-input{flex:1;min-height:80px;padding:10px 15px;border-radius:8px;border:1px solid var(--Grey-100);resize:none;outline:none;font-size:1rem;color:var(--Grey-800)}.comment-input:focus{border-color:var(--Purple-600)}.primary-btn{padding:10px 20px;border-radius:8px;border:none;background-color:var(--Purple-600);color:var(--White);font-size:12px;font-weight:600;letter-spacing:1px;cursor:pointer}.primary-btn:hover{background-color:var(--Purple-200)}.modal-backdrop{position:fixed;inset:0;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:50}.modal{background-color:var(--White);padding:24px;border-radius:8px;max-width:360px;width:100%}.modal h2{margin:0 0 10px;font-size:1.2rem;color:var(--Grey-800)}.modal p{margin:0 0 18px;font-size:14px;color:var(--Grey-500)}.modal-actions{display:flex;gap:10px}.modal-btn{flex:1;padding:10px 8px;border-radius:8px;border:none;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--White);cursor:pointer}.modal-btn.cancel{background-color:var(--Grey-500)}.modal-btn.delete{background-color:var(--Pink-400)}.desktop-only{display:none}.mobile-only{display:flex}@media(min-width:768px){.comment{flex-direction:row;align-items:flex-start}.comment-votes{flex-direction:column;width:40px;padding:10px 0;align-items:center}.desktop-only{display:flex}.mobile-only{display:none}.reply-form-wrapper{margin-left:72px}.replies-line{margin-left:48px}}