/* ============================================================
PREMIUM WEB COMMUNITY
GLOBAL DESIGN SYSTEM
============================================================ */

:root {
--pw-black: #0b0b0b;
--pw-black-soft: #141414;
--pw-dark: #1d1d1d;

--pw-gold: #d4af37;
--pw-gold-dark: #9f7f18;
--pw-gold-light: #ead37d;
--pw-gold-soft: rgba(212, 175, 55, 0.10);
--pw-gold-border: rgba(212, 175, 55, 0.22);

--pw-white: #ffffff;
--pw-bg: #f6f6f6;
--pw-soft-bg: #fafafa;

--pw-text: #171717;
--pw-muted: #747474;
--pw-light-muted: #a1a1a1;

--pw-border: #e7e7e7;

--pw-red: #c93d3d;
--pw-green: #198754;
--pw-orange: #cc8317;
--pw-blue: #2563eb;

--pw-header-height: 66px;

--pw-left-sidebar-width: 245px;
--pw-right-sidebar-width: 285px;

--pw-radius-sm: 10px;
--pw-radius-md: 15px;
--pw-radius-lg: 20px;

--pw-shadow-xs:
0 2px 8px rgba(0, 0, 0, 0.035);

--pw-shadow-sm:
0 8px 25px rgba(0, 0, 0, 0.065);

--pw-shadow-md:
0 15px 40px rgba(0, 0, 0, 0.10);

--pw-shadow-lg:
0 25px 70px rgba(0, 0, 0, 0.18);

--pw-transition:
0.22s ease;
}


/* ============================================================
RESET
============================================================ */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html {
scroll-behavior: smooth;
}


body {
min-height: 100vh;

background: var(--pw-bg);

color: var(--pw-text);

font-family:
"Inter",
Arial,
sans-serif;

font-size: 14px;

line-height: 1.5;
}


body.modal-open {
overflow: hidden;
}


button,
input,
textarea,
select {
font: inherit;
}


button {
border: 0;
outline: 0;

cursor: pointer;
}


a {
color: inherit;

text-decoration: none;
}


img {
display: block;

max-width: 100%;
}


textarea {
resize: vertical;
}


/* ============================================================
CUSTOM SCROLLBAR
============================================================ */

::-webkit-scrollbar {
width: 8px;
height: 8px;
}


::-webkit-scrollbar-track {
background: transparent;
}


::-webkit-scrollbar-thumb {
border-radius: 999px;

background: #cecece;
}


::-webkit-scrollbar-thumb:hover {
background: #bcbcbc;
}


/* ============================================================
PAGE LOADER
============================================================ */

.community-loader {
position: fixed;

inset: 0;

z-index: 20000;

display: flex;
align-items: center;
justify-content: center;

background: #ffffff;
}


.community-loader-content {
display: flex;
flex-direction: column;
align-items: center;

gap: 18px;
}


.loader-logo {
color: #111111;

font-size: 20px;
font-weight: 700;

letter-spacing: -0.5px;
}


.loader-logo span {
color: var(--pw-gold);
}


.loader-spinner {
width: 27px;
height: 27px;

border:
3px solid #ededed;

border-top-color:
var(--pw-gold);

border-radius: 50%;

animation:
communitySpin
0.8s linear infinite;
}


@keyframes communitySpin {

to {
transform: rotate(360deg);
}

}


/* ============================================================
HEADER
============================================================ */

.community-header {
position: sticky;

top: 0;

z-index: 5000;

width: 100%;
height: var(--pw-header-height);

border-bottom:
1px solid var(--pw-border);

background:
rgba(255, 255, 255, 0.96);

backdrop-filter:
blur(16px);

-webkit-backdrop-filter:
blur(16px);
}


.community-navbar {
width: 100%;
height: 100%;

padding:
0 22px;

display: grid;

grid-template-columns:
minmax(200px, 1fr)
minmax(300px, 620px)
minmax(260px, 1fr);

align-items: center;

gap: 22px;
}


/* ============================================================
HEADER LEFT
============================================================ */

.community-nav-left {
min-width: 0;

display: flex;
align-items: center;

gap: 11px;
}


.community-logo {
white-space: nowrap;

color: #111111;

font-size: 16px;
font-weight: 700;

letter-spacing: -0.45px;
}


.community-logo span {
color: var(--pw-gold);
}


.community-mobile-menu-btn {
display: none;

width: 38px;
height: 38px;

align-items: center;
justify-content: center;

flex-shrink: 0;

border-radius: 10px;

background: #f2f2f2;

color: #333333;

font-size: 13px;
}


.community-mobile-menu-btn:hover {
background: var(--pw-gold-soft);

color: var(--pw-gold-dark);
}


/* ============================================================
GLOBAL SEARCH
============================================================ */

.community-global-search {
position: relative;

width: 100%;
}


.community-global-search > i {
position: absolute;

left: 15px;
top: 50%;

transform:
translateY(-50%);

color: #9a9a9a;

font-size: 11px;

pointer-events: none;
}


.community-global-search input {
width: 100%;
height: 42px;

padding:
0 43px 0 40px;

border:
1px solid var(--pw-border);

border-radius: 999px;

outline: none;

background: #f8f8f8;

color: var(--pw-text);

font-size: 8.4px;

transition:
border-color var(--pw-transition),
background var(--pw-transition),
box-shadow var(--pw-transition);
}


.community-global-search input::placeholder {
color: #9a9a9a;
}


.community-global-search input:focus {
border-color: var(--pw-gold);

background: #ffffff;

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.07);
}


.community-global-search button {
position: absolute;

top: 50%;
right: 7px;

width: 30px;
height: 30px;

transform:
translateY(-50%);

display: none;
align-items: center;
justify-content: center;

border-radius: 50%;

background: transparent;

color: #8a8a8a;

font-size: 8px;
}


.community-global-search button.active {
display: flex;
}


.community-global-search button:hover {
background: #eeeeee;

color: #222222;
}


/* ============================================================
HEADER RIGHT
============================================================ */

.community-nav-right {
display: flex;
align-items: center;
justify-content: flex-end;

gap: 8px;
}


/* ============================================================
CREATE BUTTON
============================================================ */

.community-create-btn {
min-height: 38px;

padding:
0 14px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 7px;

border-radius: 999px;

background: var(--pw-black-soft);

color: #ffffff;

font-size: 7.7px;
font-weight: 600;

transition:
background var(--pw-transition),
color var(--pw-transition),
transform var(--pw-transition);
}


.community-create-btn:hover {
transform:
translateY(-1px);

background: var(--pw-gold);

color: #111111;
}


/* ============================================================
HEADER ICON BUTTON
============================================================ */

.community-header-icon-btn {
position: relative;

width: 38px;
height: 38px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: #f2f2f2;

color: #555555;

font-size: 10px;
}


.community-header-icon-btn:hover {
background: var(--pw-gold-soft);

color: var(--pw-gold-dark);
}


.community-notification-dot {
position: absolute;

top: 6px;
right: 7px;

width: 7px;
height: 7px;

border:
2px solid #ffffff;

border-radius: 50%;

background: var(--pw-red);
}


/* ============================================================
HEADER USER MENU
============================================================ */

.community-user-menu-wrapper {
position: relative;
}


.community-user-btn {
min-height: 40px;

padding:
4px 9px 4px 4px;

display: flex;
align-items: center;

gap: 7px;

border:
1px solid var(--pw-border);

border-radius: 999px;

background: #ffffff;

color: #333333;
}


.community-user-btn:hover {
border-color:
var(--pw-gold-border);

box-shadow:
var(--pw-shadow-xs);
}


.community-user-btn img {
width: 31px;
height: 31px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;
}


.community-user-btn span {
max-width: 85px;

overflow: hidden;

font-size: 7.5px;
font-weight: 600;

white-space: nowrap;
text-overflow: ellipsis;
}


.community-user-btn > i {
color: #999999;

font-size: 6px;
}


/* ============================================================
USER DROPDOWN
============================================================ */

.community-user-dropdown {
position: absolute;

top: calc(100% + 10px);
right: 0;

width: 235px;

padding: 8px;

display: none;

border:
1px solid var(--pw-border);

border-radius: 15px;

background: #ffffff;

box-shadow:
var(--pw-shadow-md);
}


.community-user-dropdown.active {
display: block;

animation:
dropdownOpen
0.18s ease;
}


@keyframes dropdownOpen {

from {
opacity: 0;

transform:
translateY(-5px);
}

to {
opacity: 1;

transform:
translateY(0);
}

}


.community-user-dropdown-header {
padding:
8px;

display: flex;
align-items: center;

gap: 9px;
}


.community-user-dropdown-header img {
width: 40px;
height: 40px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;
}


.community-user-dropdown-header > div {
min-width: 0;
}


.community-user-dropdown-header strong {
display: block;

overflow: hidden;

color: var(--pw-text);

font-size: 8px;

white-space: nowrap;
text-overflow: ellipsis;
}


.community-user-dropdown-header span {
display: block;

margin-top: 2px;

overflow: hidden;

color: var(--pw-muted);

font-size: 6.7px;

white-space: nowrap;
text-overflow: ellipsis;
}


.community-dropdown-divider {
height: 1px;

margin: 6px 0;

background: var(--pw-border);
}


.community-user-dropdown > a,
.community-dropdown-logout {
width: 100%;
min-height: 38px;

padding:
0 10px;

display: flex;
align-items: center;

gap: 9px;

border-radius: 9px;

background: transparent;

color: #4e4e4e;

font-size: 7.5px;

text-align: left;
}


.community-user-dropdown > a i,
.community-dropdown-logout i {
width: 15px;

color: #888888;

font-size: 8px;

text-align: center;
}


.community-user-dropdown > a:hover {
background: #f5f5f5;

color: #111111;
}


.community-dropdown-logout {
color: var(--pw-red);
}


.community-dropdown-logout i {
color: var(--pw-red);
}


.community-dropdown-logout:hover {
background:
rgba(201, 61, 61, 0.07);
}


/* ============================================================
COMMUNITY LAYOUT
============================================================ */

.community-layout {
width: 100%;
max-width: 1500px;

min-height:
calc(
100vh -
var(--pw-header-height)
);

margin: 0 auto;

padding:
18px 20px 45px;

display: grid;

grid-template-columns:
var(--pw-left-sidebar-width)
minmax(0, 1fr)
var(--pw-right-sidebar-width);

align-items: start;

gap: 18px;
}


/* ============================================================
LEFT SIDEBAR
============================================================ */

.community-sidebar {
position: sticky;

top:
calc(
var(--pw-header-height)
+
18px
);

max-height:
calc(
100vh -
var(--pw-header-height)
-
36px
);

overflow-y: auto;

border:
1px solid var(--pw-border);

border-radius:
17px;

background: #ffffff;

box-shadow:
var(--pw-shadow-xs);
}


/* ============================================================
SIDEBAR PROFILE
============================================================ */

.community-sidebar-profile {
overflow: hidden;

border-bottom:
1px solid var(--pw-border);
}


.sidebar-profile-cover {
height: 70px;

background:
linear-gradient(
135deg,
#111111,
#272727
);
}


.sidebar-profile-content {
position: relative;

padding:
34px 15px 16px;

text-align: center;
}


.sidebar-profile-content > img {
position: absolute;

top: -29px;
left: 50%;

width: 58px;
height: 58px;

transform:
translateX(-50%);

object-fit: cover;

border:
4px solid #ffffff;

border-radius: 50%;

background: #ffffff;
}


.sidebar-profile-content > strong {
display: block;

overflow: hidden;

color: var(--pw-text);

font-size: 9px;
font-weight: 650;

white-space: nowrap;
text-overflow: ellipsis;
}


.sidebar-profile-content > span {
display: block;

margin-top: 2px;

overflow: hidden;

color: var(--pw-muted);

font-size: 6.6px;

white-space: nowrap;
text-overflow: ellipsis;
}


.sidebar-profile-content > p {
margin:
8px auto 11px;

color: #696969;

font-size: 7px;

line-height: 1.55;
}


