.comments.wnlen-comments {
    --comment-accent: #ef8d55;
    --comment-accent-dark: #d96e37;
    --comment-ink: #3d3834;
    --comment-muted: #8f857c;
    --comment-line: #e9e1da;
    --comment-paper: rgba(255, 255, 255, .94);
    max-width: 900px;
    margin: 48px auto 76px;
    padding: 0 20px;
    overflow: visible;
    background: transparent;
}

/* Use the site's custom pointer instead of Sakura's red unavailable cursor. */
.cd-top,
.wnlen-comments a,
.wnlen-comments button,
.wnlen-comments input[type="submit"],
.wnlen-comments input[type="button"],
.wnlen-comments input[type="checkbox"],
.wnlen-comments input[type="file"],
.wnlen-comments label[for],
.wnlen-comments .siren-checkbox-label,
.wnlen-comments .insert-image-tips,
.wnlen-comments .insert-image-button,
.wnlen-comments #upload-img-file,
.wnlen-comments #emotion-toggle,
.wnlen-comments .emoji-item,
.wnlen-comments .emotion-item,
.wnlen-comments .emotion-select-parent,
.wnlen-comments .motion-switcher-table th,
.wnlen-comments .tieba-container span {
    cursor: url("/wp-content/themes/sakura/images/ComixCursors-White/x2.cur"), pointer !important;
}

.wnlen-comments .emotion-box,
.wnlen-comments .motion-container {
    cursor: url("/wp-content/themes/sakura/images/ComixCursors-White/x1.cur"), default !important;
}

.wnlen-comments textarea,
.wnlen-comments .wnlen-comment-rich-input,
.wnlen-comments input[type="text"],
.wnlen-comments input[type="email"],
.wnlen-comments input[type="url"] {
    cursor: url("/wp-content/themes/sakura/images/ComixCursors-White/Comix_White_Text.cur"), text !important;
}

.wnlen-comments .comments-main {
    overflow: visible;
    padding: clamp(26px, 5vw, 48px);
    border: 1px solid rgba(112, 91, 74, .11);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0, rgba(239, 141, 85, .09), transparent 28%),
        var(--comment-paper);
    box-shadow: 0 22px 60px rgba(79, 60, 45, .08);
}

.wnlen-comments__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--comment-line);
}

.wnlen-comments__eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--comment-accent-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
}

.wnlen-comments h3#comments-list-title {
    width: auto;
    max-width: none;
    margin: 0;
    color: var(--comment-ink);
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 650;
    line-height: 1.2;
}

.wnlen-comments__count {
    flex: none;
    padding: 7px 12px;
    border: 1px solid var(--comment-line);
    border-radius: 999px;
    color: var(--comment-muted);
    background: rgba(255, 255, 255, .72);
    font-size: 12px;
}

.wnlen-comments__empty {
    margin: -8px 0 30px;
    padding: 18px 20px;
    border: 1px dashed var(--comment-line);
    border-radius: 12px;
    color: var(--comment-muted);
    background: rgba(255, 250, 246, .62);
    font-size: 13px;
    text-align: center;
}

.wnlen-comment-compose {
    padding: clamp(20px, 4vw, 30px);
    border: 1px solid var(--comment-line);
    border-radius: 18px;
    background: rgba(255, 252, 249, .78);
}

.wnlen-comment-compose__intro {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
    color: inherit;
    font-weight: inherit;
}

.wnlen-comment-compose__intro strong {
    color: var(--comment-ink);
    font-size: 17px;
    font-weight: 650;
}

.wnlen-comment-compose__intro span {
    color: var(--comment-muted);
    font-size: 12px;
}

.wnlen-comment-compose__intro #cancel-comment-reply-link {
    margin-left: auto;
}

.wnlen-comments .comment-respond,
.wnlen-comments form#commentform {
    width: 100%;
    max-width: none;
    margin: 0;
}

.wnlen-comment-editor {
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid var(--comment-line);
    border-radius: 14px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.wnlen-comment-editor:hover,
.wnlen-comment-editor:focus-within {
    border-color: rgba(239, 141, 85, .72);
    box-shadow: 0 0 0 3px rgba(239, 141, 85, .1);
}

.wnlen-comment-editor__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--comment-line);
    color: var(--comment-muted);
    background: #fcfaf8;
    font-size: 12px;
}

