:root {
  --light:#F6F3F6;
  --soft:#DCD1DB;
  --accent:#A68CA5;
  --mid:#7F627D;
  --dark:#5C475B;

  --bg:linear-gradient(180deg,#F6F3F6 0%, #EDE6EE 100%);
  --card:var(--soft);
  --text:#5C475B;
  --muted:#6f5a6d;
  --chip:#F6F3F6;
  --border:rgba(92,71,91,.22);

  --r-xl:18px; --r-lg:14px; --r-md:12px;
  --sh-xs:0 1px 2px rgba(0,0,0,.05);
  --sh-sm:0 8px 22px rgba(92,71,91,.12);
  --sh-md:0 12px 28px rgba(92,71,91,.18);

  --navH:64px;
  --centerGap:18px;
  --sideGap:22px;

  --composerH:160px;

  --pill-bg:#CDBDCC;
  --pill-bg-hover:#A68CA5;
  --pill-text:var(--dark);
}

@supports (background: color-mix(in srgb, white 60%, black 40%)){
  :root {
    --pill-bg: color-mix(in srgb, var(--accent) 35%, white 65%);
    --pill-bg-hover: color-mix(in srgb, var(--accent) 85%, white 15%);
  }
}

/* === Community Page Base === */
body.community-body {
  background:var(--bg);
  color:var(--text);
}
.community-top { display:none !important; }

.community-wrap {
  max-width:1200px;
  margin:16px auto 64px;
  padding:0 16px;
  display:grid;
  grid-template-columns: 280px minmax(560px,1fr) 320px;
  gap:20px;
}
@media (max-width:1100px){
  .community-wrap { grid-template-columns: 1fr 2fr; }
  .community-right { display:none; }
}
@media (max-width:760px){
  .community-wrap { grid-template-columns: 1fr; }
  .community-left { display:none; }
}

.community-left,
.community-right {
  display:grid;
  gap:var(--sideGap);
  align-content:start;
}
.community-wrap > section {
  display:flex;
  flex-direction:column;
  gap:var(--centerGap);
  overflow:visible;
}
.community-left .community-card,
.community-right .community-card { margin:0; }

/* Sticky sidebars */
@media (min-width:1101px){
  .community-left,
  .community-right {
    position:sticky;
    top:calc(var(--navH) + 8px);
    height:calc(100vh - var(--navH) - 24px);
    overflow-y:scroll;
    scrollbar-gutter:stable both-edges;
  }
  .community-left::-webkit-scrollbar,
  .community-right::-webkit-scrollbar { width:8px; }
  .community-left::-webkit-scrollbar-thumb,
  .community-right::-webkit-scrollbar-thumb { background:#cbbcc8; border-radius:8px; }
}

/* === Cards === */
.community-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);
  color:var(--text);
  transition: box-shadow .2s ease, transform .2s ease;
}
.community-wrap > section .community-card:hover {
  box-shadow:var(--sh-md); transform:translateY(-2px);
}
.community-block { padding:18px 20px; }
.community-card h4 { margin:2px 0 10px; font-weight:800; color:var(--dark); }
.community-card .band { display:none !important; }

/* === Pills === */
.community-pill {
  display:inline-block;
  padding:.5rem 1rem;
  margin:.25rem .35rem .25rem 0;
  background:var(--chip);
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--dark);
  font-weight:700;
  box-shadow:var(--sh-xs);
  transition: all .15s ease;
}
.community-pill:hover {
  background:#A68CA5; border-color:#A68CA5; color:#fff; transform:translateY(-1px);
}

/* === Composer === */
.community-composer {
  height:auto;
  padding:20px 22px;
  border-radius:var(--r-xl);
  box-shadow:0 8px 20px rgba(92,71,91,.12);
  display:flex; flex-direction:column; gap:10px;
}
.community-composer .row { display:flex; gap:12px; }
.community-composer textarea {
  min-height:150px;
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  resize:vertical;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}
.community-btn {
  background:linear-gradient(180deg,var(--dark) 0%, var(--mid) 100%);
  color:#fff; border:0; border-radius:999px; padding:.7rem 1.1rem;
  font-weight:800; box-shadow:0 8px 20px rgba(92,71,91,.20);
  transition:.12s;
}
.community-btn:hover { transform:translateY(-1px); box-shadow:0 12px 28px rgba(92,71,91,.26); }

/* === Posts === */
.community-post {
  padding:12px 14px;
  overflow:visible;
}
.community-post header { display:flex; gap:12px; align-items:center; margin-bottom:6px; }
.community-post .name { font-weight:800; }
.community-meta { font-size:.92rem; color:var(--muted); }
.community-tag {
  display:inline-block; padding:.16rem .56rem; margin-left:.35rem;
  font-size:.78rem; font-weight:800; border-radius:999px;
  background:var(--chip); border:1px solid var(--border);
}
.community-post .body { margin:.5rem 0 .25rem; }

/* Attachments */
.post-attachments {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px; margin-top:.6rem;
}
.post-attachments .att {
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:#fff; box-shadow:var(--sh-xs);
}
.post-attachments img,
.post-attachments video { width:100%; height:180px; object-fit:cover; }

/* --- Comments: clean input + pill Send button --- */
.community-comments{
  margin-top:.6rem;
  border-top:1px dashed var(--border);
  padding-top:.6rem;
}

.community-cmt{
  display:flex;
  gap:.6rem;
  margin:.55rem 0;
}

.community-bubble{
  background:#F6F3F6;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.55rem .7rem;
  box-shadow:var(--sh-xs);
}