.sidebar-profile-link {
min-height: 31px;

padding:
0 10px;

display: inline-flex;
align-items: center;
justify-content: center;

border:
1px solid var(--pw-border);

border-radius: 999px;

background: #ffffff;

color: #444444;

font-size: 6.8px;
font-weight: 600;
}


.sidebar-profile-link:hover {
border-color:
var(--pw-gold-border);

background: var(--pw-gold-soft);

color: var(--pw-gold-dark);
}


/* ============================================================
SIDEBAR NAVIGATION
============================================================ */

.community-sidebar-nav {
padding:
10px;
}


.community-sidebar-link {
width: 100%;
min-height: 39px;

padding:
0 10px;

display: flex;
align-items: center;
justify-content: space-between;

border-radius: 9px;

background: transparent;

color: #555555;

text-align: left;
}


.community-sidebar-link > span {
min-width: 0;

display: flex;
align-items: center;

gap: 9px;

font-size: 7.4px;
font-weight: 500;
}


.community-sidebar-link i {
width: 17px;

color: #888888;

font-size: 8px;

text-align: center;
}


.community-sidebar-link:hover {
background: #f5f5f5;

color: #222222;
}


.community-sidebar-link.active {
background:
var(--pw-gold-soft);

color:
#71570e;

font-weight: 600;
}


.community-sidebar-link.active i {
color: var(--pw-gold-dark);
}


.community-sidebar-divider {
height: 1px;

margin:
9px 2px;

background: var(--pw-border);
}


.community-sidebar-heading {
padding:
6px 10px 4px;
}


.community-sidebar-heading span {
color: #999999;

font-size: 6.1px;
font-weight: 700;

letter-spacing:
0.8px;

text-transform:
uppercase;
}


/* ============================================================
SIDEBAR FOOTER
============================================================ */

.community-sidebar-footer {
padding:
13px 15px 16px;

display: flex;
flex-wrap: wrap;

gap:
6px 10px;

border-top:
1px solid var(--pw-border);
}


.community-sidebar-footer a {
color: #888888;

font-size: 6.2px;
}


.community-sidebar-footer a:hover {
color: var(--pw-gold-dark);
}


/* ============================================================
SIDEBAR OVERLAY
============================================================ */

.community-sidebar-overlay {
position: fixed;

inset: 0;

z-index: 4900;

display: none;

background:
rgba(0, 0, 0, 0.52);

backdrop-filter:
blur(3px);
}


.community-sidebar-overlay.active {
display: block;
}


/* ============================================================
CENTER COLUMN
============================================================ */

.community-main {
min-width: 0;

display: flex;
flex-direction: column;

gap: 13px;
}


/* ============================================================
WELCOME CARD
============================================================ */

.community-welcome-card {
min-height: 150px;

padding:
22px 23px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 20px;

overflow: hidden;

border:
1px solid
rgba(212, 175, 55, 0.17);

border-radius: 18px;

background:
linear-gradient(
135deg,
#111111,
#1d1d1d
);

box-shadow:
var(--pw-shadow-sm);
}


.community-welcome-content {
max-width: 620px;
}


.community-eyebrow {
display: block;

margin-bottom: 7px;

color: var(--pw-gold);

font-size: 6.3px;
font-weight: 700;

letter-spacing:
1.2px;
}


.community-welcome-content h1 {
margin-bottom: 7px;

color: #ffffff;

font-size: 20px;
font-weight: 650;

line-height: 1.3;
}


.community-welcome-content p {
max-width: 560px;

color: #c8c8c8;

font-size: 8px;

line-height: 1.65;
}


.community-welcome-actions {
flex-shrink: 0;

display: flex;
align-items: center;

gap: 7px;
}


/* ============================================================
PRIMARY / SECONDARY BUTTONS
============================================================ */

.community-primary-btn,
.community-secondary-btn {
min-height: 38px;

padding:
0 12px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 6px;

border-radius: 999px;

font-size: 7px;
font-weight: 600;

transition:
background var(--pw-transition),
color var(--pw-transition),
transform var(--pw-transition);
}


.community-primary-btn {
background: var(--pw-gold);

color: #111111;
}


.community-primary-btn:hover {
transform:
translateY(-1px);

background: var(--pw-gold-light);
}


.community-secondary-btn {
border:
1px solid
rgba(255, 255, 255, 0.18);

background:
rgba(255, 255, 255, 0.06);

color: #ffffff;
}


.community-secondary-btn:hover {
background:
rgba(255, 255, 255, 0.12);
}


/* ============================================================
QUICK COMPOSER
============================================================ */

.community-quick-composer {
min-height: 70px;

padding:
11px 13px;

display: flex;
align-items: center;

gap: 9px;

border:
1px solid var(--pw-border);

border-radius: 15px;

background: #ffffff;

box-shadow:
var(--pw-shadow-xs);
}


.community-quick-composer > img {
width: 39px;
height: 39px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;
}


.community-quick-composer >
button:not(.quick-composer-icon) {
flex: 1;

min-width: 0;
min-height: 39px;

padding:
0 14px;

overflow: hidden;

border-radius: 999px;

background: #f5f5f5;

color: #8b8b8b;

font-size: 7.6px;

text-align: left;

white-space: nowrap;
text-overflow: ellipsis;
}


.community-quick-composer >
button:not(.quick-composer-icon):hover {
background: #eeeeee;

color: #555555;
}


.quick-composer-icon {
width: 36px;
height: 36px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: #f5f5f5;

color: #6f6f6f;

font-size: 9px;
}


.quick-composer-icon:hover {
background: var(--pw-gold-soft);

color: var(--pw-gold-dark);
}


/* ============================================================
FEED TOOLBAR
============================================================ */

.community-feed-toolbar {
min-height: 53px;

padding:
7px 9px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 12px;

border:
1px solid var(--pw-border);

border-radius: 14px;

background: #ffffff;
}


.community-feed-tabs {
min-width: 0;

display: flex;
align-items: center;

gap: 3px;

overflow-x: auto;

scrollbar-width: none;
}


.community-feed-tabs::-webkit-scrollbar {
display: none;
}


.community-feed-tab {
min-height: 34px;

padding:
0 10px;

flex-shrink: 0;

border-radius: 999px;

background: transparent;

color: #777777;

font-size: 7px;
font-weight: 600;
}


.community-feed-tab:hover {
background: #f5f5f5;

color: #333333;
}


.community-feed-tab.active {
background: var(--pw-black-soft);

color: #ffffff;
}


.community-feed-filter-btn {
min-height: 34px;

padding:
0 10px;

flex-shrink: 0;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 6px;

border:
1px solid var(--pw-border);

border-radius: 999px;

background: #ffffff;

color: #555555;

font-size: 7px;
font-weight: 600;
}


.community-feed-filter-btn:hover {
border-color:
var(--pw-gold-border);

background:
var(--pw-gold-soft);

color: var(--pw-gold-dark);
}


/* ============================================================
ACTIVE FILTERS
============================================================ */

.community-active-filters {
display: none;

align-items: center;
flex-wrap: wrap;

gap: 6px;
}


.community-active-filters.active {
display: flex;
}


.community-active-filter {
min-height: 29px;

padding:
0 8px;

display: inline-flex;
align-items: center;

gap: 5px;

border:
1px solid var(--pw-gold-border);

border-radius: 999px;

background: var(--pw-gold-soft);

color: #755a0e;

font-size: 6.5px;
}


.community-active-filter button {
width: 18px;
height: 18px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: transparent;

color: inherit;

font-size: 6px;
}


/* ============================================================
FEED
============================================================ */

.community-feed {
display: flex;
flex-direction: column;

gap: 12px;
}


/* ============================================================
POST CARD
============================================================ */

.community-post-card {
position: relative;

width: 100%;

padding: 17px;

border:
1px solid var(--pw-border);

border-radius: 16px;

background: #ffffff;

box-shadow:
var(--pw-shadow-xs);

transition:
border-color var(--pw-transition),
box-shadow var(--pw-transition);
}


.community-post-card:hover {
border-color:
rgba(212, 175, 55, 0.18);

box-shadow:
var(--pw-shadow-sm);
}


/* ============================================================
POST AUTHOR
============================================================ */

.community-post-header {
display: flex;
align-items: flex-start;
justify-content: space-between;

gap: 12px;
}


.community-post-author {
min-width: 0;

display: flex;
align-items: center;

gap: 9px;
}


.community-post-author > img {
width: 40px;
height: 40px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;
}


.community-post-author-info {
min-width: 0;
}


.community-post-author-info strong {
display: block;

overflow: hidden;

color: var(--pw-text);

font-size: 8.5px;
font-weight: 650;

white-space: nowrap;
text-overflow: ellipsis;
}


.community-post-author-info strong:hover {
color: var(--pw-gold-dark);
}


.community-post-author-info span {
display: block;

margin-top: 2px;

color: var(--pw-muted);

font-size: 6.4px;
}


.community-post-options-btn {
width: 31px;
height: 31px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: transparent;

color: #777777;

font-size: 9px;
}


.community-post-options-btn:hover {
background: #f2f2f2;

color: #222222;
}


/* ============================================================
POST TYPE
============================================================ */

.community-post-type-row {
margin-top: 11px;

display: flex;
align-items: center;
flex-wrap: wrap;

gap: 6px;
}


.community-post-type-badge {
min-height: 24px;

padding:
0 8px;

display: inline-flex;
align-items: center;

gap: 5px;

border-radius: 999px;

background: var(--pw-gold-soft);

color: #795d10;

font-size: 6.3px;
font-weight: 700;
}


.community-post-type-badge i {
font-size: 6.5px;
}


/* ============================================================
POST TITLE / CONTENT
============================================================ */

.community-post-title {
margin-top: 11px;

color: var(--pw-text);

font-size: 13px;
font-weight: 650;

line-height: 1.45;
}


.community-post-body {
margin-top: 9px;

color: #4f4f4f;

font-size: 8px;

line-height: 1.7;

word-wrap: break-word;
}


.community-post-body p {
margin-bottom: 7px;
}


.community-post-body p:last-child {
margin-bottom: 0;
}


.community-post-body ul,
.community-post-body ol {
margin:
7px 0;

padding-left: 20px;
}


.community-post-body blockquote {
margin:
9px 0;

padding:
8px 11px;

border-left:
3px solid var(--pw-gold);

background: #fafafa;

color: #555555;
}


.community-post-body a {
color: var(--pw-gold-dark);

text-decoration: underline;
}


/* ============================================================
POST IMAGE
============================================================ */

.community-post-image {
margin-top: 13px;

overflow: hidden;

border:
1px solid var(--pw-border);

border-radius: 13px;

background: #f5f5f5;
}


.community-post-image img {
width: 100%;

max-height: 560px;

object-fit: cover;
}


/* ============================================================
TAGS
============================================================ */

.community-post-tags {
margin-top: 11px;

display: flex;
flex-wrap: wrap;

gap: 5px;
}


.community-post-tag {
padding:
4px 7px;

border-radius: 999px;

background: #f4f4f4;

color: #666666;

font-size: 6.3px;
}


.community-post-tag:hover {
background: var(--pw-gold-soft);

color: var(--pw-gold-dark);
}


/* ============================================================
POST INTERACTION SUMMARY
============================================================ */

.community-post-summary {
margin-top: 13px;

padding-bottom: 10px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;

border-bottom:
1px solid var(--pw-border);
}


.community-post-summary button,
.community-post-summary span {
display: inline-flex;
align-items: center;

gap: 5px;

background: transparent;

color: #7c7c7c;

font-size: 6.5px;
}


.community-post-summary button:hover {
color: var(--pw-gold-dark);
}


/* ============================================================
POST ACTIONS
============================================================ */

.community-post-actions {
padding-top: 8px;

display: grid;

grid-template-columns:
repeat(
4,
minmax(0, 1fr)
);

gap: 4px;
}


