/* Five stable homes; content, friends and sport each retain a clear place. */
.s-phone .bottom-nav {
  grid-template-columns: repeat(5, 1fr);
}
.t-phone {
  color: #20362a;
}
.t-phone .screen-content {
  padding: 0 15px 22px;
  background: #fafbf8;
}
.t-phone button {
  touch-action: manipulation;
}
.t-phone .s-header > div:last-child {
  display: flex;
  gap: 8px;
}
.t-community-segments {
  display: flex;
  gap: 25px;
  padding: 6px 4px 18px;
  background: #fafbf8;
}
.t-community-segments button {
  position: relative;
  font-size: 18px;
  font-weight: 500;
  color: #889187;
  padding: 8px 0;
}
.t-community-segments button.active {
  color: #26382c;
  font-weight: 750;
}
.t-community-segments button.active:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  width: 24px;
  border-radius: 3px;
  background: #a8de52;
}
.t-gel-banner {
  display: flex;
  gap: 11px;
  align-items: center;
  background: #eff5df;
  border: 1px solid #e0eacb;
  border-radius: 14px;
  padding: 13px 12px;
  margin: 0 0 16px;
}
.t-gel-mark {
  width: 36px;
  height: 46px;
  background: #d8edab;
  border-radius: 9px;
  display: grid;
  place-items: center;
  transform: rotate(-6deg);
  flex-shrink: 0;
  color: #526b2c;
}
.t-gel-mark svg {
  width: 23px;
  height: 23px;
}
.t-gel-banner > div:last-child {
  flex: 1;
  min-width: 0;
}
.t-gel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.t-gel-title b {
  font-size: 14px;
  white-space: nowrap;
}
.t-gel-title button {
  font-size: 10px;
  color: #7a876a;
  padding: 4px 0;
  white-space: nowrap;
}
.t-gel-banner small {
  display: block;
  font-size: 10px;
  color: #82916c;
  margin: 3px 0 9px;
  line-height: 1.4;
}
.t-gel-banner > div > div:last-child {
  display: flex;
  gap: 9px;
  align-items: center;
}
.t-gel-banner > div > div:last-child button {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  background: #fff;
  color: #56722c;
}
.t-gel-banner > div > div:last-child button:first-child {
  background: #c0ef60;
  color: #304514;
}
.t-gel-banner svg {
  width: 15px;
  height: 15px;
}
.t-gel-mark svg {
  width: 23px;
  height: 23px;
}
.t-friends-note,
.t-discover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: #8c9587;
  font-size: 10px;
  padding: 0 0 13px;
}
.t-friends-note button,
.t-discover-head button {
  display: flex;
  align-items: center;
  color: #677e4b;
  white-space: nowrap;
  font-size: 10px;
}
.t-friends-note svg,
.t-discover-head svg {
  width: 12px;
  height: 12px;
}
.t-phone .s-post {
  padding: 18px 0;
  background: transparent;
  border-bottom: 1px solid #e8ebe3;
}
.t-phone .s-post:first-of-type {
  padding-top: 8px;
}
.t-phone .s-post-text {
  font-size: 14px;
  line-height: 1.65;
}
.t-phone .s-feed-image {
  width: 100%;
  max-width: 248px;
  height: 185px;
  overflow: hidden;
  border-radius: 5px;
  display: block;
  margin: 10px 0;
}
.t-phone .s-feed-image .photo {
  width: 100%;
  height: 100%;
  display: block;
}
.t-phone .s-post-meta {
  font-size: 10px;
}
.t-phone .s-likes {
  font-size: 11px;
}
.t-sport-location {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 13px;
}
.t-sport-location button {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.t-sport-location button:last-child {
  font-size: 11px;
  color: #859078;
}
.t-sport-location svg {
  width: 14px;
  height: 14px;
}
.t-run-hero {
  background: linear-gradient(125deg, #28452f, #1c3327);
  color: #f6f8ed;
  border-radius: 19px;
  padding: 18px;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
}
.t-run-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.t-run-top b {
  font-size: 16px;
  white-space: nowrap;
}
.t-run-shortcuts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  max-width: 100%;
}
.t-run-top button {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 44px;
  white-space: nowrap;
  color: #b6c6a7;
}
.t-run-top button:focus-visible {
  outline: 2px solid #d6edab;
  outline-offset: 2px;
  border-radius: 4px;
}
.t-run-top svg {
  width: 13px;
  height: 13px;
}
.t-run-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 17px 0 15px;
}
.t-run-total strong {
  font-size: 42px;
  letter-spacing: -2px;
  line-height: 1.1;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.t-run-total span {
  font-size: 10px;
  color: #aec29e;
}
.t-run-goals {
  display: flex;
  gap: 7px;
  padding-bottom: 16px;
}
.t-run-goals button {
  flex: 1;
  border: 1px solid #65805a77;
  border-radius: 18px;
  padding: 7px 3px;
  font-size: 10px;
  color: #b4c5a8;
  white-space: nowrap;
}
.t-run-goals button.active {
  background: #5c7949;
  color: #ebf8d7;
  border-color: #739457;
}
.t-start-run {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  background: #c0ef60;
  border-radius: 28px;
  height: 44px;
  color: #273b18;
  font-size: 16px;
  font-weight: 650;
}
.t-start-run svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}
.t-run-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0 0;
}
.t-run-options button {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #b9c9ab;
}
.t-run-options svg {
  width: 13px;
  height: 13px;
}
.t-sport-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 4px;
  padding: 8px 0 24px;
}
.t-sport-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  white-space: nowrap;
  color: #536648;
}
.t-sport-grid svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}
.t-event-card {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 11px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e9ece3;
  border-radius: 14px;
  margin-bottom: 12px;
  text-align: left;
}
.t-event-photo {
  width: 63px;
  height: 72px;
  border-radius: 8px;
  flex-shrink: 0;
}
.t-event-card > span {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.t-event-card b {
  font-size: 13px;
}
.t-event-card small {
  font-size: 10px;
  color: #88917f;
}
.t-event-card svg {
  width: 15px;
  height: 15px;
  color: #98a28e;
}
.t-sport-links {
  background: #fff;
  border-radius: 14px;
  margin: 10px 0 22px;
  overflow: hidden;
  border: 1px solid #eaede4;
}
.t-sport-links .s-cell {
  padding: 14px 12px;
  font-size: 12px;
}
.t-route-card {
  margin: 10px 0;
}
.t-route-card > button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 13px;
  width: 100%;
  background: white;
  border: 1px solid #e3e8d8;
  border-radius: 14px;
  text-align: left;
}
.t-route-card > button > span:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.t-route-card b {
  font-size: 13px;
}
.t-route-card small {
  font-size: 10px;
  color: #8a967d;
}
.t-route-card svg {
  width: 18px;
  height: 18px;
}
.t-route-icon {
  width: 42px;
  height: 49px;
  display: grid;
  place-items: center;
  background: #edf3df;
  border-radius: 8px;
  color: #719543;
}
.t-route-icon svg {
  width: 25px;
  height: 25px;
}
.t-route-intro {
  padding: 18px 0 15px;
}
.t-route-intro h2,
.t-route-detail h2 {
  font-size: 23px;
  line-height: 1.45;
  margin: 0 0 10px;
  letter-spacing: -0.5px;
}
.t-route-intro p,
.t-route-detail p {
  font-size: 12px;
  line-height: 1.8;
  color: #8b967f;
}
.t-route-intro > div {
  display: flex;
  gap: 16px;
  margin: 15px 0 0;
}
.t-route-intro > svg {
  width: 42px;
  height: 42px;
  color: #7faa45;
  margin-bottom: 15px;
}
.t-route-intro small {
  font-size: 10px;
  color: #97a779;
  letter-spacing: 2px;
}
.t-route-intro .x-link {
  font-size: 12px;
  color: #709239;
}
.t-route-detail {
  padding: 17px 0;
}
.t-route-detail > small {
  font-size: 10px;
  color: #95a08a;
}
.t-route-detail .map {
  margin: 17px 0;
}
.t-route-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 19px 0;
}
.t-route-author > span {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.t-route-author b {
  font-size: 13px;
}
.t-route-author small {
  font-size: 10px;
  color: #8c967f;
}
.t-route-author > button:last-child {
  font-size: 11px;
  color: #68863d;
}
.t-route-author .s-avatar {
  width: 39px;
  height: 39px;
}
.t-route-buttons {
  display: flex;
  gap: 10px;
  margin: 18px 0 4px;
}
.t-route-buttons button {
  padding: 12px 11px;
  border-radius: 20px;
  background: #eaf1df;
  font-size: 12px;
}
.t-route-buttons button:first-child {
  flex: 1;
  background: #bff05d;
  color: #2d421a;
  font-weight: 650;
}
.t-creator-stats {
  display: flex;
  justify-content: space-around;
  border: 1px solid #e6ebdc;
  border-radius: 14px;
  padding: 18px 5px;
  margin: 3px 0 25px;
}
.t-creator-stats > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
}
.t-creator-stats b {
  font-size: 25px;
}
.t-creator-stats span {
  font-size: 10px;
  color: #919c82;
}
.t-muted {
  font-size: 11px;
  line-height: 1.8;
  color: #929d85;
  padding: 7px 3px;
}
.t-wallet-number {
  display: flex;
  align-items: baseline;
  gap: 15px;
  padding: 25px 18px;
  background: #eaf2d8;
  border-radius: 16px;
}
.t-wallet-number strong {
  font-size: 62px;
  color: #587d2d;
}
.t-wallet-number span {
  font-size: 12px;
  color: #899c69;
}
.t-guide-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  background: #eaf0df;
  height: 160px;
  border-radius: 16px;
  margin: 18px 0;
  color: #879e6b;
  font-size: 12px;
}
.t-guide-preview svg {
  height: 38px;
  width: 38px;
}
.t-feedback-item {
  padding: 15px;
  background: #eff3e9;
  border-radius: 12px;
  margin: 10px 0;
}
.t-feedback-item b {
  font-size: 12px;
}
.t-feedback-item p {
  font-size: 12px;
  line-height: 1.6;
  color: #7c8a6d;
}
.t-phone .c-me-honors {
  margin-top: 17px;
}
.t-phone .c-me-identity {
  padding-top: 14px;
}
.t-event-photo {
  position: relative;
  overflow: hidden;
}
.t-event-photo .sprite {
  background-image: url("../页面原型/assets/sports-atlas-natural-v2.png");
  background-size: 400% 200%;
  background-repeat: no-repeat;
}
.t-phone .s-feed-image .c-note-image {
  height: 100%;
  width: 100%;
}