/* ---------- Lista de tópicos ---------- */
.threads { list-style: none; padding: 4px; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.thread + .thread { border-top: 1px solid var(--border); }
.thread > a { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px; border-radius: var(--r-md); text-decoration: none; color: inherit; }
.thread > a:hover { background: var(--surface-2); }
.thread > a:hover strong { color: var(--primary); }
.thread.is-pinned > a { background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.thread.is-resolved strong { color: var(--text-2); }
.thread-title { display: grid; gap: 4px; min-width: 0; }
.thread-title strong { font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 6px; }
.thread-pin { width: 15px; height: 15px; color: var(--primary); flex: none; }
.thread-sub { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .8rem; }
.thread-stats { display: flex; gap: 14px; color: var(--text-2); font-size: .85rem; font-variant-numeric: tabular-nums; }
.thread-stats span { display: inline-flex; align-items: center; gap: 4px; }
.thread-stats svg { width: 16px; height: 16px; }
.thread-stats .is-zero { opacity: .5; }
.cat-general { background: var(--primary-soft); color: var(--primary); }
.cat-cycle { background: color-mix(in srgb, var(--slice-1) 14%, transparent); color: var(--slice-1); }
.cat-recommendations { background: color-mix(in srgb, var(--slice-3) 16%, transparent); color: var(--slice-3); }
.cat-off_topic { background: color-mix(in srgb, var(--slice-2) 18%, transparent); color: var(--warning); }
@media (max-width: 640px) {
  .thread > a { grid-template-columns: auto 1fr; padding: 12px 10px; }
  .thread-stats { grid-column: 2; }
}

.spoiler-guard {
  padding: 14px 16px; margin: 4px; border-radius: var(--r-md); display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; align-items: center;
  background: repeating-linear-gradient(-45deg, var(--surface-2), var(--surface-2) 10px, var(--surface-3) 10px, var(--surface-3) 20px);
}
.spoiler-guard.big { padding: 32px; display: grid; gap: 16px; justify-items: start; }
.progress-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.progress-form input[type=number] { width: 84px; }
.progress-form input:not([type]) { width: 200px; }

/* ---------- Tópico ---------- */
.thread-full { display: grid; gap: 14px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.thread-full h1 { font-size: 1.75rem; }
.prose { white-space: pre-wrap; max-width: 70ch; line-height: 1.65; overflow-wrap: anywhere; }
.replies-title { font-size: 1.05rem; margin-top: 8px; }
.posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.posts > li {
  padding: 16px 18px; display: grid; gap: 10px; scroll-margin-top: 90px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); transition: background .4s, box-shadow .4s;
}
.posts > li.accepted { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: color-mix(in srgb, var(--success-soft) 60%, var(--surface)); }
.posts > li.is-highlighted { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); background: var(--primary-soft); }
.accepted-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--success); font-size: .85rem; }
.accepted-label svg { width: 16px; height: 16px; }
.reply-form { padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.thread-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.thread-tags:empty { display: none; }
.author-line { display: flex; align-items: center; gap: 12px; }
.author-text { display: grid; gap: 1px; min-width: 0; }
.author-names { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.author-names strong { font-weight: 600; }
.post-actions { display: flex; flex-wrap: wrap; gap: 2px; margin-left: -8px; }
.action-btn {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 10px; border-radius: var(--r-pill);
  font: 500 .85rem var(--font); color: var(--text-2); cursor: pointer;
}
.action-btn svg { width: 16px; height: 16px; }
.action-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.action-btn:disabled { cursor: default; }
.action-btn.danger:hover { color: var(--danger); background: var(--danger-soft); }
.like-btn.is-on { color: #e11d48; }
.like-btn.is-on:hover:not(:disabled) { color: #e11d48; background: color-mix(in srgb, #e11d48 10%, transparent); }
[data-theme='dark'] .like-btn.is-on { color: #fb7185; }
.like-count { font-variant-numeric: tabular-nums; }
.like-own { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: .85rem; color: var(--text-2); }
.like-own svg { width: 15px; height: 15px; color: #e11d48; }
[data-theme='dark'] .like-own svg { color: #fb7185; }
.quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--primary); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; display: grid; gap: 2px; }
.quote p { margin: 0; color: var(--text-2); font-size: .9rem; white-space: pre-wrap; }
.quote-head { background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; color: var(--text-2); cursor: pointer; text-align: left; justify-self: start; }
.quote-head:hover { color: var(--primary); }
.replying-to { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 12px; background: var(--primary-soft); border-left: 3px solid var(--primary); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .9rem; }
.accepted-preview { background: color-mix(in srgb, var(--success-soft) 60%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border)); border-radius: var(--r-lg); padding: 14px 18px; display: grid; gap: 6px; justify-items: start; }
.accepted-who { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .9rem; }
.accepted-body { margin: 0; color: var(--text); }
@media (max-width: 640px) { .thread-full { padding: 18px; } .thread-full h1 { font-size: 1.4rem; } }