/* PORTE LITERAL de synchrone/src/components/pages/Plant/plant3d/plant3dCard.module.css (05/10).
   Só os nomes de classe mudaram (módulo → prefixo pc-). Não editar à mão: recopiar do produto. */
/*
 * ⭐⭐ O CARD DO 3D — HTML de verdade, preso ao ponto da cena (CSS2DRenderer).
 *
 * Porte fiel da demo aprovada (`synchrone/demos/mapa-3d-v4/demo.html`, bloco "os CARDS").
 * O conteúdo é o do card do 2D (`AssetNode`); aqui mora só o que o 3D tem de próprio:
 *
 *   - as TRÊS CAMADAS DE ZOOM, trocadas por `data-lod` no hospedeiro (quem troca é o laço
 *     da cena, a cada quadro — nunca um render do React): card inteiro perto · compacto
 *     no meio · alfinete com a foto num anel de estado longe;
 *   - os estados que o laço e a pintura ligam por atributo (seleção, cena da parada,
 *     recuo da camada, foco do mouse), com as transições da demo.
 *
 * ⚠️ As cores são as da paleta da casa (slate · green · amber · red · violet · o azul da
 * marca), escritas em hexa porque aqui é CSS de módulo; o tom de cada ESTADO chega da
 * fonte única (`readingDisplayState` via `toneOf`) pelo atributo `data-st`.
 */

.pc-host {
  pointer-events: none;
}

.pc-pin {
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  /* 🔴 o card tem 10px de margem embaixo, e é NELA que a ponta do balão mora (a demo). Sem
     um contexto de bloco aqui a margem vazava para fora do .pc-pin, a ponta subia para
     dentro do card e virava um "V" desenhado por cima do texto. */
  display: flow-root;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
.pc-pin[data-dim='1'] {
  opacity: 0.22;
  filter: saturate(0.3);
}
.pc-pin[data-soft='1'] {
  opacity: 0.25;
  filter: saturate(0.4);
}
.pc-pin[data-recede='1'] {
  opacity: 0.32;
  filter: saturate(0.4);
}
/* em Simular sem alvo o card convida ao clique: a mão de sempre (a cruz dificultava achar
   a máquina) e o anel azul no hover */
.pc-picking .pc-pin .pc-card,
.pc-picking .pc-pin .pc-ring {
  cursor: pointer;
}
.pc-picking .pc-pin:hover .pc-card {
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.45), 0 18px 36px -12px rgba(15, 23, 42, 0.28);
}

