.community-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}
.community-tabs a{padding:9px 12px;border-radius:9px;text-decoration:none;color:#91b2c4;border:1px solid rgba(60,190,240,.13);background:rgba(255,255,255,.02);font-size:11px;font-weight:800}
.community-tabs a.active,.community-tabs a:hover{color:#fff;background:#08364d;border-color:rgba(65,195,250,.34)}
.community-list{display:grid;gap:10px}
.community-card{display:grid;grid-template-columns:1fr auto;gap:14px;padding:15px;border:1px solid rgba(60,185,235,.14);border-radius:13px;background:rgba(255,255,255,.022);text-decoration:none;color:inherit}
.community-card:hover{background:rgba(0,174,255,.055);border-color:rgba(0,174,255,.28)}
.community-card h3{margin:0;color:#edfaff;font-size:14px}
.community-card p{margin:7px 0;color:#9fbccc;font-size:11px;line-height:1.55}
.community-meta{display:flex;gap:9px;flex-wrap:wrap;color:#6e8fa2;font-size:9px}
.community-status{padding:5px 8px;border-radius:99px;background:rgba(0,174,255,.1);color:#68d3ff;font-size:8px;text-transform:uppercase;font-weight:900;white-space:nowrap}
.community-form{display:grid;gap:12px}
.attachment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px;margin-top:10px}
.attachment-tile{display:block;overflow:hidden;border-radius:10px;border:1px solid rgba(60,185,235,.16);background:#041923;color:inherit;text-decoration:none}
.attachment-tile img{width:100%;height:130px;object-fit:cover;display:block}
.attachment-tile div{padding:9px}.attachment-tile b{font-size:10px;word-break:break-word}.attachment-tile small{display:block;color:#7898aa;margin-top:3px;font-size:9px}
.comment-list{display:grid;gap:10px;margin-top:14px}
.comment-card{padding:13px;border:1px solid rgba(60,185,235,.13);border-radius:12px;background:rgba(255,255,255,.022)}
.comment-head{display:flex;gap:10px;align-items:center}.comment-head img,.comment-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#08364d;color:#7dd9ff;font-size:10px;font-weight:900}
.comment-head b{font-size:11px}.comment-head small{display:block;color:#708fa1;font-size:9px;margin-top:2px}.comment-card p{white-space:pre-wrap;color:#c6dfeb;font-size:11px;line-height:1.6}
.vote-button.active{background:#0a5779!important;color:white!important}
.faq-list{display:grid;gap:9px}.faq-item{border:1px solid rgba(60,185,235,.13);border-radius:12px;background:rgba(255,255,255,.022);overflow:hidden}.faq-question{width:100%;display:flex;justify-content:space-between;padding:14px;border:0;background:transparent;color:#eefaff;text-align:left;font-weight:800;cursor:pointer}.faq-answer{padding:0 14px 14px;color:#a9c5d3;font-size:11px;line-height:1.65;white-space:pre-wrap}
@media(max-width:700px){.community-card{grid-template-columns:1fr}.community-card>div:last-child{justify-self:start}}


/*  community page layout */
.community-workspace{
  display:grid;
  grid-template-columns:minmax(320px,430px) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.community-submit-card{
  position:sticky;
  top:96px;
}
.community-feed-card{
  min-width:0;
  min-height:430px;
}
.community-feed-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:14px;
}
.community-feed-head .input,
.community-feed-head .select{
  width:min(260px,100%);
}
.community-form .input,
.community-form .textarea,
.community-form .select{
  width:100%;
}
.community-form .textarea{
  min-height:180px;
}
.community-form input[type="file"]{
  min-height:48px;
  padding:11px;
  color:#a9c7d7;
}
.community-form input[type="file"]::file-selector-button{
  border:1px solid rgba(54,190,245,.28);
  border-radius:8px;
  background:#08364d;
  color:#eefaff;
  padding:8px 11px;
  margin-right:10px;
  cursor:pointer;
}
@media(max-width:900px){
  .community-workspace{grid-template-columns:1fr}
  .community-submit-card{position:static}
  .community-feed-head{flex-direction:column}
}

/*  formal community layout */
.community-tabs{display:none!important}
.community-page-actions{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 26px}
.community-workspace{grid-template-columns:minmax(360px,470px) minmax(0,1fr);gap:24px}
.community-submit-card{top:110px}
.community-card{padding:18px 19px;border-radius:14px}
.community-card h3{font-size:15px}
.community-card p{font-size:11.5px;line-height:1.65}
.community-form{gap:4px}
.community-form .textarea{min-height:190px}
.form-help{display:block;margin-top:6px;color:#7896a8;font-size:10px;line-height:1.5}
.form-file-picker{
  display:flex;align-items:center;gap:12px;padding:14px;
  border:1px dashed rgba(80,190,235,.32);border-radius:11px;
  background:rgba(0,174,255,.035);cursor:pointer
}
.form-file-picker:hover{background:rgba(0,174,255,.065)}
.form-file-picker strong,.form-file-picker small{display:block}
.form-file-picker small{margin-top:3px;color:#7f9dae;font-size:10px}
.selected-files{display:grid;gap:7px;margin-top:9px}
.selected-file{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.025);border:1px solid rgba(83,178,220,.12);font-size:10px}
.upload-state{min-height:18px;color:#80a2b4;font-size:10px;margin-top:7px}
.community-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px}
.community-hub-card{display:flex;flex-direction:column;min-height:250px;padding:24px;border:1px solid var(--formal-border);border-radius:16px;background:var(--formal-panel);text-decoration:none;color:inherit}
.community-hub-card:hover{transform:translateY(-2px);border-color:rgba(64,190,245,.35);background:rgba(5,34,49,.9)}
.community-hub-card .hub-icon{font-size:23px;margin-bottom:22px}
.community-hub-card h2{margin:0;font-size:22px}
.community-hub-card p{color:#98b5c4;line-height:1.65;font-size:11.5px;flex:1}
.community-hub-card span{color:#6ed4ff;font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:900px){.community-hub-grid{grid-template-columns:1fr}.community-workspace{grid-template-columns:1fr}}

.comment-head-name{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.comment-role{
  display:inline-flex;
  align-items:center;
  padding:3px 6px;
  border-radius:99px;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.comment-role.member{background:rgba(130,155,170,.1);color:#a8bfcb}
.comment-role.staff{background:rgba(34,185,255,.1);color:#73d8ff}
.comment-role.developer{background:rgba(145,92,255,.12);color:#c5a5ff}
.comment-role.founder{background:rgba(255,188,72,.12);color:#ffd27b}
.comment-role.owner{background:rgba(255,91,112,.12);color:#ff9bab}

/* Formal community moderation */
.community-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:22px;
  align-items:start;
}
.community-detail-main{
  min-width:0;
}
.community-detail-sidebar{
  position:sticky;
  top:100px;
}
.community-post-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.comment-card{
  position:relative;
  padding:16px;
}
.comment-moderation{
  position:absolute;
  top:12px;
  right:12px;
}
.comment-delete-button{
  min-height:30px!important;
  padding:0 9px!important;
  opacity:.7;
}
.comment-delete-button:hover{
  opacity:1;
}
.community-details-list{
  display:grid;
  gap:0;
  margin-top:12px;
}
.community-detail-row{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(74,178,221,.1);
}
.community-detail-row:last-child{border-bottom:0}
.community-detail-row span{
  color:#728f9f;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.community-detail-row b{
  color:#dbeef6;
  font-size:10px;
  font-weight:700;
  text-align:right;
}
@media(max-width:900px){
  .community-detail-layout{grid-template-columns:1fr}
  .community-detail-sidebar{position:static}
}