.community-page,
.topic-page{
  min-height:calc(100vh - 94px);
  background:var(--cream);
}

.community-hero{
  padding:78px 0 64px;
  background:
    radial-gradient(circle at 88% 12%,rgba(185,0,0,.14),transparent 25%),
    #181818;
  color:#fff;
}

.community-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:70px;
  align-items:end;
}

.community-kicker{
  display:block;
  margin-bottom:12px;
  color:#efaaa3;
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.13em;
}

.community-hero h1{
  max-width:850px;
  font-size:clamp(3.2rem,6.5vw,6.5rem);
  line-height:.93;
  letter-spacing:-.065em;
}

.community-hero p{
  max-width:690px;
  margin-top:20px;
  color:rgba(255,255,255,.68);
  font-size:clamp(.9rem,1.2vw,1.05rem);
}

.community-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:27px;
}

.community-outline{
  border-color:rgba(255,255,255,.32);
  background:transparent;
  color:#fff;
}

.community-hero-stats{
  display:grid;
  grid-template-columns:repeat(3,140px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.04);
}

.community-hero-stats article{
  padding:25px 20px;
  border-right:1px solid rgba(255,255,255,.1);
}

.community-hero-stats article:last-child{
  border-right:0;
}

.community-hero-stats strong{
  display:block;
  font-size:1.6rem;
}

.community-hero-stats span{
  color:rgba(255,255,255,.48);
  font-size:.58rem;
}

.community-categories{
  padding:52px 0 28px;
}

.section-heading h2{
  font-size:clamp(1.8rem,3vw,2.8rem);
  letter-spacing:-.045em;
}

.category-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:22px;
}

.category-card{
  padding:20px;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
}

.category-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

.category-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#f4e6db;
  color:var(--red);
  font-size:1rem;
}

.category-card h3{
  margin-top:14px;
  font-size:.82rem;
}

.category-card p{
  margin-top:5px;
  color:var(--muted);
  font-size:.62rem;
}

.category-card footer{
  margin-top:14px;
  color:var(--red);
  font-size:.57rem;
  font-weight:850;
}

.community-main{
  padding:28px 0 80px;
}

.community-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:24px;
  align-items:start;
}

.community-toolbar{
  display:grid;
  grid-template-columns:minmax(250px,1fr) 180px 170px auto;
  gap:10px;
  padding:13px;
}

.community-search{
  min-height:44px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}

.community-search input{
  min-width:0;
  border:0;
  outline:0;
}

.community-search button{
  width:27px;
  height:27px;
  border:0;
  border-radius:7px;
  background:#f1efec;
}

.community-toolbar select{
  min-height:44px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}

.active-community-filters{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:10px 0;
}

.community-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:29px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--muted);
  font-size:.57rem;
  font-weight:800;
}

.community-filter-chip button{
  border:0;
  background:transparent;
  color:var(--red);
}

.topics-status{
  margin-top:14px;
  padding:50px;
  text-align:center;
}

.community-loader{
  width:44px;
  height:44px;
  margin:auto;
  border:4px solid #e9dfd7;
  border-top-color:var(--red);
  border-radius:50%;
  animation:community-spin .8s linear infinite;
}

@keyframes community-spin{
  to{transform:rotate(360deg)}
}

.topics-status p{
  margin-top:12px;
  color:var(--muted);
  font-size:.68rem;
}

.topics-list{
  display:grid;
  gap:11px;
  margin-top:14px;
}

.topic-card{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  gap:15px;
  padding:18px;
  transition:transform .18s ease,box-shadow .18s ease;
}

.topic-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(40,25,15,.07);
}

.topic-votes{
  align-self:start;
  display:grid;
  justify-items:center;
  gap:2px;
  padding:8px 4px;
  border-radius:11px;
  background:#f5f1ed;
}

.topic-votes strong{
  font-size:.77rem;
}

.topic-votes span{
  color:var(--muted);
  font-size:.49rem;
}

.topic-card-main{
  min-width:0;
}

.topic-card-topline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
}

