* { box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background:#f2efef;
  color:#271f1e;
  font-family:"Spectral", Georgia, serif;
  font-size:12px;
  line-height:1.36;
  font-weight:500;
  letter-spacing:0.3px;
}
a{ color:#2bac79; text-decoration:underline; }
a:hover{ color:#8e41c1; }
h1,h2,h3,.thread-title{
  font-family:"Spectral", Georgia, serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
}

/* utility row */
.utility-row{
  background:#3e1f1b;
  color:#f2efef;
  padding:6px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.utility-left{ display:flex; align-items:center; gap:10px; }
.site-logo{ height:32px; width:auto; display:block; }
.utility-right{ display:flex; align-items:center; gap:10px; font-size:11px; }
.utility-right a{ color:#f2efef; text-decoration:underline; }
.search-box{
  border:1px solid #6e5a58;
  background:#ffffff;
  color:#271f1e;
  font-size:11px;
  padding:3px 6px;
  font-family:inherit;
  width:140px;
}
.search-btn{
  border:1px solid #f2efef;
  background:#3e1f1b;
  color:#f2efef;
  font-size:11px;
  padding:3px 8px;
  cursor:pointer;
  font-family:inherit;
}

/* container */
.container{
  max-width:820px;
  margin:0 auto;
  padding:10px 10px 20px 10px;
}

/* tabs */
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:12px 0 6px 0;
  justify-content:center;
}
.tab-chip{
  border:1px solid #d9cccb;
  background:#ffffff;
  padding:4px 10px;
  font-size:11px;
  color:#271f1e;
  text-decoration:none;
}
.tab-chip.active{
  border:1px solid #8e41c1;
  color:#8e41c1;
  font-weight:700;
}

/* thread title block, centered large */
.thread-title-block{
  text-align:center;
  background:#ffffff;
  border:1px solid #d9cccb;
  padding:18px 12px 12px 12px;
  margin-bottom:10px;
}
.thread-title{
  font-size:22px;
  margin:0 0 10px 0;
  color:#271f1e;
  line-height:1.25;
}
.thread-meta{
  font-size:11px;
  color:#6e5a58;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px 14px;
  border-top:1px solid #d9cccb;
  padding-top:8px;
}
.thread-meta span b{ color:#271f1e; }

/* posts */
.posts{ background:#ffffff; border:1px solid #d9cccb; }
.post-row{
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #d9cccb;
}
.post-row:nth-child(even){ background:#f2f0f0; }
.post-row:last-child{ border-bottom:none; }
.avatar-col{ flex:0 0 40px; text-align:center; }
.avatar{
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid #d9cccb;
  object-fit:cover;
  display:block;
}
.avatar-initial{
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid #d9cccb;
  background:#8e41c1;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:14px;
}
.username{
  font-weight:700;
  font-size:12px;
  color:#271f1e;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.status-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:#2bac79;
  display:inline-block;
}
.ts-note{
  font-size:10px;
  color:#8e41c1;
  font-weight:500;
  text-transform:none;
  margin-top:1px;
}
.post-body{ flex:1; min-width:0; }
.post-headrow{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:4px 10px;
  margin-bottom:4px;
}
.post-date{ font-size:10px; color:#6e5a58; white-space:nowrap; }
.post-text{ font-size:12.5px; color:#271f1e; margin:4px 0 6px 0; }
.post-actions{
  font-size:10px;
  color:#6e5a58;
  display:flex;
  gap:12px;
}
.post-actions a{ color:#6e5a58; text-decoration:underline; }
.like-count{ display:inline-flex; align-items:center; gap:4px; }
.like-count i{ color:#8e41c1; font-size:10px; }

.time-sep{
  text-align:center;
  font-size:10px;
  color:#6e5a58;
  padding:6px 0;
  border-bottom:1px solid #d9cccb;
  background:#f2f0f0;
}

/* quick reply */
.quick-reply{
  margin-top:12px;
  border:1px solid #d9cccb;
  background:#ffffff;
  padding:10px 12px;
}
.quick-reply h3{
  font-size:13px;
  margin:0 0 8px 0;
}
.quick-reply textarea{
  width:100%;
  min-height:60px;
  border:1px solid #d9cccb;
  font-family:inherit;
  font-size:12px;
  padding:6px;
  resize:vertical;
}
.quick-reply .qr-btn{
  margin-top:6px;
  background:#3e1f1b;
  color:#f2efef;
  border:1px solid #3e1f1b;
  padding:5px 14px;
  font-size:11px;
  cursor:pointer;
  font-family:inherit;
  text-transform:uppercase;
}
.qr-note{ font-size:10px; color:#6e5a58; margin-top:6px; }

/* footer */
footer{
  background:#3e1f1b;
  color:#f2efef;
  margin-top:22px;
  padding:16px 10px 10px 10px;
}
.footer-inner{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:space-between;
}
.footer-block{ flex:1 1 200px; min-width:160px; }
.footer-block h4{
  font-size:12px;
  margin:0 0 8px 0;
  color:#f2efef;
  border-bottom:1px solid #6e5a58;
  padding-bottom:4px;
}
.footer-block ul{ list-style:none; margin:0; padding:0; }
.footer-block li{ margin-bottom:5px; font-size:11px; }
.footer-block a{ color:#f2efef; text-decoration:underline; }
.footer-bottom{
  text-align:center;
  font-size:10px;
  color:#d9cccb;
  margin-top:14px;
  padding-top:8px;
  border-top:1px solid #6e5a58;
}

@media (max-width:600px){
  .thread-title{ font-size:18px; }
  .avatar-col{ flex:0 0 34px; }
  .avatar,.avatar-initial{ width:34px; height:34px; }
  .search-box{ width:100px; }
  .post-headrow{ flex-direction:column; }
}