/* ===== Group/Discussion Page - Exact Copy ===== */
body { background: rgb(242, 245, 249); margin: 0; padding: 0; }
.main-content { padding: 0 !important; max-width: none !important; width: 100% !important; }
.main-container { max-width: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; position: relative; }

.group-page .container { width: 1200px; margin: 16px auto; padding: 0 16px; position: relative; }
.group-page .left { width: 850px; float: left; }
.group-page .right { width: 330px; float: right; }
.group-page .clear { clear: both; }

/* Box */
.group-page .box { background: #fff; border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.group-page .box > :first-child { margin-top: 0; }

/* Breadcrumbs */
.group-page .bread-crumbs { padding: 16px; font-size: 12px; color: rgb(153, 153, 153); }
.group-page .bread-crumbs a { color: rgb(153, 153, 153); text-decoration: none; }
.group-page .bread-crumbs a:hover { color: rgb(36, 205, 119); }
.group-page .bread-crumbs span { color: rgb(51, 51, 51); }

/* App Header */
.group-page .ver-top { padding: 16px; display: flex; align-items: flex-start; gap: 16px; }
.group-page .ver-top-l { width: 120px; height: 120px; flex-shrink: 0; }
.group-page .ver-top-l img { width: 120px; height: 120px; border-radius: 20px; }
.group-page .ver-top-r { flex: 1; min-width: 0; }
.group-page .ver-top-title { display: flex; flex-direction: column; gap: 8px; }
.group-page .ver-top-h1 h1 { font-size: 34px; font-weight: 400; color: rgb(17, 17, 17); margin: 0; line-height: 1.2; }
.group-page .ver-des { font-size: 22px; color: rgb(102, 102, 102); margin: 0; line-height: 1.4; }
.group-page .ver-top .down { margin-top: 12px; }
.group-page .ver-top .down a { display: inline-block; background: rgb(36, 205, 119); color: rgb(255, 255, 255); font-size: 17px; padding: 8px 32px; border-radius: 0; text-decoration: none; font-weight: 500; }
.group-page .ver-top .down a:hover { opacity: 0.9; }

/* Group Tabs */
.group-page .group-tabs { padding: 0 16px; border-top: 1px solid #f1f3f4; }
.group-page .group-tabs ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 32px; }
.group-page .group-tabs li { list-style: none; }
.group-page .group-tabs a { display: block; padding: 16px 0; font-size: 16px; color: rgb(51, 51, 51); text-decoration: none; border-bottom: 2px solid transparent; }
.group-page .group-tabs a.on { color: rgb(36, 205, 119); border-bottom-color: rgb(36, 205, 119); }
.group-page .group-tabs a:hover { color: rgb(36, 205, 119); }

/* Rating Summary */
.group-page .cmt-rating-cont { padding: 25px 25px 0 0; }
.group-page .cmt-rating { display: flex; }
.group-page .cmt-rating-l { width: 298px; text-align: center; padding: 20px 0; flex-shrink: 0; }
.group-page .cmt-rating-score { font-size: 64px; font-weight: 300; color: rgb(17, 17, 17); line-height: 64px; }
.group-page .cmt-rating-info { font-size: 13px; color: rgb(51, 51, 51); margin: 16px auto 0; text-align: center; }
.group-page .cmt-rating-info div { margin: 4px 0; }
.group-page .cmt-rating-r { width: 510px; padding: 20px 20px 20px 45px; flex: 1; }
.group-page .cmt-rating-item { position: relative; height: 18px; margin-bottom: 8px; }
.group-page .cmt-rating-tit { position: absolute; left: 0; top: 0; width: 20px; height: 18px; line-height: 18px; font-size: 12px; color: rgb(102, 102, 102); }
.group-page .cmt-rating-per { position: absolute; left: 22px; top: 0; height: 18px; background: rgb(87, 187, 138); }
.group-page .cmt-rating-5 { background: rgb(87, 187, 138); }
.group-page .cmt-rating-4 { background: rgb(154, 206, 106); }
.group-page .cmt-rating-3 { background: rgb(255, 207, 2); }
.group-page .cmt-rating-2 { background: rgb(255, 159, 2); }
.group-page .cmt-rating-1 { background: rgb(255, 111, 49); }
.group-page .cmt-rating-t5, .group-page .cmt-rating-t4, .group-page .cmt-rating-t3, .group-page .cmt-rating-t2, .group-page .cmt-rating-t1 { position: absolute; right: 0; top: 0; height: 18px; line-height: 18px; font-size: 12px; color: rgb(102, 102, 102); }

/* Comment Container */
.group-page .cmt-container { padding: 16px; }

/* Cmt Top (Sort + Language) */
.group-page .cmt-top { margin-bottom: 16px; }
.group-page .cmt-total { overflow: hidden; }
.group-page .cmt-group-rsort { font-size: 14px; color: rgb(51, 51, 51); padding: 8px 0; }
.group-page .cmt-group-rsort a { color: rgb(102, 102, 102); text-decoration: none; margin: 0 4px; }
.group-page .cmt-group-rsort a.on { color: rgb(36, 205, 119); font-weight: 500; }
.group-page .cmt-group-rsort a:hover { color: rgb(36, 205, 119); }
.group-page .cmt-dropdown { position: relative; list-style: none; }
.group-page .cmt-dropdown > a { display: inline-block; padding: 6px 12px; font-size: 13px; color: rgb(51, 51, 51); text-decoration: none; background: #f5f5f5; border-radius: 4px; cursor: pointer; }
.group-page .cmt-dropdown > a:hover { background: #e8e8e8; }
.group-page .cmt-caret { display: inline-block; width: 0; height: 0; margin-left: 4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid rgb(102, 102, 102); vertical-align: middle; }
.group-page .cmt-lang-total { margin-left: 4px; color: rgb(153, 153, 153); }

/* Comment Input Form */
.group-page .cmt-publish { margin: 16px 0; }
.group-page #cmt-edit-reply { width: 100%; min-height: 100px; padding: 12px; border: 1px solid #e0e0e0; border-bottom: none; border-radius: 4px 4px 0 0; font-size: 14px; outline: none; color: rgb(51, 51, 51); box-sizing: border-box; }
.group-page #cmt-edit-reply:focus { border-color: rgb(36, 205, 119); }
.group-page #cmt-edit-reply:empty::before { content: attr(placeholder); color: rgb(153, 153, 153); }
.group-page .cmt-edit-reply-bottom { background: rgb(250, 250, 250); border: 1px solid #e0e0e0; border-radius: 0 0 4px 4px; padding: 8px 12px; overflow: hidden; }
.group-page .cmt-btn-emoji, .group-page .cmt-btn-tube { width: 24px; height: 24px; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; vertical-align: middle; }
.group-page .cmt-icon-emoji { display: inline-block; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E") no-repeat center; }
.group-page .cmt-icon-tube { display: inline-block; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23FF0000'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E") no-repeat center; }
.group-page .cmt-icon-b-stars { float: right; }
.group-page .cmt-icon-b-star-empty { float: left; display: inline-block; width: 20px; height: 20px; margin-right: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23e0e0e0'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") no-repeat center; cursor: pointer; }
.group-page .cl { clear: both; }
.group-page .fr { float: right; }
.group-page .fl { float: left; }
.group-page .cmt-error-cont { display: none; }
.group-page .cmt-btn { display: inline-block; padding: 8px 24px; background: rgb(36, 205, 119); color: #fff; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; margin-top: 12px; float: right; }
.group-page .cmt-btn:hover { opacity: 0.9; }
.group-page .cmt-disabled { background: #ccc; cursor: not-allowed; }

/* Comment List */
.group-page #cmt-reply-data { margin-top: 16px; }
.group-page .cmt-reply { list-style: none; padding: 0; margin: 0; }
.group-page .cmt-root { list-style: none; border-bottom: 1px solid #f1f3f4; position: relative; }
.group-page .cmt-root-cont { padding: 15px 15px 10px; position: relative; }
.group-page .cmt-root-top { overflow: hidden; }
.group-page .cmt-root-icon { width: 45px; height: 45px; float: left; margin-right: 10px; }
.group-page .cmt-root-icon img { width: 45px; height: 45px; border-radius: 50%; }
.group-page .cmt-root-user { margin: 0 0 0 55px; padding: 0 60px 0 0; font-size: 12px; line-height: 22.5px; overflow: hidden; height: 23px; }
.group-page .cmt-root-user-name a { color: rgb(70, 130, 190); font-weight: 700; text-decoration: none; font-size: 13px; }
.group-page .cmt-root-user-name a:hover { text-decoration: underline; }
.group-page .cmt-icon-s-stars { display: inline; width: 0; margin: 0 0 0 3px; position: relative; }
.group-page .cmt-icon-s-star { position: absolute; left: 0; top: 0; width: 70px; height: 14px; z-index: 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='14' viewBox='0 0 70 14'%3E%3Cpath d='M7 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L7 9.28l-3.63 1.91.69-4.05L1.12 4.28l4.06-.59L7 0z' fill='%23FFB300'/%3E%3Cpath d='M21 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L21 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L21 0z' fill='%23FFB300'/%3E%3Cpath d='M35 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L35 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L35 0z' fill='%23FFB300'/%3E%3Cpath d='M49 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L49 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L49 0z' fill='%23FFB300'/%3E%3Cpath d='M63 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L63 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L63 0z' fill='%23FFB300'/%3E%3C/svg%3E") no-repeat; }
.group-page .cmt-icon-s-star-empty { position: absolute; left: 0; top: 0; width: 70px; height: 14px; z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='14' viewBox='0 0 70 14'%3E%3Cpath d='M7 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L7 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L7 0z' fill='%23e0e0e0'/%3E%3Cpath d='M21 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L21 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L21 0z' fill='%23e0e0e0'/%3E%3Cpath d='M35 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L35 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L35 0z' fill='%23e0e0e0'/%3E%3Cpath d='M49 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L49 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L49 0z' fill='%23e0e0e0'/%3E%3Cpath d='M63 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L63 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L63 0z' fill='%23e0e0e0'/%3E%3C/svg%3E") no-repeat; }
.group-page .cmt-root-message { margin: 2px 0 2px 55px; }
.group-page .cmt-go { display: flow-root; color: rgb(85, 85, 85); font-size: 14px; line-height: 22px; text-decoration: none; }
.group-page .cmt-go:hover { color: rgb(36, 205, 119); }
.group-page .cmt-root-footer { margin: 0 0 0 55px; }
.group-page .cmt-root-footer ul { float: left; list-style: none; padding: 0; margin: 0; font-size: 12px; color: rgb(153, 153, 153); }
.group-page .cmt-root-footer li { float: left; margin: 0 15px 0 0; font-size: 12px; color: rgb(153, 153, 153); list-style: none; }
.group-page .cmt-source { font-size: 12px; color: rgb(153, 153, 153); }
.group-page .cmt-btn-reply, .group-page .cmt-btn-zan { display: inline; padding: 0 5px; border: none; background: none; font-size: 12px; color: rgb(153, 153, 153); cursor: pointer; border-radius: 3px; }
.group-page .cmt-btn-reply:hover, .group-page .cmt-btn-zan:hover { background: #f0f0f0; color: rgb(36, 205, 119); }
.group-page .cmt-vote { margin-left: 4px; }
.group-page .cmt-report { position: absolute; right: 15px; top: 15px; font-size: 12px; color: rgb(153, 153, 153); text-decoration: none; }
.group-page .cmt-report:hover { color: rgb(36, 205, 119); }
.group-page .cmt-cls { display: block; margin: 0 15px 10px 70px; padding: 5px; background: rgb(245, 245, 245); border-radius: 4px; text-decoration: none; }
.group-page .cmt-cls ul { list-style: none; padding: 0; margin: 0; }
.group-page .cmt-cls li { font-size: 12px; color: rgb(102, 102, 102); line-height: 20px; }
.group-page .cmt-cls span { color: rgb(70, 130, 190); font-weight: 700; }
.group-page .cmt-cls-all { color: rgb(36, 205, 119) !important; }

/* View All Link */
.group-page .cmt-pagination { text-align: center; padding: 16px 0; }
.group-page .cmt-view-all { display: inline-block; color: rgb(36, 205, 119); font-size: 14px; text-decoration: none; padding: 8px 24px; border: 1px solid rgb(36, 205, 119); border-radius: 4px; }
.group-page .cmt-view-all:hover { background: rgb(36, 205, 119); color: #fff; }

/* Right Sidebar */
.group-page .right { width: 330px; float: right; }
.group-page .right .box { background: #fff; border-radius: 8px; margin-bottom: 16px; }
.group-page .right .title { padding: 16px; border-bottom: 1px solid #f1f3f4; display: flex; justify-content: space-between; align-items: center; }
.group-page .right .title h3 { font-size: 16px; font-weight: 500; margin: 0; color: rgb(17, 17, 17); }
.group-page .right .title .more a { font-size: 12px; color: rgb(36, 205, 119); text-decoration: none; }
.group-page .right .index-left-ul { list-style: none; padding: 0; margin: 0; }
.group-page .right .index-left-ul li { border-bottom: 1px solid #f1f3f4; }
.group-page .right .index-left-ul li:last-child { border-bottom: none; }
.group-page .right .index-left-ul a { display: flex; align-items: center; padding: 12px 16px; text-decoration: none; color: rgb(51, 51, 51); gap: 12px; }
.group-page .right .index-left-ul a:hover { background: #f9f9f9; }
.group-page .right .app-icon { width: 40px; height: 40px; flex-shrink: 0; }
.group-page .right .app-icon img { width: 40px; height: 40px; border-radius: 8px; }
.group-page .right .app-text { flex: 1; min-width: 0; }
.group-page .right .app-text-title { font-size: 13px; font-weight: 500; margin: 0; color: rgb(51, 51, 51); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-page .right .app-text p { font-size: 12px; color: rgb(153, 153, 153); margin: 2px 0 0; }
.group-page .right .app-text-developer { font-size: 12px; color: rgb(153, 153, 153); }

/* Social Network */
.group-page .facebook-like { background: #fff; border-radius: 8px; margin-bottom: 16px; padding: 16px; }
.group-page .social-network { display: flex; gap: 8px; margin: 0; }
.group-page .social-network .network { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; text-decoration: none; font-size: 0; }
.group-page .social-network .fb { background: #1877F2; }
.group-page .social-network .tw { background: #1DA1F2; }
.group-page .social-network .glp { background: #FF0000; }
.group-page .social-network .network span { display: none; }
.group-page .social-network .fb::before { content: 'f'; color: #fff; font-size: 18px; font-weight: bold; }
.group-page .social-network .tw::before { content: '𝕏'; color: #fff; font-size: 18px; }
.group-page .social-network .glp::before { content: '▶'; color: #fff; font-size: 14px; }

/* Float helpers */
.group-page .floatl { float: left; }
.group-page .floatr { float: right; }
.group-page .clear { clear: both; }

/* Comment Detail Page - Replies */
.group-page .cmt-replies-title { padding: 16px 16px 0; }
.group-page .cmt-replies-title h3 { font-size: 16px; font-weight: 500; margin: 0; color: rgb(17,17,17); }
.group-page .cmt-reply-list { padding: 0 16px 16px; }
.group-page .cmt-reply-item { border-bottom: 1px solid #f1f3f4; }
.group-page .cmt-reply-item:last-child { border-bottom: none; }
.group-page .cmt-report-link { font-size: 12px; color: rgb(153,153,153); text-decoration: none; }
.group-page .cmt-report-link:hover { color: rgb(36,205,119); }
.group-page .cmt-avatar-placeholder { display: inline-block; }

/* ===== Comment Detail Page (group/:slug/:id) - Exact target site styles ===== */

/* Main layout */
.group-detail .main.page-q.main-invit { width: 980px; margin: 20px auto 0; padding: 0; background: none; }
.group-detail .box { background: #fff; border-radius: 0; margin-bottom: 20px; padding: 0; }

/* Breadcrumbs */
.group-detail .bread-crumbs { padding: 16px; font-size: 12px; color: rgb(153,153,153); }
.group-detail .bread-crumbs a { color: rgb(153,153,153); text-decoration: none; }
.group-detail .bread-crumbs span { color: rgb(51,51,51); }

/* Article Container */
.group-detail .article-container { width: 820px; padding: 46px 80px 20px; margin: 0; }

/* Author section */
.group-detail .author { width: 820px; margin: 0; padding: 0; }
.group-detail .author-info { position: relative; width: 820px; padding: 0 0 20px 0; }
.group-detail .author-icon { width: 40px; height: 40px; margin-right: 0; float: left; }
.group-detail .author-icon img { width: 40px; height: 40px; border-radius: 50%; }
.group-detail .author-icon .iconfont { font-size: 40px; line-height: 40px; color: #ccc; }

/* Author name - target: color rgb(85,85,85), 14px, weight 400 */
.group-detail .author-name { margin-left: 50px; }
.group-detail .author-name a { color: rgb(85,85,85); font-weight: 400; text-decoration: none; font-size: 14px; }
.group-detail .author-name a:hover { text-decoration: underline; }

/* Author time - target: color rgb(153,153,153), 14px */
.group-detail .author-time { margin-left: 50px; font-size: 14px; color: rgb(153,153,153); }
.group-detail .author-time .cmt-author-s-stars { position: relative; display: inline-block; width: 70px; height: 14px; margin-left: 4px; vertical-align: middle; }
.group-detail .cmt-author-s-stars .cmt-icon-s-star { position: absolute; left: 0; top: 0; width: 70px; height: 14px; z-index: 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='14' viewBox='0 0 70 14'%3E%3Cpath d='M7 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L7 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L7 0z' fill='%23FFB300'/%3E%3Cpath d='M21 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L21 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L21 0z' fill='%23FFB300'/%3E%3Cpath d='M35 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L35 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L35 0z' fill='%23FFB300'/%3E%3Cpath d='M49 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L49 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L49 0z' fill='%23FFB300'/%3E%3Cpath d='M63 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L63 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L63 0z' fill='%23FFB300'/%3E%3C/svg%3E") no-repeat; }
.group-detail .cmt-author-s-stars .cmt-icon-s-star-empty { position: absolute; left: 0; top: 0; width: 70px; height: 14px; z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='14' viewBox='0 0 70 14'%3E%3Cpath d='M7 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L7 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L7 0z' fill='%23e0e0e0'/%3E%3Cpath d='M21 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L21 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L21 0z' fill='%23e0e0e0'/%3E%3Cpath d='M35 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L35 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L35 0z' fill='%23e0e0e0'/%3E%3Cpath d='M49 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L49 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L49 0z' fill='%23e0e0e0'/%3E%3Cpath d='M63 0l1.82 3.69 4.06.59-2.94 2.86.69 4.05L63 9.28l-3.63 1.91.69-4.05-2.94-2.86 4.06-.59L63 0z' fill='%23e0e0e0'/%3E%3C/svg%3E") no-repeat; }

/* Author actions - target: color rgb(102,102,102), 14px, not floated */
.group-detail .author-actions { margin-left: 50px; font-size: 14px; color: rgb(102,102,102); }
.group-detail .author-actions a { color: rgb(102,102,102); text-decoration: none; font-size: 14px; }
.group-detail .author-actions a:hover { color: rgb(36,205,119); }
.group-detail .author-actions .iconfont { font-size: 14px; }

/* Article (comment text) - target: padding 30px 0 0, 16px, color rgb(85,85,85), line-height 25px */
.group-detail .article { width: 820px; margin: 0; padding: 30px 0 0; }
.group-detail .article p { font-size: 16px; color: rgb(85,85,85); line-height: 25px; margin: 0; }

/* Author footer - target: padding 30px 0 15px */
.group-detail .author-footer { padding: 30px 0 15px; margin: 0; }
.group-detail .author-footer ul { list-style: none; padding: 0; margin: 0; }
.group-detail .author-footer li { list-style: none; display: inline-block; }
.group-detail .author-footer .cmt-btn-zan { border: none; background: rgb(248,248,248); cursor: pointer; padding: 0; color: rgb(153,153,153); font-size: 12px; }
.group-detail .author-footer .cmt-vote { font-size: 12px; color: rgb(153,153,153); }

/* Invit Share - target: padding 5px 8px, text-align center */
.group-detail .invit-share { padding: 5px 8px; margin: 0; text-align: center; }
.group-detail .share_button_toolbox { display: inline-block; }
.group-detail .share-btn.share-toolbox { display: inline-flex; align-items: center; }
.group-detail .share-btn button { width: 32px; height: 32px; border: none; border-radius: 10%; margin-right: 5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.group-detail .share-btn .icon { display: inline-block; width: 16px; height: 16px; }
.group-detail .share-fb { background: #1877F2; }
.group-detail .share-fb .icon::before { content: 'f'; color: #fff; font-size: 16px; font-weight: bold; }
.group-detail .share-t { background: #1DA1F2; }
.group-detail .share-t .icon::before { content: '𝕏'; color: #fff; font-size: 16px; }
.group-detail .share-reddit { background: #FF4500; }
.group-detail .share-reddit .icon::before { content: 'r'; color: #fff; font-size: 14px; font-weight: bold; }
.group-detail .share-vk { background: #4C75A3; }
.group-detail .share-vk .icon::before { content: 'vk'; color: #fff; font-size: 11px; font-weight: bold; }
.group-detail .share-whatsapp { background: #25D366; }
.group-detail .share-whatsapp .icon::before { content: 'w'; color: #fff; font-size: 16px; font-weight: bold; }
.group-detail .share-more { background: #f1f3f4; }
.group-detail .share-more .icon::before { content: '+'; color: #5f6368; font-size: 16px; font-weight: bold; }
.group-detail .share-counter { font-size: 11.4px; color: rgb(50,54,59); font-weight: 700; margin-left: 5px; }

/* Cmt Container (Replies) - target: 820px, no padding/margin */
.group-detail .cmt-container { width: 820px; padding: 0; margin: 0; }

/* Cmt total + sort - target: no padding/margin */
.group-detail .cmt-total { padding: 0; margin: 0; overflow: hidden; }
.group-detail .cmt-total h3 { float: left; font-size: 16px; font-weight: 500; margin: 0; color: rgb(17,17,17); }
.group-detail .invit-sort { float: right; font-size: 14px; color: rgb(68,68,68); }
.group-detail .invit-sort a { color: rgb(102,102,102); font-size: 14px; text-decoration: none; }
.group-detail .invit-sort a.on { color: rgb(102,102,102); }
.group-detail .invit-sort a:hover { color: rgb(36,205,119); }

/* Reply list */
.group-detail .cmt-reply { list-style: none; padding: 0; margin: 0; }
.group-detail .cmt-root { list-style: none; border-bottom: 1px solid rgb(238,238,238); position: relative; }
.group-detail .cmt-root-cont { padding: 15px 15px 10px; position: relative; }
.group-detail .cmt-root-top { overflow: hidden; }
.group-detail .cmt-root-icon { width: 45px; height: 45px; float: left; margin-right: 0; }
.group-detail .cmt-root-icon img { width: 45px; height: 45px; border-radius: 50%; }
.group-detail .cmt-root-user { margin: 0 0 0 55px; padding: 0 60px 0 0; font-size: 14px; line-height: 22.5px; overflow: hidden; height: 23px; }
.group-detail .cmt-root-user-name a { color: rgb(70,130,190); font-weight: 700; text-decoration: none; font-size: 14px; }
.group-detail .cmt-root-user-name a:hover { text-decoration: underline; }
.group-detail .cmt-root-message { margin: 0 0 0 55px; padding: 0; font-size: 14px; color: rgb(68,68,68); line-height: 18px; }
.group-detail .cmt-root-message p { font-size: 14px; color: rgb(68,68,68); line-height: 18px; margin: 0; }
.group-detail .cmt-root-message .emojione { display: inline; width: 20px; height: 20px; vertical-align: middle; }

/* Reply footer - target: padding 0, margin 0 0 0 55px */
.group-detail .cmt-root-footer { padding: 0; margin: 0 0 0 55px; }
.group-detail .cmt-root-footer ul { float: left; list-style: none; padding: 0; margin: 0; font-size: 12px; color: rgb(153,153,153); }
.group-detail .cmt-root-footer li { float: left; margin: 0 15px 0 0; font-size: 12px; color: rgb(153,153,153); list-style: none; }
.group-detail .cmt-root-footer li span { color: rgb(153,153,153); font-size: 12px; }
.group-detail .cmt-source { font-size: 12px; color: rgb(153,153,153); }
.group-detail .cmt-source .iconfont { font-size: 12px; }
.group-detail .cmt-btn-reply, .group-detail .cmt-btn-zan { display: inline; padding: 0; border: none; background: none; font-size: 12px; color: rgb(153,153,153); cursor: pointer; }
.group-detail .cmt-btn-reply:hover, .group-detail .cmt-btn-zan:hover { color: rgb(36,205,119); }
.group-detail .cmt-btn-reply .iconfont, .group-detail .cmt-btn-zan .iconfont { font-size: 12px; }
.group-detail .cmt-vote { margin-left: 4px; }
.group-detail .cmt-report { position: absolute; right: 15px; top: 15px; font-size: 12px; color: rgb(153,153,153); text-decoration: none; }
.group-detail .cmt-report:hover { color: rgb(36,205,119); }
.group-detail .cmt-cl { list-style: none; padding: 0; margin: 0; }

/* Reply input form - target: 820px, min-height 100px, padding 7px, border-radius 4px 4px 0 0 */
.group-detail #cmt-form { width: 820px; }
.group-detail #cmt-edit-reply { width: 820px; min-height: 100px; padding: 7px; border: 1px solid #e0e0e0; border-bottom: none; border-radius: 4px 4px 0 0; font-size: 14px; outline: none; color: rgb(51,51,51); box-sizing: border-box; }
.group-detail #cmt-edit-reply:empty::before { content: 'Adicione uma postagem...'; color: rgb(153,153,153); }
.group-detail #cmt-edit-reply:focus { border-color: rgb(36,205,119); }
.group-detail .cmt-edit-reply-bottom { background: rgb(248,248,248); border: 1px solid #e0e0e0; border-radius: 0 0 4px 4px; padding: 0; overflow: hidden; }
.group-detail .cmt-btn-emoji { width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.group-detail .cmt-icon-emoji { display: inline-block; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E") no-repeat center; }
.group-detail .cmt-btn { display: inline-block; padding: 8px 24px; background: rgb(36,205,119); color: #fff; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; margin-top: 12px; float: right; }
.group-detail .cmt-btn:hover { opacity: 0.9; }
.group-detail .cmt-disabled { background: #ccc; cursor: not-allowed; }
.group-detail .fr { float: right; }
.group-detail .floatl { float: left; }
.group-detail .floatr { float: right; }
.group-detail .clear { clear: both; }