:root {
  --community-ink: #35264c;
  --community-muted: #867a9c;
  --community-line: rgba(222, 168, 33, .28);
  --community-yellow: #ffd53b;
  --community-orange: #ff9d21;
  --community-pink: #ef497f;
  --community-purple: #805cf2;
  --community-card: rgba(255, 255, 255, .86);
}

* { box-sizing: border-box; }

body.community-page {
  min-width: 0;
  margin: 0;
  color: var(--community-ink);
  font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background:
    radial-gradient(circle at 8% 3%, rgba(255, 213, 59, .23), transparent 22rem),
    radial-gradient(circle at 96% 13%, rgba(157, 114, 255, .15), transparent 25rem),
    linear-gradient(135deg, #fffdf6, #fff9ef 48%, #f8f5ff);
}

.community-shell { width: min(1160px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 48px; }
.community-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 4px 0 22px; }
.community-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.community-brand img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(206, 143, 11, .2)); }
.community-brand b { display: block; font-size: 1.13rem; }
.community-brand span { display: block; margin-top: 3px; color: #aa7a16; font-size: .76rem; font-weight: 800; }
.community-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.community-links a { border: 1px solid var(--community-line); border-radius: 999px; padding: 9px 13px; color: #6b527b; background: rgba(255,255,255,.72); text-decoration: none; font-size: .83rem; font-weight: 900; }
.community-links a:hover { background: #fff2bb; color: #6d4bca; }

.community-hero { position: relative; overflow: hidden; min-height: 188px; padding: 30px 235px 27px 30px; border: 1px solid rgba(231, 185, 45, .32); border-radius: 26px; background: linear-gradient(110deg, rgba(255,255,255,.94), rgba(255,244,195,.92) 58%, rgba(236,226,255,.9)); box-shadow: 0 16px 35px rgba(154, 105, 43, .12); }
.community-hero::before { content: ""; position: absolute; right: 0; bottom: 0; width: 52%; height: 42px; opacity: .5; background: url("../icons/decor/wave-border.svg") right bottom / auto 42px repeat-x; }
.community-hero h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(1.75rem, 4vw, 2.55rem); line-height: 1.15; letter-spacing: .02em; color: var(--community-pink); }
.community-hero h1 em { font-style: normal; color: var(--community-purple); }
.community-hero p { position: relative; z-index: 1; max-width: 640px; margin: 12px 0 0; color: #6e6283; font-size: .94rem; font-weight: 700; line-height: 1.7; }
.community-hero img { position: absolute; z-index: 1; right: 30px; bottom: -13px; width: 190px; height: 190px; object-fit: contain; filter: drop-shadow(0 9px 12px rgba(205, 151, 11, .2)); }

.community-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 18px; margin-top: 18px; }
.community-card { min-width: 0; border: 1px solid var(--community-line); border-radius: 22px; background: var(--community-card); box-shadow: 0 10px 25px rgba(89, 52, 124, .07); overflow: hidden; }
.community-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 19px 20px 13px; border-bottom: 1px solid rgba(222,168,33,.18); }
.community-card__head h2 { margin: 0; font-size: 1.06rem; }
.community-card__head p { margin: 5px 0 0; color: var(--community-muted); font-size: .78rem; font-weight: 700; line-height: 1.5; }
.community-card__body { padding: 16px 20px 20px; }
.community-select { max-width: 190px; border: 1px solid var(--community-line); border-radius: 10px; padding: 8px 9px; color: var(--community-ink); background: #fffdf8; font: inherit; font-size: .78rem; font-weight: 800; }
.community-empty { min-height: 176px; display: grid; place-items: center; padding: 24px; color: var(--community-muted); text-align: center; font-size: .87rem; font-weight: 700; line-height: 1.65; }
.community-total { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 6px 10px; color: #805718; background: #fff2bd; font-size: .74rem; font-weight: 900; white-space: nowrap; }
.community-bars { display: grid; gap: 11px; }
.community-bar { display: grid; grid-template-columns: minmax(88px, 1.2fr) minmax(90px, 2fr) 36px; gap: 9px; align-items: center; font-size: .79rem; font-weight: 800; }
.community-bar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-bar__track { height: 10px; overflow: hidden; border-radius: 99px; background: #f1eafb; }
.community-bar__fill { display: block; height: 100%; min-width: 7px; border-radius: inherit; background: linear-gradient(90deg, var(--community-pink), var(--community-purple)); }
.community-bar__count { color: #806c96; text-align: right; font-variant-numeric: tabular-nums; }
.community-tier-list { display: grid; gap: 9px; }
.community-tier-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid rgba(224,179,56,.22); border-radius: 14px; padding: 8px; background: rgba(255,255,255,.83); }
.community-tier-item img { width: 42px; height: 56px; border-radius: 9px; object-fit: cover; background: #f1eafb; }
.community-tier-item b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .83rem; }
.community-tier-item small { display: block; margin-top: 4px; color: var(--community-muted); font-size: .71rem; font-weight: 700; }
.community-tier-badge { min-width: 42px; border-radius: 11px; padding: 6px 5px; color: white; background: linear-gradient(135deg, var(--community-purple), #ad7df8); text-align: center; font-size: .82rem; font-weight: 900; }
.community-tier-badge[data-tier="S"] { background: linear-gradient(135deg, #ff4169, #e32448); }
.community-tier-badge[data-tier="A"] { background: linear-gradient(135deg, #ff943f, #ee652c); }
.community-tier-badge[data-tier="B"] { background: linear-gradient(135deg, #f3b635, #db8f1c); }
.community-tier-badge[data-tier="C"] { background: linear-gradient(135deg, #52cce1, #2ca7be); }
.community-tier-badge[data-tier="D"] { background: linear-gradient(135deg, #9b77f3, #6e4bdb); }
.community-tier-badge[data-tier="F"] { background: linear-gradient(135deg, #8998a6, #637381); }
.community-note { margin: 18px 2px 0; color: #8c7b97; font-size: .74rem; font-weight: 700; line-height: 1.7; text-align: center; }

@media (max-width: 760px) {
  .community-shell { width: min(100% - 22px, 620px); padding-top: 13px; padding-bottom: 100px; }
  .community-header { align-items: flex-start; padding-bottom: 13px; }
  .community-brand img { width: 44px; height: 44px; }
  .community-links { gap: 5px; }
  .community-links a { padding: 7px 9px; font-size: .71rem; }
  .community-hero { min-height: 215px; padding: 23px 21px 134px; border-radius: 20px; }
  .community-hero p { font-size: .82rem; }
  .community-hero img { right: 12px; bottom: -18px; width: 135px; height: 135px; }
  .community-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 13px; }
  .community-card { border-radius: 18px; }
  .community-card__head { padding: 16px 15px 11px; }
  .community-card__body { padding: 14px 15px 16px; }
  .community-card__head h2 { font-size: .98rem; }
  .community-card__head p { font-size: .72rem; }
  .community-select { max-width: 145px; font-size: .7rem; }
  .community-bar { grid-template-columns: minmax(72px, 1fr) minmax(88px, 1.75fr) 30px; gap: 7px; font-size: .72rem; }
}