.blog-details--redesigned {
    padding: 80px 0 100px;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

.blog-details--redesigned .blog-details__img { overflow: hidden; border-radius: 18px; }
.blog-details--redesigned .blog-details__img > img { display: block; width: 100% !important; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-details--redesigned .blog-details__content { padding-top: 28px; }
.blog-details--redesigned .blog-details__user-and-meta { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid #e5e8ee; }
.blog-details--redesigned .blog-details__user p,
.blog-details--redesigned .blog-details__meta { margin:0; color:#7b8493; font-size:14px; }
.blog-details--redesigned .blog-details__meta { display:flex; gap:18px; }
.blog-details--redesigned .blog-details__meta li,
.blog-details--redesigned .blog-details__meta a { color:#7b8493; }
.blog-details--redesigned .blog-details__meta span,
.blog-details--redesigned .blog-details__user span { margin-right:6px; color:#5e57e8; }
.blog-details--redesigned .blog-details__title { margin:26px 0 16px; color:#111827; font-size:34px; line-height:1.25; }
.blog-details--redesigned .blog-details__text-1,
.blog-details--redesigned .blog-details__text-2 { color:#4b5563; font-size:16px; line-height:1.8; text-align:justify; }
.blog-details--redesigned .blog-details__text-1 { color:#5d6678; font-size:18px; }
.blog-details--redesigned .blog-details__text-2 h2,
.blog-details--redesigned .blog-details__text-2 h3,
.blog-details--redesigned .blog-details__text-2 h4 { margin-top:28px; color:#111827; }
.blog-details--redesigned .blog-details__tag-and-share { padding-top:28px; border-top:1px solid #e5e8ee; }
.blog-details--redesigned .blog-details__tag-title,
.blog-details--redesigned .blog-details__share-title { color:#111827 !important; font-weight:700; }

.blog-comments-row--redesigned { margin-top:60px !important; }
.blog-comments-row--redesigned .blog-comments-box { height:auto !important; max-height:none !important; min-height:0 !important; overflow:visible !important; display:block !important; padding:28px !important; border:1px solid #d7dce4 !important; border-radius:18px !important; background:#fff !important; box-shadow:none !important; }
.blog-comments-row--redesigned .blog-comments-scroll { height:auto !important; max-height:none !important; min-height:0 !important; overflow:visible !important; padding:0 !important; }
.blog-comments-row--redesigned .blog-comments-heading { position:static !important; display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:18px !important; padding-bottom:18px !important; margin-bottom:22px !important; border-bottom:1px solid #e5e8ee !important; background:#fff !important; }
.blog-comments-row--redesigned .comment-one__title { color:#111827 !important; font-size:22px !important; line-height:1.35 !important; }
.blog-comments-row--redesigned .blog-comments-heading > span { color:#7b8493 !important; font-size:13px !important; }
.blog-comments-row--redesigned .comment-card { display:block !important; width:100% !important; padding:20px !important; margin-bottom:16px !important; border:1px solid #e5e8ee !important; border-radius:12px !important; background:#fff !important; box-shadow:none !important; }
.blog-comments-row--redesigned .comment-card > div:first-child { display:grid !important; grid-template-columns:56px minmax(0,1fr) !important; gap:14px !important; align-items:start !important; width:100% !important; }
.blog-comments-row--redesigned .comment-card > div:first-child > div:nth-child(2) { display:block !important; min-width:0 !important; width:auto !important; flex:none !important; }
.blog-comments-row--redesigned .comment-card > div:first-child > div:nth-child(2) > div:first-child { display:flex !important; width:100% !important; align-items:flex-start !important; justify-content:space-between !important; }
.blog-comments-row--redesigned .comment-card > div:first-child > div:nth-child(2) > p { display:block !important; width:100% !important; margin:14px 0 0 !important; float:none !important; }
.blog-comments-row--redesigned .comment-card h3 { color:#172033 !important; }
.blog-comments-row--redesigned .comment-card p { color:#4b5563 !important; font-size:14px !important; line-height:1.7 !important; text-align:left !important; }
.blog-comments-row--redesigned .comment-reply-button { color:#5e57e8 !important; font-weight:700; }
.blog-comments-row--redesigned .comment-replies { display:block !important; width:auto !important; padding-left:24px !important; margin-top:18px !important; border-left:2px solid #dfe3ff !important; }
.blog-comments-row--redesigned .comment-replies > div { padding:16px !important; border:1px solid #e2e5ff !important; border-radius:10px !important; background:#f7f8ff !important; }
.blog-comments-row--redesigned .blog-comment-form-panel { position:sticky; top:100px; padding:28px; border:1px solid #d7dce4; border-radius:18px; background:#fff; }
.blog-comments-row--redesigned .blog-comment-form-panel .comment-form { position:static !important; top:auto !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
.blog-comments-row--redesigned .comment-form__title { margin:0 0 10px; color:#111827; font-size:22px; }
.blog-comments-row--redesigned .comment-one__form textarea { min-height:155px !important; padding:14px !important; border:1px solid #d7dce4 !important; border-radius:8px !important; color:#172033 !important; font-size:14px !important; resize:vertical; }
.blog-comments-row--redesigned .comment-form__btn { border:0 !important; border-radius:6px !important; background:#172033 !important; color:#fff !important; }
.blog-comments-row--redesigned .comment-form__btn:hover { background:#5e57e8 !important; }

@media only screen and (max-width: 991px) {
    .blog-comments-row--redesigned .blog-comment-form-panel { position:static; margin-top:24px; }
}

@media only screen and (max-width: 767px) {
    .blog-details--redesigned { padding:60px 0 70px; }
    .blog-details--redesigned .blog-details__title { font-size:26px; }
    .blog-details--redesigned .blog-details__meta { gap:10px; flex-wrap:wrap; }
    .blog-comments-row--redesigned .blog-comments-box,
    .blog-comments-row--redesigned .blog-comment-form-panel { padding:20px !important; }
    .blog-comments-row--redesigned .blog-comments-heading { display:block !important; }
    .blog-comments-row--redesigned .blog-comments-heading > span { display:block; margin-top:7px; }
    .blog-comments-row--redesigned .comment-card { padding:16px !important; }
    .blog-comments-row--redesigned .comment-replies { padding-left:12px !important; }
}

/* Use the same typography scale as the rest of the website. */
.blog-detail-rebuild {
    font-family: var(--itzone-font) !important;
}

.blog-detail-rebuild h1,
.blog-detail-rebuild h2,
.blog-detail-rebuild h3,
.blog-detail-rebuild strong,
.blog-detail-rebuild button,
.blog-detail-rebuild__sidebar-card li a,
.blog-detail-rebuild__recent strong {
    font-family: var(--itzone-font-two) !important;
}

.blog-detail-rebuild__meta { font-size: 13px; }
.blog-detail-rebuild__content h1 { font-size: 30px; }
.blog-detail-rebuild__excerpt { font-size: 16px; }
.blog-detail-rebuild__body { font-size: 15px; }
.blog-detail-rebuild__footer-meta { font-size: 13px; }
.blog-detail-rebuild__sidebar-card h2,
.blog-detail-rebuild__reply-card h2 { font-size: 18px; }
.blog-detail-rebuild__sidebar-card li a { font-size: 13px; }
.blog-detail-rebuild__sidebar-card li a span { font-size: 11px; }
.blog-detail-rebuild__recent small { font-size: 10px; }
.blog-detail-rebuild__recent strong { font-size: 12px; }
.blog-detail-rebuild__cloud a { font-size: 12px; }
.blog-detail-rebuild__comment-author strong { font-size: 13px; }
.blog-detail-rebuild__comment-author time { font-size: 11px; }
.blog-detail-rebuild__comment > p,
.blog-detail-rebuild__reply > p { font-size: 13px; }
.blog-detail-rebuild__comments-heading h2 { font-size: 23px; }
.blog-detail-rebuild__comments-heading small { font-size: 12px; }
.blog-detail-rebuild__reply-card > p,
.blog-detail-rebuild__reply-card label { font-size: 13px; }
.blog-detail-rebuild__reply-card textarea { font-size: 13px; }

@media only screen and (max-width: 767px) {
    .blog-detail-rebuild__content h1 { font-size: 24px; }
    .blog-detail-rebuild__body { font-size: 14px; }
}

/* Match the project/blog listing card typography exactly. */
.blog-detail-rebuild,
.blog-detail-rebuild h1,
.blog-detail-rebuild h2,
.blog-detail-rebuild h3,
.blog-detail-rebuild strong,
.blog-detail-rebuild button,
.blog-detail-rebuild input,
.blog-detail-rebuild textarea,
.blog-detail-rebuild a {
    font-family: Arial, Helvetica, sans-serif !important;
}

.blog-detail-rebuild__content h1 { font-size: 30px !important; }
.blog-detail-rebuild__body { font-size: 16px !important; line-height: 1.8; }
.blog-detail-rebuild__meta { font-size: 14px; }
.blog-detail-rebuild__sidebar-card li a { font-size: 14px; }
.blog-detail-rebuild__recent strong { font-size: 13px; }
.blog-detail-rebuild__comment-author strong { font-size: 14px; }
.blog-detail-rebuild__comment-author time { font-size: 12px; }
.blog-detail-rebuild__comment > p,
.blog-detail-rebuild__reply > p { font-size: 14px; }
.blog-detail-rebuild__reply-card > p,
.blog-detail-rebuild__reply-card label,
.blog-detail-rebuild__reply-card textarea { font-size: 14px; }

@media only screen and (max-width: 767px) {
    .blog-detail-rebuild__content h1 { font-size: 24px !important; }
    .blog-detail-rebuild__body { font-size: 15px !important; }
}

/* Keep sidebar categories and comments consistent with the listing typography. */
.blog-detail-rebuild__sidebar-card,
.blog-detail-rebuild__sidebar-card *,
.blog-detail-rebuild__comments,
.blog-detail-rebuild__comments *,
.blog-detail-rebuild__reply-card,
.blog-detail-rebuild__reply-card * {
    font-family: Arial, Helvetica, sans-serif !important;
}

.blog-detail-rebuild__sidebar-card h2,
.blog-detail-rebuild__reply-card h2 {
    font-size: 18px !important;
}

.blog-detail-rebuild__sidebar-card li a {
    font-size: 14px !important;
}

.blog-detail-rebuild__sidebar-card li a span {
    font-size: 12px !important;
}

.blog-detail-rebuild__comments-heading h2 {
    font-size: 22px !important;
}

.blog-detail-rebuild__comments-heading span {
    font-size: 12px !important;
}

.blog-detail-rebuild__comments-heading small {
    font-size: 13px !important;
}

.blog-detail-rebuild__comment-author strong {
    font-size: 14px !important;
}

.blog-detail-rebuild__comment-author time {
    font-size: 12px !important;
}

.blog-detail-rebuild__comment > p,
.blog-detail-rebuild__reply > p {
    font-size: 14px !important;
    line-height: 1.65;
}

.blog-detail-rebuild__comment-actions button {
    font-size: 13px !important;
}

.blog-detail-rebuild__empty strong,
.blog-detail-rebuild__empty p {
    font-size: 14px !important;
}

.blog-detail-rebuild__recent small {
    font-size: 12px !important;
}

.blog-detail-rebuild__recent strong {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

.blog-detail-rebuild__reply-card > span {
    font-size: 12px !important;
}

.blog-detail-rebuild__reply-card > p,
.blog-detail-rebuild__reply-card label,
.blog-detail-rebuild__reply-card textarea,
.blog-detail-rebuild__reply-card input,
.blog-detail-rebuild__reply-card button,
.blog-detail-rebuild__reply-notice,
.blog-detail-rebuild__login {
    font-size: 14px !important;
}

.blog-detail-rebuild__reply-card textarea {
    line-height: 1.5;
}

/* Reference-aligned blog detail composition */
.blog-detail-rebuild { padding:34px 0 90px; background:#f6f8fc; font-family:Arial, Helvetica, sans-serif; }
.blog-detail-rebuild > .container { max-width:1320px; }
.blog-detail-rebuild__layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:30px; align-items:start; }
.blog-detail-rebuild__article { overflow:hidden; border:1px solid #e2e7f0; border-radius:10px; background:#fff; }
.blog-detail-rebuild__hero { position:relative; margin:20px 20px 0; overflow:hidden; border-radius:8px; aspect-ratio:16 / 9; background:#edf0f4; }
.blog-detail-rebuild__hero img { display:block; width:100%; height:100%; object-fit:cover; }
.blog-detail-rebuild__date { position:absolute; top:14px; right:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; width:46px; height:50px; border-radius:8px; color:#fff; background:#6255ed; font-size:11px; font-weight:700; line-height:1.1; text-transform:uppercase; }
.blog-detail-rebuild__date strong { font-size:16px; }
.blog-detail-rebuild__content { padding:18px 20px 24px; }
.blog-detail-rebuild__meta { display:flex; align-items:center; flex-wrap:wrap; gap:13px; color:#758096; font-size:11px; line-height:18px; }
.blog-detail-rebuild__meta span { display:inline-flex; align-items:center; gap:5px; }
.blog-detail-rebuild__meta i { color:#6255ed; }
.blog-detail-rebuild__verified { margin-left:auto; color:#758096; font-size:10px; font-weight:700; text-transform:uppercase; }
.blog-detail-rebuild__verified i { color:#25b878; }
.blog-detail-rebuild__content h1 { margin:20px 0 12px; color:#172033; font-size:24px; font-weight:700; line-height:1.25; }
.blog-detail-rebuild__excerpt { padding:10px 12px; margin:0 0 16px; border-left:3px solid #6255ed; color:#344054; background:#f4f5ff; font-size:14px; font-weight:600; line-height:1.45; }
.blog-detail-rebuild__body { color:#657187; font-size:13px; line-height:1.8; }
.blog-detail-rebuild__body p { margin:0 0 16px; color:inherit; font-size:inherit; line-height:inherit; text-align:left; }
.blog-detail-rebuild__body h2,.blog-detail-rebuild__body h3,.blog-detail-rebuild__body h4 { margin:24px 0 10px; color:#172033; }
.blog-detail-rebuild__body img { max-width:100%; height:auto; border-radius:8px; }
.blog-detail-rebuild__footer-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:20px 0 0; margin-top:22px; border-top:1px solid #edf0f4; color:#758096; font-size:11px; }
.blog-detail-rebuild__tags,.blog-detail-rebuild__share { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.blog-detail-rebuild__tags strong,.blog-detail-rebuild__share strong { color:#172033; }
.blog-detail-rebuild__tags span { padding:5px 8px; border-radius:4px; color:#657187; background:#eef1f7; }
.blog-detail-rebuild__share a { display:flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:50%; color:#657187; background:#eef1ff; }
.blog-detail-rebuild__share a:hover { color:#fff; background:#6255ed; }
.blog-detail-rebuild__comments { padding-top:25px; margin-top:25px; border-top:1px solid #edf0f4; }
.blog-detail-rebuild__comments-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px; }
.blog-detail-rebuild__comments-heading span { display:block; margin-bottom:3px; color:#6255ed; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.blog-detail-rebuild__comments-heading h2 { margin:0; color:#172033; font-size:20px; }
.blog-detail-rebuild__comments-heading em { color:#758096; font-size:14px; font-style:normal; font-weight:400; }
.blog-detail-rebuild__comments-heading small { color:#8791a3; font-size:10px; }
.blog-detail-rebuild__comment-list { display:grid; gap:10px; }
.blog-detail-rebuild__comment { padding:14px; border:1px solid #e4e9f1; border-radius:8px; background:#f8faff; }
.blog-detail-rebuild__comment-top { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:9px; align-items:center; }
.blog-detail-rebuild__avatar { display:flex; align-items:center; justify-content:center; width:32px; height:32px; overflow:hidden; border-radius:50%; color:#6255ed; background:#ebe9ff; font-size:10px; font-weight:700; }
.blog-detail-rebuild__avatar img { width:100%; height:100%; object-fit:cover; }
.blog-detail-rebuild__avatar--small { width:28px; height:28px; }
.blog-detail-rebuild__comment-author strong,.blog-detail-rebuild__comment-author time { display:block; }
.blog-detail-rebuild__comment-author strong { overflow:hidden; color:#172033; font-size:11px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.blog-detail-rebuild__comment-author time { margin-top:2px; color:#8791a3; font-size:9px; }
.blog-detail-rebuild__comment-actions { display:flex; align-items:center; gap:7px; }
.blog-detail-rebuild__comment-actions button { padding:0; border:0; color:#6255ed; background:transparent; cursor:pointer; font-size:11px; }
.blog-detail-rebuild__comment-actions form { margin:0; }
.blog-detail-rebuild__comment-actions form button { color:#c2415a; }
.blog-detail-rebuild__comment > p,.blog-detail-rebuild__reply > p { margin:10px 0 0 41px; color:#536078; font-size:11px; line-height:1.55; }
.blog-detail-rebuild__replies { display:grid; gap:8px; margin:12px 0 0 24px; padding-left:12px; border-left:2px solid #dfe3ff; }
.blog-detail-rebuild__reply { padding:10px; border:1px solid #e5e8ff; border-radius:7px; background:#f1f2ff; }
.blog-detail-rebuild__reply > p { margin-left:37px; }
.blog-detail-rebuild__empty { padding:28px 12px; border:1px dashed #d7dce4; border-radius:8px; text-align:center; }
.blog-detail-rebuild__empty i { display:block; margin-bottom:8px; color:#c4c9d6; font-size:24px; }
.blog-detail-rebuild__empty strong { display:block; color:#172033; font-size:13px; }
.blog-detail-rebuild__empty p { margin:4px 0 0; color:#8791a3; font-size:11px; }
.blog-detail-rebuild__sidebar { display:grid; gap:18px; }
.blog-detail-rebuild__sidebar-card,.blog-detail-rebuild__reply-card { padding:18px; border:1px solid #e2e7f0; border-radius:10px; background:#fff; }
.blog-detail-rebuild__sidebar-card h2,.blog-detail-rebuild__reply-card h2 { padding-bottom:12px; margin:0 0 12px; border-bottom:1px solid #edf0f4; color:#172033; font-size:15px; }
.blog-detail-rebuild__sidebar-card h2::before { content:''; display:inline-block; width:6px; height:6px; margin:0 7px 2px 0; border-radius:50%; background:#6255ed; }
.blog-detail-rebuild__search { padding:12px; }
.blog-detail-rebuild__search form { display:flex; gap:6px; }
.blog-detail-rebuild__search input { min-width:0; flex:1; padding:9px 10px; border:1px solid #e2e7f0; border-radius:5px; font-size:11px; }
.blog-detail-rebuild__search button { width:32px; border:0; border-radius:5px; color:#fff; background:#6255ed; cursor:pointer; }
.blog-detail-rebuild__sidebar-card ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.blog-detail-rebuild__sidebar-card li a { display:flex; align-items:center; justify-content:space-between; padding:8px 9px; border-radius:5px; color:#536078; font-size:11px; }
.blog-detail-rebuild__sidebar-card li a span { padding:2px 5px; border-radius:3px; color:#8791a3; background:#f0f2f7; font-size:9px; }
.blog-detail-rebuild__sidebar-card li.active a,.blog-detail-rebuild__sidebar-card li a:hover { color:#fff; background:#6255ed; }
.blog-detail-rebuild__sidebar-card li.active a span,.blog-detail-rebuild__sidebar-card li a:hover span { color:#fff; background:rgba(255,255,255,.16); }
.blog-detail-rebuild__recent { display:grid; gap:11px; }
.blog-detail-rebuild__recent a { display:grid; grid-template-columns:44px minmax(0,1fr); gap:9px; align-items:center; color:#172033; }
.blog-detail-rebuild__recent img { width:44px; height:36px; border-radius:5px; object-fit:cover; }
.blog-detail-rebuild__recent small,.blog-detail-rebuild__recent strong { display:block; }
.blog-detail-rebuild__recent small { color:#8791a3; font-size:8px; }
.blog-detail-rebuild__recent strong { margin-top:2px; font-size:10px; line-height:1.25; }
.blog-detail-rebuild__cloud { display:flex; gap:6px; flex-wrap:wrap; }
.blog-detail-rebuild__cloud a { padding:6px 8px; border-radius:4px; color:#657187; background:#f0f2f7; font-size:10px; }
.blog-detail-rebuild__cloud a:hover { color:#fff; background:#6255ed; }
.blog-detail-rebuild__reply-card { position:sticky; top:100px; }
.blog-detail-rebuild__reply-card > span { display:block; margin-bottom:5px; color:#6255ed; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.blog-detail-rebuild__reply-card > p { margin:0 0 13px; color:#758096; font-size:11px; line-height:1.5; }
.blog-detail-rebuild__reply-card form { display:grid; gap:7px; }
.blog-detail-rebuild__reply-card label { color:#536078; font-size:10px; font-weight:700; }
.blog-detail-rebuild__reply-card textarea { min-height:100px; padding:10px; border:1px solid #e2e7f0; border-radius:5px; font-size:11px; resize:vertical; }
.blog-detail-rebuild__reply-card form > button { padding:10px; border:0; border-radius:5px; color:#fff; background:#6255ed; cursor:pointer; font-size:11px; font-weight:700; }
.blog-detail-rebuild__reply-card form > button:hover { background:#172033; }
.blog-detail-rebuild__reply-notice,.blog-detail-rebuild__login { padding:9px; margin-bottom:10px; border:1px solid #e3e5ff; border-radius:5px; color:#536078; background:#f5f4ff; font-size:10px; }
.blog-detail-rebuild__reply-notice { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.blog-detail-rebuild__reply-notice button { border:0; color:#6255ed; background:transparent; cursor:pointer; font-weight:700; }
.blog-detail-rebuild__login a { color:#6255ed; font-weight:700; }

@media only screen and (max-width: 991px) {
    .blog-detail-rebuild__layout { grid-template-columns:1fr; }
    .blog-detail-rebuild__reply-card { position:static; }
    .blog-detail-rebuild__sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .blog-detail-rebuild__reply-card { grid-column:1 / -1; }
}

@media only screen and (max-width: 767px) {
    .blog-detail-rebuild { padding:24px 0 60px; }
    .blog-detail-rebuild__sidebar { grid-template-columns:1fr; }
    .blog-detail-rebuild__hero { margin:12px 12px 0; }
    .blog-detail-rebuild__content { padding:16px 12px 20px; }
    .blog-detail-rebuild__content h1 { font-size:20px; }
    .blog-detail-rebuild__verified { margin-left:0; }
    .blog-detail-rebuild__comments-heading { display:block; }
    .blog-detail-rebuild__comments-heading small { display:block; margin-top:5px; }
}

.blog-comments-modern { margin-top:60px; }
.comments-panel,
.comment-form-panel { padding:28px; border:1px solid #d7dce4; border-radius:18px; background:#fff; }
.comments-panel__header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid #e5e8ee; }
.comments-panel__eyebrow,
.comment-form-panel__eyebrow { display:block; margin-bottom:6px; color:#5e57e8; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.comments-panel__header h2,
.comment-form-panel h2 { margin:0; color:#111827; font-size:22px; line-height:1.3; }
.comments-panel__header h2 span { color:#7b8493; font-weight:400; }
.comments-panel__header p { margin:4px 0 0; color:#7b8493; font-size:13px; }
.comments-list { display:grid; gap:14px; }
.comment-item { display:block; padding:20px; border:1px solid #e5e8ee; border-radius:12px; background:#fff; }
.comment-item__top { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:12px; align-items:center; width:100%; }
.comment-item__avatar { display:flex; align-items:center; justify-content:center; width:48px; height:48px; overflow:hidden; border-radius:50%; color:#172033; background:#e9e2db; font-size:16px; font-weight:600; }
.comment-item__avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.comment-item__avatar--small { width:40px; height:40px; font-size:13px; }
.comment-item__identity { min-width:0; }
.comment-item__identity strong,
.comment-item__identity time { display:block; }
.comment-item__identity strong { overflow:hidden; color:#172033; font-size:14px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.comment-item__identity time { margin-top:4px; color:#7b8493; font-size:12px; line-height:1.3; }
.comment-item__actions { display:flex; align-items:center; gap:10px; }
.comment-item__actions form { margin:0; }
.comment-item__actions button { border:0; background:transparent; cursor:pointer; }
.comment-reply-button { display:inline-flex; align-items:center; gap:5px; padding:5px 0; color:#5e57e8; font-size:13px; font-weight:700; }
.comment-delete-button { padding:5px; color:#c2415a; font-size:12px; }
.comment-item__body { margin:16px 0 0; color:#4b5563; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.comment-item__replies { display:grid; gap:10px; margin:18px 0 0 24px; padding-left:18px; border-left:2px solid #dfe3ff; }
.comment-reply-item { padding:16px; border:1px solid #e2e5ff; border-radius:10px; background:#f7f8ff; }
.comment-reply-item .comment-item__body { margin-top:12px; }
.comments-empty { padding:44px 20px; border:1px dashed #d7dce4; border-radius:12px; text-align:center; }
.comments-empty i { display:block; margin-bottom:12px; color:#b9c0d0; font-size:32px; }
.comments-empty strong { display:block; color:#172033; font-size:16px; }
.comments-empty p { margin:6px 0 0; color:#7b8493; font-size:14px; }
.comment-form-panel { position:sticky; top:100px; }
.comment-form-panel__intro { margin:10px 0 20px; color:#5d6678; font-size:14px; line-height:1.6; }
.replying-notice { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; margin-bottom:16px; border:1px solid #dfe3ff; border-radius:8px; color:#344054; background:#f7f8ff; font-size:13px; }
.replying-notice button { border:0; color:#5e57e8; background:transparent; cursor:pointer; font-weight:700; }
.modern-comment-form { display:grid; gap:9px; }
.modern-comment-form label { color:#172033; font-size:13px; font-weight:700; }
.modern-comment-form textarea { width:100%; min-height:150px; padding:14px; border:1px solid #d7dce4; border-radius:8px; color:#172033; font-size:14px; line-height:1.6; resize:vertical; }
.modern-comment-form textarea:focus { outline:0; border-color:#5e57e8; box-shadow:0 0 0 3px rgba(94,87,232,.12); }
.modern-comment-form > button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border:0; border-radius:6px; color:#fff; background:#172033; cursor:pointer; font-size:14px; font-weight:700; }
.modern-comment-form > button:hover { background:#5e57e8; }
.comment-form-error { color:#c2415a; font-size:13px; }
.comment-login-notice { padding:14px; border:1px solid #dfe3ff; border-radius:8px; color:#344054; background:#f7f8ff; font-size:14px; line-height:1.6; }
.comment-login-notice a { color:#5e57e8; font-weight:700; }

@media only screen and (max-width: 991px) {
    .comment-form-panel { position:static; margin-top:24px; }
}

@media only screen and (max-width: 767px) {
    .blog-comments-modern { margin-top:40px; }
    .comments-panel, .comment-form-panel { padding:20px; }
    .comments-panel__header { display:block; }
    .comments-panel__header p { margin-top:7px; }
    .comment-item { padding:16px; }
    .comment-item__top { grid-template-columns:42px minmax(0,1fr); }
    .comment-item__avatar { width:42px; height:42px; }
    .comment-item__actions { grid-column:2; justify-content:flex-start; }
    .comment-item__replies { margin-left:8px; padding-left:12px; }
}