.template-trip-hero,
.template-food-feature,
.template-home-scene,
.template-album-card,
.template-event-feature,
.template-community-welcome {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--template-border);
  border-radius: var(--template-radius);
  background: var(--template-card-bg);
  padding: 8px;
}

.template-trip-hero > div,
.template-food-feature > div,
.template-home-scene > div,
.template-album-card > div,
.template-event-feature > div,
.template-community-welcome > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.template-trip-hero span,
.template-trip-hero em,
.template-food-feature span,
.template-food-feature em,
.template-home-scene span,
.template-album-card span,
.template-album-card em,
.template-event-feature span,
.template-event-feature em,
.template-community-welcome span {
  overflow: hidden;
  color: var(--template-muted);
  font-size: 7px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-trip-hero strong,
.template-food-feature strong,
.template-home-scene strong,
.template-album-card strong,
.template-event-feature strong,
.template-community-welcome strong {
  overflow: hidden;
  color: var(--template-text);
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-trip-map {
  display: block;
  width: 43px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid #8ed6c9;
  border-radius: 12px 12px 16px 16px;
  background: radial-gradient(circle at 36% 35%, #0f766e 0 4px, transparent 5px), linear-gradient(135deg, #d5f5ef 0 45%, #a7e6d9 45% 52%, #e7faf6 52%);
}

.template-trip-route,
.template-food-list,
.template-home-list,
.template-music-list,
.template-ticket-list,
.template-community-feed {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.template-trip-route > div,
.template-food-list > div,
.template-home-list > div,
.template-music-list > div,
.template-ticket-list > div,
.template-community-feed > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  border-bottom: 1px solid var(--template-border);
  padding-bottom: 4px;
}

.template-trip-route > div:last-child,
.template-food-list > div:last-child,
.template-home-list > div:last-child,
.template-music-list > div:last-child,
.template-ticket-list > div:last-child,
.template-community-feed > div:last-child {
  border-bottom: 0;
}

.template-trip-route > div > span,
.template-food-list > div > span,
.template-home-list > div > span,
.template-music-list > div > span,
.template-ticket-list > div > span,
.template-community-feed > div > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.template-trip-route strong,
.template-food-list strong,
.template-home-list strong,
.template-music-list strong,
.template-ticket-list strong,
.template-community-feed strong {
  overflow: hidden;
  color: var(--template-text);
  font-size: 8px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-trip-route em,
.template-food-list em,
.template-home-list em,
.template-music-list em,
.template-ticket-list em,
.template-community-feed em {
  overflow: hidden;
  color: var(--template-muted);
  font-size: 7px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-trip-route > div > b,
.template-ticket-list > div > b {
  width: 31px;
  flex: 0 0 auto;
  color: var(--template-active-accent);
  font-size: 8px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
}

.template-trip-route > div > i,
.template-home-list > div > i {
  width: 7px;
  height: 7px;
  margin-left: auto;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--template-active-accent);
}

.template-travel-actions,
.template-food-categories,
.template-event-tabs {
  display: flex;
  min-width: 0;
  gap: 5px;
}

.template-travel-actions button {
  min-height: 28px;
  flex: 1 1 0;
  border: 1px solid var(--template-border);
  border-radius: var(--template-radius);
  background: var(--template-card-bg);
  color: var(--template-text);
  font-size: 8px;
}

.template-food-feature {
  min-height: 62px;
  border-color: transparent;
  background: #ffedd5;
}

.template-food-cover {
  display: block;
  width: 52px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: radial-gradient(circle at 35% 34%, #fde68a 0 9px, transparent 10px), linear-gradient(135deg, #fb923c, #c2410c);
}

.template-food-categories span,
.template-event-tabs span {
  min-width: 0;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--template-muted);
  font-size: 7px;
  white-space: nowrap;
}

.template-food-categories span.active,
.template-event-tabs span.active {
  background: var(--template-active-accent);
  color: #ffffff;
}

.template-food-thumb,
.template-music-list > div > i {
  display: block;
  width: 32px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: linear-gradient(135deg, #fdba74, #ea580c);
}

.template-food-thumb.food-two {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
}

.template-food-list > div > b,
.template-music-list > div > b,
.template-community-feed > div > b {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--template-active-accent);
  font-size: 7px;
  white-space: nowrap;
}

.template-home-scene {
  min-height: 56px;
  border-color: #29476a;
  background: #142642;
}

.template-home-scene span,
.template-home-scene strong {
  color: #eff8ff;
}

.template-home-scene b {
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
  font-size: 7px;
  padding: 4px 6px;
  white-space: nowrap;
}

.template-device-grid,
.template-community-services {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.template-device-grid article,
.template-community-services article {
  display: grid;
  min-width: 0;
  gap: 3px;
  border: 1px solid var(--template-border);
  border-radius: var(--template-radius);
  background: var(--template-card-bg);
  padding: 6px;
}

.template-device-grid i,
.template-community-services i {
  display: block;
  width: 13px;
  height: 13px;
  border: 2px solid var(--template-active-accent);
  border-radius: 4px;
}

.template-device-grid span,
.template-device-grid strong,
.template-community-services b {
  overflow: hidden;
  color: var(--template-text);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-device-grid strong {
  font-size: 9px;
}

.template-home-list > div > strong {
  color: var(--template-text);
}