.passport-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 22px;
  align-items: end;
  margin: 0 0 18px;
  padding: 24px;
  border: 1px solid rgba(83, 190, 218, 0.3);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 12%, rgba(52, 210, 229, 0.13), transparent 32%),
    linear-gradient(145deg, rgba(8, 38, 54, 0.98), rgba(5, 24, 37, 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.passport-hero h2,
.passport-panel h3,
.passport-section-panel h3 {
  margin: 0;
}

.passport-hero-copy > p:not(.eyebrow) {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--muted, #9db0bb);
}

.passport-title-line {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.passport-product-badge,
.passport-key-status,
.passport-panel .section-head > span,
.passport-section-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(53, 218, 237, 0.32);
  border-radius: 999px;
  background: rgba(33, 174, 197, 0.09);
  color: #58e4f2;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.passport-generated {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  color: var(--muted, #9db0bb);
  font-size: 0.82rem;
}

.passport-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #667986;
  box-shadow: 0 0 0 4px rgba(102, 121, 134, 0.12);
}

.passport-live-dot.is-live {
  background: #43d69b;
  box-shadow: 0 0 0 4px rgba(67, 214, 155, 0.14), 0 0 12px rgba(67, 214, 155, 0.4);
}

.passport-live-dot.is-error {
  background: #ff6c7a;
  box-shadow: 0 0 0 4px rgba(255, 108, 122, 0.15);
}

.passport-hero-actions {
  display: grid;
  gap: 12px;
}

.passport-hero-actions label {
  margin: 0;
}

.passport-hero-actions > div {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.passport-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.passport-status-card {
  position: relative;
  min-width: 0;
  padding: 17px 18px;
  overflow: hidden;
  border: 1px solid rgba(123, 158, 176, 0.23);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(12, 42, 58, 0.96), rgba(7, 29, 43, 0.98));
}

.passport-status-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #718995;
}