.topic-category{
  color:var(--red);
  font-size:.53rem;
  font-weight:900;
  text-transform:uppercase;
}

.topic-solved-small{
  padding:4px 7px;
  border-radius:999px;
  background:#e4f2e8;
  color:#327049;
  font-size:.5rem;
  font-weight:850;
}

.topic-card h2{
  margin-top:7px;
  font-size:.9rem;
  line-height:1.22;
}

.topic-card h2 a:hover{
  color:var(--red);
}

.topic-excerpt{
  margin-top:6px;
  color:var(--muted);
  font-size:.64rem;
  line-height:1.5;
}

.topic-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:11px;
}

.topic-card-tags span,
.topic-tags span{
  padding:4px 7px;
  border-radius:999px;
  background:#f1efec;
  color:#69625d;
  font-size:.5rem;
  font-weight:750;
}

.topic-card-meta{
  margin-top:11px;
  color:var(--muted);
  font-size:.54rem;
}

.topic-card-stats{
  min-width:100px;
  display:grid;
  align-content:center;
  justify-items:end;
  gap:7px;
  color:var(--muted);
  font-size:.56rem;
}

.topic-card-avatar,
.member-avatar,
.post-avatar{
  border-radius:50%;
  object-fit:cover;
  background:#eee;
}

.topic-card-avatar{
  width:34px;
  height:34px;
}

.topics-empty{
  margin-top:14px;
  padding:48px;
  text-align:center;
}

.topics-empty-icon{
  width:52px;
  height:52px;
  margin:auto;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#f1e6dc;
  color:var(--red);
}

.topics-empty h2{
  margin-top:14px;
  font-size:1.1rem;
}

.topics-empty p{
  max-width:430px;
  margin:7px auto 17px;
  color:var(--muted);
  font-size:.67rem;
}

.load-more{
  width:100%;
  min-height:45px;
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-weight:850;
}

.community-sidebar{
  display:grid;
  gap:14px;
}

.sidebar-card{
  padding:20px;
}

.sidebar-label{
  color:var(--red);
  font-size:.54rem;
  font-weight:900;
  letter-spacing:.08em;
}

.sidebar-card h2{
  margin-top:8px;
  font-size:1rem;
}

.sidebar-card ul{
  margin:14px 0 0 17px;
}

.sidebar-card li{
  margin:8px 0;
  color:var(--muted);
  font-size:.62rem;
}

.sidebar-card>a{
  display:block;
  margin-top:15px;
  color:var(--red);
  font-size:.58rem;
  font-weight:850;
}

.popular-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:14px;
}

.popular-tags button{
  min-height:30px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-size:.56rem;
}

.top-members{
  display:grid;
  gap:12px;
  margin-top:14px;
}

.top-member{
  display:grid;
  grid-template-columns:38px 1fr auto;
  gap:9px;
  align-items:center;
}

.member-avatar{
  width:38px;
  height:38px;
}

.top-member strong{
  display:block;
  font-size:.65rem;
}

.top-member span{
  color:var(--muted);
  font-size:.53rem;
}

.member-score{
  color:var(--red)!important;
  font-weight:900;
}

.community-rules{
  padding:65px 0;
  background:#181818;
  color:#fff;
}

.rules-card>div:first-child span{
  color:#e9aaa3;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.09em;
}

.rules-card>div:first-child h2{
  max-width:760px;
  margin-top:7px;
  font-size:clamp(2rem,4vw,3.7rem);
  line-height:1;
  letter-spacing:-.05em;
}

.rules-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  margin-top:38px;
}

.rules-grid article{
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
}

.rules-grid strong{
  color:#e9aaa3;
  font-size:.65rem;
}

.rules-grid h3{
  margin-top:10px;
  font-size:.85rem;
}

.rules-grid p{
  margin-top:6px;
  color:rgba(255,255,255,.56);
  font-size:.62rem;
}

.community-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  place-items:center;
  padding:25px;
}

.community-modal.open{
  display:grid;
}

.community-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.66);
}

