.content-comments {
    padding: 32px 0 8px;
    color: #273142;
}

.content-comments-container {
    width: min(100%, 920px);
    margin: 0 auto;
}

.content-comments-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.content-comments-heading span {
    color: #684ed7;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
}

.content-comments-heading h2 {
    margin: 3px 0 0;
    color: #273142;
    font-size: 25px;
}

.content-comments-heading h2 small {
    display: inline-grid;
    min-width: 28px;
    height: 28px;
    margin-left: 5px;
    place-items: center;
    border-radius: 50%;
    background: #eeeaff;
    color: #684ed7;
    font-size: 12px;
}

.content-comments-heading > i {
    color: #ded8fb;
    font-size: 34px;
}

.content-comment-list {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
}

.content-comment-thread { display: grid; gap: 9px; }
.content-comment-thread:target,
.content-comment-card--reply:target,
.content-comment-thread.content-comment-focus,
.content-comment-card--reply.content-comment-focus {
    scroll-margin-top: 135px;
    border-radius: 18px;
    outline: 3px solid rgba(255, 52, 101, .25);
    box-shadow: 0 0 0 7px rgba(255, 52, 101, .07);
    animation: content-comment-highlight 1.8s ease both;
}
.content-comment-thread:focus,
.content-comment-card--reply:focus { outline: 3px solid rgba(255, 52, 101, .25); }
@keyframes content-comment-highlight {
    0%, 35% { background: rgba(255, 52, 101, .13); }
    100% { background: transparent; }
}
.content-comment-replies { display: grid; gap: 9px; margin-left: 58px; padding-left: 15px; border-left: 3px solid #e8e4fb; }
.content-comment-card--reply { padding: 14px; background: #fbfbfe; }
.content-comment-card--reply .content-comment-avatar img { width: 38px; height: 38px; }
.content-comment-reply-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; margin-top: 11px; padding: 6px 12px; border: 1px solid #ddd6ff; border-radius: 999px; background: #f3f0ff; color: #684ed7; font-size: 11px; font-weight: 900; line-height: 1; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.content-comment-reply-toggle i { margin: 0; font-size: 12px; }
.content-comment-reply-toggle:hover,
.content-comment-reply-toggle:focus { border-color: #684ed7; background: #684ed7; color: #fff; transform: translateY(-1px); }
.content-comment-reply-form { margin-left: 58px; padding: 15px; border: 1px solid #ded9f8; border-radius: 13px; background: #f8f7ff; }
.content-comment-reply-form[hidden] { display: none; }
.content-comment-reply-form label { display: block; margin-bottom: 7px; color: #3e485b; font-size: 11px; font-weight: 800; }
.content-comment-reply-form textarea { width: 100%; min-height: 76px; padding: 11px 13px; resize: vertical; border: 1px solid #d9ddeb; border-radius: 10px; background: #fff; color: #273142; font: inherit; font-size: 13px; }
.content-comment-reply-form > .content-comment-reply-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 9px; }
.content-comment-reply-form button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 13px; border: 0; border-radius: 8px; background: #5c45d6; color: #fff; font-size: 11px; font-weight: 900; }
.content-comment-reply-form button i { margin: 0; }
.content-comment-reply-form .content-comment-reply-cancel { background: #e9e6f8; color: #554a86; }

.content-comment-card {
    display: flex;
    gap: 14px;
    padding: 18px;
    border: 1px solid #e3e7ef;
    border-radius: 15px;
    background: #fff;
}

.content-comment-card--pending {
    border-color: #f0cf78;
    background: linear-gradient(145deg, #fffdf6, #fff8e5);
    box-shadow: inset 4px 0 0 #f2b72f;
}

.content-comment-avatar img,
.content-comment-form-user img {
    width: 46px;
    height: 46px;
    border: 2px solid #ebe7ff;
    border-radius: 50%;
    object-fit: cover;
}

.content-comment-copy { min-width: 0; flex: 1; }
.content-comment-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.content-comment-meta > div { display: flex; flex-direction: column; }
.content-comment-meta a { color: #273142; font-size: 14px; font-weight: 900; text-decoration: none; }
.content-comment-meta span,
.content-comment-meta time { color: #818a9b; font-size: 11px; }
.content-comment-meta .content-comment-pending-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    margin-top: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #8a5a00;
    background: #ffe7a8;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}
.content-comment-copy p { margin: 10px 0 0; color: #505b6e; font-size: 14px; line-height: 1.65; }
.content-comment-private-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(194, 142, 20, .2);
    color: #8a681b;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
}

.content-comment-private-note i { margin-top: 2px; color: #d89b12; }

.content-comments-empty,
.content-comment-login {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
    padding: 19px;
    border: 1px dashed #d9ddeb;
    border-radius: 15px;
    background: #fafbfe;
}

.content-comments-empty > i,
.content-comment-login > i { color: #735ce0; font-size: 25px; }
.content-comments-empty strong,
.content-comment-login strong { color: #273142; }
.content-comments-empty p,
.content-comment-login p { margin: 2px 0 0; color: #7a8496; font-size: 12px; }

.content-comment-form-card {
    padding: 22px;
    border: 1px solid #ded9f8;
    border-radius: 17px;
    background: #f8f7ff;
}

.content-comment-form-user { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.content-comment-form-user > div { display: flex; flex-direction: column; }
.content-comment-form-user strong { color: #273142; font-size: 13px; }
.content-comment-form-user span { color: #727d90; font-size: 11px; }
.content-comment-form-card label { display: block; margin-bottom: 7px; color: #3e485b; font-size: 12px; font-weight: 800; }
.content-comment-form-card textarea {
    width: 100%;
    min-height: 110px;
    padding: 13px 15px;
    resize: vertical;
    border: 1px solid #d9ddeb;
    border-radius: 11px;
    outline: 0;
    background: #fff;
    color: #273142;
    font: inherit;
    font-size: 14px;
}
.content-comment-form-card textarea:focus { border-color: #735ce0; box-shadow: 0 0 0 3px rgba(115, 92, 224, .11); }
.content-comment-input { position: relative; }
.content-comment-input textarea { padding-right: 58px; }
.comment-emoji-picker { position: absolute; right: 10px; bottom: 10px; }
.comment-emoji-picker > summary { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #f0edff; color: #6047e9; list-style: none; cursor: pointer; }
.comment-emoji-picker > summary::-webkit-details-marker { display: none; }
.comment-emoji-picker > summary:hover,
.comment-emoji-picker[open] > summary { background: #ddd6ff; color: #5137dc; }
.comment-emoji-picker__options { position: absolute; z-index: 25; right: 0; bottom: calc(100% + 8px); display: grid; grid-template-columns: repeat(5, 38px); gap: 4px; width: max-content; padding: 9px; border: 1px solid #dfe4ee; border-radius: 15px; background: #fff; box-shadow: 0 16px 36px rgba(30, 40, 72, .2); }
.content-comments .comment-emoji-picker__options button { display: grid; width: 38px; min-width: 38px; height: 38px; min-height: 38px; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: inherit; font-size: 21px; cursor: pointer; }
.content-comments .comment-emoji-picker__options button:hover,
.content-comments .comment-emoji-picker__options button:focus { background: #f0edff; transform: scale(1.08); }
.content-comment-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.content-comment-form-footer small { color: #788397; font-size: 11px; }
.content-comment-form-footer small i { color: #19a66b; }
.content-comment-form-footer button,
.content-comment-login a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: #5c45d6;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}
.content-comment-login > div { flex: 1; }
.content-comment-notices p { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: #eaf8f1; color: #08784e; font-size: 13px; font-weight: 700; }
.content-comment-notices p.is-error { background: #fff0f3; color: #c6244a; }
.content-comment-notices p.is-warning { background: #fff7df; color: #8d6500; }

@media (max-width: 600px) {
    .comment-emoji-picker__options { position: fixed; right: 12px; bottom: 18px; left: 12px; grid-template-columns: repeat(5, 1fr); width: auto; }
    .content-comments .comment-emoji-picker__options button { justify-self: center; }
    .content-comment-meta,
    .content-comment-form-footer { align-items: flex-start; flex-direction: column; }
    .content-comment-card { padding: 15px; }
    .content-comment-form-card { padding: 17px; }
    .content-comment-form-footer button,
    .content-comment-login a { width: 100%; }
    .content-comment-login { align-items: flex-start; flex-wrap: wrap; }
    .content-comment-login > div { min-width: calc(100% - 50px); }
    .content-comment-replies,
    .content-comment-reply-form { margin-left: 22px; padding-left: 10px; }
}