visually enhancing the comment container

public/s/css/f0ck.css

@@ -909,7 +909,7 @@ html[theme="f0ck95"] #next {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 15px;
+
   border-bottom: 1px solid var(--nav-border-color);
   padding-bottom: 10px;
 }
@@ -931,10 +931,10 @@ html[theme="f0ck95"] #next {
 }
 
 .comment-input {
-  margin-bottom: 20px;
+  margin-bottom: 5px;
   background: rgba(255, 255, 255, 0.05);
   /* Light seethrough */
-  padding: 10px;
+  padding: 5px;
   border: 1px solid var(--nav-border-color);
   border-radius: 0;
   /* No rounded corners */
@@ -983,7 +983,7 @@ html[theme="f0ck95"] #next {
 .comments-list {
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 5px;
 }
 
 .comment {
@@ -3850,9 +3850,8 @@ input#s_avatar {
 
 /* Comments System */
 #comments-container {
-  padding: 15px;
+  padding: 0px 5px 5px 5px;
   background: var(--metadata-bg);
-  border-radius: 5px;
   color: var(--white);
   font-family: var(--font);
 }
@@ -3861,9 +3860,8 @@ input#s_avatar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 15px;
   border-bottom: 1px solid var(--gray);
-  padding-bottom: 10px;
+  padding-bottom: 5px;
 }
 
 .comments-controls button,
@@ -3877,7 +3875,6 @@ input#s_avatar {
 }
 
 .comment {
-  margin-bottom: 15px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.2);
   border-radius: 4px;

public/s/js/comments.js

@@ -237,7 +237,7 @@ class CommentSystem {
 
         let html = `
             <div class="comments-header">
-                <h3>Comments (${comments.length}) ${this.isLocked ? '🔒' : ''}</h3>
+                <span>Comments (${comments.length}) ${this.isLocked ? '🔒' : ''}</span>
                 <div class="comments-controls">
                     <select id="comment-sort">
                         <option value="old" ${this.sort === 'old' ? 'selected' : ''}>Oldest</option>