/* a conta da parada em curso: a cena fica esmaecida (o resultado anterior) e o cursor espera */
.pc-waiting {
  cursor: progress;
}
.pc-waiting canvas,
.pc-waiting .pc-host {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

/* ------------------------------ a caixa do card ------------------------------ */

.pc-card {
  position: relative;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 6px 14px -6px rgba(15, 23, 42, 0.22);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, width 0.3s ease,
    border-color 0.25s ease;
}
.pc-pin:hover .pc-card {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 16px 32px -8px rgba(15, 23, 42, 0.28);
}
/* a seleção vem ANTES do estado (a ordem da demo): selecionado em perigo continua vermelho */
.pc-pin[data-sel='1'] .pc-card {
  border-color: #0066ff;
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.35), 0 16px 32px -8px rgba(15, 23, 42, 0.28);
}
/* a borda é o estado (o `borderOf` do 2D, tom 400: numa planta toda normal são trinta verdes) */
.pc-pin[data-st='S'] .pc-card {
  border-color: #4ade80;
}
.pc-pin[data-st='W'] .pc-card {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18), 0 18px 36px -12px rgba(15, 23, 42, 0.28);
}
.pc-pin[data-st='D'] .pc-card {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18), 0 18px 36px -12px rgba(15, 23, 42, 0.28);
}
/* ⭐ a RESERVA: o card fica tracejado em violeta (a cor da ligação de reserva) */
.pc-pin[data-res='1'] .pc-card {
  border-style: dashed !important;
  border-color: #8b5cf6 !important;
}
/* a máquina que parou: borda vermelho-escura grossa, a chave no canto e a pulsação */
.pc-pin[data-origin='1'] .pc-card {
  border-color: #7f1d1d !important;
  border-width: 2px;
  box-shadow: 0 0 0 4px rgba(127, 29, 29, 0.18), 0 18px 36px -12px rgba(15, 23, 42, 0.35) !important;
  animation: origin 1.6s ease-in-out infinite;
}
@keyframes origin {
  50% {
    box-shadow: 0 0 0 9px rgba(220, 38, 38, 0.1), 0 18px 36px -12px rgba(15, 23, 42, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pc-pin[data-origin='1'] .pc-card {
    animation: none;
  }
}

/* o bico que aponta para o chão */
.pc-tail {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.95);
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  transform: translate(-50%, -5px) rotate(45deg);
}
.pc-pin[data-sel='1'] .pc-tail {
  border-color: #0066ff;
}
.pc-pin[data-st='S'] .pc-tail {
  border-color: #4ade80;
}
.pc-pin[data-st='W'] .pc-tail {
  border-color: #fbbf24;
}
.pc-pin[data-st='D'] .pc-tail {
  border-color: #f87171;
}
.pc-pin[data-origin='1'] .pc-tail {
  border-color: #7f1d1d;
}

.pc-originBadge {
  display: none;
  position: absolute;
  left: -11px;
  top: -11px;
  z-index: 5;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #7f1d1d;
  color: #fff;
  place-items: center;
  box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(127, 29, 29, 0.45);
}
.pc-pin[data-origin='1'] .pc-originBadge {
  display: grid;
}
.pc-host[data-lod='pin'] .pc-pin[data-origin='1'] .pc-originBadge {
  left: auto;
  right: -6px;
  top: -8px;
}

/* ---------------------------- as camadas de zoom ---------------------------- */

/* PERTO: o card inteiro */
.pc-host[data-lod='full'] .pc-card {
  width: 244px;
}
.pc-host[data-lod='full'] .pc-pin[data-kind='buffer'] .pc-card {
  width: 256px;
}
.pc-host[data-lod='full'] .pc-mini,
.pc-host[data-lod='full'] .pc-avatar {
  display: none;
}

/* NO MEIO: a foto pequena ao lado do nome, sempre */
.pc-host[data-lod='compact'] .pc-card {
  width: 184px;
}
.pc-host[data-lod='compact'] .pc-pin[data-online='1'] .pc-card {
  width: 232px;
}
.pc-host[data-lod='compact'] .pc-full,
.pc-host[data-lod='compact'] .pc-avatar {
  display: none;
}

/* LONGE: a foto num círculo com o anel do estado. 🔴 A caixa do card não desenha NADA
   além do círculo — era ela o "retângulo fantasma" da demo. */
.pc-host[data-lod='pin'] .pc-card,
.pc-host[data-lod='pin'] .pc-pin:hover .pc-card {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible;
  margin-bottom: 6px;
  width: auto !important;
  animation: none;
}
.pc-host[data-lod='pin'] .pc-full,
.pc-host[data-lod='pin'] .pc-mini,
.pc-host[data-lod='pin'] .pc-tail,
.pc-host[data-lod='pin'] .pc-band {
  display: none !important;
}

/* ------------------------------- CARD INTEIRO ------------------------------- */

.pc-strip {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.pc-strip[data-st='S'] {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.pc-strip[data-st='W'] {
  background: #fffbeb;
  border-color: #fde68a;
}
.pc-strip[data-st='D'] {
  background: #fef2f2;
  border-color: #fecaca;
}
.pc-stripLabel {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-age {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.pc-photo {
  width: 100%;
  height: 124px;
  background: #f1f5f9 center / cover no-repeat;
  box-shadow: inset 0 -24px 24px -18px rgba(15, 23, 42, 0.35);
}
/* ⚠️ Sem `.illustration`: no card do 3D, sem foto é "Sem Imagem" mesmo com tipo — a forma
   já está na cena logo abaixo (dono, 27/09 · ADR-2026-09-27-3). */
.pc-body {
  padding: 9px 11px 10px;
}
.pc-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* o tipo do ativo, uma linha discreta abaixo do nome (só no card inteiro) */
.pc-typeLine {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-typeLine span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-nick {
  font-weight: 400;
  color: #64748b;
}
.pc-suspect {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid;
}
.pc-suspect span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-suspect[data-st='D'] {
  color: #dc2626;
  border-color: #fecaca;
  background: rgba(254, 242, 242, 0.7);
}
.pc-suspect[data-st='W'] {
  color: #d97706;
  border-color: #fde68a;
  background: rgba(255, 251, 235, 0.7);
}
.pc-measure {
  margin-top: 8px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.pc-measure b {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pc-measure small {
  font-size: 9.5px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 1px;
}
.pc-measure span {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
/* ⭐ o RESERVA: a faixa diz o papel */
.pc-reserve {
  margin-top: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 4px;
  background: #f5f3ff;
  color: #6d28d9;
  font-size: 10.5px;
  line-height: 1.3;
}
.pc-reserve[data-protected='1'] {
  background: #fff;
  border: 1px solid #ddd6fe;
}
.pc-reserve span,
.pc-spare span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-reserve svg,
.pc-spare svg {
  flex: none;
}
/* o sobressalente: neutro (não é estado nem reserva), com a caixa do estoque */
.pc-spare {
  margin-top: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 10.5px;
  line-height: 1.3;
}
.pc-spare svg {
  color: #0369a1;
}

/* os SENSORES: dentro do card, no rodapé, com divisória */
.pc-sensors {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}
.pc-sensorsLabel {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: #0369a1;
}
.pc-sensorThumbs {
  display: flex;
  gap: 6px;
}
.pc-sensor {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #e2e8f0;
  display: grid;
  place-items: center;
  color: #0369a1;
}
.pc-sensor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}
.pc-sensor[data-mute='1'] img {
  filter: grayscale(1) opacity(0.55);
}
/* o ESTADO do sensor no canto: o ícone da leitura dele (check, alerta, sirene) — a demo */
.pc-sensorState {
  position: absolute;
  right: -5px;
  top: -5px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
}

/* PULMÃO, ENTRADA, SAÍDA */
.pc-kind {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.pc-kindBadge {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0, 102, 255, 0.1);
  color: #0066ff;
  display: grid;
  place-items: center;
}
.pc-kindName {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
}
/* ⭐ A AUTONOMIA É O NÚMERO DO PULMÃO, com a régua de segmentos que a simulação consome */
.pc-autonomy {
  margin-top: 10px;
  padding: 10px;
  border-radius: 6px;
  background: rgba(0, 102, 255, 0.05);
  border: 1px solid rgba(0, 102, 255, 0.14);
}
.pc-autonomyTop {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pc-autonomyTop svg {
  color: #0066ff;
  align-self: center;
}
.pc-autonomyTop b {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.pc-autonomyTop small {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}
.pc-segs {
  display: flex;
  gap: 3px;
  margin-top: 9px;
}
.pc-segs i {
  flex: 1;
  height: 7px;
  border-radius: 2px;
  background: #93b8ff;
  transition: background 0.4s ease;
}
.pc-segs i[data-s='held'] {
  background: #22c55e;
}
.pc-segs i[data-s='low'] {
  background: #f59e0b;
}
.pc-segs i[data-s='used'] {
  background: #e2e8f0;
}
.pc-autonomy p {
  margin: 7px 0 0;
  font-size: 10.5px;
  line-height: 1.4;
  color: #64748b;
}
.pc-spill {
  margin-top: 7px;
  font-size: 11px;
  font-weight: 700;
  color: #d97706;
}
/* sem autonomia: uma linha só — é um aviso de cadastro, não um alarme */
.pc-noCapacity {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #b45309;
}

/* a FAIXA DA CENA: quando o card tem papel na parada, ela diz qual */
.pc-band {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  /* ⭐ (03/10) a faixa diz o fato por escrito: quebra em até duas linhas, nunca corta */
  line-height: 1.3;
}
.pc-band span {
  min-width: 0;
}
.pc-host[data-lod='compact'] .pc-band {
  padding: 5px 8px;
  font-size: 10.5px;
}


/* --------------------------------- COMPACTO --------------------------------- */

.pc-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
}
.pc-thumb {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 4px;
  background: #f1f5f9 center / cover no-repeat;
  display: grid;
  place-items: center;
  color: #94a3b8;
}
.pc-miniName {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-miniStatus {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-miniMeasure {
  flex: none;
  text-align: right;
  line-height: 1;
}
.pc-miniMeasure b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pc-miniMeasure small {
  font-size: 9px;
  font-weight: 600;
  color: #94a3b8;
}
.pc-wifi {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #0369a1;
  background: #f0f9ff;
}
.pc-capChip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #0066ff;
  background: rgba(0, 102, 255, 0.08);
  font-variant-numeric: tabular-nums;
}
.pc-capChip[data-warn='1'] {
  color: #d97706;
  background: #fffbeb;
}

/* --------------------------------- ALFINETE --------------------------------- */

.pc-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.pc-ring {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  padding: 3px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 6px 16px -4px rgba(15, 23, 42, 0.28);
  transition: transform 0.25s ease;
}
.pc-ringFace {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #f8fafc center / cover no-repeat;
  display: grid;
  place-items: center;
  color: #94a3b8;
}
.pc-pin:hover .pc-ring {
  transform: scale(1.12);
}
.pc-pin[data-st='S'] .pc-ring {
  background: #4ade80;
}
.pc-pin[data-st='W'] .pc-ring {
  background: #d97706;
}
.pc-pin[data-st='D'] .pc-ring {
  background: #dc2626;
}
.pc-pin[data-sel='1'] .pc-ring {
  background: #0066ff;
}
.pc-pin[data-origin='1'] .pc-ring {
  background: #7f1d1d !important;
}
.pc-pin[data-res='1'] .pc-ring {
  background: repeating-conic-gradient(#8b5cf6 0 12deg, #fff 12deg 22deg) !important;
}
/* o estado do alfinete: o mesmo ícone da leitura, no canto do anel */
.pc-statusDot {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
}
.pc-label {
  display: none;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}
.pc-host[data-lod='pin'] .pc-label {
  display: block;
}
/* o alfinete que não cabe sem cair em cima de outro espera o zoom */
.pc-host[data-lbl='hidden'] {
  visibility: hidden;
}
.pc-host[data-lbl='short'] .pc-labelNick {
  display: none;
}
.pc-host[data-lbl='none'] .pc-label {
  display: none !important;
}
.pc-host[data-lbl='none'] .pc-pin:hover .pc-label {
  display: block !important;
}
.pc-labelNick {
  font-weight: 500;
  color: #64748b;
}
/* a informação da camada NÃO some quando o nome encurta: ela é o assunto da vista */
.pc-labelInfo {
  font-weight: 600;
  color: #475569;
}
.pc-label[data-role='1'] {
  color: #fff;
}
/* 🔴 com a etiqueta pintada pela simulação (laranja/vermelho) o apelido continuava no cinza
   #64748b e sumia no fundo (dono, 03/10: "o nome fica cinza e fica ruim de ver") */
.pc-label[data-role='1'] .pc-labelNick {
  color: rgba(255, 255, 255, 0.85);
}


/* ---- SÓ DA DEMONSTRAÇÃO (não é do produto): a entrada dos cartões (demo.css, `.plant-card.in > div`)
   fixa opacity 1 com mais especificidade e apagava o recuo da cena da parada. Os mesmos valores
   de cima, com a especificidade da entrada. ---- */
.plant-card.in > .pc-pin[data-dim='1'] { opacity: 0.22; }
.plant-card.in > .pc-pin[data-soft='1'] { opacity: 0.25; }
.plant-card.in > .pc-pin[data-recede='1'] { opacity: 0.32; }

/* =============================================================================
   ⭐ A RONDA e a TV (etapas 15 e 20): o que fica preso à cena no lugar dos cartões.
   Porte de synchrone/src/components/pages/Plant/plant3d/tour/TourSceneMarks.tsx
   (TourMachineTag · TourStopBadge), com o tamanho escalado por --k como no produto.
============================================================================= */
.tour-tagHost,
.tour-badgeHost {
  pointer-events: none;
}
.tour-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  border-radius: 0.125rem;
  border: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.95);
  padding: 3px 7px;
  font-size: calc(13px * var(--k, 0.78));
  font-weight: 600;
  color: #334155;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.tour-tagBadge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 9999px;
  width: calc(22px * var(--k, 0.78));
  height: calc(22px * var(--k, 0.78));
  margin: -1px 0 -1px -3px;
}
.tour-tagName {
  flex-shrink: 0;
}
.tour-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.tour-badgeNum {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  border: 1.5px solid #0066ff;
  background: #fff;
  color: #0066ff;
  font-weight: 700;
  min-width: calc(22px * var(--k, 0.78));
  height: calc(22px * var(--k, 0.78));
  padding: 0 calc(5px * var(--k, 0.78));
  font-size: calc(12px * var(--k, 0.78));
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
}
.tour-badge[data-current='1'] .tour-badgeNum {
  background: #0066ff;
  color: #fff;
}
.tour-badgeEdge {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.9);
  padding: 0 5px;
  font-weight: 700;
  font-size: calc(11px * var(--k, 0.78));
  color: #0066ff;
}