.passport-status-card span,
.passport-status-card small {
  display: block;
  color: var(--muted, #9db0bb);
}

.passport-status-card span {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.passport-status-card strong {
  display: block;
  margin: 6px 0 4px;
  color: #f5fbfd;
  font-size: 1.35rem;
}

.passport-status-card small {
  line-height: 1.35;
}

.passport-state-online::before,
.passport-state-healthy::before,
.passport-state-valid::before,
.passport-state-complete::before { background: #43d69b; }
.passport-state-stale::before,
.passport-state-degraded::before,
.passport-state-partial::before { background: #f2bc59; }
.passport-state-offline::before,
.passport-state-fault::before,
.passport-state-attention::before { background: #ff6c7a; }
.passport-state-unknown::before,
.passport-state-no_data::before { background: #718995; }

.passport-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.passport-grid-primary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.passport-grid-diagnostics {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.passport-panel,
.passport-section-panel {
  min-width: 0;
}

.passport-section-panel {
  margin-bottom: 18px;
}

.passport-section-head {
  align-items: flex-start;
}

.passport-section-head p:not(.eyebrow) {
  margin: 7px 0 0;
  color: var(--muted, #9db0bb);
  font-size: 0.86rem;
}

.passport-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 12px 0 0;
}

.passport-detail-list > div {
  min-width: 0;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(120, 155, 174, 0.13);
}

.passport-detail-list dt {
  margin-bottom: 5px;
  color: var(--muted, #9db0bb);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.passport-detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #edf8fb;
  font-weight: 650;
  line-height: 1.35;
}

.passport-summary-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.passport-summary-pill {
  padding: 6px 9px;
  border: 1px solid rgba(120, 155, 174, 0.22);
  border-radius: 999px;
  color: #cfe0e7;
  font-size: 0.75rem;
}

.passport-summary-pill strong {
  margin-right: 4px;
  color: #fff;
}

.passport-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin-top: 16px;
}

.passport-capability-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(120, 155, 174, 0.2);
  border-radius: 13px;
  background: rgba(8, 31, 44, 0.58);
}

.passport-capability-card.is-available { border-color: rgba(67, 214, 155, 0.32); }
.passport-capability-card.is-partial { border-color: rgba(242, 188, 89, 0.38); }
.passport-capability-card.is-missing { border-color: rgba(255, 108, 122, 0.42); }
.passport-capability-card.is-not_installed { opacity: 0.67; }

.passport-capability-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.passport-capability-head strong {
  color: #f2fafc;
}

.passport-capability-state {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(114, 141, 154, 0.14);
  color: #bfd0d8;
  font-size: 0.68rem;
  font-weight: 700;
}

.passport-capability-card.is-available .passport-capability-state { color: #65e5b1; background: rgba(67, 214, 155, 0.11); }
.passport-capability-card.is-partial .passport-capability-state { color: #f5c873; background: rgba(242, 188, 89, 0.12); }
.passport-capability-card.is-missing .passport-capability-state { color: #ff8792; background: rgba(255, 108, 122, 0.12); }

.passport-capability-card p {
  min-height: 38px;
  margin: 9px 0;
  color: var(--muted, #9db0bb);
  font-size: 0.78rem;
  line-height: 1.45;
}

.passport-capability-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #b9cbd3;
  font-size: 0.72rem;
}

.passport-capability-bar {
  display: block;
  height: 4px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(120, 155, 174, 0.13);
}

.passport-capability-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #36d6e8;
}

.passport-key-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 16px 0;
}

.passport-key-summary > div {
  padding: 11px;
  border: 1px solid rgba(120, 155, 174, 0.16);
  border-radius: 11px;
  background: rgba(7, 28, 41, 0.48);
}

.passport-key-summary span,
.passport-key-summary strong {
  display: block;
}

.passport-key-summary span {
  color: var(--muted, #9db0bb);
  font-size: 0.72rem;
}

.passport-key-summary strong {
  margin-top: 5px;
  color: #f5fbfd;
  font-size: 1.15rem;
}

.passport-diagnostic-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.passport-diagnostic-columns h4 {
  margin: 0 0 8px;
  color: #dfecef;
  font-size: 0.86rem;
}

.passport-key-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 34px;
  padding: 10px;
  border: 1px solid rgba(120, 155, 174, 0.14);
  border-radius: 10px;
  background: rgba(6, 25, 37, 0.42);
}

.passport-key-tag {
  padding: 4px 7px;
  border-radius: 7px;
  background: rgba(102, 132, 146, 0.13);
  color: #c9d9df;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
}

.passport-key-tag.is-missing { color: #ff929c; background: rgba(255, 108, 122, 0.1); }
.passport-key-tag.is-ok { color: #69e4b3; background: rgba(67, 214, 155, 0.09); }

.passport-key-details {
  margin-top: 14px;
  border-top: 1px solid rgba(120, 155, 174, 0.14);
  padding-top: 12px;
}

.passport-key-details summary {
  cursor: pointer;
  color: #7ee8f2;
  font-weight: 650;
}

.passport-key-contract {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.passport-key-contract-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 8px;
  background: rgba(6, 25, 37, 0.48);
  font-size: 0.73rem;
}

.passport-key-contract-row code {
  overflow-wrap: anywhere;
  color: #cfe0e7;
}

.passport-key-contract-row span {
  flex: 0 0 auto;
  color: #718995;
}

.passport-key-contract-row.is-available span { color: #69e4b3; }
.passport-key-contract-row.is-missing span { color: #ff929c; }

.passport-health-content {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.passport-health-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(120, 155, 174, 0.13);
}

.passport-health-row span { color: var(--muted, #9db0bb); }
.passport-health-row strong { color: #edf8fb; overflow-wrap: anywhere; }
.passport-health-errors { display: grid; gap: 6px; }
.passport-health-error { padding: 8px 10px; border-radius: 8px; background: rgba(255, 108, 122, 0.09); color: #ff9ba5; }

.passport-maintenance-list {
  grid-template-columns: 1fr;
  margin-top: 14px;
}

.passport-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin-top: 15px;
}

.passport-profile-card {
  padding: 14px;
  border: 1px solid rgba(83, 190, 218, 0.2);
  border-radius: 12px;
  background: rgba(8, 31, 44, 0.52);
}

.passport-profile-card strong,
.passport-profile-card span {
  display: block;
}

.passport-profile-card strong { color: #edf8fb; }
.passport-profile-card span { margin-top: 6px; color: var(--muted, #9db0bb); font-size: 0.78rem; }

.passport-empty {
  grid-column: 1 / -1;
  padding: 22px;
  border: 1px dashed rgba(120, 155, 174, 0.25);
  border-radius: 12px;
  color: var(--muted, #9db0bb);
  text-align: center;
}

.passport-error {
  min-height: 22px;
  margin-top: 0;
}

.monitoring-profile-strip {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(420px, 1.35fr) auto;
  gap: 16px;
  align-items: center;
  margin: 18px 0;
  padding: 15px 17px;
  border: 1px solid rgba(83, 190, 218, 0.24);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(9, 39, 54, 0.92), rgba(6, 27, 40, 0.96));
}

.monitoring-profile-main,
.monitoring-profile-main span,
.monitoring-profile-main strong {
  display: block;
}

.monitoring-profile-kicker {
  color: #59dce9;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.monitoring-profile-main strong {
  margin: 4px 0;
  color: #f1fafd;
  font-size: 1.02rem;
}

.monitoring-profile-main > span:last-child {
  color: var(--muted, #9db0bb);
  font-size: 0.76rem;
}

.monitoring-profile-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.monitoring-profile-facts span {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 9px;
  background: rgba(4, 22, 33, 0.42);
}

.monitoring-profile-facts small,
.monitoring-profile-facts strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitoring-profile-facts small { color: var(--muted, #9db0bb); font-size: 0.66rem; }
.monitoring-profile-facts strong { margin-top: 3px; color: #eaf6f9; font-size: 0.78rem; }

.operations-device-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.operations-device-passport {
  min-width: 108px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(68, 211, 229, 0.28);
  border-radius: 10px;
  background: rgba(39, 181, 204, 0.08);
  color: #74e5ef;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
}

@media (max-width: 1180px) {
  .passport-capability-grid,
  .passport-profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .monitoring-profile-strip { grid-template-columns: 1fr auto; }
  .monitoring-profile-facts { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 900px) {
  .passport-hero,
  .passport-grid-diagnostics { grid-template-columns: 1fr; }
  .passport-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passport-capability-grid,
  .passport-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .passport-grid-primary { grid-template-columns: 1fr; }
  .passport-detail-list,
  .passport-key-summary,
  .passport-key-contract { grid-template-columns: 1fr; }
  .passport-diagnostic-columns { grid-template-columns: 1fr; }
  .monitoring-profile-strip { grid-template-columns: 1fr; }
  .monitoring-profile-facts { grid-column: auto; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitoring-passport-open { width: 100%; }
}

@media (max-width: 480px) {
  .passport-hero { padding: 18px; }
  .passport-hero-actions > div { display: grid; grid-template-columns: 1fr; }
  .passport-hero-actions button { width: 100%; }
  .passport-status-grid,
  .passport-capability-grid,
  .passport-profile-grid { grid-template-columns: 1fr; }
  .passport-health-row { grid-template-columns: 1fr; gap: 4px; }
  .passport-summary-pills { justify-content: flex-start; }
}

@media (max-width: 430px) {
  .operations-device-actions {
    width: 100%;
  }

  .operations-device-actions > button {
    flex: 1 1 100%;
    width: 100%;
  }
}