.community-post-action {
min-height: 34px;

display: flex;
align-items: center;
justify-content: center;

gap: 6px;

border-radius: 9px;

background: transparent;

color: #6d6d6d;

font-size: 6.8px;
font-weight: 600;
}


.community-post-action i {
font-size: 8px;
}


.community-post-action:hover {
background: #f5f5f5;

color: #222222;
}


.community-post-action.liked {
background:
rgba(201, 61, 61, 0.07);

color: var(--pw-red);
}


.community-post-action.saved {
background: var(--pw-gold-soft);

color: var(--pw-gold-dark);
}

/* ============================================================
CODE BLOCKS INSIDE COMMUNITY POSTS
============================================================ */

.community-post-code {
margin-top: 13px;

overflow: hidden;

border:
1px solid #292929;

border-radius: 13px;

background: #111111;
}


.community-post-code-header {
min-height: 39px;

padding:
0 12px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;

border-bottom:
1px solid #2a2a2a;

background: #181818;
}


.community-post-code-language {
display: flex;
align-items: center;

gap: 6px;

color: #d8d8d8;

font-size: 6.7px;
font-weight: 600;

text-transform: uppercase;

letter-spacing: 0.5px;
}


.community-post-code-language i {
color: var(--pw-gold);

font-size: 8px;
}


.community-copy-code-btn {
min-height: 27px;

padding:
0 8px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 5px;

border-radius: 7px;

background: #242424;

color: #cfcfcf;

font-size: 6.2px;
}


.community-copy-code-btn:hover {
background: var(--pw-gold);

color: #111111;
}


.community-post-code pre {
max-height: 420px;

margin: 0;

padding: 14px;

overflow: auto;

color: #e5e5e5;

font-family:
"Courier New",
Courier,
monospace;

font-size: 7.4px;

line-height: 1.7;

tab-size: 4;

white-space: pre;
}


.community-post-code code {
font-family: inherit;
}


/* ============================================================
MULTIPLE CODE TABS IN POSTS
============================================================ */

.community-post-code-tabs {
display: flex;
align-items: center;

gap: 3px;
}


.community-post-code-tab {
min-height: 27px;

padding:
0 8px;

border-radius: 6px;

background: transparent;

color: #929292;

font-size: 6.2px;
font-weight: 600;
}


.community-post-code-tab:hover {
background: #242424;

color: #ffffff;
}


.community-post-code-tab.active {
background:
rgba(212, 175, 55, 0.13);

color: var(--pw-gold);
}


.community-post-code-panel {
display: none;
}


.community-post-code-panel.active {
display: block;
}


/* ============================================================
SHARED PROJECT CARD
============================================================ */

.community-shared-project {
margin-top: 13px;

padding: 14px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 15px;

border:
1px solid var(--pw-border);

border-radius: 13px;

background:
linear-gradient(
135deg,
#fafafa,
#ffffff
);
}


.community-shared-project-info {
min-width: 0;
}


.community-shared-project-label {
margin-bottom: 4px;

display: inline-flex;
align-items: center;

gap: 5px;

color: var(--pw-gold-dark);

font-size: 6px;
font-weight: 700;

letter-spacing: 0.5px;

text-transform: uppercase;
}


.community-shared-project-info h4 {
margin-bottom: 4px;

overflow: hidden;

color: var(--pw-text);

font-size: 9px;

white-space: nowrap;
text-overflow: ellipsis;
}


.community-shared-project-info p {
color: var(--pw-muted);

font-size: 6.8px;

line-height: 1.5;
}


.community-open-project-btn {
min-height: 32px;

padding:
0 10px;

flex-shrink: 0;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 5px;

border-radius: 999px;

background: var(--pw-black-soft);

color: #ffffff;

font-size: 6.4px;
font-weight: 600;
}


.community-open-project-btn:hover {
background: var(--pw-gold);

color: #111111;
}


/* ============================================================
FEED LOADING
============================================================ */

.community-feed-loading {
display: flex;
flex-direction: column;

gap: 12px;
}


.community-feed-loading.hidden {
display: none;
}


.community-post-skeleton {
padding: 17px;

overflow: hidden;

border:
1px solid var(--pw-border);

border-radius: 16px;

background: #ffffff;
}


.skeleton-top {
margin-bottom: 16px;

display: flex;
align-items: center;

gap: 10px;
}


.skeleton-top > div {
flex: 1;

display: flex;
flex-direction: column;

gap: 6px;
}


.skeleton-avatar {
width: 40px;
height: 40px;

flex-shrink: 0;

border-radius: 50%;

background:
linear-gradient(
90deg,
#eeeeee 25%,
#f6f6f6 50%,
#eeeeee 75%
);

background-size: 200% 100%;

animation:
communitySkeleton
1.4s infinite;
}


.skeleton-line {
width: 100%;
height: 8px;

display: block;

border-radius: 999px;

background:
linear-gradient(
90deg,
#eeeeee 25%,
#f6f6f6 50%,
#eeeeee 75%
);

background-size: 200% 100%;

animation:
communitySkeleton
1.4s infinite;
}


.skeleton-line + .skeleton-line {
margin-top: 8px;
}


.skeleton-line.short {
width: 130px;
}


.skeleton-line.tiny {
width: 80px;
}


.skeleton-line.title {
width: 68%;
height: 11px;

margin-bottom: 14px;
}


.skeleton-line.medium {
width: 58%;
}


@keyframes communitySkeleton {

0% {
background-position: 200% 0;
}

100% {
background-position: -200% 0;
}

}


/* ============================================================
EMPTY COMMUNITY FEED
============================================================ */

.community-empty-feed {
min-height: 300px;

padding: 35px 20px;

display: none;
flex-direction: column;
align-items: center;
justify-content: center;

border:
1px solid var(--pw-border);

border-radius: 16px;

background: #ffffff;

text-align: center;
}


.community-empty-feed.active {
display: flex;
}


.community-empty-icon {
width: 58px;
height: 58px;

margin-bottom: 14px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: var(--pw-gold-soft);

color: var(--pw-gold-dark);

font-size: 18px;
}


.community-empty-feed h3 {
margin-bottom: 6px;

color: var(--pw-text);

font-size: 12px;
}


.community-empty-feed p {
max-width: 390px;

margin-bottom: 16px;

color: var(--pw-muted);

font-size: 7.5px;

line-height: 1.6;
}


.community-empty-feed button {
min-height: 35px;

padding:
0 12px;

border-radius: 999px;

background: var(--pw-black-soft);

color: #ffffff;

font-size: 6.8px;
font-weight: 600;
}


.community-empty-feed button:hover {
background: var(--pw-gold);

color: #111111;
}


/* ============================================================
LOAD MORE
============================================================ */

.community-load-more-wrapper {
padding:
5px 0 15px;

display: flex;
justify-content: center;
}


.community-load-more-btn {
min-height: 36px;

padding:
0 14px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 6px;

border:
1px solid var(--pw-border);

border-radius: 999px;

background: #ffffff;

color: #555555;

font-size: 6.8px;
font-weight: 600;
}


.community-load-more-btn:hover {
border-color:
var(--pw-gold-border);

background: var(--pw-gold-soft);

color: var(--pw-gold-dark);
}


.community-load-more-btn.loading i {
animation:
communitySpin
0.8s linear infinite;
}


.community-load-more-btn.hidden {
display: none;
}


/* ============================================================
RIGHT SIDEBAR
============================================================ */

.community-right-sidebar {
position: sticky;

top:
calc(
var(--pw-header-height)
+
18px
);

max-height:
calc(
100vh -
var(--pw-header-height)
-
36px
);

overflow-y: auto;

display: flex;
flex-direction: column;

gap: 12px;

scrollbar-width: none;
}


.community-right-sidebar::-webkit-scrollbar {
display: none;
}


/* ============================================================
RIGHT SIDEBAR CARDS
============================================================ */

.community-side-card {
padding: 15px;

border:
1px solid var(--pw-border);

border-radius: 16px;

background: #ffffff;

box-shadow:
var(--pw-shadow-xs);
}


.community-side-card-header {
margin-bottom: 12px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;
}


.community-side-card-header > div {
min-width: 0;
}


.community-side-eyebrow {
display: block;

margin-bottom: 3px;

color: var(--pw-gold-dark);

font-size: 5.5px;
font-weight: 700;

letter-spacing: 0.8px;
}


.community-side-card-header h2 {
color: var(--pw-text);

font-size: 9.5px;
font-weight: 650;
}


.community-side-card-header > i {
color: var(--pw-gold);

font-size: 11px;
}


/* ============================================================
TRENDING TOPICS
============================================================ */

.community-trending-list {
display: flex;
flex-direction: column;

gap: 2px;
}


.community-trending-item {
width: 100%;

padding:
9px 8px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;

border-radius: 9px;

background: transparent;

text-align: left;
}


.community-trending-item:hover {
background: #f7f7f7;
}


.community-trending-item > div {
min-width: 0;
}


.community-trending-item strong {
display: block;

overflow: hidden;

color: #333333;

font-size: 7.3px;
font-weight: 650;

white-space: nowrap;
text-overflow: ellipsis;
}


.community-trending-item span {
display: block;

margin-top: 2px;

color: #929292;

font-size: 5.9px;
}


.community-trending-item small {
flex-shrink: 0;

color: #a0a0a0;

font-size: 5.6px;
}


/* ============================================================
SIDEBAR ACTION LINK
============================================================ */

.community-side-link-btn {
width: 100%;
min-height: 32px;

margin-top: 9px;

display: flex;
align-items: center;
justify-content: center;

border:
1px solid var(--pw-border);

border-radius: 999px;

background: #ffffff;

color: #5e5e5e;

font-size: 6.3px;
font-weight: 600;
}


.community-side-link-btn:hover {
border-color:
var(--pw-gold-border);

background: var(--pw-gold-soft);

color: var(--pw-gold-dark);
}


/* ============================================================
SUGGESTED MEMBERS
============================================================ */

.community-members-list {
display: flex;
flex-direction: column;

gap: 3px;
}


.community-suggested-member {
padding:
8px 5px;

display: flex;
align-items: center;

gap: 8px;

border-radius: 9px;
}


.community-suggested-member:hover {
background: #f8f8f8;
}


.community-suggested-member > img {
width: 35px;
height: 35px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;
}


.community-suggested-member-info {
min-width: 0;

flex: 1;
}


.community-suggested-member-info strong {
display: block;

overflow: hidden;

color: var(--pw-text);

font-size: 7px;

white-space: nowrap;
text-overflow: ellipsis;
}


.community-suggested-member-info span {
display: block;

margin-top: 2px;

overflow: hidden;

color: var(--pw-muted);

font-size: 5.8px;

white-space: nowrap;
text-overflow: ellipsis;
}


.community-follow-btn {
min-height: 27px;

padding:
0 8px;

flex-shrink: 0;

border:
1px solid var(--pw-border);

border-radius: 999px;

background: #ffffff;

color: #444444;

font-size: 5.8px;
font-weight: 650;
}


.community-follow-btn:hover {
border-color: var(--pw-gold);

background: var(--pw-gold);

color: #111111;
}


.community-follow-btn.following {
border-color: #dddddd;

background: #f2f2f2;

color: #777777;
}


/* ============================================================
FEATURED PROJECTS
============================================================ */

.community-featured-projects {
display: flex;
flex-direction: column;

gap: 7px;
}


.community-featured-project {
padding: 10px;

border:
1px solid var(--pw-border);

border-radius: 11px;

background: #fafafa;

cursor: pointer;

transition:
border-color var(--pw-transition),
background var(--pw-transition),
transform var(--pw-transition);
}


.community-featured-project:hover {
transform:
translateY(-1px);

border-color:
var(--pw-gold-border);

background: #ffffff;
}


.community-featured-project-top {
margin-bottom: 5px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 8px;
}


.community-featured-project-type {
color: var(--pw-gold-dark);

font-size: 5.5px;
font-weight: 700;

text-transform: uppercase;
}


