/* Three legacy topic templates, one clear page stylesheet. */

.topic-page {
  margin: .7rem .8rem;
}

.topic-header,.topic-banner,.topic-news,.topic-app-grid {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.topic-header {
  padding: .65rem;
}

.topic-cover>img {
  width: 100%;
  aspect-ratio: 2;
  border-radius: .4rem;
}

.topic-title {
  font-size: 1rem;
  line-height: 1.5;
  margin: .7rem .2rem .4rem;
}

.topic-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: .35rem .2rem;
  color: var(--muted);
  font-size: .55rem;
}

.rating-stars {
  position: relative;
  color: #dce3eb;
  letter-spacing: .1rem;
  font-size: .75rem;
}

.rating-stars::before,.rating-stars i::before {
  content: "★★★★★";
}

.rating-stars i {
  position: absolute;
  left: 0;
  top: 0;
  color: #f4b74b;
  overflow: hidden;
  white-space: nowrap;
}

.topic-intro {
  display: block;
  padding: .4rem .2rem;
  font-size: .65rem;
  line-height: 1.85;
  color: #8491a3;
}

.topic-tags,.label {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .6rem .2rem;
}

.topic-tag,.label a {
  padding: .12rem .4rem;
  font-size: .55rem;
  color: #6e95ab;
  background: var(--brand-soft);
  border-radius: .25rem;
}

.topic-app-list {
  padding: 0 .75rem;
  margin-top: .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.topic-app-list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}

.topic-app-main {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  flex: 1;
}

.topic-app-cover {
  flex-shrink: 0;
}

.topic-app-cover img {
  width: 3rem;
  height: 3rem;
  border-radius: .65rem;
}

.topic-app-info {
  min-width: 0;
}

.topic-app-info h5 {
  font-size: .75rem;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .55rem;
  line-height: 1.6;
  color: var(--muted);
  margin: .2rem 0;
}

.topic-app-meta {
  display: flex;
  gap: .6rem;
  color: #a0aab6;
  font-size: .5rem;
}

.topic-app-meta b {
  font-weight: 400;
}

.topic-app-download {
  flex-shrink: 0;
  padding: .2rem .5rem;
  color: var(--brand);
  border: 1px solid #c3e6f8;
  border-radius: .3rem;
  font-size: .6rem;
}

.topic-list-heading {
  display: block;
  padding: .75rem .15rem;
  font-size: 1rem;
  font-weight: 600;
}

.topic-list-heading i {
  display: block;
  margin-top: .25rem;
  color: var(--muted);
  font-size: .55rem;
  font-weight: 400;
}

.coll-template-tile .topic-rows {
  padding: 0 .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.coll-template-tile .topic-rows li {
  position: relative;
  display: flex;
  gap: .65rem;
  align-items: center;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}

.softdown-bg {
  display: none;
}

.app-icon-link {
  flex-shrink: 0;
}

.app-icon-link img {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: .65rem;
}

.topic-row-info {
  min-width: 0;
  flex: 1;
}

.topic-row-title {
  display: block;
  font-size: .75rem;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-row-meta {
  display: flex;
  gap: .55rem;
  color: var(--muted);
  font-size: .55rem;
  margin-top: .25rem;
}

.topic-row-date {
  font-size: .5rem;
  color: #a2adbb;
}

.topic-row-download {
  color: var(--brand);
  padding: .2rem .5rem;
  border: 1px solid #c3e6f8;
  border-radius: .3rem;
  font-size: .6rem;
}

.topic-nav ul {
  display: flex;
  justify-content: space-around;
  padding: .6rem .3rem;
  border-radius: .4rem;
  background: #fff;
  margin-bottom: .6rem;
}

.topic-nav li {
  font-size: .65rem;
  color: var(--muted);
}

.topic-nav .is-active {
  color: var(--brand);
  font-weight: 600;
}

.topic-banner {
  position: relative;
}

.topic-banner>img {
  width: 100%;
  aspect-ratio: 1.9;
}

.topic-banner-title {
  padding: .7rem;
}

.topic-banner-title h1 {
  font-size: 1rem;
  padding-left: 3.5rem;
}

.topic-banner-icon {
  position: absolute;
  left: .65rem;
  bottom: .6rem;
  padding: .15rem;
  background: #fff;
  border-radius: .65rem;
}

.topic-banner-icon img {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: .5rem;
}

.topic-banner-download a {
  display: block;
  margin: .65rem 0;
  padding: .55rem;
  text-align: center;
  color: #fff;
  background: var(--brand);
  border-radius: .4rem;
  font-weight: 600;
}

.topic-news,.topic-app-grid {
  padding: .8rem;
  margin-top: .7rem;
}

.topic-news h2,.topic-app-grid h2 {
  font-size: .85rem;
  margin-bottom: .5rem;
}

.topic-news li {
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .65rem;
}

.topic-app-grid ul {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .7rem .5rem;
}

.topic-app-grid li {
  min-width: 0;
  text-align: center;
}

.topic-app-grid img {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: .65rem;
  margin: auto;
}

.topic-app-grid span {
  display: block;
  margin-top: .3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .55rem;
}