.feed-head{ margin-bottom:2px; }
.feed-sub{ margin-bottom:10px; }

/* ── Categories ──────────────────────────────────────────── */
.forum-cat{
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:20px;
  background:var(--surface);
  overflow:hidden;
  position:relative;
}
.forum-cat::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--line-strong);
}
.forum-cat.cat-sky::before   { background:var(--accent); }
.forum-cat.cat-earth::before { background:var(--earth); }
.forum-cat.cat-steel::before { background:var(--steel); }
.forum-cat.cat-wine::before  { background:var(--wine); }

.forum-cat-head{
  display:flex; align-items:center;
  padding:9px 16px 9px 20px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.forum-cat-head h2{
  margin:0; font-size:11px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}

/* ── Subforum row ─────────────────────────────────────────── */
.subforum{
  display:grid;
  grid-template-columns: 40px minmax(0,1fr) 96px 168px;
  column-gap:14px; align-items:start;
  padding:14px 16px 14px 20px;
}
.subforum + .subforum{ border-top:1px solid var(--line); }
.subforum:hover{ background:var(--surface-2); }

/* ── Icon ─────────────────────────────────────────────────── */
.sf-ico{
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px;
  background:var(--accent-soft); border:1px solid #d4dcee; color:var(--accent);
}
.sf-ico svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; }
.sf-ico.tone-sky   { background:var(--accent-soft); border-color:#d4dcee; color:var(--accent); }
.sf-ico.tone-earth { background:var(--earth-soft);  border-color:#e3d2b8; color:var(--earth); }
.sf-ico.tone-steel { background:var(--steel-soft);  border-color:#c8d2dc; color:var(--steel); }
.sf-ico.tone-wine  { background:var(--wine-soft);   border-color:#e0c6cc; color:var(--wine); }

/* ── Body ─────────────────────────────────────────────────── */
.sf-body{ min-width:0; }
.sf-title{
  font-size:15px; font-weight:600; color:var(--ink);
  margin-bottom:2px; letter-spacing:-0.005em;
  display:flex; align-items:center; gap:6px;
}
.sf-title a{ color:inherit; text-decoration:none; }
.sf-title a:hover{ text-decoration:underline; }
.sf-desc{ font-size:13px; color:var(--muted); line-height:1.4; margin-bottom:0; }

/* Lock badge */
.sf-lock{
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; cursor:default;
}
.sf-title .sf-lock{
  width:20px; height:20px; border-radius:5px;
  background:var(--wine-soft);
  border:1px solid rgba(138,51,70,.18);
  color:var(--wine);
}
.sf-child .sf-lock{
  width:16px; height:16px; border-radius:4px;
  background:var(--wine-soft);
  border:1px solid rgba(138,51,70,.18);
  color:var(--wine);
}
.sf-lock svg{
  width:11px; height:11px;
  stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* Children as chips */
.sf-children{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.sf-child{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px 3px 6px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--line);
  font-size:12px; line-height:1;
  text-decoration:none;
  transition:border-color .12s, background .12s;
}
.sf-child:hover{ background:var(--chip-bg); border-color:var(--line-strong); }
.sf-child svg{
  width:11px; height:11px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  color:var(--muted); flex-shrink:0;
}
.sf-child-title{ font-weight:500; color:var(--ink-2); }
.sf-child-stats{ color:var(--muted); }
.sf-child-stats::before{ content:"·"; margin:0 3px; color:var(--line-strong); }

/* ── Stats column ─────────────────────────────────────────── */
.sf-stats{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  font-size:12px; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  padding-top:2px;
}
.sf-stat{ display:flex; align-items:center; gap:5px; }
.sf-stat svg{
  width:13px; height:13px; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  color:var(--muted); flex-shrink:0;
}
.sf-stats b{ color:var(--ink); font-weight:600; }

/* ── Last post column ─────────────────────────────────────── */
.sf-last{ font-size:12px; color:var(--muted); min-width:0; text-align:right; padding-top:2px; }
.sf-last .tt{
  display:block; color:var(--ink-2); font-weight:500; font-size:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px;
}
.sf-last .meta{ font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:1000px){
  .subforum{ grid-template-columns: 40px minmax(0,1fr) 96px; }
  .sf-last{ display:none; }
}
@media (max-width:720px){
  .forum-cat-head{ padding:9px 12px 9px 16px; }
  .subforum{
    grid-template-columns: 34px minmax(0,1fr) auto;
    column-gap:10px; padding:12px 12px 12px 16px;
  }
  .sf-ico{ width:34px; height:34px; border-radius:8px; }
  .sf-ico svg{ width:16px; height:16px; }
  .sf-title{ font-size:14px; }
  .sf-desc{ font-size:12px; }
  .sf-children{ gap:4px; margin-top:6px; }
  .sf-child{ font-size:11px; padding:3px 7px 3px 5px; }
  .sf-stats{ font-size:11px; }
  .sf-last{ display:none; }
}
@media (max-width:480px){
  .subforum{
    grid-template-columns: 34px minmax(0,1fr);
  }
  .sf-stats{
    grid-column: 2; flex-direction:row; align-items:center;
    gap:10px; padding-top:5px;
  }
}

/* ── Topic row ────────────────────────────────────────────── */
.topic{
  display:grid;
  grid-template-columns: 40px minmax(0,1fr) 90px 160px;
  gap:12px; align-items:center;
  padding:12px 16px;
  border-top:1px solid var(--line);
}
.topic:first-of-type{ border-top:none; }
.topic:hover{ background:var(--surface-2); }
.topic-ico{
  width:32px; height:32px; border-radius:8px;
  background:var(--surface-2);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); flex-shrink:0;
}
.topic-ico svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }
.topic-body{ min-width:0; }
.topic-title{
  font-size:14px; font-weight:600; color:var(--ink);
  line-height:1.35; letter-spacing:-0.005em;
  margin-bottom:2px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.topic-title a{ color:inherit; text-decoration:none; }
.topic-title a:hover{ text-decoration:underline; }
.topic-meta{ font-size:12px; color:var(--muted); }
.topic-stats{
  font-size:12px; color:var(--muted);
  font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:flex-start; gap:5px;
}
.topic-stats svg{
  width:13px; height:13px; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  color:var(--muted); flex-shrink:0;
}
.topic-stats b{ color:var(--ink); font-weight:600; }
.topic-last{ font-size:12px; color:var(--muted); min-width:0; }
.topic-last .when{
  color:var(--ink-2); font-weight:500; display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topic-last .who{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }

@media (max-width:1000px){
  .topic{ grid-template-columns: 32px minmax(0,1fr) 140px; }
  .topic .topic-stats{ display:none; }
}
@media (max-width:720px){
  .topic{ grid-template-columns: 28px minmax(0,1fr); gap:10px; padding:10px 12px; }
  .topic .topic-stats, .topic .topic-last{ display:none; }
  .topic-ico{ width:28px; height:28px; }
  .topic-ico svg{ width:14px; height:14px; }
  .topic-title{ font-size:13px; }
  .topic-meta{ font-size:11px; }
}

/* ── Pagination ───────────────────────────────────────────── */
.pagination{
  display:flex; align-items:center; gap:4px;
}
.pagination a, .pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 8px;
  border:1px solid transparent; border-radius:9px;
  font-size:13px; font-weight:500; color:var(--ink-2); text-decoration:none;
  transition:background .12s, border-color .12s, color .12s;
}
.pagination a:hover{ background:var(--surface-2); color:var(--ink); }
.pagination .current{
  background:var(--accent); color:#fff; font-weight:700;
}
.pagination .entering{
  border-color:var(--accent); color:var(--accent);
}
.pagination .disabled{ color:var(--muted); pointer-events:none; }
.pagination .pag-ellipsis{ color:var(--muted); padding:0 6px; border:none; background:transparent; min-width:auto; }

.pagination-sticky{
  position:sticky; top:60px; z-index:20;
  display:flex; justify-content:flex-end;
  margin:0 0 8px; padding:4px 0;
  background:linear-gradient(to bottom, var(--bg) 0%, var(--bg) 72%, transparent 100%);
}
.pagination-bar{
  display:flex; align-items:center; gap:10px;
  padding:6px 8px 6px 12px;
  border:1px solid var(--line); border-radius:15px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  box-shadow:0 4px 18px rgba(19,36,74,.08);
}
.pagination-info{
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
}
@media (max-width:720px){
  .pagination-sticky{ top:52px; padding:4px 0; }
  .pagination-bar{
    max-width:100%;
    overflow-x:auto;
    border-radius:13px;
  }
  .pagination-info{ font-size:12px; }
  .pagination a, .pagination span{ min-width:30px; height:30px; font-size:13px; }
}

.sentinel{ height:1px; }

/* ── Post feed ────────────────────────────────────────────── */
.post-feed{ padding-top:0; }

.post-card{
  display:grid;
  grid-template-columns: 44px 1fr;
  column-gap:12px;
  padding:18px 0 0;
  scroll-margin-top: var(--post-scroll-margin, 68px);
}

.post-left{
  display:flex; flex-direction:column; align-items:center;
  flex-shrink:0;
}

.post-avatar{
  width:44px; height:44px; border-radius:12px;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-size:16px; font-weight:700; color:var(--accent);
  overflow:hidden;
  object-fit:cover;
  border:1px solid rgba(19,36,74,.08);
  box-shadow:0 1px 2px rgba(19,36,74,.05);
}

.post-right{
  min-width:0;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.post-card:last-child .post-right{ border-bottom:none; }
.page-block:not(:last-child) .post-card:last-child .post-right{ border-bottom:1px solid var(--line); }

.post-header{
  display:flex; align-items:baseline; gap:8px;
  margin-bottom:6px; flex-wrap:wrap;
}
.post-author-name{
  font-size:14px; font-weight:700; color:var(--ink);
  letter-spacing:-0.01em;
}
.post-date{
  font-size:12px; color:var(--muted); white-space:nowrap; text-decoration:none;
}
.post-date:hover{ text-decoration:underline; }

.post-body{
  font-size:14px; line-height:1.7; color:var(--ink);
}
.post-body p{ margin:0 0 8px; }
.post-body p:last-child{ margin-bottom:0; }
.post-body a{
  color:#2470d4;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, #2470d4 35%, transparent);
}
.post-body a:hover{
  color:#1a5cb8;
  text-decoration-color:#1a5cb8;
}

.post-body img{
  max-width:100%; height:auto;
  border-radius:6px;
}

.post-body blockquote{
  border-left:3px solid var(--line-strong);
  background:var(--surface-2);
  padding:8px 12px;
  margin:10px 0;
  color:var(--muted);
  font-size:13px;
  border-radius:0 4px 4px 0;
}

.post-empty{
  padding:24px 0; color:var(--muted); font-size:14px;
}

/* ── Spoiler (details/summary) ────────────────────────────── */
details.spoiler {
  margin: 10px 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  overflow: hidden;
}

details.spoiler > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--surface-2);
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 13px;
  color: var(--ink-2);
  transition: background .12s;
}

details.spoiler > summary::-webkit-details-marker { display: none; }
details.spoiler > summary::marker { display: none; }

details.spoiler > summary::before {
  content: "+";
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  transition: color .12s;
}

details.spoiler[open] > summary::before {
  content: "−";
}

details.spoiler > summary:hover {
  background: var(--chip-bg, var(--surface-2));
}

details.spoiler > summary:hover::before {
  color: var(--ink-2);
}

.spoiler-body {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width:720px){
  .post-card{
    grid-template-columns: 36px 1fr;
    column-gap:10px;
    padding-top:14px;
  }
  .post-right{ padding-bottom:14px; }
  .post-avatar{ width:36px; height:36px; border-radius:10px; font-size:13px; }
}

/* ── Search box (topbar) ──────────────────────────────────── */
.search-box{
  display:flex; align-items:center; gap:6px;
}
.search-input{
  height:32px; padding:0 10px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink);
  font-size:13px; width:220px;
  transition:border-color .12s, box-shadow .12s;
  outline:none;
}
.search-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(36,112,212,.12);
}
.search-btn{
  height:32px; width:32px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff;
  border:none; border-radius:8px; cursor:pointer;
  flex-shrink:0;
  transition:background .12s;
}
.search-btn:hover{ background:var(--accent-dark, #1a5cb8); }
.search-btn svg{
  width:15px; height:15px;
  stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
@media (max-width:720px){
  .search-input{ width:140px; font-size:12px; }
}

/* ── Search results ───────────────────────────────────────── */
.search-result{
  padding:14px 16px;
  border-top:1px solid var(--line);
}
.search-result:first-child{ border-top:none; }
.search-result:hover{ background:var(--surface-2); }

.sr-title{
  font-size:14px; font-weight:600; color:var(--ink);
  margin-bottom:3px; letter-spacing:-0.005em;
}
.sr-title a{ color:inherit; text-decoration:none; }
.sr-title a:hover{ text-decoration:underline; }

.sr-meta{
  font-size:12px; color:var(--muted);
  margin-bottom:5px;
}

.sr-snippet{
  font-size:13px; color:var(--ink-2); line-height:1.55;
}
.sr-snippet mark{
  background:rgba(255,208,0,.35);
  color:var(--ink);
  border-radius:2px;
  padding:0 1px;
}

.search-empty{
  padding:24px 16px; color:var(--muted); font-size:14px;
}

.search-hint{
  padding:20px 0; color:var(--muted); font-size:14px;
}