.community-featured-project-top i {
color: #999999;

font-size: 7px;
}


.community-featured-project h3 {
margin-bottom: 4px;

overflow: hidden;

color: var(--pw-text);

font-size: 7.4px;

white-space: nowrap;
text-overflow: ellipsis;
}


.community-featured-project p {
color: var(--pw-muted);

font-size: 5.9px;

line-height: 1.5;
}


.community-featured-project-author {
margin-top: 8px;

display: flex;
align-items: center;

gap: 5px;
}


.community-featured-project-author img {
width: 20px;
height: 20px;

object-fit: cover;

border-radius: 50%;
}


.community-featured-project-author span {
overflow: hidden;

color: #777777;

font-size: 5.6px;

white-space: nowrap;
text-overflow: ellipsis;
}


/* ============================================================
COMMUNITY STATISTICS
============================================================ */

.community-stats-card {
overflow: hidden;
}


.community-stats-grid {
display: grid;

grid-template-columns:
repeat(2, 1fr);

gap: 7px;
}


.community-stats-grid > div {
min-height: 66px;

padding: 10px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

border:
1px solid var(--pw-border);

border-radius: 11px;

background: #fafafa;

text-align: center;
}


.community-stats-grid strong {
display: block;

color: #222222;

font-size: 13px;
font-weight: 700;
}


.community-stats-grid span {
margin-top: 2px;

color: var(--pw-muted);

font-size: 5.8px;
}


/* ============================================================
SIDE LOADING
============================================================ */

.community-side-loading {
min-height: 70px;

display: flex;
align-items: center;
justify-content: center;

gap: 6px;

color: #999999;

font-size: 6.2px;
}


.community-side-loading i {
color: var(--pw-gold);

font-size: 8px;
}


/* ============================================================
RIGHT SIDEBAR FOOTER
============================================================ */

.community-right-footer {
padding:
4px 7px 18px;
}


.community-right-footer > div {
display: flex;
flex-wrap: wrap;

gap:
5px 9px;
}


.community-right-footer a {
color: #969696;

font-size: 5.7px;
}


.community-right-footer a:hover {
color: var(--pw-gold-dark);
}


.community-right-footer p {
margin-top: 8px;

color: #aaaaaa;

font-size: 5.7px;
}


/* ============================================================
MOBILE BOTTOM NAVIGATION
============================================================ */

.community-mobile-bottom-nav {
position: fixed;

left: 0;
right: 0;
bottom: 0;

z-index: 4500;

height: 62px;

padding:
5px 10px
calc(
5px +
env(safe-area-inset-bottom)
);

display: none;
align-items: center;
justify-content: space-around;

border-top:
1px solid var(--pw-border);

background:
rgba(255, 255, 255, 0.97);

backdrop-filter:
blur(15px);

-webkit-backdrop-filter:
blur(15px);
}


.mobile-community-nav-item {
min-width: 52px;
height: 47px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

gap: 3px;

border-radius: 10px;

background: transparent;

color: #7c7c7c;

font-size: 5.5px;
}


.mobile-community-nav-item i {
font-size: 12px;
}


.mobile-community-nav-item.active {
color: var(--pw-gold-dark);
}


.mobile-community-create-btn {
width: 44px;
height: 44px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: var(--pw-black-soft);

color: #ffffff;

font-size: 13px;

box-shadow:
0 7px 20px
rgba(0, 0, 0, 0.18);
}


.mobile-community-create-btn:hover {
background: var(--pw-gold);

color: #111111;
}


/* ============================================================
GENERIC MODAL BACKDROP
============================================================ */

.community-modal {
position: fixed;

inset: 0;

z-index: 10000;

padding: 22px;

display: none;
align-items: center;
justify-content: center;

overflow-y: auto;

background:
rgba(8, 8, 8, 0.65);

backdrop-filter:
blur(5px);

-webkit-backdrop-filter:
blur(5px);
}


.community-modal.active {
display: flex;

animation:
communityModalFade
0.18s ease;
}


@keyframes communityModalFade {

from {
opacity: 0;
}

to {
opacity: 1;
}

}


/* ============================================================
POST CREATION MODAL
============================================================ */

.community-post-modal-card {
width: min(
680px,
100%
);

max-height:
calc(100vh - 44px);

overflow-y: auto;

border:
1px solid
rgba(255, 255, 255, 0.08);

border-radius: 19px;

background: #ffffff;

box-shadow:
var(--pw-shadow-lg);

animation:
communityModalCardOpen
0.22s ease;
}


@keyframes communityModalCardOpen {

from {
opacity: 0;

transform:
translateY(10px)
scale(0.985);
}

to {
opacity: 1;

transform:
translateY(0)
scale(1);
}

}


/* ============================================================
MODAL HEADER
============================================================ */

.community-modal-header {
min-height: 67px;

padding:
13px 17px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 15px;

border-bottom:
1px solid var(--pw-border);
}


.community-modal-header > div > span {
display: block;

margin-bottom: 2px;

color: var(--pw-gold-dark);

font-size: 5.5px;
font-weight: 700;

letter-spacing: 0.9px;
}


.community-modal-header h2 {
color: var(--pw-text);

font-size: 11px;
font-weight: 650;
}


.community-modal-close {
width: 33px;
height: 33px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: #f2f2f2;

color: #666666;

font-size: 9px;
}


.community-modal-close:hover {
background: #e9e9e9;

color: #111111;
}


/* ============================================================
COMPOSER AUTHOR
============================================================ */

.community-composer-author {
padding:
14px 17px 5px;

display: flex;
align-items: center;

gap: 9px;
}


.community-composer-author img {
width: 39px;
height: 39px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;
}


.community-composer-author strong {
display: block;

color: var(--pw-text);

font-size: 7.7px;
}


.community-composer-author select {
min-height: 25px;

margin-top: 3px;

padding:
0 22px 0 7px;

border:
1px solid var(--pw-border);

border-radius: 7px;

outline: none;

background: #fafafa;

color: #666666;

font-size: 5.8px;
}


/* ============================================================
POST TYPE GRID
============================================================ */

.community-post-type-grid {
padding:
11px 17px;

display: flex;
flex-wrap: wrap;

gap: 6px;
}


.community-post-type-grid label {
cursor: pointer;
}


.community-post-type-grid input {
position: absolute;

opacity: 0;

pointer-events: none;
}


.community-post-type-grid label > span {
min-height: 31px;

padding:
0 9px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 5px;

border:
1px solid var(--pw-border);

border-radius: 999px;

background: #ffffff;

color: #666666;

font-size: 6.3px;
font-weight: 600;

transition:
border-color var(--pw-transition),
background var(--pw-transition),
color var(--pw-transition);
}


.community-post-type-grid label > span:hover {
border-color:
var(--pw-gold-border);

background:
var(--pw-gold-soft);
}


.community-post-type-grid input:checked + span {
border-color:
var(--pw-gold);

background:
var(--pw-gold-soft);

color:
#72570c;
}


/* ============================================================
COMPOSER FIELD
============================================================ */

.community-composer-field {
padding:
8px 17px;
}


.community-composer-field > label {
display: block;

margin-bottom: 6px;

color: #4f4f4f;

font-size: 6.5px;
font-weight: 650;
}


.community-composer-field > small {
display: block;

margin-top: 5px;

color: #929292;

font-size: 5.7px;
}


.community-composer-field input,
.community-composer-field textarea {
width: 100%;

border:
1px solid var(--pw-border);

border-radius: 10px;

outline: none;

background: #fafafa;

color: var(--pw-text);

font-size: 7.2px;
}


.community-composer-field input {
height: 40px;

padding:
0 11px;
}


.community-composer-field textarea {
min-height: 110px;

padding: 11px;

line-height: 1.6;
}


.community-composer-field input:focus,
.community-composer-field textarea:focus {
border-color:
var(--pw-gold);

background: #ffffff;

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.07);
}


/* ============================================================
TITLE COUNTER
============================================================ */

.community-input-counter-wrapper {
position: relative;
}


.community-input-counter-wrapper input {
padding-right: 58px;
}


.community-input-counter-wrapper > span {
position: absolute;

top: 50%;
right: 11px;

transform:
translateY(-50%);

color: #9b9b9b;

font-size: 5.7px;
}


.community-input-counter-wrapper > span strong {
font-weight: 500;
}
/* ============================================================
RICH TEXT TOOLBAR
============================================================ */

.community-editor-toolbar {
margin:
4px 17px 0;

padding:
7px;

display: flex;
align-items: center;
flex-wrap: wrap;

gap: 4px;

border:
1px solid var(--pw-border);

border-bottom: 0;

border-radius:
11px 11px 0 0;

background: #f7f7f7;
}


.community-editor-toolbar button {
width: 30px;
height: 30px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 7px;

background: transparent;

color: #6d6d6d;

font-size: 8px;
}


.community-editor-toolbar button:hover {
background: #ffffff;

color: #222222;

box-shadow:
var(--pw-shadow-xs);
}


.community-editor-toolbar button.active {
background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);
}


.community-editor-separator {
width: 1px;
height: 19px;

margin:
0 2px;

background:
#dddddd;
}


/* ============================================================
RICH TEXT EDITOR
============================================================ */

.community-rich-editor {
min-height: 150px;
max-height: 320px;

padding: 12px;

overflow-y: auto;

border:
1px solid var(--pw-border);

border-radius:
0 0 11px 11px;

outline: none;

background: #ffffff;

color: var(--pw-text);

font-size: 7.5px;

line-height: 1.7;
}


.community-rich-editor:focus {
border-color:
var(--pw-gold);

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.06);
}


.community-rich-editor:empty::before {
content:
attr(data-placeholder);

color: #9b9b9b;

pointer-events: none;
}


.community-rich-editor p {
margin-bottom: 7px;
}


.community-rich-editor ul,
.community-rich-editor ol {
padding-left: 18px;

margin:
7px 0;
}


.community-rich-editor blockquote {
margin:
8px 0;

padding:
7px 10px;

border-left:
3px solid var(--pw-gold);

background: #fafafa;

color: #555555;
}


.community-rich-editor a {
color:
var(--pw-gold-dark);

text-decoration: underline;
}


/* ============================================================
EDITOR COUNTER
============================================================ */

.community-editor-counter {
margin-top: 5px;

display: flex;
justify-content: flex-end;
}


.community-editor-counter span {
color: #9b9b9b;

font-size: 5.7px;
}


/* ============================================================
COMPOSER MEDIA ACTIONS
============================================================ */

.community-composer-media-actions {
padding:
6px 17px 4px;

display: flex;
align-items: center;
flex-wrap: wrap;

gap: 7px;
}


.community-composer-media-actions button {
min-height: 32px;

padding:
0 9px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 5px;

border:
1px solid var(--pw-border);

border-radius: 999px;

background: #ffffff;

color: #5f5f5f;

font-size: 6.3px;
font-weight: 600;
}


.community-composer-media-actions button:hover {
border-color:
var(--pw-gold-border);

background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);
}


/* ============================================================
IMAGE PREVIEW
============================================================ */

.community-image-preview {
position: relative;

margin:
8px 17px;

display: none;

overflow: hidden;

border:
1px solid var(--pw-border);

border-radius: 12px;

background: #f5f5f5;
}


.community-image-preview.active {
display: block;
}


.community-image-preview img {
width: 100%;

max-height: 380px;

object-fit: cover;
}


.community-image-preview button {
position: absolute;

top: 8px;
right: 8px;

width: 31px;
height: 31px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
rgba(17, 17, 17, 0.82);

color: #ffffff;

font-size: 8px;
}


.community-image-preview button:hover {
background:
var(--pw-red);
}


/* ============================================================
CODE COMPOSER
============================================================ */

.community-code-composer {
margin:
8px 17px;

display: none;

overflow: hidden;

border:
1px solid #292929;

border-radius: 12px;

background: #111111;
}


.community-code-composer.active {
display: block;
}


.community-code-composer-header {
min-height: 43px;

padding:
0 8px 0 10px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;

border-bottom:
1px solid #292929;

background: #181818;
}


