.comment-card{
  width:100%;
  padding:20px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  font-family:system-ui, sans-serif;
  color:#222;
}

@media(min-width:1024px){
  .comment-card{
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(10px);
  }
}

.comment-title{
  font-size:20px;
  font-weight:600;
  margin-bottom:16px;
}

.comment-meta{
  display:flex;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.field{
  position:relative;
  flex:1;
  min-width:220px;
}

.field input{
  width:100%;
  padding:14px 12px;
  border-radius:10px;
  border:1px solid #ddd;
  font-size:14px;
  background:#fafafa;
}

.field label{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  color:#888;
  pointer-events:none;
  transition:.2s;
  background:#fafafa;
  padding:0 6px;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top:-6px;
  font-size:11px;
  color:#555;
}

.comment-body{
  position:relative;
}

.comment-body textarea{
  width:100%;
  padding:16px;
  border-radius:14px;
  border:1px solid #ddd;
  resize:none;
  font-size:14px;
  line-height:1.5;
}

.comment-body button{
  position:absolute;
  right:14px;
  bottom:14px;
  padding:8px 16px;
  border-radius:20px;
  border:none;
  background:#111;
  color:#fff;
  font-size:13px;
  cursor:pointer;
  opacity:.4;
  transition:.2s;
}

.comment-body button:not(:disabled){
  opacity:1;
}

.comment-body button:hover{
  transform:translateY(-1px);
}

.bbcodes{
  margin-bottom:6px;
}