/* Comment form as a pill container */
.community-addcmt{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:.6rem;

  background:#fff;                 /* high contrast against the card */
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 8px;
  box-shadow:var(--sh-xs);
}

/* Input takes remaining space, no own border */
.community-addcmt input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:none;
  background:transparent;
  padding:.48rem .6rem;
  color:var(--text);
  font-size:.95rem;
}
.community-addcmt input::placeholder{ color:var(--muted); }

/* Make the Send button match your pill buttons (Edit/DELETE look) */
.community-addcmt .community-btn{
  flex:0 0 auto;
  padding:.5rem .9rem;
  line-height:1;
  border-radius:999px;
  background:linear-gradient(180deg,var(--dark) 0%, var(--mid) 100%);
  color:#fff;
  border:0;
  box-shadow:0 8px 20px rgba(92,71,91,.20);
  transition:.12s;
}
.community-addcmt .community-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(92,71,91,.26);
}

/* Optional: make the comment count chip look like your pills */
.community-bar .count{
  background:var(--chip);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.1rem .45rem;
  font-weight:800;
}


/* === Upload Page === */
body.upload-page { background:var(--bg); color:var(--text); }
.upload-shell { display:flex; justify-content:center; padding:46px 16px 90px; }
.upload-card {
  width:min(920px, 92vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-sm), 0 12px 28px rgba(92,71,91,.12);
  padding:22px;
}
.upload-title { margin:.25rem 0 1rem; font-size:1.25rem; font-weight:800; color:var(--dark); }
.upload-form {
  display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;
}
.fg { display:flex; flex-direction:column; gap:6px; }
.fg.full { grid-column:1/-1; }
.lbl { font-weight:700; color:var(--dark); font-size:.95rem; }

.inp, .ta, .upload-card input, .upload-card textarea, .upload-card select {
  width:100%; padding:.65rem .78rem;
  border:1px solid var(--border);
  border-radius:12px; background:#FBF8FC;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.04);
}
.ta { min-height:140px; resize:vertical; }

.form-actions {
  grid-column:1/-1; display:flex; gap:10px; justify-content:flex-end;
  border-top:1px dashed var(--border); padding-top:12px;
}
.btn { padding:.5rem 1rem; border-radius:999px; font-weight:800; }

/* Responsive */
@media (max-width:760px){
  .upload-card { padding:18px 14px; }
  .upload-form { grid-template-columns:1fr; }
  .form-actions { justify-content:stretch; }
  .form-actions .btn { flex:1 1 auto; }
}

/* --- Bar row: toggle on left, actions on right --- */
.community-bar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:.5rem;
}

/* Edit/Delete on the right with spacing */
.community-bar .post-actions{
  margin-left:auto;
  display:flex;
  gap:10px;
}

/* Make the Comments toggle look like a pill */
.pill-btn.outline.comment-toggle{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .9rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--dark);
  box-shadow:0 4px 10px rgba(92,71,91,.10);
  font-weight:800;
}
.pill-btn.outline.comment-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(92,71,91,.16);
}
.comment-toggle .chev{ transition:transform .2s ease; }
.comment-toggle[aria-expanded="true"] .chev{ transform:rotate(90deg); }
.comment-toggle .count{
  display:inline-block;
  min-width:1.4em;
  text-align:center;
  font-variant-numeric:tabular-nums;
  background:var(--chip);
  border:1px solid var(--border);
  border-radius:999px;
  padding:0 .35rem;
}

/* Comment list: animated open/close without clipping */
.community-comments{
  overflow:hidden;                 /* keep the slide animation clean */
  max-height:0;
  padding-top:0;
  border-top:0;
  transition:max-height .28s ease, padding .2s ease, border-color .2s ease;
  will-change:max-height;
}
.community-comments.is-open{
  border-top:1px dashed var(--border);
  padding-top:.6rem;
}

/* Add-comment row: pill container + full visibility */
.community-addcmt{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:.6rem;

  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 8px;
  box-shadow:var(--sh-xs);
}
.community-addcmt input{
  flex:1 1 auto;
  min-width:0;          /* prevents cutting on narrow widths */
  border:0;
  outline:none;
  background:transparent;
  padding:.55rem .6rem;
  color:var(--text);
  font-size:.95rem;
}
.community-addcmt input::placeholder{ color:var(--muted); }

/* Send button = same pill style as Edit */
.community-addcmt .pill-btn{
  flex:0 0 auto;
  padding:.5rem 1rem;
  line-height:1;
}

/* Tiny moderation pills inside comments (unchanged look, just spacing) */
.pill-btn.tiny{ padding:.25rem .55rem; font-size:.78rem; }

/* --- comment area fixes --- */
.community-bar { align-items: center; } /* keeps pills aligned */

.community-comments{
  overflow: hidden;
  max-height: 0;
  padding-top: 0;
  border-top: 0;
  transition:max-height .28s ease, padding .2s ease, border-color .2s ease;
  will-change: max-height;
  margin-top: .25rem;
}

/* when open: show the dashed divider and give some bottom room */
.community-comments.is-open{
  border-top: 1px dashed var(--border);
  padding-top: .6rem;
  padding-bottom: .25rem;            /* <- breathing room at bottom */
}

/* the input row: keep it fully visible and above the dashed line */
.community-addcmt{
  position: relative;                /* so z-index applies */
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px;
  box-shadow: var(--sh-xs);
}
.community-addcmt input{
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: .55rem .6rem;
  color: #5C475B;
  font-size: .95rem;
}