.ppc-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  color: #f7f1e6;
}

.ppc-panel[hidden] {
  display: none !important;
}

.ppc-status-catalog,
.ppc-list-card {
  border: 1px solid rgba(214, 177, 94, 0.22);
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    rgba(29, 25, 18, 0.98),
    rgba(18, 16, 12, 0.98)
  );
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.ppc-project-selector {
  display: grid;
  gap: 6px;
  min-width: min(320px, 100%);
}

.ppc-project-selector span {
  color: #a59c8d;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.ppc-project-selector select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(221, 190, 119, 0.25);
  border-radius: 11px;
  background: #17140f;
  color: #fff8eb;
  font: inherit;
  font-weight: 750;
}

.ppc-project-selector select:focus {
  border-color: rgba(236, 187, 70, 0.72);
  outline: none;
  box-shadow: 0 0 0 3px rgba(236, 187, 70, 0.08);
}

.ppc-status-catalog {
  padding: 14px 16px 16px;
}

.ppc-status-heading,
.ppc-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ppc-status-heading {
  align-items: end;
  margin-bottom: 11px;
}

.ppc-status-copy {
  display: grid;
  gap: 3px;
}

.ppc-status-heading strong,
.ppc-list-heading strong {
  color: #fff4df;
}

.ppc-status-heading small,
.ppc-list-heading span {
  color: #8f887d;
  font-size: 0.72rem;
}

.ppc-status-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ppc-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(224, 216, 196, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: #ddd5c9;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.ppc-status.is-em-execucao,
.ppc-status.is-construindo-agora,
.ppc-status.is-arquitetando-agora,
.ppc-status.is-testando-agora,
.ppc-status.is-publicando {
  border-color: rgba(49, 137, 255, 0.5);
  background: rgba(12, 112, 232, 0.18);
  color: #8fc4ff;
}

.ppc-status.is-testado,
.ppc-status.is-publicado,
.ppc-status.is-concluido,
.ppc-status.is-pronto-para-construir {
  border-color: rgba(64, 201, 126, 0.45);
  background: rgba(43, 162, 99, 0.14);
  color: #8de1b2;
}

.ppc-status.is-bloqueado,
.ppc-status.is-falhou {
  border-color: rgba(232, 91, 91, 0.48);
  background: rgba(178, 52, 52, 0.14);
  color: #ffaaaa;
}

.ppc-status.is-aguardando-construcao,
.ppc-status.is-aguardando-analise,
.ppc-status.is-aguardando-aprovacao,
.ppc-status.is-em-planejamento,
.ppc-status.is-corrigindo {
  border-color: rgba(230, 183, 70, 0.42);
  background: rgba(230, 183, 70, 0.1);
  color: #f4c65e;
}

.ppc-list-card {
  overflow: hidden;
}

.ppc-list-heading {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(226, 215, 189, 0.11);
}

.ppc-list-heading > div {
  display: grid;
  gap: 3px;
}

.ppc-mock-badge {
  padding: 5px 8px;
  border: 1px solid rgba(230, 183, 70, 0.35);
  border-radius: 8px;
  background: rgba(230, 183, 70, 0.08);
  color: #e9bd58 !important;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.ppc-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ppc-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(150px, auto);
  gap: 12px;
  align-items: center;
  min-height: 50px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(226, 215, 189, 0.075);
}

.ppc-row:last-child {
  border-bottom: 0;
}

.ppc-row:hover {
  background: rgba(255, 255, 255, 0.025);
}

.ppc-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(214, 177, 94, 0.24);
  border-radius: 9px;
  background: rgba(214, 177, 94, 0.07);
  color: #e7bd62;
  font-size: 0.75rem;
  font-weight: 900;
}

.ppc-task {
  min-width: 0;
  color: #eee7db;
  font-size: 0.82rem;
  font-weight: 700;
}

@media (max-width: 760px) {
  .ppc-status-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .ppc-project-selector {
    min-width: 0;
    width: 100%;
  }

  .ppc-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .ppc-row .ppc-status {
    grid-column: 2;
    justify-self: start;
  }
}