@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Kumbh+Sans:wght@400;500;600;700&display=swap');

/* ── Root ── */
#ac-root { font-family:'Kumbh Sans','Roboto',sans-serif; max-width:1100px; margin:0 auto; }
#ac-root * { box-sizing:border-box; }
.ac-login { padding:32px; text-align:center; color:#6b7280; }

/* ── Layout ── */
.ac-wrap { display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:start; }
@media(max-width:720px){
	.ac-wrap {
    display: grid;
    grid-template-columns: 100% 1fr;
    gap: 24px;
    align-items: start;
}

    .ac-sidebar { display: none; }
    .ac-mobile-cats { display: flex; }
}
@media(min-width:721px){
	
    .ac-mobile-cats { display: none; }
}

/* ── Sidebar ── */
.ac-sidebar { background:#fff; border-radius:14px; border:1px solid #dde3f0; overflow:hidden; position:sticky; top:24px; }
.ac-sidebar-logo { background:#131e3b; color:#fff; font-weight:800; font-size:1rem; padding:16px 20px; letter-spacing:.02em; }
.ac-sidebar-label { font-size:.6rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#9ca3af; padding:14px 20px 6px; }
.ac-cat-item { display:flex; align-items:center; gap:10px; padding:11px 20px; cursor:pointer; font-size:.88rem; font-weight:500; color:#374151; border-left:3px solid transparent; transition:background .15s, color .15s, border-color .15s; }
.ac-cat-item:hover { background:#f8f9ff; color:#131e3b; }
.ac-cat-item.active { background:#f0f4fb; color:#131e3b; font-weight:700; border-left-color:#131e3b; }
.ac-cat-icon { font-size:1rem; }

/* ── Main ── */
.ac-main { display:flex; flex-direction:column; gap:16px; }

/* ── Composer ── */
.ac-composer { background:#fff; border-radius:14px; border:1px solid #dde3f0; padding:16px; display:flex; gap:12px; align-items:flex-start; }
.ac-composer-photo { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.ac-composer-form { flex:1; }
.ac-composer-placeholder { padding:12px 16px; background:#f8f9ff; border:1px solid #e8edf5; border-radius:10px; color:#9ca3af; cursor:pointer; font-size:.9rem; transition:background .15s; }
.ac-composer-placeholder:hover { background:#f0f4fb; color:#6b7280; }
.ac-post-title-input { width:100%; border:none; border-bottom:1px solid #e8edf5; padding:8px 0; font-family:inherit; font-size:1rem; font-weight:700; color:#131e3b; outline:none; margin-bottom:8px; }
.ac-post-title-input::placeholder { color:#9ca3af; font-weight:400; }
.ac-post-body { width:100%; border:none; outline:none; font-family:inherit; font-size:.9rem; color:#131e3b; resize:none; min-height:80px; line-height:1.5; }
.ac-post-body::placeholder { color:#9ca3af; }
.ac-composer-toolbar { display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid #f0f2f7; margin-top:8px; }
.ac-cat-select { border:1px solid #dde3f0; border-radius:8px; padding:7px 10px; font-family:inherit; font-size:.82rem; outline:none; color:#131e3b; background:#fff; flex:1; }
.ac-img-upload-btn { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; background:#f8f9ff; border:1px solid #e8edf5; cursor:pointer; color:#6b7280; flex-shrink:0; transition:background .15s; }
.ac-img-upload-btn:hover { background:#f0f4fb; color:#131e3b; }
.ac-post-btn { background:#131e3b; color:#fff; border:none; border-radius:8px; padding:8px 20px; font-family:inherit; font-weight:700; font-size:.88rem; cursor:pointer; transition:background .2s; flex-shrink:0; }
.ac-post-btn:hover { background:#1c2d57; }
.ac-img-preview-wrap { margin:10px 0 0; }
.ac-img-preview-wrap img { max-width:200px; border-radius:8px; border:1px solid #e8edf5; }
.ac-img-remove { background:none; border:none; color:#dc2626; cursor:pointer; font-size:.9rem; margin-left:6px; }

/* ── Post card ── */
.ac-post-card { background:#fff; border-radius:14px; border:1px solid #dde3f0; padding:20px; transition:box-shadow .2s; }
.ac-post-card:hover { box-shadow:0 2px 12px rgba(19,30,59,.07); }
.ac-post-card.ac-pinned { border-color:#131e3b; border-left:4px solid #131e3b; }
.ac-pin-badge { font-size:.7rem; font-weight:700; color:#131e3b; background:#f0f4fb; border-radius:4px; padding:2px 8px; display:inline-block; margin-bottom:10px; }
.ac-post-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ac-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.ac-avatar-sm { width:32px; height:32px; }
.ac-post-meta { flex:1; display:flex; flex-direction:column; }
.ac-post-author { font-weight:700; font-size:.9rem; color:#131e3b; }
.ac-post-time { font-size:.72rem; color:#9ca3af; }
.ac-post-actions { display:flex; gap:6px; }
.ac-btn-icon { background:none; border:none; cursor:pointer; font-size:1rem; opacity:.4; padding:4px; border-radius:6px; transition:opacity .2s, background .2s; }
.ac-btn-icon:hover { opacity:1; background:#f0f2f7; }
.ac-post-title { font-size:1.05rem; font-weight:800; color:#131e3b; margin-bottom:6px; line-height:1.3; }
.ac-post-body { font-size:.9rem; color:#374151; line-height:1.6; margin-bottom:12px; white-space:pre-wrap; }
.ac-post-img { max-width:100%; border-radius:10px; margin-bottom:12px; max-height:400px; object-fit:cover; display:block; }
.ac-post-footer { display:flex; align-items:center; gap:12px; padding-top:10px; border-top:1px solid #f0f2f7; flex-wrap:wrap; }

/* ── Reactions ── */
.ac-reactions { display:flex; gap:6px; flex-wrap:wrap; }
.ac-react-btn { background:#f8f9ff; border:1px solid #e8edf5; border-radius:20px; padding:4px 10px; font-size:.82rem; cursor:pointer; transition:background .15s, border-color .15s; display:flex; align-items:center; gap:4px; }
.ac-react-btn:hover { background:#f0f4fb; border-color:#dde3f0; }
.ac-react-btn.ac-react-active { background:#131e3b; border-color:#131e3b; color:#fff; }
.ac-react-btn span { font-size:.78rem; font-weight:700; }
.ac-comment-toggle { background:none; border:none; color:#6b7280; font-size:.82rem; font-weight:600; cursor:pointer; padding:4px 8px; border-radius:6px; margin-left:auto; transition:background .15s; }
.ac-comment-toggle:hover { background:#f0f2f7; color:#131e3b; }

/* ── Comments ── */
.ac-comments-wrap { border-top:1px solid #f0f2f7; margin-top:12px; padding-top:12px; }
.ac-comment { display:flex; gap:10px; margin-bottom:14px; }
.ac-comment-body { flex:1; background:#f8f9ff; border-radius:10px; padding:10px 14px; }
.ac-comment-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.ac-comment-author { font-weight:700; font-size:.82rem; color:#131e3b; }
.ac-comment-time { font-size:.68rem; color:#9ca3af; flex:1; }
.ac-comment-text { font-size:.85rem; color:#374151; line-height:1.5; margin-bottom:6px; }
.ac-comment-img { max-width:200px; border-radius:8px; margin-top:6px; }
.ac-comment-form { display:flex; gap:10px; align-items:flex-start; margin-top:8px; }
.ac-comment-input-wrap { flex:1; }
.ac-comment-input { width:100%; border:1px solid #dde3f0; border-radius:10px; padding:10px 12px; font-family:inherit; font-size:.88rem; resize:none; outline:none; color:#131e3b; line-height:1.4; }
.ac-comment-input:focus { border-color:#131e3b; }
.ac-comment-toolbar { display:flex; align-items:center; gap:8px; margin-top:6px; }
.ac-comment-submit { background:#131e3b; color:#fff; border:none; border-radius:8px; padding:7px 16px; font-family:inherit; font-weight:700; font-size:.82rem; cursor:pointer; transition:background .2s; margin-left:auto; }
.ac-comment-submit:hover { background:#1c2d57; }

/* ── States ── */
.ac-loading,.ac-loading-sm { text-align:center; padding:32px; color:#9ca3af; font-size:.88rem; }
.ac-loading-sm { padding:12px; }
.ac-empty { text-align:center; padding:48px 24px; color:#9ca3af; }
.ac-empty strong { display:block; font-size:1.1rem; color:#131e3b; margin-bottom:6px; }
.ac-load-more-wrap { text-align:center; padding:8px 0; }
.ac-load-more-btn { background:#fff; border:1px solid #dde3f0; border-radius:8px; padding:10px 24px; font-family:inherit; font-weight:700; font-size:.85rem; cursor:pointer; color:#131e3b; transition:background .15s; }
.ac-load-more-btn:hover { background:#f0f4fb; }

/* ── Mobile category pills ── */
.ac-mobile-cats {
    flex-wrap:    nowrap;
    overflow-x:   auto;
    gap:          8px;
    padding:      0 0 8px;
    margin-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ac-mobile-cats::-webkit-scrollbar { display: none; }
.ac-mobile-pill {
    display:      flex;
    align-items:  center;
    gap:          6px;
    white-space:  nowrap;
    background:   #fff;
    border:       1px solid #dde3f0;
    border-radius: 20px;
    padding:      7px 14px;
    font-size:    .82rem;
    font-weight:  600;
    color:        #374151;
    cursor:       pointer;
    flex-shrink:  0;
    transition:   background .15s, border-color .15s, color .15s;
}
.ac-mobile-pill.active {
    background:   #131e3b;
    border-color: #131e3b;
    color:        #fff;
}
.ac-mobile-pill:hover:not(.active) {
    background:   #f0f4fb;
    border-color: #131e3b;
    color:        #131e3b;
}

/* ── Replies ── */
.ac-reply-list { margin-left:48px; border-left:2px solid #e8edf5; padding-left:10px; }
.ac-is-reply .ac-comment-body { background:#f0f4fb; }
.ac-reply-form { display:flex; gap:8px; align-items:flex-start; margin:8px 0; }
.ac-reply-ta { width:100%; border:1px solid #dde3f0; border-radius:8px; padding:8px 12px; font-family:inherit; font-size:.85rem; resize:none; outline:none; }
.ac-reply-ta:focus { border-color:#131e3b; }
.ac-reply-submit { background:#131e3b; color:#fff; border:none; border-radius:6px; padding:6px 14px; font-family:inherit; font-size:.78rem; font-weight:700; cursor:pointer; }
.ac-reply-submit:hover { background:#1c2d57; }
.ac-comment-actions { display:flex !important; align-items:center !important; gap:8px !important; margin-top:8px !important; flex-wrap:wrap !important; padding-top:6px !important; border-top:1px solid #f0f2f7 !important; }
.ac-reply-toggle { background:transparent !important; border:1px solid #dde3f0 !important; color:#6b7280 !important; font-size:.75rem !important; font-weight:700 !important; cursor:pointer !important; padding:4px 10px !important; border-radius:6px !important; font-family:inherit !important; display:inline-block !important; line-height:1.4 !important; }
.ac-reply-toggle:hover { background:#f0f2f7 !important; color:#131e3b !important; border-color:#131e3b !important; }

/* ── Reply System ── */
.ac-reply-list {
    margin-left: 44px;
    margin-top: 4px;
    padding-left: 12px;
    border-left: 2px solid #e8edf5;
}
.ac-is-reply {
    margin-bottom: 8px;
}
.ac-is-reply .ac-comment-body {
    background: #f8f9ff;
    border-radius: 10px;
}
.ac-reply-form {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
    margin: 8px 0;
    padding: 10px 0;
}
.ac-reply-ta {
    width: 100%;
    border: 1px solid #dde3f0 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: .85rem !important;
    font-family: inherit !important;
    resize: none;
    outline: none !important;
    color: #131e3b !important;
    background: #fff !important;
}
.ac-reply-ta:focus {
    border-color: #131e3b !important;
}
.ac-reply-submit {
    background: #131e3b !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    margin-top: 6px;
}
.ac-reply-submit:hover {
    background: #1c2d57 !important;
}
.ac-reply-toggle {
    background: transparent !important;
    border: 1px solid #dde3f0 !important;
    color: #6b7280 !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    margin-left: 8px !important;
    display: inline-block !important;
    line-height: 1.5 !important;
}
.ac-reply-toggle:hover {
    background: #f0f2f7 !important;
    color: #131e3b !important;
    border-color: #131e3b !important;
}
.ac-comment-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
}