.identity-page {
  max-width: 1250px;
  margin: 0 auto;
  padding: 24px 0;
}
.identity-intro {
  margin-bottom: 24px;
}
.identity-intro p {
  max-width: 850px;
  color: #a7a5b3;
  line-height: 1.7;
}
.identity-card,
.identity-issuer,
.identity-empty,
.identity-provision {
  background: linear-gradient(135deg, #22222b, #16151d);
  border: 1px solid #393344;
  border-radius: 20px;
  padding: 24px;
  margin: 0 0 20px;
  color: #eeeaf5;
}
.identity-card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.identity-card h3 {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.identity-kind,
.identity-card small {
  display: block;
  color: #aaa5b8;
  font-size: 12px;
}
.identity-badge {
  border: 1px solid #665080;
  border-radius: 30px;
  padding: 7px 12px;
  font-size: 12px;
  color: #cfb6ff;
  flex-shrink: 0;
}
.identity-activated {
  border-color: #3a7561;
  color: #9adbc1;
}
.identity-revoked {
  border-color: #a55063;
  color: #ffb4c2;
}
.identity-guidance {
  color: #beb8ca;
  line-height: 1.7;
  margin: 20px 0;
}
.identity-note {
  background: #3a2d1d;
  color: #efcc92;
  border-radius: 10px;
  padding: 12px;
}
.identity-facts {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr);
  gap: 10px 24px;
  margin: 20px 0;
  font-size: 13px;
}
.identity-facts dt {
  color: #aaa5b8;
}
.identity-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.identity-card details {
  border-top: 1px solid #3a3446;
  padding-top: 16px;
}
.identity-card summary {
  cursor: pointer;
  font-weight: 600;
}
.identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.identity-actions p {
  flex-basis: 100%;
}
.identity-actions input {
  flex: 1 1 100%;
  min-width: 0;
}
.identity-actions button,
.identity-empty button,
.identity-provision button {
  border: 1px solid #735295;
  border-radius: 10px;
  padding: 10px 16px;
  background: #6742a0;
  color: #fff;
  cursor: pointer;
}
.identity-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.identity-history {
  padding-left: 22px;
  max-height: 380px;
  overflow: auto;
}
.identity-history li {
  padding: 8px 0;
}
.identity-history p {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.identity-issuer p {
  font-family: monospace;
  overflow-wrap: anywhere;
  font-size: 12px;
}
.identity-empty {
  padding: 32px;
  text-align: center;
}
.identity-error {
  border-color: #b45a6d;
}
.identity-provision form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.identity-provision label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.identity-provision input,
.identity-provision select,
.identity-actions input {
  background: #121019;
  color: #f1ecfa;
  border: 1px solid #52465f;
  border-radius: 9px;
  padding: 12px;
}
.identity-provision .identity-wide {
  grid-column: 1/-1;
}
.identity-status {
  min-height: 24px;
  color: #cbb4ee;
  overflow-wrap: anywhere;
}
@media (max-width: 650px) {
  .identity-card,
  .identity-provision {
    padding: 18px;
  }
  .identity-card-head {
    flex-direction: column;
  }
  .identity-facts {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .identity-facts dd {
    margin-bottom: 10px;
  }
  .identity-provision form {
    grid-template-columns: 1fr;
  }
  .identity-badge {
    white-space: normal;
  }
  .identity-page {
    padding: 12px 0;
  }
}
#device-activation-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 20px;
}
#device-activation-list > .identity-card {
  margin: 0;
}
.identity-facts dt {
  overflow-wrap: anywhere;
}
#device-activation-list > .identity-empty {
  grid-column: 1/-1;
}
.identity-card-head {
  flex-wrap: wrap;
}
.identity-provision > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
}
.identity-provision[open] > summary {
  margin-bottom: 18px;
}
.commissioning-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
}
.commissioning-steps li {
  background: #14111b;
  border: 1px solid #44394e;
  border-radius: 12px;
  padding: 12px;
}
.commissioning-steps strong,
.commissioning-steps span {
  display: block;
}
.commissioning-steps span {
  font-size: 12px;
  color: #bfb4cf;
  margin-top: 8px;
}
.commissioning-code {
  font-size: 24px;
  letter-spacing: 3px;
  font-family: monospace;
  padding: 18px;
  background: #15111e;
  border: 1px solid #8562af;
  border-radius: 12px;
  color: #e1c6ff;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.commissioning-approval {
  display: grid;
  gap: 16px;
  margin: 22px 0;
}
.commissioning-approval label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.commissioning-approval input[type="checkbox"] {
  width: 20px;
  min-width: 20px;
  height: 20px;
}
.commissioning-approval input:not([type="checkbox"]) {
  background: #15111e;
  color: #eee;
  border: 1px solid #69537e;
  padding: 12px;
  border-radius: 8px;
}
.commissioning-card > button,
.commissioning-approval button {
  padding: 12px 18px;
  border: 1px solid #9e79c9;
  border-radius: 9px;
  background: #694296;
  color: white;
  cursor: pointer;
}
.commissioning-card > button {
  background: transparent;
}
.commissioning-card button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}