:root {
        --primary: #5357b6;
        --danger: #ed6468;
        --gray: #67727e;
        --light: #f5f6fa;
        --border: #e9ebf0;
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        margin: 0;
        padding: 16px;
        font-family: "Segoe UI", sans-serif;
        background: var(--light);
      }

      .comments-container{
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: 720px;
        margin: auto;
      }

      .comment{
            padding: 16px;
            background-color: #fff;
            border-radius: 10px;
      }

      .comment-body{
         display: flex;
         flex-direction: column;
         gap: 12px;
        }

      .comment-header{
        display: flex;
        align-items: center;
        gap: 8px;
      }  
      .avatar{
        width: 32px;height: 32px;border-radius: 50%;
      }
      .username{
        color: black;
        font-weight: 700;
      }
     .you{
        background-color: var(--primary);
        padding: 2px 6px;
        border-radius: 4px;
        color: var(--light);
        font-size: 13px;
     }
     .time{
        margin-left: auto;
        color: var(--gray);
        font-size: 13px;
     }
     .comment-text{
        font-size: 15px;
        line-height: 1.5;
        color: var(--gray);
     }
    .comment-text strong{
        color: var(--primary);
        font-weight: 700;
    } 

    .comment-footer{
        display: flex;
        justify-content: space-between;
    }
    .vote-box{
        display: flex;
        gap:12px;
        align-items: center;
        background-color:var(--light);
        color: var(--primary);
        padding:8px 12px;
        font-weight: 700;
        border-radius:8px;
    }

    .vote-box button{
        outline: none;
        border: none;
        cursor: pointer;
        background-color: transparent;
        opacity: 0.6;
    }
    .vote-box button:hover{
        opacity: 1;
    }

     .actions {
        display: flex;
        gap:16px;
        font-weight: 700;
        font-size: 14px;
      } 

       .actions span {
        display: flex;
        align-items: center;
        gap:6px;
        cursor: pointer;
      }


    .reply{
        color: var(--primary);
    }
    .delete{
        color: var(--danger);
    }
    .edit{
        color: var(--primary);
    }

    .reply:hover,
    .delete:hover,
    .edit:hover{
        opacity: 0.7;
    }


     .replies {
        margin-left: 16px;
        padding-left: 16px;
        border-left: 2px solid var(--border);
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

    .add-comment-box {
        background: #fff;
        padding: 16px;
        border-radius: 10px;
        display: flex;
        gap: 12px;
        max-width: 720px;
        margin:16px auto;
      }

    .add-comment-box textarea {
        flex: 1;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 10px;
        resize: none;
        font-family: inherit; 
      }
    
    .add-comment-box button {
        background: var(--primary);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 10px 16px;
        font-weight: 700;
        cursor: pointer;
      }  

      .add-comment-box textarea:focus {
        outline: none;
        border-color: var(--primary);
      }

      .modal{
           position: fixed;
           inset: 0;
           background: rgba(0,0,0,0.5);
           display:none;
           align-items: center;
           justify-content: center;
      }

      .modal-content{
         width: 90%;
         max-width: 343px;
         padding: 16px;
         background-color: #fff;
         border-radius: 10px;
      }
      .modal-content p{
         margin: 12px 0px 20px;
         color: var(--gray);
      }
      .modal-content button{
         padding: 10px;
         width: 48%;
         border: none;
         border-radius: 10px;
         font-family: 700;
         cursor: pointer;
      }
      #cancelDelete{
        background: #67727e;
        color: #fff;
      }
      #confirmDelete{
        background: var(--danger);
        color:#fff;
      }


      .reply-box{
         max-width: 720px;
         background-color: #fff;
         border-radius: 10px;
         padding: 16px;
         display: flex;
         margin: auto;
         width: 100%;
         gap: 12px;
      }
      .reply-box textarea{
         flex: 1;
         resize: none;
         border:1px solid var(--border);
         padding: 10px;
         font-family: inherit;
      }
      .reply-box button{
        font-weight: 700;
        background: var(--primary);
        color: #fff;
        padding: 10px 16px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
      }

      .edit-box{
        width: 100%;max-width: 720px;
        display: flex;margin:auto;
        background: #fff;
        border: 1px solid --border;
        padding: 16px;
        gap: 12px;
      }

      .edit-box textarea{
        flex: 1;
        resize: none;
        padding: 10px;
        border: 1px solid --border;
        border-radius: 10px;
        font-family: inherit;
        outline: none;
      }

      .edit-box button{
        padding: 10px 16px;
        background-color: var(--primary);
        color: #fff;
        border: none;
        border-radius: 10px; cursor: pointer;
      }

      .edit-box textarea:focus,
      .reply-box textarea:focus{
        outline: none;
        border-color: var(--primary);
      }