.ubcm-comment-section {
    --ubcm-primary:#1687ff;
    --ubcm-secondary:#6cb6ff;
    --ubcm-accent:#ffd166;
    --ubcm-bg-start:#0b1f3a;
    --ubcm-bg-end:#061225;
    --ubcm-surface:#102a4b;
    --ubcm-text:#fff;
    --ubcm-muted:#c9d8ea;
    --ubcm-pending:#8fd3ff;
    --ubcm-author:#ffd166;
    --ubcm-radius:14px;
    --ubcm-glow:.3;
    --ubcm-font-size:16px;
    --ubcm-child-indent:34px;
    position:relative;
    display:block;
    clear:both;
    width:100%;
    max-width:100%;
    margin:32px auto;
    padding:24px;
    border:1px solid var(--ubcm-border);
    border-radius:calc(var(--ubcm-radius) + 4px);
    background:linear-gradient(180deg,var(--ubcm-bg-start),var(--ubcm-bg-end));
    color:var(--ubcm-text);
    font-size:var(--ubcm-font-size);
    box-shadow:0 12px 32px rgba(0,0,0,.22),0 0 20px rgba(22,135,255,.2);
    box-shadow:0 12px 32px rgba(0,0,0,.22),0 0 20px color-mix(in srgb,var(--ubcm-primary) calc(var(--ubcm-glow) * 100%),transparent);
    overflow:hidden;
}
.ubcm-comment-section,.ubcm-comment-section *{box-sizing:border-box}
.ubcm-comment-section .ubcm-section-heading{margin-bottom:24px}
.ubcm-comment-section .ubcm-comment-title{margin:0 0 8px;color:var(--ubcm-accent);font-size:clamp(24px,4vw,34px);line-height:1.25;font-weight:900;text-transform:none}
.ubcm-comment-section .ubcm-comment-description{margin:0 0 18px;color:#fad86f;line-height:1.7}
.ubcm-comment-section .ubcm-comments-count{display:block;margin:0 0 20px;color:var(--ubcm-accent);font-size:22px;line-height:1.35;font-weight:900;text-transform:uppercase}
.ubcm-comment-section #comments,.ubcm-comment-section .comments-area{margin:0;padding:0;background:transparent;color:var(--ubcm-text)}
.ubcm-comment-section #comments>.comments-title,.ubcm-comment-section #comments>h1,.ubcm-comment-section #comments>h2,.ubcm-comment-section #comments>h3,.ubcm-comment-section #comments>h4,.ubcm-comment-section #comments>h5,.ubcm-comment-section #comments>h6{display:none!important}
.ubcm-comment-section .comment-list,.ubcm-comment-section ol.comment-list,.ubcm-comment-section ul.comment-list{list-style:none;margin:0;padding:0}

/* Card applied directly to each LI so Flatsome and themes without .comment-body still receive a visible frame. */
.ubcm-comment-section li.comment,
.ubcm-comment-section li.ubcm-comment-item {
    position:relative;
    display:block;
    list-style:none;
    min-height:72px;
    margin:0 0 16px!important;
    padding:16px 18px!important;
    border:1px solid var(--ubcm-border)!important;
    border-radius:var(--ubcm-radius)!important;
    background:var(--ubcm-surface)!important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--ubcm-surface) 92%,var(--ubcm-primary) 8%),var(--ubcm-surface))!important;
    color:var(--ubcm-text)!important;
    box-shadow:0 6px 18px rgba(0,0,0,.18)!important;
}

/* Themes may wrap the comment in article/div/comment-inner. Keep those wrappers transparent to avoid double boxes. */
.ubcm-comment-section li.comment>.comment-body,
.ubcm-comment-section li.comment>.comment_container,
.ubcm-comment-section li.comment>.comment-inner,
.ubcm-comment-section li.comment>article,
.ubcm-comment-section li.ubcm-comment-item>.comment-body,
.ubcm-comment-section li.ubcm-comment-item>.comment_container,
.ubcm-comment-section li.ubcm-comment-item>.comment-inner,
.ubcm-comment-section li.ubcm-comment-item>article {
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:var(--ubcm-text)!important;
}