.community-code-tabs {
min-width: 0;

display: flex;
align-items: center;

gap: 3px;

overflow-x: auto;

scrollbar-width: none;
}


.community-code-tabs::-webkit-scrollbar {
display: none;
}


.community-code-tab {
min-height: 29px;

padding:
0 9px;

flex-shrink: 0;

border-radius: 7px;

background: transparent;

color: #949494;

font-size: 6.3px;
font-weight: 600;
}


.community-code-tab:hover {
background: #242424;

color: #ffffff;
}


.community-code-tab.active {
background:
rgba(212, 175, 55, 0.12);

color:
var(--pw-gold);
}


#communityCloseCodeBtn {
width: 29px;
height: 29px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: #252525;

color: #aaaaaa;

font-size: 7px;
}


#communityCloseCodeBtn:hover {
background: #303030;

color: #ffffff;
}


/* ============================================================
CODE TEXTAREA
============================================================ */

.community-code-editor {
width: 100%;
min-height: 190px;
max-height: 360px;

padding: 14px;

display: none;

resize: vertical;

border: 0;

outline: 0;

background: #111111;

color: #eeeeee;

font-family:
"Courier New",
Courier,
monospace;

font-size: 7.4px;

line-height: 1.65;

tab-size: 4;
}


.community-code-editor.active {
display: block;
}


.community-code-editor::placeholder {
color: #626262;
}


/* ============================================================
FORM MESSAGE
============================================================ */

.community-form-message {
margin:
5px 17px;

display: none;

padding:
9px 11px;

border-radius: 9px;

font-size: 6.4px;

line-height: 1.5;
}


.community-form-message.success {
display: block;

border:
1px solid
rgba(25, 135, 84, 0.17);

background:
rgba(25, 135, 84, 0.08);

color:
#146c43;
}


.community-form-message.error {
display: block;

border:
1px solid
rgba(201, 61, 61, 0.17);

background:
rgba(201, 61, 61, 0.07);

color:
#a63131;
}


.community-form-message.info {
display: block;

border:
1px solid
rgba(37, 99, 235, 0.15);

background:
rgba(37, 99, 235, 0.07);

color:
#1d4ed8;
}


/* ============================================================
POST MODAL FOOTER
============================================================ */

.community-post-modal-footer {
padding:
13px 17px 16px;

display: flex;
align-items: center;
justify-content: flex-end;

gap: 7px;

border-top:
1px solid var(--pw-border);
}


.community-modal-secondary-btn,
.community-modal-primary-btn,
.community-danger-btn {
min-height: 36px;

padding:
0 11px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 6px;

border-radius: 999px;

font-size: 6.6px;
font-weight: 600;
}


.community-modal-secondary-btn {
border:
1px solid var(--pw-border);

background: #ffffff;

color: #555555;
}


.community-modal-secondary-btn:hover {
background: #f4f4f4;

color: #222222;
}


.community-modal-primary-btn {
background:
var(--pw-black-soft);

color: #ffffff;
}


.community-modal-primary-btn:hover {
background:
var(--pw-gold);

color: #111111;
}


.community-danger-btn {
background:
var(--pw-red);

color: #ffffff;
}


.community-danger-btn:hover {
background: #b52f2f;
}


/* ============================================================
DETAILS MODAL
============================================================ */

.community-details-modal-card {
width:
min(
1050px,
100%
);

max-height:
calc(
100vh -
44px
);

overflow: hidden;

border-radius: 19px;

background: #ffffff;

box-shadow:
var(--pw-shadow-lg);
}


.community-details-layout {
min-height: 500px;
max-height:
calc(
100vh -
115px
);

display: grid;

grid-template-columns:
minmax(0, 1.25fr)
minmax(320px, 0.75fr);
}


/* ============================================================
DETAILS POST
============================================================ */

.community-details-post {
min-width: 0;

padding: 18px;

overflow-y: auto;

border-right:
1px solid var(--pw-border);
}


.community-details-post
.community-post-card {
padding: 0;

border: 0;

box-shadow: none;
}


/* ============================================================
COMMENTS COLUMN
============================================================ */

.community-comments-column {
min-width: 0;

display: flex;
flex-direction: column;

background: #fafafa;
}


.community-comments-heading {
min-height: 51px;

padding:
0 15px;

display: flex;
align-items: center;

border-bottom:
1px solid var(--pw-border);

background: #ffffff;
}


.community-comments-heading > div {
display: flex;
align-items: center;

gap: 6px;
}


.community-comments-heading strong {
color: var(--pw-text);

font-size: 8px;
}


.community-comments-heading span {
min-width: 22px;
height: 22px;

padding:
0 6px;

display: inline-flex;
align-items: center;
justify-content: center;

border-radius: 999px;

background: #f0f0f0;

color: #666666;

font-size: 5.8px;
}


/* ============================================================
COMMENTS LIST
============================================================ */

.community-comments-list {
flex: 1;

min-height: 0;

padding: 13px;

overflow-y: auto;

display: flex;
flex-direction: column;

gap: 9px;
}


.community-comment-item {
display: flex;
align-items: flex-start;

gap: 8px;
}


.community-comment-item > img {
width: 32px;
height: 32px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;
}


.community-comment-body {
min-width: 0;

flex: 1;

padding:
9px 10px;

border:
1px solid var(--pw-border);

border-radius:
0 11px 11px 11px;

background: #ffffff;
}


.community-comment-author-row {
display: flex;
align-items: center;
justify-content: space-between;

gap: 8px;
}


.community-comment-author-row strong {
overflow: hidden;

color: var(--pw-text);

font-size: 6.8px;

white-space: nowrap;
text-overflow: ellipsis;
}


.community-comment-author-row small {
flex-shrink: 0;

color: #a0a0a0;

font-size: 5.2px;
}


.community-comment-body p {
margin-top: 4px;

color: #555555;

font-size: 6.5px;

line-height: 1.55;

word-break: break-word;
}


.community-comment-actions {
margin-top: 6px;

display: flex;
align-items: center;

gap: 9px;
}


.community-comment-actions button {
background: transparent;

color: #8a8a8a;

font-size: 5.4px;
font-weight: 600;
}


.community-comment-actions button:hover {
color:
var(--pw-gold-dark);
}


/* ============================================================
COMMENT EMPTY
============================================================ */

.community-comments-empty {
min-height: 180px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

gap: 7px;

color: #969696;

text-align: center;
}


.community-comments-empty i {
color: #cccccc;

font-size: 18px;
}


.community-comments-empty p {
max-width: 230px;

font-size: 6.3px;

line-height: 1.5;
}


/* ============================================================
ADD COMMENT FORM
============================================================ */

.community-comment-form {
padding: 11px 12px;

display: flex;
align-items: flex-start;

gap: 8px;

border-top:
1px solid var(--pw-border);

background: #ffffff;
}


.community-comment-form > img {
width: 31px;
height: 31px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;
}


.community-comment-form > div {
min-width: 0;

flex: 1;
}


.community-comment-form textarea {
width: 100%;
min-height: 64px;
max-height: 150px;

padding:
9px 10px;

resize: vertical;

border:
1px solid var(--pw-border);

border-radius: 10px;

outline: none;

background: #fafafa;

color: var(--pw-text);

font-size: 6.6px;

line-height: 1.5;
}


.community-comment-form textarea:focus {
border-color:
var(--pw-gold);

background: #ffffff;
}


.community-comment-footer {
margin-top: 6px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;
}


.community-comment-footer > span {
color: #999999;

font-size: 5.3px;
}


.community-comment-footer button {
min-height: 30px;

padding:
0 9px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 5px;

border-radius: 999px;

background:
var(--pw-black-soft);

color: #ffffff;

font-size: 5.9px;
font-weight: 600;
}


.community-comment-footer button:hover {
background:
var(--pw-gold);

color: #111111;
}


/* ============================================================
SMALL MODAL
============================================================ */

.community-small-modal-card {
width:
min(
455px,
100%
);

max-height:
calc(
100vh -
44px
);

overflow-y: auto;

border-radius: 18px;

background: #ffffff;

box-shadow:
var(--pw-shadow-lg);
}


/* ============================================================
LIKES LIST
============================================================ */

.community-likes-list {
max-height: 470px;

padding: 11px;

overflow-y: auto;
}


.community-like-user {
min-height: 55px;

padding:
7px;

display: flex;
align-items: center;

gap: 9px;

border-radius: 10px;
}


.community-like-user:hover {
background: #f7f7f7;
}


.community-like-user img {
width: 37px;
height: 37px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;
}


.community-like-user-info {
min-width: 0;

flex: 1;
}


.community-like-user-info strong {
display: block;

overflow: hidden;

color: var(--pw-text);

font-size: 7px;

white-space: nowrap;
text-overflow: ellipsis;
}


.community-like-user-info span {
display: block;

margin-top: 2px;

color: var(--pw-muted);

font-size: 5.7px;
}


.community-like-user a {
min-height: 27px;

padding:
0 8px;

flex-shrink: 0;

display: inline-flex;
align-items: center;

border:
1px solid var(--pw-border);

border-radius: 999px;

color: #555555;

font-size: 5.7px;
font-weight: 600;
}


.community-like-user a:hover {
border-color:
var(--pw-gold-border);

background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);
}


/* ============================================================
SHARE CONTENT
============================================================ */

.community-share-content {
padding: 16px;
}


.community-share-content > p {
margin-bottom: 12px;

color: var(--pw-muted);

font-size: 6.7px;

line-height: 1.55;
}


.community-share-options {
display: flex;
flex-direction: column;

gap: 7px;
}


.community-share-option {
min-height: 63px;

padding: 9px 10px;

display: flex;
align-items: center;

gap: 10px;

border:
1px solid var(--pw-border);

border-radius: 11px;

background: #ffffff;

text-align: left;
}


.community-share-option:hover {
border-color:
var(--pw-gold-border);

background: #fafafa;
}


.community-share-icon {
width: 37px;
height: 37px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 10px;

background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);

font-size: 10px;
}


.community-share-option > span:last-child {
min-width: 0;
}


.community-share-option strong {
display: block;

color: var(--pw-text);

font-size: 7px;
}


.community-share-option small {
display: block;

margin-top: 2px;

color: var(--pw-muted);

font-size: 5.6px;
}


/* ============================================================
SHARE LINK BOX
============================================================ */

.community-share-link-box {
position: relative;

margin-top: 13px;
}


.community-share-link-box input {
width: 100%;
height: 39px;

padding:
0 43px 0 10px;

border:
1px solid var(--pw-border);

border-radius: 9px;

outline: none;

background: #f8f8f8;

color: #666666;

font-size: 6.2px;
}


.community-share-link-box button {
position: absolute;

top: 50%;
right: 5px;

width: 30px;
height: 30px;

transform:
translateY(-50%);

display: flex;
align-items: center;
justify-content: center;

border-radius: 7px;

background:
var(--pw-black-soft);

color: #ffffff;

font-size: 7px;
}


.community-share-link-box button:hover {
background:
var(--pw-gold);

color: #111111;
}


/* ============================================================
REPORT FORM
============================================================ */

.community-report-form {
padding:
15px;
}


.community-report-form > p {
margin-bottom: 12px;

color: var(--pw-muted);

font-size: 6.6px;

line-height: 1.55;
}


.community-report-reasons {
display: flex;
flex-direction: column;

gap: 6px;
}


.community-report-reasons label {
cursor: pointer;
}


.community-report-reasons input {
position: absolute;

opacity: 0;

pointer-events: none;
}


.community-report-reasons label > span {
min-height: 59px;

padding:
9px 10px;

display: flex;
align-items: center;

gap: 10px;

border:
1px solid var(--pw-border);

border-radius: 11px;

background: #ffffff;
}


.community-report-reasons label > span:hover {
border-color:
rgba(201, 61, 61, 0.2);

background:
rgba(201, 61, 61, 0.025);
}


