.blog-comment-thread { color:#d1d5db; }
.blog-comment-thread [hidden] { display:none!important; }
.blog-comment-thread>p { margin:0; padding:.85rem; border:1px solid #ffffff0f; border-radius:8px; background:#1a1a1a4d; box-shadow:0 1px 2px #0000001a; color:#6b7280; font-size:16px; line-height:24px; font-style:italic; text-align:center; }
.blog-comment-thread>[data-comments-status]:not([data-state]) { padding:32px 0; border:0; border-radius:0; background:none; box-shadow:none; }
.blog-comment-thread>[data-state=error] { color:var(--color-error); font-style:normal; }
.comment-node { position:relative; }
[data-comments-list]>.comment-node { margin-bottom:12px; }
.comment-card { padding:.85rem; border:1px solid #ffffff0f; border-radius:8px; background:#1a1a1a4d; box-shadow:0 1px 2px #0002; }
.comment-card:hover { border-color:#ffffff1a; }
.comment-card header { display:flex; align-items:center; gap:10px; min-width:0; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid #ffffff0f; }
.comment-card header>a { flex:none; }
.comment-card header img { display:block; width:40px; height:40px; border-radius:6px; box-shadow:0 0 0 1px #ffffff14; }
.comment-card header>div { flex:1; min-width:0; }
.comment-card header .comment-author { display:block; overflow:hidden; color:#fff; font-size:16px; line-height:24px; font-weight:600; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.comment-card header .comment-author:hover,.comment-card header small a:hover { color:var(--color-brand-primary); }
.comment-card header small { display:block; overflow:hidden; color:#6b7280; font-size:14px; line-height:20px; text-overflow:ellipsis; white-space:nowrap; }
.comment-card header small a { color:inherit; text-decoration:none; }
.comment-card header time { flex:none; color:#4b5563; font-size:14px; }
.comment-card header button { flex:none; width:24px; height:24px; border:0; border-radius:4px; background:none; color:#6b7280; cursor:pointer; }
.comment-card header button:hover { background:#ffffff0f; color:var(--color-brand-primary); }
.comment-body { color:#e5e7eb; font-size:16px; line-height:1.5; overflow-wrap:anywhere; }
.comment-body p { margin:5px 0; }
.comment-body p:first-child { margin-top:0; }
.comment-body p:last-child { margin-bottom:0; }
.comment-body a { color:var(--color-brand-primary); text-decoration:underline; }
.comment-body :is(img,video) { display:block; max-width:100%; max-height:600px; border-radius:8px; }
.comment-body pre { overflow-x:auto; padding:8px; border-radius:4px; background:#0006; }
.comment-body code { padding:2px 4px; border-radius:3px; background:#ffffff14; }
.comment-card footer { display:flex;align-items:center;margin:0;padding:8px 0 32px;border-top:1px solid #ffffff0a; }
.comment-card footer button { padding:.35rem .75rem; line-height:18px; border:1px solid color-mix(in srgb,var(--color-brand-primary) 18%,transparent); border-radius:6px; background:color-mix(in srgb,var(--color-brand-primary) 8%,transparent); color:var(--color-brand-primary); font-size:12px; cursor:pointer; }
.comment-card footer button:hover { background:color-mix(in srgb,var(--color-brand-primary) 18%,transparent); color:#fff; }
.comment-children { display:flex; flex-direction:column; gap:.6rem; margin:.6rem 0 0 14px; }
.comment-more { display:block; width:100%; margin:0 0 12px; padding:8px; border:0; background:none; color:var(--color-brand-primary); font-size:12px; cursor:pointer; }
.comment-more:hover { color:#93c5fd; }
.comment-identity { display:flex; align-items:center; gap:8px; margin:16px 4px 8px; color:#6b7280; font-size:14px; line-height:20px; min-width:0; }
.comment-identity img { display:block; width:24px; height:24px; border-radius:4px; }
.comment-identity a { color:#fff; font-weight:600; text-decoration:none; }
.comment-signin { margin-top:16px; padding:32px 16px; border:1px dashed #ffffff1a; border-radius:12px; background:linear-gradient(180deg,color-mix(in srgb,var(--color-brand-primary) 3.922%,transparent),#ffffff03); text-align:center; }
.comment-signin p { margin:0; color:#d1d5db; font-size:16px; line-height:24px; font-weight:500; }
.comment-signin small { display:block; margin:4px 0 16px; color:#6b7280; font-size:14px; line-height:20px; }
@media(max-width:639px) { .comment-card header time { display:none; } .comment-identity-corp { display:none; } }

.comment-node.has-line { padding-left:18px; }
.thread-line { position:absolute;left:0;top:0;bottom:0;width:18px;display:flex;justify-content:center;align-items:stretch;background:none;border:0;padding:0;cursor:pointer;z-index:1; }
.thread-line::before { content:'';width:2px;background:#ffffff1f;border-radius:1px;transition:background-color .15s,width .15s; }
.thread-line:hover::before { background:color-mix(in srgb,var(--color-brand-primary) 70.196%,transparent);width:3px; }
.thread-line:active::before { background:color-mix(in srgb,var(--color-brand-primary) 94.902%,transparent); }
.thread-expand-btn { margin:8px 0 0 14px;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:.25rem;font-size:.75rem;color:var(--color-brand-primary);background:color-mix(in srgb,var(--color-brand-primary) 7.843%,transparent);border:1px solid color-mix(in srgb,var(--color-brand-primary) 14.902%,transparent);cursor:pointer; }
.thread-expand-btn:hover { background:color-mix(in srgb,var(--color-brand-primary) 18.039%,transparent);color:#93c5fd; }
.thread-expand-btn .icon { width:12px;height:12px; }
.comment-inline-editor { margin:8px 0; }
.comment-hidden { opacity:.5; }
.comment-removed { color:#6b7280;font-size:16px;font-style:italic; }
.comment-edited { color:#374151;font-size:14px;font-style:italic;white-space:nowrap; }
.comment-card header button { display:inline-flex;align-items:center;justify-content:center; }
.comment-card header button .icon { width:12px;height:12px; }
.comment-card header button[data-comment-delete]:hover { color:var(--color-error);background:color-mix(in srgb,var(--color-error) 7.843%,transparent); }
.comment-card footer button { display:inline-flex;align-items:center;gap:.35rem; }
.comment-card footer button .icon { width:12px;height:12px; }
.comment-body .embed { margin:.5rem 0;border-radius:.5rem;overflow:hidden; }
.comment-body .embed-youtube { position:relative;padding-bottom:56.25%;height:0; }
.comment-body .embed-youtube iframe { position:absolute;inset:0;width:100%;height:100%;border:0; }
.comment-body blockquote { border-left:3px solid #ffffff26;padding-left:12px;color:#9ca3af;margin:8px 0; }
.comment-body :is(ul,ol) { padding-left:24px;list-style-position:outside; }
.comment-body ul { list-style-type:disc; }.comment-body ol { list-style-type:decimal; }
.comment-signin>.icon { color:color-mix(in srgb,var(--color-brand-primary) 70%,transparent);width:30px;height:30px;font-size:30px;line-height:36px;margin-bottom:8px;vertical-align:baseline; }
.comment-signin button { display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid color-mix(in srgb,var(--color-brand-primary) 30%,transparent);border-radius:6px;background:color-mix(in srgb,var(--color-brand-primary) 15%,transparent);color:var(--color-blue-300,#93c5fd);font-size:16px;font-weight:500;cursor:pointer; }
.comment-signin button .icon { width:16px;height:16px; }
.comment-list-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #ffffff0f; }
.comment-list-header h2 { display:flex;align-items:center;gap:8px;margin:0;color:#fff;font-size:18px;font-weight:600; }
.comment-list-header h2>.icon { color:var(--color-brand-primary); }
.comment-list-header [data-comments-count] { font-size:12px;color:#93c5fd;background:color-mix(in srgb,var(--color-brand-primary) 12.157%,transparent);border:1px solid color-mix(in srgb,var(--color-brand-primary) 20.000%,transparent);border-radius:999px;padding:0 6px; }
.comment-list-header [data-comments-connection] { color:#fbbf24;font-size:14px; }
.comment-list-header [data-comments-connection]::before { content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor; }
.comment-list-header [data-comments-connection].connected { color:#6b7280; }
.comment-list-header [data-comments-connection].connected::before { background:var(--color-success); }
.comment-identity>a:first-child,.comment-identity>span:nth-child(2) { flex:none; }
.comment-identity>a:not(:first-child),.comment-identity-corp { min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.comment-identity-corp a { color:#6b7280;font-weight:400; }