.wnlen-comment-editor__toolbar > span {
    color: var(--comment-ink);
    font-weight: 600;
}

.wnlen-comment-editor__toolbar a {
    color: var(--comment-muted);
}

.wnlen-comment-editor__toolbar a:hover {
    color: var(--comment-accent-dark);
}

.wnlen-comments .comment-textarea {
    position: relative;
}

.wnlen-comments .comment-respond textarea {
    min-height: 158px;
    margin: 0;
    padding: 25px 18px 18px;
    border: 0;
    border-radius: 0;
    outline: 0;
    color: var(--comment-ink);
    background: #fff;
    background-image: none;
    line-height: 1.8;
}

.wnlen-comments .wnlen-comment-source {
    display: none !important;
}

.wnlen-comments .wnlen-comment-rich-input {
    position: relative;
    min-height: 158px;
    padding: 25px 18px 18px;
    border: 0;
    border-radius: 0;
    outline: 0;
    color: var(--comment-ink);
    background: #fff;
    line-height: 1.8;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.wnlen-comments .wnlen-comment-rich-input.is-empty::before {
    content: attr(data-placeholder);
    position: absolute;
    top: 25px;
    left: 18px;
    color: #a69b92;
    pointer-events: none;
}

.wnlen-comments .wnlen-comment-rich-token {
    display: inline-block;
    max-width: 100%;
    margin: 0 2px;
    vertical-align: middle;
}

.wnlen-comments .wnlen-comment-rich-token,
.wnlen-comments .wnlen-comment-rich-token * {
    cursor: url("/wp-content/themes/sakura/images/ComixCursors-White/Comix_White_Text.cur"), text !important;
}

.wnlen-comments .wnlen-comment-rich-token .emotion-item {
    margin: 0 2px -8px;
}

.wnlen-comments .wnlen-comment-rich-static-emotion img {
    width: 32px;
    height: 32px;
    margin: 0 2px -8px;
    object-fit: contain;
}

.wnlen-comments .wnlen-comment-rich-kaomoji {
    color: var(--comment-ink);
}

.wnlen-comments .wnlen-comment-rich-image img {
    display: block;
    width: auto;
    max-width: min(100%, 360px);
    max-height: 180px;
    border-radius: 8px;
    object-fit: contain;
}

.wnlen-comments .commentbody:focus {
    border-color: transparent;
}

.wnlen-comments .input-label {
    top: 19px;
    left: 13px;
    color: #a69b92;
}

.wnlen-comments .commentbody:not(:placeholder-shown) ~ .input-label,
.wnlen-comments .commentbody:focus ~ .input-label {
    color: var(--comment-accent-dark);
    background: #fff;
}

.wnlen-comments #emotion-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 36px;
    margin: 0 12px 12px;
    padding: 7px 13px;
    border: 1px solid var(--comment-line);
    border-radius: 999px;
    color: #74685f;
    background: #fffaf6;
    font-size: 12px;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.wnlen-comments #emotion-toggle::before {
    margin-right: 7px;
    content: "☺";
    color: var(--comment-accent-dark);
    font-size: 15px;
}

.wnlen-comments #emotion-toggle:hover {
    border-color: rgba(239, 141, 85, .52);
    color: var(--comment-accent-dark);
    background: #fff6ef;
}

.wnlen-comments .emotion-box {
    margin: 0 12px 12px;
    overflow: hidden;
    border: 1px solid var(--comment-line);
    border-radius: 12px;
    background: #fff;
}

.wnlen-comments .motion-switcher-table {
    border-bottom: 1px solid var(--comment-line);
    background: #fcfaf8;
}

.wnlen-comments .motion-switcher-table th {
    position: relative;
    padding: 10px 8px;
    border-radius: 0;
    color: var(--comment-muted);
    font-size: 12px;
    font-weight: 600;
}

.wnlen-comments .motion-switcher-table th:hover,
.wnlen-comments .motion-switcher-table .on-hover {
    color: var(--comment-accent-dark);
    background: #fff7f1;
}

.wnlen-comments .motion-switcher-table .on-hover::after {
    position: absolute;
    right: 24%;
    bottom: 0;
    left: 24%;
    height: 2px;
    border-radius: 2px;
    background: var(--comment-accent);
    content: "";
}

