.content-page{
  min-height:100%;
  background:var(--paper);
  color:var(--ink);
  padding:0 0 24px;
  font-size:14px;
}
.content-page .topbar .icon-btn{
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.content-toolbar{
  padding:10px 12px 6px;
  border-bottom:1px solid var(--line);
}
.content-filter-group{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
  margin-bottom:10px;
}
.content-filter-label{
  font-size:12px;
  color:var(--ink-2);
  min-width:32px;
}
.content-filter-group>span{
  font-size:12px;
  color:var(--ink-2);
  min-width:32px;
}
.content-select{
  height:33px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--card);
  padding:0 12px;
  color:var(--ink);
  min-width:132px;
}
.content-chip{
  border:1px solid var(--line);
  background:var(--card);
  padding:6px 11px;
  border-radius:999px;
  font-size:12px;
  line-height:1.15;
  cursor:pointer;
  white-space:nowrap;
}
.content-chip.is-on{
  border-color:var(--gold);
  color:var(--gold-deep);
}
.content-note{
  font-size:12px;
  color:var(--ink-3);
}
.content-search{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:4px;
}
.content-search-input{
  flex:1;
  height:34px;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:999px;
  padding:0 12px;
  color:var(--ink);
}
.content-search .content-chip{
  border-radius:8px;
}
.content-state,.content-empty{
  padding:14px 12px;
  color:var(--ink-3);
}
.content-state.content-error{
  color:var(--red);
}
.content-error .content-action{
  margin-left:8px;
}
.content-action{
  border:0;
  background:var(--gold);
  color:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-size:13px;
  cursor:pointer;
}
.content-feed{
  padding:0 12px;
}
.content-row{
  display:flex;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding:14px 0;
  color:var(--ink);
  text-decoration:none;
}
.content-row-copy{min-width:0;flex:1}
.content-row-cover{width:112px;height:82px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:var(--line)}
.content-row h3{
  margin:8px 0 6px;
  font-size:17px;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.content-row-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.content-summary,.content-post .content-summary{
  color:var(--ink-2);
  line-height:1.6;
  margin-bottom:6px;
  overflow-wrap:anywhere;
}
.content-kind{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 9px;
  border-radius:999px;
  background:color-mix(in srgb,var(--gold) 14%,transparent);
  color:var(--gold-deep);
  font-size:11px;
  min-width:52px;
  justify-content:center;
}
.content-date{
  font-size:12px;
  color:var(--ink-3);
}
.content-publisher{
  color:var(--ink-2);
  font-size:12px;
}
.content-more{
  padding:12px;
  text-align:center;
}
.content-post{
  padding:0 14px;
}
.content-post-cover{display:block;width:calc(100% + 28px);max-height:320px;aspect-ratio:16/9;object-fit:cover;margin:0 -14px}
.content-post-head{
  padding:14px 0 12px;
}
.content-post-head h1{
  margin:9px 0;
  font-size:26px;
  line-height:1.35;
}
.content-body{
  line-height:1.95;
  color:var(--ink);
  white-space:normal;
  overflow-wrap:anywhere;
}
.content-body p{
  margin:0 0 16px;
}
.content-related-wrap{
  margin:20px 0;
  padding:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
}
.content-related{
  color:var(--gold-deep);
  text-decoration:none;
  display:inline-block;
  margin-top:8px;
}
.content-related-wrap h2{
  margin:0 0 8px;
  font-size:14px;
}

@media (max-width: 380px){
  .content-post-head h1{
    font-size:22px;
  }
  .content-search-input{
    min-width:0;
  }
  .content-row-cover{width:96px;height:72px}
}