.community-report-reasons input:checked + span {
border-color:
rgba(201, 61, 61, 0.38);

background:
rgba(201, 61, 61, 0.06);
}


.community-report-reasons label > span > i {
width: 34px;
height: 34px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 9px;

background:
rgba(201, 61, 61, 0.07);

color:
var(--pw-red);

font-size: 8px;
}


.community-report-reasons
label > span > span {
min-width: 0;
}


.community-report-reasons strong {
display: block;

color: var(--pw-text);

font-size: 6.8px;
}


.community-report-reasons small {
display: block;

margin-top: 2px;

color: var(--pw-muted);

font-size: 5.6px;

line-height: 1.4;
}


.community-report-footer {
margin-top: 14px;

display: flex;
justify-content: flex-end;

gap: 7px;
}

/* ============================================================
FILTER DRAWER OVERLAY
============================================================ */

.community-filter-drawer-overlay {
position: fixed;

inset: 0;

z-index: 8000;

display: none;

background:
rgba(0, 0, 0, 0.46);

backdrop-filter:
blur(3px);

-webkit-backdrop-filter:
blur(3px);
}


.community-filter-drawer-overlay.active {
display: block;
}


/* ============================================================
FILTER DRAWER
============================================================ */

.community-filter-drawer {
position: fixed;

top: 0;
right: 0;
bottom: 0;

z-index: 8100;

width: min(
390px,
92vw
);

display: flex;
flex-direction: column;

transform:
translateX(105%);

border-left:
1px solid var(--pw-border);

background: #ffffff;

box-shadow:
-20px 0 55px
rgba(0, 0, 0, 0.13);

transition:
transform 0.3s ease;
}


.community-filter-drawer.active {
transform:
translateX(0);
}


/* ============================================================
FILTER DRAWER HEADER
============================================================ */

.community-filter-drawer-header {
min-height: 73px;

padding:
14px 16px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 12px;

border-bottom:
1px solid var(--pw-border);
}


.community-filter-drawer-header > div > span {
display: block;

margin-bottom: 2px;

color: var(--pw-gold-dark);

font-size: 5.6px;
font-weight: 700;

letter-spacing: 0.8px;
}


.community-filter-drawer-header h2 {
color: var(--pw-text);

font-size: 11px;
font-weight: 650;
}


.community-filter-drawer-header button {
width: 33px;
height: 33px;

display: flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

border-radius: 50%;

background: #f2f2f2;

color: #666666;

font-size: 8px;
}


.community-filter-drawer-header button:hover {
background: #e9e9e9;

color: #111111;
}


/* ============================================================
FILTER CONTENT
============================================================ */

.community-filter-content {
flex: 1;

min-height: 0;

padding: 16px;

overflow-y: auto;
}


.community-filter-group {
margin-bottom: 21px;
}


.community-filter-group:last-child {
margin-bottom: 0;
}


.community-filter-group > strong,
.community-filter-group > label strong {
display: block;

margin-bottom: 9px;

color: #3f3f3f;

font-size: 6.8px;
font-weight: 650;
}


/* ============================================================
FILTER CHECKBOX OPTIONS
============================================================ */

.community-filter-options {
display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 7px;
}


.community-filter-options label {
cursor: pointer;
}


.community-filter-options input {
position: absolute;

opacity: 0;

pointer-events: none;
}


.community-filter-options label > span {
min-height: 37px;

padding:
0 10px;

display: flex;
align-items: center;

border:
1px solid var(--pw-border);

border-radius: 9px;

background: #fafafa;

color: #666666;

font-size: 6.3px;
font-weight: 550;

transition:
border-color var(--pw-transition),
background var(--pw-transition),
color var(--pw-transition);
}


.community-filter-options label > span:hover {
border-color:
var(--pw-gold-border);

background:
var(--pw-gold-soft);
}


.community-filter-options input:checked + span {
border-color:
var(--pw-gold);

background:
var(--pw-gold-soft);

color:
#73590f;

font-weight: 650;
}


/* ============================================================
FILTER SELECTS
============================================================ */

.community-filter-group select {
width: 100%;
height: 40px;

padding:
0 34px 0 10px;

border:
1px solid var(--pw-border);

border-radius: 9px;

outline: none;

background: #fafafa;

color: #555555;

font-size: 6.5px;
}


.community-filter-group select:focus {
border-color:
var(--pw-gold);

background: #ffffff;

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.06);
}


/* ============================================================
FILTER FOOTER
============================================================ */

.community-filter-footer {
padding:
12px 15px;

display: grid;

grid-template-columns:
1fr 1fr;

gap: 7px;

border-top:
1px solid var(--pw-border);

background: #ffffff;
}


.community-filter-footer button {
width: 100%;
}


/* ============================================================
MOBILE SEARCH MODAL
============================================================ */

.community-mobile-search-card {
width: min(
700px,
100%
);

min-height: 340px;
max-height:
calc(100vh - 30px);

overflow: hidden;

border-radius: 17px;

background: #ffffff;

box-shadow:
var(--pw-shadow-lg);
}


.community-mobile-search-header {
min-height: 61px;

padding:
9px 11px;

display: flex;
align-items: center;

gap: 8px;

border-bottom:
1px solid var(--pw-border);
}


.community-mobile-search-header > button {
width: 35px;
height: 35px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: #f2f2f2;

color: #555555;

font-size: 8px;
}


.community-mobile-search-header > div {
position: relative;

flex: 1;
}


.community-mobile-search-header > div > i {
position: absolute;

left: 12px;
top: 50%;

transform:
translateY(-50%);

color: #999999;

font-size: 8px;
}


.community-mobile-search-header input {
width: 100%;
height: 39px;

padding:
0 12px 0 34px;

border:
1px solid var(--pw-border);

border-radius: 999px;

outline: none;

background: #f7f7f7;

color: var(--pw-text);

font-size: 7px;
}


.community-mobile-search-header input:focus {
border-color:
var(--pw-gold);

background: #ffffff;
}


/* ============================================================
MOBILE SEARCH RESULTS
============================================================ */

.community-mobile-search-results {
max-height:
calc(100vh - 100px);

padding: 11px;

overflow-y: auto;
}


.community-search-empty {
min-height: 230px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

gap: 8px;

color: #999999;

text-align: center;
}


.community-search-empty i {
color: #d0d0d0;

font-size: 23px;
}


.community-search-empty p {
max-width: 270px;

font-size: 6.5px;

line-height: 1.5;
}


/* ============================================================
SEARCH RESULT ITEM
============================================================ */

.community-search-result {
width: 100%;

min-height: 59px;

padding:
8px;

display: flex;
align-items: center;

gap: 9px;

border-radius: 10px;

background: transparent;

color: inherit;

text-align: left;
}


.community-search-result:hover {
background: #f6f6f6;
}


.community-search-result-icon {
width: 37px;
height: 37px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 10px;

background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);

font-size: 9px;
}


.community-search-result-content {
min-width: 0;

flex: 1;
}


.community-search-result-content strong {
display: block;

overflow: hidden;

color: var(--pw-text);

font-size: 7px;

white-space: nowrap;
text-overflow: ellipsis;
}


.community-search-result-content span {
display: block;

margin-top: 2px;

overflow: hidden;

color: var(--pw-muted);

font-size: 5.7px;

white-space: nowrap;
text-overflow: ellipsis;
}


.community-search-result > i {
color: #bbbbbb;

font-size: 7px;
}


/* ============================================================
POST OPTIONS MENU
============================================================ */

.community-post-options-menu {
position: fixed;

z-index: 12000;

width: 205px;

padding: 6px;

display: none;

border:
1px solid var(--pw-border);

border-radius: 12px;

background: #ffffff;

box-shadow:
var(--pw-shadow-md);
}


.community-post-options-menu.active {
display: block;

animation:
dropdownOpen
0.16s ease;
}


.community-post-options-menu button {
width: 100%;
min-height: 36px;

padding:
0 9px;

display: flex;
align-items: center;

gap: 8px;

border-radius: 8px;

background: transparent;

color: #555555;

font-size: 6.5px;

text-align: left;
}


.community-post-options-menu button i {
width: 15px;

color: #8c8c8c;

font-size: 7px;

text-align: center;
}


.community-post-options-menu button:hover {
background: #f5f5f5;

color: #111111;
}


.community-post-options-menu button.danger {
color: var(--pw-red);
}


.community-post-options-menu button.danger i {
color: var(--pw-red);
}


.community-post-options-menu button.danger:hover {
background:
rgba(201, 61, 61, 0.07);
}


/* ============================================================
CONFIRMATION MODAL
============================================================ */

.community-confirm-modal-card {
position: relative;

width:
min(
410px,
100%
);

padding:
25px 20px 19px;

border-radius: 18px;

background: #ffffff;

box-shadow:
var(--pw-shadow-lg);

text-align: center;
}


.community-confirm-modal-card >
.community-modal-close {
position: absolute;

top: 10px;
right: 10px;
}


.community-confirm-icon {
width: 57px;
height: 57px;

margin:
7px auto 13px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);

font-size: 16px;
}


.community-confirm-icon.danger {
background:
rgba(201, 61, 61, 0.08);

color:
var(--pw-red);
}


.community-confirm-modal-card h2 {
margin-bottom: 7px;

color: var(--pw-text);

font-size: 12px;
font-weight: 650;
}


.community-confirm-modal-card p {
max-width: 325px;

margin:
0 auto;

color: var(--pw-muted);

font-size: 6.7px;

line-height: 1.6;
}


.community-confirm-actions {
margin-top: 18px;

display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 7px;
}


.community-confirm-actions button {
width: 100%;
}


/* ============================================================
TOAST CONTAINER
============================================================ */

.community-toast-container {
position: fixed;

top:
calc(
var(--pw-header-height)
+
14px
);

right: 17px;

z-index: 20000;

width:
min(
340px,
calc(
100vw -
30px
)
);

display: flex;
flex-direction: column;

gap: 8px;

pointer-events: none;
}


/* ============================================================
TOAST
============================================================ */

.community-toast {
width: 100%;

min-height: 58px;

padding:
10px 12px;

display: flex;
align-items: flex-start;

gap: 9px;

border:
1px solid var(--pw-border);

border-radius: 12px;

background: #ffffff;

box-shadow:
var(--pw-shadow-md);

pointer-events: auto;

animation:
communityToastIn
0.25s ease;
}


@keyframes communityToastIn {

from {
opacity: 0;

transform:
translateX(20px);
}

to {
opacity: 1;

transform:
translateX(0);
}

}


.community-toast.removing {
animation:
communityToastOut
0.22s ease forwards;
}


@keyframes communityToastOut {

to {
opacity: 0;

transform:
translateX(20px);
}

}


.community-toast-icon {
width: 31px;
height: 31px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 9px;

background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);

font-size: 8px;
}


.community-toast.success
.community-toast-icon {
background:
rgba(25, 135, 84, 0.08);

color:
var(--pw-green);
}


.community-toast.error
.community-toast-icon {
background:
rgba(201, 61, 61, 0.08);

color:
var(--pw-red);
}


.community-toast.info
.community-toast-icon {
background:
rgba(37, 99, 235, 0.08);

color:
var(--pw-blue);
}


.community-toast-content {
min-width: 0;

flex: 1;
}


.community-toast-content strong {
display: block;

margin-bottom: 2px;

color: var(--pw-text);

font-size: 6.8px;
}


.community-toast-content p {
color: var(--pw-muted);

font-size: 5.9px;

line-height: 1.45;
}


.community-toast-close {
width: 23px;
height: 23px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: transparent;

color: #aaaaaa;

font-size: 6px;
}


.community-toast-close:hover {
background: #f2f2f2;

color: #555555;
}


/* ============================================================
USER PROFILE LINK STATES
============================================================ */

.community-member-link {
cursor: pointer;
}


.community-member-link:hover {
color:
var(--pw-gold-dark);
}


/* ============================================================
FOLLOWING INDICATOR
============================================================ */