.community-modal-panel{
  width:min(720px,100%);
  max-height:90vh;
  position:relative;
  z-index:1;
  overflow:auto;
  border-radius:20px;
  background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.3);
}

.community-modal-panel.small{
  width:min(520px,100%);
}

.community-modal-panel>header{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:23px;
  border-bottom:1px solid var(--line);
}

.community-modal-panel>header span{
  color:var(--red);
  font-size:.54rem;
  font-weight:900;
}

.community-modal-panel>header h2{
  margin-top:4px;
  font-size:1.1rem;
}

.community-modal-panel>header>button{
  width:34px;
  height:34px;
  border:0;
  border-radius:9px;
  background:#f1efec;
  font-size:1.1rem;
}

.community-modal form{
  display:grid;
  gap:14px;
  padding:23px;
}

.community-modal label{
  display:grid;
  gap:6px;
}

.community-modal label>span{
  color:var(--muted);
  font-size:.56rem;
  font-weight:900;
  text-transform:uppercase;
}

.community-modal input,
.community-modal textarea,
.community-modal select{
  width:100%;
  padding:11px;
  border:1px solid var(--line);
  border-radius:10px;
  outline:0;
}

.community-modal textarea{
  resize:vertical;
  line-height:1.5;
}

.community-modal small{
  color:var(--muted);
  font-size:.54rem;
}

.topic-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.topic-form-options label{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:.62rem;
}

.topic-form-options input{
  width:17px;
}

.topic-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

/* Topic detail */
.topic-loading,
.topic-error{
  min-height:70vh;
  display:grid;
  place-items:center;
  align-content:center;
  gap:13px;
  padding:30px;
  text-align:center;
}

.topic-hero{
  padding:55px 0 40px;
  border-bottom:1px solid var(--line);
  background:#f8f2ec;
}

.topic-breadcrumbs{
  display:flex;
  gap:7px;
  color:var(--red);
  font-size:.58rem;
  font-weight:850;
}

.topic-heading-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:30px;
  margin-top:16px;
}

.topic-status-line{
  display:flex;
  align-items:center;
  gap:8px;
}

.topic-category-pill,
.topic-solved{
  padding:5px 8px;
  border-radius:999px;
  background:#fff;
  color:var(--red);
  font-size:.53rem;
  font-weight:900;
  text-transform:uppercase;
}

.topic-solved{
  background:#e4f2e8;
  color:#327049;
}

.topic-heading-grid h1{
  max-width:1000px;
  margin-top:11px;
  font-size:clamp(2rem,4.5vw,4.5rem);
  line-height:1;
  letter-spacing:-.055em;
}

.topic-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:15px;
}

.topic-header-actions{
  display:flex;
  align-items:flex-start;
  gap:7px;
}

.topic-more-button{
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
}

.topic-main{
  padding:38px 0 80px;
}

.topic-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:25px;
  align-items:start;
}

.topic-thread{
  min-width:0;
}

.thread-post{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:15px;
  padding:22px;
}

.post-vote-box{
  display:grid;
  align-content:start;
  justify-items:center;
  gap:5px;
}

.post-vote-box button{
  width:36px;
  height:32px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}

.post-vote-box button.active{
  border-color:var(--red);
  color:var(--red);
}

.post-vote-box strong{
  font-size:.8rem;
}

.post-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
}

.post-author{
  display:flex;
  align-items:center;
  gap:9px;
}

.post-avatar{
  width:38px;
  height:38px;
}

.post-author strong{
  display:block;
  font-size:.67rem;
}

.post-author span{
  color:var(--muted);
  font-size:.54rem;
}

.post-date{
  color:var(--muted);
  font-size:.55rem;
}

.post-body{
  margin-top:17px;
  font-size:.77rem;
  line-height:1.75;
}

.post-body p{
  margin:12px 0;
}

.post-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.post-actions button{
  min-height:32px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-size:.55rem;
  font-weight:800;
}

.accepted-answer{
  border-color:#8fc5a1;
  box-shadow:0 0 0 2px rgba(68,135,91,.08);
}