.ubcm-comment-section .comment-text,.ubcm-comment-section .comment-content,.ubcm-comment-section .comment-inner,.ubcm-comment-section .comment_container{background:transparent!important;color:var(--ubcm-text)!important}
.ubcm-comment-section .comment-content p,.ubcm-comment-section .comment-text p,.ubcm-comment-section .comment-inner p,.ubcm-comment-section .comment_container p{color:var(--ubcm-text)!important;line-height:1.7;margin:.6em 0}
.ubcm-comment-section .comment-author,.ubcm-comment-section .fn,.ubcm-comment-section .fn a{color:var(--ubcm-secondary)!important;font-weight:900;text-decoration:none}
.ubcm-comment-section .comment-meta,.ubcm-comment-section .comment-meta a,.ubcm-comment-section time{color:var(--ubcm-muted)!important;font-size:12.5px;font-weight:700;text-decoration:none}
.ubcm-comment-section .reply a{display:inline-flex;align-items:center;gap:6px;color:var(--ubcm-secondary)!important;font-size:12px;font-weight:900;text-transform:uppercase;text-decoration:none}
.ubcm-comment-section .reply a:hover,.ubcm-comment-section .fn a:hover,.ubcm-comment-section .comment-meta a:hover{color:var(--ubcm-accent)!important}
.ubcm-comment-section img.avatar,.ubcm-comment-section .avatar{border:2px solid var(--ubcm-primary)!important;border-radius:50%;background:var(--ubcm-surface);box-shadow:0 0 12px rgba(22,135,255,.45);box-shadow:0 0 12px color-mix(in srgb,var(--ubcm-primary) 55%,transparent)}
.ubcm-comment-section .children{list-style:none;margin:14px 0 0 var(--ubcm-child-indent)!important;padding:0!important}
.ubcm-comment-section .children>li:last-child{margin-bottom:0!important}

.ubcm-comment-section li.ubcm-author-comment{border-color:var(--ubcm-author)!important;border-color:color-mix(in srgb,var(--ubcm-author) 70%,var(--ubcm-border))!important;background:var(--ubcm-surface)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--ubcm-surface) 88%,var(--ubcm-author) 12%),var(--ubcm-surface))!important;box-shadow:0 6px 18px rgba(0,0,0,.2),inset 4px 0 0 var(--ubcm-author)!important}
.ubcm-comment-section .ubcm-author-comment .fn,.ubcm-comment-section .ubcm-author-comment .fn a,.ubcm-comment-section .ubcm-author-comment .comment-author{color:var(--ubcm-author)!important}
.ubcm-comment-section .ubcm-author-badge{display:inline-flex;margin-left:8px;padding:2px 8px;border:1px solid var(--ubcm-author);border-color:color-mix(in srgb,var(--ubcm-author) 65%,transparent);border-radius:999px;color:var(--ubcm-author)!important;background:rgba(255,209,102,.1);background:color-mix(in srgb,var(--ubcm-author) 12%,transparent);font-size:11px;line-height:1.5;font-weight:900;vertical-align:middle}
.ubcm-comment-section li.ubcm-pending-comment{border-color:var(--ubcm-pending)!important;border-color:color-mix(in srgb,var(--ubcm-pending) 75%,var(--ubcm-border))!important;box-shadow:0 6px 18px rgba(0,0,0,.18),inset 4px 0 0 var(--ubcm-pending)!important}
.ubcm-comment-section .comment-awaiting-moderation{display:block;margin:8px 0 10px;padding:9px 13px;border:1px solid var(--ubcm-pending);border-color:color-mix(in srgb,var(--ubcm-pending) 75%,transparent);border-left:3px solid var(--ubcm-pending);border-radius:9px;background:rgba(143,211,255,.12);background:color-mix(in srgb,var(--ubcm-pending) 12%,transparent);color:var(--ubcm-pending)!important;font-size:13px;line-height:1.55;font-weight:800;font-style:italic}