.community-following-badge {
min-height: 21px;

padding:
0 7px;

display: inline-flex;
align-items: center;

border-radius: 999px;

background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);

font-size: 5.5px;
font-weight: 650;
}


/* ============================================================
POST PINNED / FEATURED
============================================================ */

.community-post-featured {
border-color:
rgba(212, 175, 55, 0.32);

box-shadow:
0 7px 24px
rgba(212, 175, 55, 0.06);
}


.community-post-featured-label {
margin-bottom: 9px;

display: inline-flex;
align-items: center;

gap: 5px;

color:
var(--pw-gold-dark);

font-size: 5.7px;
font-weight: 700;

letter-spacing: 0.4px;

text-transform: uppercase;
}


/* ============================================================
ADMIN / MODERATOR BADGE
============================================================ */

.community-role-badge {
min-height: 19px;

padding:
0 6px;

display: inline-flex;
align-items: center;

gap: 4px;

border-radius: 999px;

background:
var(--pw-black-soft);

color: #ffffff;

font-size: 5px;
font-weight: 650;
}


.community-role-badge.super-admin {
background:
var(--pw-gold);

color:
#111111;
}


/* ============================================================
POST EDITED LABEL
============================================================ */

.community-post-edited {
color: #a0a0a0;

font-size: 5.5px;
}


/* ============================================================
DISABLED BUTTONS
============================================================ */

.community-modal button:disabled,
.community-post-action:disabled,
.community-create-btn:disabled,
.community-primary-btn:disabled,
.community-danger-btn:disabled {
opacity: 0.55;

cursor: not-allowed;

transform: none;
}


/* ============================================================
INLINE LOADING BUTTON
============================================================ */

.community-button-loading {
pointer-events: none;
}


.community-button-loading i {
animation:
communitySpin
0.8s linear infinite;
}


/* ============================================================
ERROR STATE
============================================================ */

.community-error-state {
min-height: 210px;

padding: 25px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

border:
1px solid
rgba(201, 61, 61, 0.14);

border-radius: 14px;

background:
rgba(201, 61, 61, 0.025);

text-align: center;
}


.community-error-state i {
margin-bottom: 10px;

color:
var(--pw-red);

font-size: 20px;
}


.community-error-state h3 {
margin-bottom: 5px;

color: var(--pw-text);

font-size: 10px;
}


.community-error-state p {
max-width: 350px;

color: var(--pw-muted);

font-size: 6.5px;

line-height: 1.5;
}


.community-error-state button {
min-height: 32px;

margin-top: 11px;

padding:
0 10px;

border-radius: 999px;

background:
var(--pw-black-soft);

color: #ffffff;

font-size: 6px;
font-weight: 600;
}

/* ============================================================
RESPONSIVE - LARGE DESKTOP
============================================================ */

@media (max-width: 1320px) {

.community-layout {
grid-template-columns:
225px
minmax(0, 1fr)
260px;

gap: 15px;
}

.community-navbar {
grid-template-columns:
minmax(175px, 1fr)
minmax(280px, 540px)
minmax(235px, 1fr);

gap: 16px;
}

.community-welcome-card {
align-items: flex-start;

flex-direction: column;
}

.community-welcome-actions {
width: 100%;
}

}


/* ============================================================
RESPONSIVE - MEDIUM DESKTOP / TABLET LANDSCAPE
============================================================ */

@media (max-width: 1120px) {

.community-layout {
grid-template-columns:
215px
minmax(0, 1fr);
}

.community-right-sidebar {
display: none;
}

.community-navbar {
grid-template-columns:
minmax(170px, auto)
minmax(260px, 1fr)
auto;
}

}


/* ============================================================
TABLET
============================================================ */

@media (max-width: 900px) {

body {
padding-bottom: 0;
}

.community-header {
height: 62px;
}

:root {
--pw-header-height: 62px;
}

.community-navbar {
padding:
0 14px;

grid-template-columns:
auto
minmax(0, 1fr)
auto;

gap: 10px;
}

.community-mobile-menu-btn {
display: flex;
}

.community-nav-left {
gap: 8px;
}

.community-logo {
font-size: 14px;
}

.community-global-search {
max-width: none;
}

.community-create-btn span {
display: none;
}

.community-create-btn {
width: 38px;
height: 38px;
min-height: 38px;

padding: 0;

border-radius: 50%;
}

.community-user-btn {
width: 40px;
height: 40px;

padding: 4px;

justify-content: center;
}

.community-user-btn img {
width: 30px;
height: 30px;
}

.community-user-btn span,
.community-user-btn > i {
display: none;
}

.community-layout {
display: block;

padding:
14px 14px 40px;
}

.community-main {
width: 100%;
}

.community-sidebar {
position: fixed;

top: var(--pw-header-height);
left: 0;
bottom: 0;

z-index: 4950;

width:
min(
275px,
84vw
);

max-height: none;

border-radius: 0 17px 17px 0;

transform:
translateX(-105%);

transition:
transform 0.3s ease;

box-shadow:
18px 0 45px
rgba(0, 0, 0, 0.15);
}

.community-sidebar.active {
transform:
translateX(0);
}

.community-sidebar-overlay.active {
display: block;
}

}


/* ============================================================
TABLET / MOBILE CONTENT
============================================================ */

@media (max-width: 760px) {

.community-global-search {
display: none;
}

.community-navbar {
grid-template-columns:
1fr auto;
}

.community-nav-left {
min-width: 0;
}

.community-nav-right {
gap: 5px;
}

.community-layout {
padding:
11px 11px 85px;
}

.community-mobile-bottom-nav {
display: flex;
}

.community-welcome-card {
min-height: auto;

padding:
18px;

border-radius: 16px;
}

.community-welcome-content h1 {
font-size: 17px;
}

.community-welcome-content p {
font-size: 7.4px;
}

.community-welcome-actions {
display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}

.community-primary-btn,
.community-secondary-btn {
width: 100%;
}

.community-quick-composer {
padding:
10px;
}

.community-quick-composer > img {
width: 36px;
height: 36px;
}

.quick-composer-icon {
width: 34px;
height: 34px;
}

.community-feed-toolbar {
align-items: stretch;

flex-direction: column;

padding: 7px;
}

.community-feed-tabs {
width: 100%;
}

.community-feed-filter-btn {
width: 100%;
}

.community-post-card {
padding: 14px;

border-radius: 14px;
}

.community-post-title {
font-size: 11.5px;
}

.community-post-body {
font-size: 7.5px;
}

.community-post-actions {
grid-template-columns:
repeat(
4,
minmax(0, 1fr)
);
}

.community-post-action {
min-height: 38px;

flex-direction: column;

gap: 2px;

font-size: 5.7px;
}

.community-post-action i {
font-size: 10px;
}

}


/* ============================================================
MODALS - TABLET
============================================================ */

@media (max-width: 760px) {

.community-modal {
padding: 10px;

align-items: flex-end;
}

.community-post-modal-card,
.community-details-modal-card,
.community-small-modal-card,
.community-mobile-search-card {
width: 100%;

max-height:
calc(
100vh -
18px
);

border-radius:
18px 18px 10px 10px;
}

.community-details-layout {
display: block;

min-height: 0;
max-height:
calc(
100vh -
90px
);

overflow-y: auto;
}

.community-details-post {
border-right: 0;

border-bottom:
1px solid var(--pw-border);
}

.community-comments-column {
min-height: 420px;
}

.community-comments-list {
max-height: 390px;
}

.community-post-modal-footer {
position: sticky;

bottom: 0;

z-index: 10;

background: #ffffff;
}

}


/* ============================================================
MOBILE
============================================================ */

@media (max-width: 600px) {

.community-header {
height: 58px;
}

:root {
--pw-header-height: 58px;
}

.community-navbar {
padding:
0 9px;
}

.community-mobile-menu-btn,
.community-header-icon-btn,
.community-user-btn,
.community-create-btn {
width: 36px;
height: 36px;
min-height: 36px;
}

.community-logo {
font-size: 13px;
}

.community-layout {
padding:
9px 9px 82px;
}

.community-main {
gap: 9px;
}

.community-welcome-card {
padding:
15px;

gap: 14px;
}

.community-eyebrow {
font-size: 5.6px;
}

.community-welcome-content h1 {
font-size: 15px;
}

.community-welcome-content p {
font-size: 7px;
}

.community-welcome-actions {
grid-template-columns:
1fr;
}

.community-quick-composer {
min-height: 62px;

gap: 7px;
}

.community-quick-composer >
button:not(.quick-composer-icon) {
min-height: 36px;

font-size: 7px;
}

.quick-composer-icon {
width: 32px;
height: 32px;

font-size: 8px;
}

.community-feed-toolbar {
border-radius: 12px;
}

.community-feed-tab {
min-height: 32px;

padding:
0 9px;

font-size: 6.4px;
}

.community-post-card {
padding: 12px;
}

.community-post-author > img {
width: 36px;
height: 36px;
}

.community-post-author-info strong {
font-size: 7.8px;
}

.community-post-type-row {
margin-top: 9px;
}

.community-post-title {
margin-top: 9px;

font-size: 10.5px;
}

.community-post-body {
margin-top: 7px;

font-size: 7.2px;

line-height: 1.65;
}

.community-post-image {
margin-top: 10px;
}

.community-post-image img {
max-height: 430px;
}

.community-post-summary {
margin-top: 10px;
}

.community-post-actions {
gap: 2px;
}

.community-post-action {
padding:
4px 2px;
}

}


/* ============================================================
MOBILE COMPOSER
============================================================ */

@media (max-width: 600px) {

.community-modal-header {
min-height: 58px;

padding:
10px 12px;
}

.community-modal-header h2 {
font-size: 10px;
}

.community-composer-author {
padding:
11px 12px 4px;
}

.community-post-type-grid {
padding:
9px 12px;
}

.community-post-type-grid label > span {
min-height: 30px;

padding:
0 8px;

font-size: 5.9px;
}

.community-composer-field {
padding:
7px 12px;
}

.community-editor-toolbar {
margin:
4px 12px 0;

padding: 5px;

gap: 2px;
}

.community-editor-toolbar button {
width: 28px;
height: 28px;
}

.community-rich-editor {
min-height: 135px;
}

.community-composer-media-actions {
padding:
5px 12px;
}

.community-image-preview,
.community-code-composer {
margin:
7px 12px;
}

.community-code-editor {
min-height: 165px;

font-size: 7px;
}

.community-post-modal-footer {
padding:
10px 12px;

display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}

.community-post-modal-footer
#communitySaveDraftBtn {
grid-column:
1 / -1;
}

.community-post-modal-footer button {
width: 100%;
}

}


/* ============================================================
MOBILE COMMENTS
============================================================ */

@media (max-width: 600px) {

.community-details-post {
padding: 13px;
}

.community-comments-heading {
min-height: 47px;

padding:
0 12px;
}

.community-comments-list {
padding: 10px;
}

.community-comment-item > img {
width: 29px;
height: 29px;
}

.community-comment-body {
padding:
8px 9px;
}

.community-comment-form {
position: sticky;

bottom: 0;

padding:
9px;

background: #ffffff;
}

.community-comment-form textarea {
min-height: 56px;
}

}


/* ============================================================
MOBILE FILTER DRAWER
============================================================ */

@media (max-width: 600px) {

.community-filter-drawer {
width: 100%;

border-left: 0;
}

.community-filter-options {
grid-template-columns:
1fr;
}

}


/* ============================================================
SMALL PHONE
============================================================ */

@media (max-width: 430px) {

.community-navbar {
gap: 5px;
}

.community-logo {
max-width: 105px;

overflow: hidden;

font-size: 12px;

white-space: nowrap;
}

.community-header-icon-btn {
display: none;
}

.community-layout {
padding-left: 7px;
padding-right: 7px;
}

.community-welcome-card {
border-radius: 14px;
}

.community-welcome-content h1 {
font-size: 14px;
}

.community-quick-composer > img {
width: 34px;
height: 34px;
}

.community-quick-composer >
button:not(.quick-composer-icon) {
padding:
0 10px;
}

#quickCreateImagePostBtn {
display: none;
}

