/* Tabs */
.forum-tabs { display:flex; gap:.5rem; margin:1rem 0 1.25rem }
.forum-tabs a { padding:.45rem .75rem; border:1px solid #e5e7eb; border-radius:999px; font-weight:600; text-decoration:none; color:#111827 }
.forum-tabs a.is-active { background:#0ea5e9; color:#fff; border-color:#0ea5e9 }

/* List */
.topic-list { list-style:none; margin:0; padding:0 }
.topic-row { display:grid; grid-template-columns: 1fr 320px; gap:1rem; padding:12px 10px; border-top:1px solid #eee }
.topic-row:hover { background:#fafafa }
.col-topic { display:flex; gap:.75rem; min-width:0 }
.topic-meta-left { display:flex; align-items:start }
.node-pill { background:#eef2ff; color:#3730a3; padding:.25rem .5rem; border-radius:6px; font-size:.75rem; font-weight:700; white-space:nowrap }
.topic-main { min-width:0 }
.topic-title { font-weight:700; color:#111827; text-decoration:none }
.topic-title:hover { text-decoration:underline }
.topic-prefix { display:inline-block; background:#fee2e2; color:#991b1b; padding:.1rem .4rem; border-radius:4px; margin-right:.4rem; font-size:.75rem; font-weight:700 }
.topic-prefix.lg { font-size:.85rem }
.topic-sub { color:#6b7280; font-size:.85rem; display:flex; align-items:center; gap:.5rem; margin-top:.25rem }
.dot::before { content:"•" }

.col-stats { display:grid; grid-template-columns: 80px 80px 1fr; align-items:center; gap:12px; justify-items:center }
.stat { text-align:center; line-height:1 }
.stat b { display:block; font-weight:800 }
.stat em { font-size:.75rem; color:#6b7280; font-style:normal }
.last-activity { justify-self:stretch; display:flex; gap:.5rem; align-items:center; color:#374151; font-size:.85rem }
.last-activity time { color:#6b7280 }

/* User chip */
.user-chip { display:inline-flex; gap:.4rem; align-items:center; vertical-align:middle }
.user-avatar { position:relative; width:32px; height:32px; border-radius:50%; overflow:hidden; flex:0 0 32px }
.user-avatar img { width:32px; height:32px; display:block; object-fit:cover }
.user-avatar .avatar-frame { position:absolute; inset:0; pointer-events:none }
.user-nick { font-weight:600; color:#111827; max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Single */
.topic-single .topic-head { margin:10px 0 12px }
.topic-single .topic-title { font-size:1.5rem; margin:.25rem 0 .35rem }
.topic-single .topic-byline { color:#6b7280; display:flex; gap:.5rem; align-items:center }

/* Responsive */
@media (max-width: 920px){
  .topic-row { grid-template-columns: 1fr; }
  .col-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ---------- Base layout ---------- */
.forum-archive { --fg:#111827; --muted:#6b7280; --line:#e5e7eb; --pill:#f3f4f6; --brand:#0ea5e9; }
.forum-title { font-size:2.1rem; font-weight:800; margin:8px 0 12px; color:var(--fg); }

/* Actions & tabs */
.forum-actions .btn-primary{
  background:var(--brand); color:#fff; border:0; padding:.55rem .9rem; border-radius:10px;
  font-weight:700; text-decoration:none; display:inline-block;
}
.forum-tabs{ display:flex; gap:10px; margin:10px 0 18px; }
.forum-tabs a{
  display:inline-block; padding:.45rem .8rem; border-radius:9999px; background:var(--pill);
  color:var(--fg); text-decoration:none; font-weight:600; border:1px solid var(--line);
}
.forum-tabs a.is-active{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* Topic list */
.topic-list{ list-style:none; margin:0; padding:0; }
.topic-row{
  display:grid; grid-template-columns: 1fr auto; gap:18px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  box-shadow:0 2px 10px rgba(0,0,0,.04); margin-bottom:12px;
}
.col-topic{ display:flex; gap:12px; align-items:flex-start; min-width:0; }
.topic-meta-left .node-pill{
  display:inline-block; padding:.2rem .5rem; background:rgba(14,165,233,.08);
  color:#0284c7; font-weight:700; border-radius:8px; font-size:.78rem;
}
.topic-title{ font-weight:800; color:var(--fg); text-decoration:none; font-size:1rem; }
.topic-title:hover{ text-decoration:underline; }
.topic-prefix{
  display:inline-block; margin-right:.45rem; padding:.15rem .45rem; font-size:.72rem;
  border-radius:6px; background:#fde68a; color:#7c2d12; font-weight:700; position:relative; top:-1px;
}
.topic-sub{ color:var(--muted); display:flex; align-items:center; gap:10px; margin-top:4px; }

/* Stats & latest time-only */
.col-stats{ display:flex; align-items:center; gap:16px; color:var(--muted); }
.col-stats .stat{ display:flex; flex-direction:column; align-items:center; min-width:58px; }
.col-stats .stat b{ font-size:16px; color:var(--fg); }
.col-stats .stat em{ font-style:normal; font-size:.78rem; color:var(--muted); }
.last-activity{ display:flex; align-items:center; gap:6px; min-width:max-content; }
.last-activity em{ font-style:normal; color:var(--muted); }

/* Pagination */
.forum-pagination ul{ display:flex; gap:8px; list-style:none; padding:0; }
.forum-pagination li a, .forum-pagination li span{
  display:inline-block; padding:.45rem .7rem; border:1px solid var(--line); border-radius:8px; text-decoration:none;
}
.forum-pagination .current{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* ---------- User chip (avatar + frame 1.5x) ---------- */
.user-chip{ --avatar:32px; --frame-scale:1.5; display:inline-flex; align-items:center; gap:8px; }
.user-avatar{ position:relative; width:var(--avatar); height:var(--avatar); }
.user-avatar .avatar-img{ width:var(--avatar); height:var(--avatar); border-radius:50%; display:block; }
.user-avatar .avatar-frame{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(var(--avatar) * var(--frame-scale)); height:calc(var(--avatar) * var(--frame-scale));
  pointer-events:none; /* visual only */
}
.user-nick{ font-weight:600; font-size:.92rem; color:var(--fg); }

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .topic-row{ grid-template-columns: 1fr; }
  .col-stats{ justify-content:space-between; }
}

/* ===== Single Topic ===== */
.topic-breadcrumb{
  display:flex; align-items:center; gap:10px; margin:10px 0 14px;
  color:#6b7280;
}
.topic-breadcrumb .back-btn{
  display:inline-block; padding:.45rem .7rem; border:1px solid #e5e7eb; border-radius:10px;
  text-decoration:none; font-weight:700; color:#111827; background:#fff;
}
.topic-breadcrumb .back-btn:hover{ background:#f9fafb; }
.topic-breadcrumb .sep{ color:#d1d5db; }
.topic-breadcrumb .node-link{ color:#0284c7; text-decoration:none; font-weight:700; }

.topic-head{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px 18px;
  box-shadow:0 2px 10px rgba(0,0,0,.04); margin-bottom:14px;
}
.topic-head .topic-title{ font-size:1.6rem; line-height:1.25; font-weight:900; margin:.25rem 0 .35rem; }
.topic-head .topic-meta{ display:flex; align-items:center; gap:10px; color:#6b7280; }
.topic-head .node-pill{
  display:inline-block; padding:.2rem .5rem; background:rgba(14,165,233,.08);
  color:#0284c7; font-weight:800; border-radius:8px; font-size:.78rem;
}
.topic-prefix.lg{
  display:inline-block; margin-bottom:.35rem; padding:.2rem .55rem; border-radius:8px;
  background:#fde68a; color:#7c2d12; font-weight:800; font-size:.8rem;
}

.topic-content{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px; }
.topic-content p{ margin:0 0 1rem; }

.topic-pager{ margin:16px 0; }
.post-navigation{ display:flex; justify-content:space-between; gap:12px; }
.post-navigation a{
  display:inline-block; padding:.5rem .8rem; border:1px solid #e5e7eb; border-radius:10px; text-decoration:none;
  color:#111827; background:#fff;
}
.post-navigation a:hover{ background:#f9fafb; }

/* avatar + frame scale (legacy from list view) */
.user-chip{ --avatar:36px; --frame-scale:1.5; }

/* Pager: previous left, next right on one row */
.topic-pager .post-navigation .nav-links{
  display:flex;
  align-items:center;
  justify-content:space-between; /* space between left & right */
  gap:12px;
  width:100%;
}

.topic-pager .post-navigation .nav-previous,
.topic-pager .post-navigation .nav-next{
  flex:1 1 0;
}

.topic-pager .post-navigation .nav-next{
  text-align:right;            /* push "Next" to the right */
}

.topic-pager .post-navigation a{
  display:inline-block;
  padding:.5rem .8rem;
  border:1px solid #e5e7eb;
  border-radius:10px;
  text-decoration:none;
  background:#fff;
  color:#111827;
}
.topic-pager .post-navigation a:hover{ background:#f9fafb; }

/* (optional) stack on very narrow screens */
@media (max-width: 420px){
  .topic-pager .post-navigation .nav-links{ flex-wrap:wrap; }
  .topic-pager .post-navigation .nav-previous,
  .topic-pager .post-navigation .nav-next{ flex:0 0 100%; text-align:left; }
}