.ubcm-comment-section #respond,.ubcm-comment-section .comment-respond{margin-top:24px;padding:18px;border:1px solid var(--ubcm-border);border-radius:var(--ubcm-radius);background:var(--ubcm-surface);background:color-mix(in srgb,var(--ubcm-surface) 94%,transparent)}
.ubcm-comment-section #reply-title,.ubcm-comment-section .comment-reply-title{margin:0 0 14px;color:var(--ubcm-accent)!important;font-size:22px;font-weight:900}
.ubcm-comment-section #commentform p{margin:0 0 14px}
.ubcm-comment-section #commentform label{display:block;margin-bottom:6px;color:var(--ubcm-muted)!important;font-weight:800}
.ubcm-comment-section #commentform input[type="text"],.ubcm-comment-section #commentform input[type="email"],.ubcm-comment-section #commentform input[type="url"],.ubcm-comment-section #commentform textarea{width:100%;max-width:100%;padding:12px 14px;border:1px solid var(--ubcm-border);border-radius:calc(var(--ubcm-radius) - 4px);background:var(--ubcm-bg-end);background:color-mix(in srgb,var(--ubcm-bg-end) 82%,#fff 18%);color:var(--ubcm-text)!important;font:inherit;outline:none;box-shadow:none;transition:border-color .2s,box-shadow .2s,background .2s}
.ubcm-comment-section #commentform textarea{min-height:140px;resize:vertical}
.ubcm-comment-section #commentform input:focus,.ubcm-comment-section #commentform textarea:focus{border-color:var(--ubcm-primary);box-shadow:0 0 0 3px rgba(22,135,255,.2);box-shadow:0 0 0 3px color-mix(in srgb,var(--ubcm-primary) 22%,transparent);background:color-mix(in srgb,var(--ubcm-bg-end) 72%,#fff 28%)}
.ubcm-comment-section #commentform input::placeholder,.ubcm-comment-section #commentform textarea::placeholder{color:var(--ubcm-muted);opacity:.72}
.ubcm-comment-section #commentform .form-submit input,.ubcm-comment-section #commentform button,.ubcm-comment-section .submit{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 20px;border:1px solid var(--ubcm-primary);border-radius:calc(var(--ubcm-radius) - 4px);background:linear-gradient(135deg,var(--ubcm-primary),var(--ubcm-secondary));color:#061225!important;font-weight:900;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 18px rgba(22,135,255,.24);transition:transform .2s,filter .2s}
.ubcm-comment-section #commentform .form-submit input:hover,.ubcm-comment-section #commentform button:hover,.ubcm-comment-section .submit:hover{transform:translateY(-1px);filter:brightness(1.05)}
.ubcm-comment-section #commentform input[type="checkbox"]{accent-color:var(--ubcm-primary)}
.ubcm-comment-section a{outline-offset:3px}
.ubcm-comment-section a:focus-visible,.ubcm-comment-section button:focus-visible,.ubcm-comment-section input:focus-visible,.ubcm-comment-section textarea:focus-visible{outline:2px solid var(--ubcm-accent);outline-offset:3px}
.ubcm-comment-section.ubcm-auto-light{--ubcm-bg-start:#fff;--ubcm-bg-end:#f7fafc;--ubcm-surface:#fff;--ubcm-text:#1a202c;--ubcm-muted:#5f6b7a}

@media (max-width:782px){
    .ubcm-comment-section{margin:24px auto;padding:14px;border-radius:var(--ubcm-radius)}
    .ubcm-comment-section .children{margin-left:10px!important}
    .ubcm-comment-section li.comment,.ubcm-comment-section li.ubcm-comment-item{padding:14px!important}
    .ubcm-comment-section #respond,.ubcm-comment-section .comment-respond{padding:14px}
    .ubcm-comment-section .ubcm-comment-title{font-size:24px}
    .ubcm-comment-section .ubcm-comments-count{font-size:20px}
}