.comments-area{
 margin-top: var(--space-lg);
 padding: var(--space-lg);
 background: var(--bg-card);
 border-radius: var(--border-radius);
 border: 1px solid var(--border-color);
}
.comment-list{
 list-style: none;
 margin: var(--space-md) 0 0;
 padding: 0;
}
.comment-list li{
 list-style: none;
}
.comment{
 margin-bottom: var(--space-lg);
 padding: var(--space-md);
 background: var(--bg-primary);
 border: 1px solid var(--border-color);
 border-radius: var(--border-radius-sm);
 box-shadow: var(--shadow-xs);
}
.comment:last-child{
 margin-bottom: 0;
}
.comment-body{
 padding: var(--space-sm);
}
.comment-author{
 display: flex;
 align-items: center;
 margin-bottom: var(--space-sm);
}
.comment-author .avatar{
 width: var(--button-size);
 height: var(--button-size);
 border-radius: 50%;
 margin-right: var(--space-sm);
 border: 2px solid var(--border-color);
}
.comment-author .fn{
 font-weight: var(--text-semibold);
 color: var(--text-primary);
 text-decoration: none;
}
.comment-author .fn:hover{
 color: var(--primary-color);
}
.comment-meta{
 font-size: var(--text-sm);
 color: var(--text-secondary);
 margin-left: var(--space-sm);
}
.comment-content{
 margin-left: var(--space-sm);
 line-height: 1.6;
 color: var(--text-primary);
}
.comment-content p:last-child{
 margin-bottom: 0;
}
.comment-reply-link, .comment-form .submit{
 display: inline-block;
 margin-top: var(--space-sm);
 padding: var(--space-sm);
 background-color: transparent;
 text-decoration: none;
 border: 1px solid var(--border-color);
 border-radius: var(--border-radius);
 font-weight: var(--text-medium);
 transition: var(--transition-all);
 cursor: pointer;
 font-size: var(--text-base);
 line-height: 1;
 color: var(--button-text);
}
.comment-reply-link:hover, .comment-form .submit:hover{
 background-color: var(--primary-dark);
 border-color: var(--primary-dark);
 transform: var(--lift-md);
 text-decoration: none;
 color: var(--white);
}
.comment-reply-link:focus, .comment-form .submit:focus{
 outline: none;
 box-shadow: var(--shadow-focus);
}
.comment-form{
 margin-top: 1rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
 width: 100%;
 padding: var(--space-sm);
 border: 1px solid var(--border-color);
 border-radius: var(--border-radius-sm);
 background: var(--bg-primary);
 color: var(--text-primary);
 font-size: var(--text-base);
 transition: var(--transition-all);
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus{
 outline: none;
 border-color: var(--primary-color);
 box-shadow: var(--shadow-focus);
}
.comment-form textarea{
 min-height: var(--textarea-min-height);
 resize: vertical;
}
ol.children{
 list-style-type: none;
 margin: 0;
}
.comment-respond{
 margin-top: var(--space-md);
}
.comment-counter{
 font-size: var(--text-sm);
 color: var(--text-secondary);
}
.logged-in-as{
 margin-bottom: var(--space-md);
 padding: var(--space-md);
 background: var(--bg-primary);
 border: 1px solid var(--border-color);
 border-radius: var(--border-radius-sm);
 font-size: var(--text-base);
 color: var(--text-secondary);
}
.logged-in-as a{
 color: var(--primary-color);
}
.logged-in-as a:hover{
 color: var(--primary-dark);
}
.no-comments{
 margin-top: var(--space-2xl);
 padding: var(--space-md);
 background: var(--bg-primary);
 border: 1px solid var(--border-color);
 border-radius: var(--border-radius-sm);
 text-align: center;
 color: var(--text-secondary);
}
@media (max-width: 768px){
 .comments-area{
 padding: var(--space-md);
}
 .comment{
 padding: var(--space-sm);
}
 .comment-author .avatar{
 width: var(--icon-size-lg);
 height: var(--icon-size-lg);
}
 .comment-content{
 margin-left: calc(var(--icon-size-lg) + var(--space-sm));
}
}