.wnlen-comments .motion-container {
    height: 126px;
    margin: 0;
    padding: 10px 12px;
    scrollbar-color: rgba(239, 141, 85, .45) transparent;
    scrollbar-width: thin;
}

.wnlen-comments .cmt-info-container {
    display: grid;
    grid-template-columns: 56px repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin: 0 0 14px;
    align-items: end;
}

.wnlen-comments .comment-user-avatar {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0 6px 0 0;
    align-self: end;
}

.wnlen-comments .comment-user-avatar img {
    border: 2px solid #fff;
    box-shadow: 0 4px 14px rgba(69, 49, 35, .13);
}

.wnlen-comments .cmt-popup,
.wnlen-comments .cmt-author {
    width: auto;
    margin: 0;
}

.wnlen-comments .cmt-popup > label {
    display: block;
    margin: 0 0 7px 2px;
    color: #776d65;
    font-size: 11px;
    font-weight: 600;
}

.wnlen-comments .cmt-popup > label span {
    color: var(--comment-accent-dark);
}

.wnlen-comments .cmt-popup > label small {
    color: #aaa098;
    font-size: 10px;
    font-weight: 400;
}

.wnlen-comments .wnlen-qq-status {
    position: absolute;
    top: calc(100% + 4px);
    left: 2px;
    overflow: hidden;
    max-width: calc(100% - 4px);
    color: var(--comment-muted);
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wnlen-comments .wnlen-qq-status.is-loading {
    color: #9b755d;
}

.wnlen-comments .wnlen-qq-status.is-success {
    color: #4d9271;
}

.wnlen-comments .wnlen-qq-status.is-error {
    color: #c35f57;
}

.wnlen-comments .comment-respond .cmt-popup input {
    min-height: 46px;
    padding: 12px 13px;
    border: 1px solid var(--comment-line);
    border-radius: 10px;
    outline: 0;
    color: var(--comment-ink);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.wnlen-comments .comment-respond .cmt-popup input:hover,
.wnlen-comments .comment-respond .cmt-popup input:focus {
    border-color: rgba(239, 141, 85, .72);
    box-shadow: 0 0 0 3px rgba(239, 141, 85, .1);
}

.wnlen-comments .popup .popuptext {
    bottom: calc(100% + 7px);
    margin-left: -80px !important;
    padding: 7px 9px;
    color: #fff;
    background: #544a43;
    font-size: 11px;
}

.wnlen-comments .popup:hover .popuptext,
.wnlen-comments .popup:focus-within .popuptext {
    visibility: visible;
    animation: fadeIn .2s ease both;
}

.wnlen-comments .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 18px;
    color: var(--comment-muted);
    font-size: 11px;
    line-height: 1.6;
}

.wnlen-comments .comment-form-cookies-consent input {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: var(--comment-accent);
}

.wnlen-comments .comment-respond .form-submit {
    display: flex;
    justify-content: flex-end;
    position: relative;
    gap: 10px;
    margin: 0;
}

.wnlen-comments .comment-respond input[type="submit"] {
    width: auto;
    min-width: 152px;
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--comment-accent), var(--comment-accent-dark));
    box-shadow: 0 9px 20px rgba(217, 110, 55, .2);
    font-weight: 650;
    letter-spacing: .02em;
    transition: transform .2s ease, box-shadow .2s ease;
}

.wnlen-comments .form-submit .insert-image-tips {
    position: relative;
    flex: 0 0 46px;
    float: none;
    order: 2;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 12px;
    border-color: var(--comment-line);
    border-radius: 50%;
    background: #fff;
}

.wnlen-comments .form-submit .insert-image-button {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    float: none;
    width: 46px !important;
    height: 46px !important;
    transform: none;
}

.wnlen-comments .form-submit .insert-image-button,
.wnlen-comments .form-submit #upload-img-file {
    cursor: url("/wp-content/themes/sakura/images/ComixCursors-White/x2.cur"), pointer !important;
}

.wnlen-comments .form-submit .insert-img-popuptext {
    top: 50%;
    right: auto;
    bottom: auto;
    left: calc(100% + 10px);
    width: max-content;
    margin: 0 !important;
    padding: 7px 9px;
    color: #fff;
    background: #544a43;
    transform: translateY(-50%);
}

