#page-system[data-phase5-root]:not(.phase5-ready) {
  visibility: visible;
}

.tp-system-panel {
  margin-bottom: 1.25rem;
}

.tp-system-tabs {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  padding: .55rem 1.15rem 0;
  border-bottom: 1px solid #eef2f8;
  background: #fbfcff;
}

.tp-system-tab {
  position: relative;
  min-height: 38px;
  padding: .5rem .78rem .62rem;
  border: 0;
  background: transparent;
  color: #64708c;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.tp-system-tab::after {
  position: absolute;
  right: .65rem;
  bottom: -1px;
  left: .65rem;
  height: 2px;
  border-radius: 999px 999px 0 0;
  background: transparent;
  content: "";
}

.tp-system-tab:hover { color: #2f6ae6; }
.tp-system-tab.is-active { color: #1e50c4; }
.tp-system-tab.is-active::after { background: #2f6ae6; }

.tp-system-body {
  min-height: 220px;
}

.tp-system-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: .45rem;
  border: 2px solid #d7e2f3;
  border-top-color: #2f6ae6;
  border-radius: 50%;
  vertical-align: -2px;
  animation: tp-system-spin .7s linear infinite;
}

@keyframes tp-system-spin { to { transform: rotate(360deg); } }

.tp-system-access {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem;
  border: 1px solid #e1e7f0;
  border-radius: 11px;
  background: #f8fafc;
  color: #475470;
}

.tp-system-access > i {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 11px;
  background: #eef2f8;
  color: #64708c;
}

.tp-system-access strong { color: #1c2b4a; font-size: 12px; }
.tp-system-access p { margin-top: .2rem; color: #7a859d; font-size: 11px; }

.tp-system-kpis small {
  display: block;
  margin-top: .25rem;
  color: #7a859d;
  font-size: 9px;
  font-weight: 600;
}

.tp-system-grid {
  display: grid;
  gap: .8rem;
}

.tp-system-grid--environment,
.tp-system-grid--integrations {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-system-card,
.tp-system-integration {
  min-width: 0;
  padding: .85rem .9rem;
  border: 1px solid #e7edf6;
  border-radius: 11px;
  background: #fff;
}

.tp-system-card__title {
  display: flex;
  align-items: center;
  gap: .42rem;
  margin-bottom: .65rem;
  color: #1c2b4a;
  font-size: 12px;
  font-weight: 900;
}

.tp-system-card__title i { color: #2f6ae6; }

.tp-system-definition {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.tp-system-definition > div {
  min-width: 0;
  padding: .5rem .58rem;
  border-radius: 8px;
  background: #f7f9fd;
}

.tp-system-definition dt {
  color: #7a859d;
  font-size: 9px;
  font-weight: 700;
}

.tp-system-definition dd {
  margin-top: .15rem;
  overflow-wrap: anywhere;
  color: #273654;
  font-size: 11px;
  font-weight: 800;
}

.tp-system-definition code,
.tp-system-table code,
.tp-system-panel td code {
  color: #1e50c4;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.tp-system-callout {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-top: .8rem;
  padding: .72rem .8rem;
  border: 1px solid #dbe7f8;
  border-radius: 10px;
  background: #f3f7fe;
  color: #53617d;
}

.tp-system-callout > i {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #eaf1fe;
  color: #2f6ae6;
}

.tp-system-callout strong { color: #273654; font-size: 11px; }
.tp-system-callout p { margin-top: .15rem; font-size: 10px; line-height: 1.55; }

.tp-system-callout--warning {
  border-color: rgba(245, 166, 35, .28);
  background: rgba(245, 166, 35, .07);
}

.tp-system-callout--warning > i {
  background: rgba(245, 166, 35, .13);
  color: #a96606;
}

.tp-system-callout--success {
  border-color: rgba(34, 165, 88, .24);
  background: rgba(34, 165, 88, .06);
}

.tp-system-callout--success > i {
  background: rgba(34, 165, 88, .12);
  color: #168046;
}

.tp-system-callout--compact {
  margin: .7rem 0;
  padding: .55rem .6rem;
}

.tp-system-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin: 1rem 0 .6rem;
  color: #1c2b4a;
  font-size: 12px;
  font-weight: 900;
}

.tp-system-section-title:first-child { margin-top: 0; }
.tp-system-section-title small { color: #7a859d; font-size: 9px; font-weight: 600; }

.tp-system-block + .tp-system-block {
  margin-top: 1.1rem;
  padding-top: .2rem;
  border-top: 1px solid #eef2f8;
}

.tp-system-integration__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .7rem;
}

.tp-system-integration__head strong {
  display: block;
  color: #1c2b4a;
  font-size: 12px;
  font-weight: 900;
}

.tp-system-integration__head small {
  display: block;
  margin-top: .15rem;
  color: #7a859d;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9px;
}

.tp-system-integration__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: .65rem;
  color: #64708c;
  font-size: 10px;
  font-weight: 700;
}

.tp-system-integration__meta i { margin-right: .25rem; color: #2f6ae6; }

.tp-system-pending {
  margin-top: .22rem;
  color: #a96606;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.4;
}

.tp-system-wide-table { min-width: 900px; }
.tp-system-backup-table { min-width: 1120px; }

.tp-system-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: .65rem;
  align-items: end;
  margin-bottom: .8rem;
  padding: .75rem;
  border: 1px solid #eef2f8;
  border-radius: 10px;
  background: #fafcff;
}

.tp-system-filters label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .3rem;
  color: #64708c;
  font-size: 9px;
  font-weight: 800;
}

.tp-system-filters input,
.tp-system-filters select {
  width: 100%;
  min-height: 36px;
  padding: .48rem .6rem;
  border: 1px solid #dfe6f1;
  border-radius: 8px;
  outline: 0;
  background: #fff;
  color: #1c2b4a;
  font-size: 11px;
}

.tp-system-filters input:focus,
.tp-system-filters select:focus {
  border-color: #2f6ae6;
  box-shadow: 0 0 0 3px rgba(47, 106, 230, .1);
}

.tp-system-filter-actions {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4rem;
}

.tp-system-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .7rem;
  color: #64708c;
  font-size: 10px;
}

.tp-system-pagination > div { display: flex; gap: .4rem; }

.tp-system-check {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: .45rem;
  align-self: end;
  padding: .5rem .6rem;
  border: 1px solid rgba(229, 72, 77, .2);
  border-radius: 8px;
  background: rgba(229, 72, 77, .04);
  color: #bd2e33;
  font-size: 10px;
  font-weight: 800;
}

.tp-system-check input {
  width: 15px;
  min-height: 15px;
  accent-color: #e5484d;
}

.tp-system-notice-content { min-height: 220px !important; }

.tp-system-audit-detail h4 {
  margin: .8rem 0 .35rem;
  color: #273654;
  font-size: 11px;
  font-weight: 900;
}

.tp-system-audit-detail pre {
  max-height: 230px;
  overflow: auto;
  padding: .7rem;
  border: 1px solid #e4e9f2;
  border-radius: 8px;
  background: #121d36;
  color: #dfe8fa;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 1100px) {
  .tp-system-filters { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}

@media (max-width: 820px) {
  .tp-system-grid--environment,
  .tp-system-grid--integrations { grid-template-columns: 1fr; }
  .tp-system-definition { grid-template-columns: 1fr; }
  .tp-system-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .tp-system-tabs { padding-inline: .75rem; }
  .tp-system-filters { grid-template-columns: 1fr; }
  .tp-system-pagination { align-items: flex-start; flex-direction: column; }
}