.accepted-label{
  display:inline-flex;
  margin-bottom:12px;
  padding:5px 8px;
  border-radius:999px;
  background:#e4f2e8;
  color:#327049;
  font-size:.53rem;
  font-weight:900;
}

.answers-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin:32px 0 13px;
}

.answers-heading h2{
  font-size:1.35rem;
}

.answers-heading p{
  color:var(--muted);
  font-size:.6rem;
}

.answers-heading select{
  min-height:38px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}

.answers-list{
  display:grid;
  gap:12px;
}

.answer-composer{
  margin-top:22px;
  padding:22px;
}

.answer-composer h2{
  font-size:1rem;
}

.answer-composer>p{
  margin-top:5px;
  color:var(--muted);
  font-size:.62rem;
}

.answer-composer textarea{
  width:100%;
  margin-top:15px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:11px;
  line-height:1.55;
}

.answer-form-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:10px;
}

.answer-form-actions span{
  color:var(--muted);
  font-size:.57rem;
}

.topic-sidebar{
  display:grid;
  gap:14px;
}

.topic-author-card{
  padding:20px;
  text-align:center;
}

.topic-author-card img{
  width:66px;
  height:66px;
  margin:auto;
  border-radius:50%;
  object-fit:cover;
}

.topic-author-card h2{
  margin-top:10px;
  font-size:.85rem;
}

.topic-author-card p{
  margin-top:5px;
  color:var(--muted);
  font-size:.59rem;
}

.author-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}

.author-stats div{
  padding:10px;
  border-radius:10px;
  background:#f5f1ed;
}

.author-stats strong{
  display:block;
  font-size:.75rem;
}

.author-stats span{
  color:var(--muted);
  font-size:.5rem;
}

.related-topic{
  display:block;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.related-topic:last-child{
  border-bottom:0;
}

.related-topic strong{
  display:block;
  font-size:.65rem;
  line-height:1.3;
}

.related-topic span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.52rem;
}

.topic-menu{
  position:fixed;
  z-index:1100;
  min-width:190px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  box-shadow:var(--shadow);
}

.topic-menu button{
  width:100%;
  min-height:39px;
  padding:0 12px;
  border:0;
  border-bottom:1px solid var(--line);
  background:#fff;
  text-align:left;
  font-size:.6rem;
}

.topic-menu button:last-child{
  border-bottom:0;
}

.topic-menu button.danger{
  color:#9a1919;
}

@media(max-width:1100px){
  .community-hero-grid{
    grid-template-columns:1fr;
  }

  .community-hero-stats{
    width:max-content;
  }

  .community-toolbar{
    grid-template-columns:1fr 1fr;
  }

  .community-search{
    grid-column:1/-1;
  }

  .category-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:900px){
  .community-layout,
  .topic-layout{
    grid-template-columns:1fr;
  }

  .community-sidebar,
  .topic-sidebar{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:680px){
  .community-hero{
    padding:55px 0 45px;
  }

  .community-hero h1{
    font-size:clamp(3rem,15vw,4.7rem);
  }

  .community-hero-stats{
    width:100%;
    grid-template-columns:repeat(3,1fr);
  }

  .community-hero-stats article{
    padding:18px 10px;
  }

  .category-grid,
  .community-toolbar,
  .community-sidebar,
  .topic-sidebar,
  .rules-grid,
  .topic-form-grid{
    grid-template-columns:1fr;
  }

  .community-search{
    grid-column:auto;
  }

  .topic-card{
    grid-template-columns:45px minmax(0,1fr);
  }

  .topic-card-stats{
    grid-column:2;
    justify-items:start;
    display:flex;
  }

  .topic-heading-grid{
    grid-template-columns:1fr;
  }

  .thread-post{
    grid-template-columns:1fr;
  }

  .post-vote-box{
    display:flex;
    justify-content:flex-start;
    align-items:center;
  }

  .answer-form-actions{
    align-items:flex-start;
    flex-direction:column;
  }
}
.topic-avatar-fallback {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #f2dfd7;
    color: #9f1616;
    font-size: .62rem;
    font-weight: 900;
    line-height: 1;
}