.wnlen-comments .form-submit .insert-img-popuptext::after {
    top: 50%;
    left: -12px;
    margin: -6px 0 0;
    border-width: 6px;
    border-color: transparent #544a43 transparent transparent;
}

.wnlen-comments .form-submit .insert-image-tips:hover .insert-img-popuptext,
.wnlen-comments .form-submit .insert-image-tips:focus-within .insert-img-popuptext,
.wnlen-comments .form-submit .insert-image-tips-hover .insert-img-popuptext {
    visibility: visible;
    animation: fadeIn .2s ease both;
}

.wnlen-comments .form-submit .insert-image-tips:hover,
.wnlen-comments .form-submit .insert-image-tips:focus {
    border-color: var(--comment-accent);
    color: var(--comment-accent-dark);
    outline: 0;
}

.wnlen-comments .comment-respond input[type="submit"]:hover {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #f29963, #d96931) !important;
    box-shadow: 0 12px 24px rgba(217, 110, 55, .28);
    transform: translateY(-1px);
}

.wnlen-comments .wnlen-comment-qq-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.wnlen-comments ul.commentwrap,
.wnlen-comments ol.commentwrap {
    margin-bottom: 34px;
}

.wnlen-comments .comment .main {
    border: 1px solid var(--comment-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 8px 24px rgba(79, 60, 45, .05);
}

.wnlen-comments .comments .commentwrap hr,
.wnlen-comments .commentwrap hr {
    margin: 24px 0;
    background: var(--comment-line);
}

body.dark .comments.wnlen-comments {
    --comment-ink: #e9e2dc;
    --comment-muted: #aaa099;
    --comment-line: rgba(255, 255, 255, .11);
    --comment-paper: rgba(30, 30, 32, .94);
}

body.dark .wnlen-comments .comments-main,
body.dark .wnlen-comments .wnlen-comment-compose,
body.dark .wnlen-comments .wnlen-comment-editor,
body.dark .wnlen-comments .comment-respond textarea,
body.dark .wnlen-comments .commentbody:not(:placeholder-shown) ~ .input-label,
body.dark .wnlen-comments .commentbody:focus ~ .input-label,
body.dark .wnlen-comments .emotion-box,
body.dark .wnlen-comments .comment-respond .cmt-popup input,
body.dark .wnlen-comments .comment .main {
    background-color: #252527;
}

body.dark .wnlen-comments .wnlen-comment-editor__toolbar,
body.dark .wnlen-comments .motion-switcher-table,
body.dark .wnlen-comments .wnlen-comments__empty,
body.dark .wnlen-comments #emotion-toggle {
    background: #2d2c2d;
}

body.dark .wnlen-comments .comment-respond textarea,
body.dark .wnlen-comments .comment-respond .cmt-popup input {
    color: var(--comment-ink);
}

@media (max-width: 720px) {
    .comments.wnlen-comments {
        margin: 30px auto 54px;
        padding: 0 12px;
    }

    .wnlen-comments .comments-main {
        padding: 22px 16px;
        border-radius: 18px;
    }

    .wnlen-comments__header {
        align-items: center;
        margin-bottom: 24px;
    }

    .wnlen-comment-compose {
        padding: 16px 12px;
        border-radius: 14px;
    }

    .wnlen-comment-compose__intro {
        display: block;
    }

    .wnlen-comment-compose__intro span {
        display: block;
        margin-top: 4px;
    }

    .wnlen-comments .cmt-info-container {
        grid-template-columns: 46px 1fr;
        gap: 12px 10px;
    }

    .wnlen-comments .comment-user-avatar {
        grid-row: 1;
        width: 42px;
        height: 42px;
        right: auto;
        padding-top: 0;
        align-self: end;
    }

    .wnlen-comments .cmt-author {
        grid-column: 2;
    }

    .wnlen-comments .cmt-info-container > .cmt-popup:not(.cmt-author) {
        grid-column: 1 / -1;
    }

    .wnlen-comments .comment-respond .cmt-popup input {
        margin: 0;
    }

    .wnlen-comments .motion-container {
        height: 132px;
    }

    .wnlen-comments .comment-respond .form-submit {
        justify-content: stretch;
    }

    .wnlen-comments .comment-respond input[type="submit"] {
        flex: 1 1 auto;
        width: auto;
        margin: 0;
    }
}