.community-feed-tabs {
padding-bottom: 2px;
}

.community-post-card {
border-radius: 13px;
}

.community-post-author {
gap: 7px;
}

.community-post-author > img {
width: 34px;
height: 34px;
}

.community-post-title {
font-size: 10px;
}

.community-post-action span {
display: none;
}

.community-post-action {
min-height: 37px;
}

.community-post-action i {
font-size: 11px;
}

.community-shared-project {
align-items: stretch;

flex-direction: column;
}

.community-open-project-btn {
width: 100%;
}

.community-post-modal-footer {
grid-template-columns:
1fr;
}

.community-post-modal-footer
#communitySaveDraftBtn {
grid-column: auto;
}

.community-confirm-actions {
grid-template-columns:
1fr;
}

.community-filter-footer {
grid-template-columns:
1fr;
}

}


/* ============================================================
VERY SMALL PHONE
============================================================ */

@media (max-width: 360px) {

.community-logo {
max-width: 90px;

font-size: 11px;
}

.community-mobile-menu-btn,
.community-user-btn,
.community-create-btn {
width: 34px;
height: 34px;
min-height: 34px;
}

.community-layout {
padding-left: 5px;
padding-right: 5px;
}

.community-welcome-card {
padding: 13px;
}

.community-quick-composer {
padding:
8px;
}

#quickCreateCodePostBtn {
display: none;
}

.community-post-card {
padding: 10px;
}

.community-post-type-badge {
min-height: 22px;

padding:
0 6px;
}

}


/* ============================================================
TOUCH DEVICES
============================================================ */

@media (hover: none) {

.community-post-card:hover,
.community-featured-project:hover,
.community-primary-btn:hover,
.community-create-btn:hover,
.community-shared-project:hover {
transform: none;
}

}


/* ============================================================
REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {
scroll-behavior: auto !important;

animation-duration:
0.01ms !important;

animation-iteration-count:
1 !important;

transition-duration:
0.01ms !important;
}

}


/* ============================================================
PRINT
============================================================ */

@media print {

.community-header,
.community-sidebar,
.community-right-sidebar,
.community-mobile-bottom-nav,
.community-feed-toolbar,
.community-quick-composer,
.community-welcome-actions,
.community-post-actions,
.community-load-more-wrapper,
.community-toast-container,
.community-filter-drawer,
.community-filter-drawer-overlay,
.community-modal {
display: none !important;
}

.community-layout {
display: block;

max-width: none;

padding: 0;
}

.community-main {
width: 100%;
}

.community-post-card {
box-shadow: none;

break-inside: avoid;
}

body {
background: #ffffff;
}

}

/* ============================================================
FIX - POST DISCUSSION / COMMENTS MODAL
============================================================ */

.community-details-modal-card {
width: min(1050px, calc(100vw - 40px));

height: min(760px, calc(100vh - 40px));
max-height: calc(100vh - 40px);

display: flex;
flex-direction: column;

overflow: hidden;

border-radius: 19px;

background: #ffffff;

box-shadow: var(--pw-shadow-lg);
}


/* Header must never grow */

.community-details-modal-card >
.community-modal-header {
flex: 0 0 auto;
}


/* ============================================================
MAIN DISCUSSION AREA
============================================================ */

.community-details-layout {
flex: 1;

min-height: 0;
height: auto;
max-height: none;

display: grid;

grid-template-columns:
minmax(0, 1.25fr)
minmax(320px, 0.75fr);

overflow: hidden;
}


/* ============================================================
LEFT SIDE - PUBLICATION
============================================================ */

.community-details-post {
min-width: 0;
min-height: 0;

height: 100%;

padding: 18px;

overflow-y: auto;
overflow-x: hidden;

border-right:
1px solid var(--pw-border);

overscroll-behavior: contain;
}


/* Prevent large images from breaking modal */

.community-details-post
.community-post-image img {
width: 100%;
height: auto;

max-height: none;

object-fit: contain;
}


/* ============================================================
RIGHT SIDE - COMMENTS
============================================================ */

.community-comments-column {
min-width: 0;
min-height: 0;
height: 100%;

display: flex;
flex-direction: column;

overflow: hidden;

background: #fafafa;
}


/* ============================================================
COMMENTS HEADER
============================================================ */

.community-comments-heading {
flex: 0 0 auto;

min-height: 51px;
}


/* ============================================================
COMMENTS LIST
============================================================ */

.community-comments-list {
flex: 1 1 auto;

min-height: 0;

padding: 13px;

overflow-y: auto;
overflow-x: hidden;

overscroll-behavior: contain;
}


/* ============================================================
COMMENT FORM - ALWAYS VISIBLE
============================================================ */

.community-comment-form {
flex: 0 0 auto;

width: 100%;

padding: 11px 12px;

display: flex;
align-items: flex-start;

gap: 8px;

border-top:
1px solid var(--pw-border);

background: #ffffff;
}


.community-comment-form > div {
min-width: 0;

flex: 1;
}


.community-comment-form textarea {
width: 100%;

min-height: 64px;
max-height: 120px;

padding: 9px 10px;

resize: vertical;

border:
1px solid var(--pw-border);

border-radius: 10px;

outline: none;

background: #fafafa;
}


/* ============================================================
TABLET / MOBILE DISCUSSION
============================================================ */

@media (max-width: 760px) {

.community-details-modal-card {
width: 100%;

height: calc(100vh - 16px);
max-height: calc(100vh - 16px);

border-radius:
18px 18px 8px 8px;
}


.community-details-layout {
display: flex;
flex-direction: column;

min-height: 0;

overflow-y: auto;
}


.community-details-post {
height: auto;

flex: 0 0 auto;

max-height: 48vh;

overflow-y: auto;

border-right: 0;

border-bottom:
1px solid var(--pw-border);
}


.community-comments-column {
flex: 1;

min-height: 330px;
height: auto;

overflow: hidden;
}


.community-comments-list {
flex: 1;

min-height: 120px;

overflow-y: auto;
}


.community-comment-form {
position: relative;

bottom: auto;

flex-shrink: 0;
}

}

.community-post-report-notice {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 12px 0 18px;
padding: 14px 16px;
border: 1px solid rgba(180, 135, 0, 0.25);
border-radius: 14px;
background: rgba(180, 135, 0, 0.06);
}

.community-post-report-notice-icon {
width: 36px;
height: 36px;
flex: 0 0 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(180, 135, 0, 0.1);
}

.community-post-report-notice-content strong {
display: block;
margin-bottom: 4px;
}

.community-post-report-notice-content p {
margin: 0;
line-height: 1.5;
}

.community-post-report-notice.reviewing {
border-color: rgba(30, 100, 210, 0.22);
background: rgba(30, 100, 210, 0.05);
}

@media (max-width: 600px) {

.community-post-report-notice {
padding: 12px;
gap: 10px;
}

}


/* ============================================================
COMMUNITY — CODE BLOCKS
============================================================ */

.community-post-card pre,
.community-post-card code,
.post-card pre,
.post-card code {
font-family: "Consolas", "Courier New", monospace;
}


/* LARGE CODE BLOCK */

.community-post-card pre,
.post-card pre {
width: 100%;
box-sizing: border-box;

margin: 14px 0;
padding: 16px 18px;

background: #151515;
color: #e8e8e8;

border: 1px solid #2b2b2b;
border-radius: 12px;

font-size: 13px;
line-height: 1.65;

overflow-x: auto;

white-space: pre;
tab-size: 4;
}


/* CODE INSIDE PRE */

.community-post-card pre code,
.post-card pre code {
padding: 0;
border: 0;

background: transparent;
color: inherit;

white-space: pre;
}


/* INLINE CODE */

.community-post-card :not(pre) > code,
.post-card :not(pre) > code {
padding: 3px 7px;

background: #f1f1f1;
color: #b42318;

border-radius: 6px;

font-size: 0.9em;
}


/* MOBILE */

@media (max-width: 700px) {

.community-post-card pre,
.post-card pre {
padding: 14px;
font-size: 12px;
border-radius: 10px;
}

}
/* ============================================================
COMMUNITY POST IMAGE
============================================================ */

.community-post-media {
width: fit-content !important;
height: auto !important;

max-width: 100% !important;
max-height: none !important;

overflow: visible !important;
aspect-ratio: auto !important;

margin-top: 14px;
}


.community-post-media img,
.community-post-image,
.post-image {
display: block !important;

/* Keep the real image proportions */
width: auto !important;
height: auto !important;

/* Smaller desktop image */
max-width: 320px !important;
max-height: none !important;

object-fit: contain !important;
object-position: center !important;

aspect-ratio: auto !important;

border-radius: 12px;
}


/* ============================================================
MOBILE
============================================================ */

@media (max-width: 700px) {

.community-post-media {
width: fit-content !important;
max-width: 100% !important;
height: auto !important;

overflow: visible !important;
}


.community-post-media img,
.community-post-image,
.post-image {
width: auto !important;
height: auto !important;

max-width: min(280px, 100%) !important;
max-height: none !important;

object-fit: contain !important;
aspect-ratio: auto !important;
}

}


/* ============================================================
SMALL PHONES
============================================================ */

@media (max-width: 430px) {

.community-post-media img,
.community-post-image,
.post-image {
max-width: min(240px, 100%) !important;
}

}


/* ============================================================
COMMUNITY PUBLICATIONS — RESPONSIVE GRID
============================================================ */

#communityPostsList {
display: grid;

grid-template-columns:
repeat(2, minmax(0, 1fr));

gap: 22px;

width: 100%;

align-items: start;
}


/* ============================================================
POST CARDS INSIDE GRID
============================================================ */

#communityPostsList > * {
min-width: 0;
width: 100%;

box-sizing: border-box;
}


/* Keep cards at equal grid width */

#communityPostsList .community-post,
#communityPostsList .community-post-card,
#communityPostsList .post-card {
width: 100%;
max-width: none;

margin: 0;

box-sizing: border-box;
}


/* ============================================================
IMAGES
============================================================ */

#communityPostsList img {
max-width: 100%;
height: auto;
}


/* ============================================================
CODE — PREVENT CODE FROM BREAKING GRID
============================================================ */

#communityPostsList pre,
#communityPostsList code {
max-width: 100%;
}


#communityPostsList pre {
overflow-x: auto;
}


/* ============================================================
TABLET
============================================================ */

@media (max-width: 1000px) {

#communityPostsList {
grid-template-columns:
repeat(2, minmax(0, 1fr));

gap: 16px;
}

}


/* ============================================================
MOBILE
============================================================ */

@media (max-width: 700px) {

#communityPostsList {
grid-template-columns: 1fr;

gap: 15px;
}

}
/* ============================================================
PREMIUM WEB — COMMUNITY FEED GRID
============================================================ */

#communityFeed {
display: grid;

grid-template-columns:
repeat(2, minmax(0, 1fr));

gap: 20px;

width: 100%;

align-items: start;
}


/* ============================================================
EVERY DIRECT POST INSIDE THE FEED
============================================================ */

#communityFeed > * {
width: 100%;
min-width: 0;

margin: 0;

box-sizing: border-box;
}


/* ============================================================
PREVENT IMAGES FROM BREAKING THE GRID
============================================================ */

#communityFeed img {
max-width: 100%;
}


/* ============================================================
PREVENT CODE FROM MAKING CARD TOO WIDE
============================================================ */

#communityFeed pre {
width: 100%;
max-width: 100%;

overflow-x: auto;

box-sizing: border-box;
}


#communityFeed code {
max-width: 100%;
}


/* ============================================================
TABLET
============================================================ */

@media (max-width: 1100px) {

#communityFeed {
grid-template-columns: 1fr;

gap: 18px;
}

}


/* ============================================================
MOBILE
============================================================ */

@media (max-width: 700px) {

#communityFeed {
grid-template-columns: 1fr;

gap: 14px;
}

}