@charset "utf-8";

* {
  box-sizing: border-box;
}

html,
body,
div,
main,
section,
nav,
a,
span,
strong,
p,
em,
img {
  margin: 0;
  padding: 0;
}

:root {
  --column-blue: #1e78ff;
  --column-bg: #f3f6fc;
  --column-card: #ffffff;
  --column-text: #26364f;
  --column-muted: #6b7280;
  --column-border: #edf2f8;
  --column-shadow: 0 0.125rem 0.75rem rgba(19, 43, 91, 0.1);
  font-size: 16px;
}

body {
  min-width: 75rem;
  background: var(--column-bg);
  color: var(--column-text);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 1rem;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  border: 0;
}

.column-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f1f5fb 0, #f6f9fe 18rem, var(--column-bg) 100%);
}

.column-main {
  width: 75rem;
  margin: 0 auto;
  padding: 1.4375rem 0 2.75rem;
}

.column-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 1.875rem;
}

.column-breadcrumb {
  display: flex;
  align-items: center;
  min-width: 0;
  color: #8a95a8;
  font-size: 1rem;
  line-height: 1.875rem;
}

.column-breadcrumb a {
  transition: color 0.2s ease;
}

.column-breadcrumb a:hover {
  color: var(--column-blue);
}

.column-breadcrumb span {
  margin: 0 0.375rem;
  color: #9aa5b6;
}

.column-breadcrumb strong {
  color: #111827;
  font-weight: 400;
}

.column-category {
  flex: 0 0 auto;
  color: #111827;
  font-size: 1rem;
  line-height: 1.875rem;
  font-weight: 400;
}

.column-panel {
  min-height: 43.125rem;
  margin-top: 1rem;
  padding: 1.5rem;
  background: #fff;
}

.page-content {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.community-card {
  display: flex;
  flex-direction: column;
  padding: 1rem 0.75rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.5rem;
  background: var(--column-card);
  box-shadow: var(--column-shadow);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.community-card:hover {
  transform: translateY(-0.375rem);
  border-color: rgba(30, 120, 255, 0.28);
  box-shadow: 0 0.625rem 1.5rem rgba(30, 120, 255, 0.16);
}

.community-card img {
  width: 100%;
  height: 10.25rem;
  border-radius: 0.375rem;
  object-fit: cover;
}

.community-card strong {
  margin-top: 1.25rem;
  color: #2f3848;
  font-size: 1.125rem;
  line-height: 1.5625rem;
  font-weight: 700;
}

.community-card p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 2rem;
  margin-top: 1.25rem;
}

.community-card p span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.75rem;
  height: 2rem;
  padding: 0 0.875rem;
  border-radius: 0.25rem;
  background: rgba(30, 120, 255, 0.12);
  color: var(--column-blue);
  font-size: 1rem;
  line-height: 2rem;
  font-weight: 700;
}

.community-card em {
  margin-top: 1.25rem;
  color: #596273;
  font-size: 1rem;
  line-height: 1.5rem;
  font-style: normal;
}