body {
  background: #f6f4ef !important;
  color: #111827 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top right, rgba(16, 185, 129, 0.06), transparent 28%),
    radial-gradient(circle at top left, rgba(0, 0, 0, 0.035), transparent 24%);
}

.container {
  max-width: 1320px !important;
  padding-top: 24px !important;
  padding-bottom: 48px !important;
}

.main {
  display: flex !important;
  flex-direction: column !important;
}

.main > :nth-child(1) {
  order: 1 !important;
}

.main > :nth-child(2) {
  order: 2 !important;
}

.main > :nth-child(3) {
  order: 4 !important;
}

.main > :nth-child(4) {
  order: 3 !important;
}

.main > :nth-child(5) {
  order: 5 !important;
}

.bg-dark,
.bg-secondary {
  background: transparent !important;
}

.shadow-box,
.item,
.incident,
.maintenance,
.monitor-list > div,
.group {
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 10px 30px rgba(16, 24, 40, 0.04) !important;
  border: 1px solid #e7e5df !important;
  border-radius: 22px !important;
}

h1, h2, h3, h4, h5, h6,
.title, .status-page-name {
  color: #111827 !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}

.status-page-name,
h1 {
  font-size: 46px !important;
  line-height: 1.05 !important;
  margin-bottom: 10px !important;
}

.description, .markdown-body, .markdown-body p, .markdown-body li, .markdown-body td, .markdown-body th {
  color: #374151 !important;
}

.description {
  max-width: 960px !important;
  margin-bottom: 18px !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}

.markdown-body h3 {
  margin-top: 18px !important;
  margin-bottom: 14px !important;
  font-size: 34px !important;
  line-height: 1.2 !important;
  color: #111827 !important;
}

.markdown-body {
  background: #ffffff !important;
  border: 1px solid #e7e5df !important;
  border-radius: 26px !important;
  padding: 28px 30px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 10px 30px rgba(16, 24, 40, 0.04) !important;
  margin-bottom: 28px !important;
}

.alert-heading {
  margin-top: 24px !important;
  margin-bottom: 8px !important;
}

.markdown-body table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #ffffff !important;
  border: 1px solid #ece9e2 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  margin-top: 16px !important;
  margin-bottom: 10px !important;
}

.markdown-body thead th {
  background: #fbfaf7 !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  border-bottom: 1px solid #ece9e2 !important;
}

.markdown-body th,
.markdown-body td {
  padding: 15px 18px !important;
  border-top: 0 !important;
  border-bottom: 1px solid #f4f1eb !important;
  font-size: 15px !important;
}

.markdown-body tbody tr:last-child td {
  border-bottom: 0 !important;
}

.markdown-body code {
  background: transparent !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 0 !important;
}

.monitor-list,
.group {
  margin-top: 22px !important;
}

.group-title {
  margin-top: 30px !important;
  margin-bottom: 16px !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

.item {
  padding: 18px 20px !important;
  margin-bottom: 14px !important;
}

.item > .row {
  display: flex !important;
  flex-direction: column !important;
  row-gap: 10px !important;
}

.item .col-9,
.item .col-3,
.item .col-md-8,
.item .col-md-4,
.item .small-padding {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
}

.item .info {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

.item-name {
  color: #111827 !important;
  font-weight: 600 !important;
  font-size: 21px !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  order: 1 !important;
}

.item .info > span[title="Setting"] {
  display: none !important;
}

.item .extra-info {
  margin-top: 4px !important;
}

.item .badge {
  margin-left: auto !important;
  padding: 8px 14px !important;
  font-size: 15px !important;
  order: 2 !important;
  flex: 0 0 auto !important;
}

.main > .mb-4 > div > .mb-5:nth-of-type(2) .item .badge {
  display: none !important;
}

.badge {
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.badge.bg-primary,
.bg-primary {
  background: #d7f2e3 !important;
  color: #0d6b4b !important;
}

.badge.bg-danger,
.bg-danger {
  background: #fde7e7 !important;
  color: #b42318 !important;
}

.badge.bg-warning,
.bg-warning {
  background: #fff4db !important;
  color: #a15c00 !important;
}

.uptime-chart,
.heartbeat-bar {
  filter: none !important;
}

.item .wrap {
  width: 100% !important;
  max-width: 100% !important;
  padding: 2px 0 0 !important;
  overflow: hidden !important;
}

.item .hp-bar-big,
.item .heartbeat-bar,
.item .uptime-chart {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
  gap: 3px !important;
  transform: none !important;
  overflow: hidden !important;
}

.item .beat,
.heartbeat-bar > div,
.uptime-chart > div {
  border-radius: 3px !important;
  margin: 0 !important;
  width: 8px !important;
  min-width: 8px !important;
  height: 28px !important;
  flex: 0 0 auto !important;
  transform: none !important;
}

.item .beat.empty {
  width: 4px !important;
  min-width: 4px !important;
  height: 24px !important;
  background: #edf4fb !important;
  opacity: 0.75 !important;
}

.item .beat:not(.empty) {
  background: #63c58d !important;
}

.item .beat.pending {
  background: #f6c343 !important;
}

.item .beat.down {
  background: #e76f51 !important;
}

.item .beat.maintenance {
  background: #5f7cff !important;
}

.item .wrap + div,
.item .hp-bar-big + div {
  margin-top: 6px !important;
}

.item .wrap [class*="legend"],
.item .wrap [class*="time"],
.item .wrap [class*="label"] {
  color: #94a3b8 !important;
}

footer,
.footer,
.powered-by {
  color: #9ca3af !important;
  border-top: 0 !important;
}

.btn,
button {
  border-radius: 14px !important;
  box-shadow: none !important;
}

.overall-status {
  background: #e4f5ea !important;
  border: 1px solid #86d2a9 !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

.overall-status .ok {
  color: #0d6b4b !important;
}

.overall-status .icon {
  background: #63c58d !important;
  color: white !important;
  border-radius: 999px !important;
}

@media (max-width: 768px) {
  .item {
    padding: 16px 16px !important;
  }

  .item .info {
    gap: 10px !important;
  }

  .item-name {
    font-size: 18px !important;
  }

  .item .badge {
    padding: 6px 12px !important;
    font-size: 14px !important;
  }

  .item .hp-bar-big,
  .item .heartbeat-bar,
  .item .uptime-chart {
    gap: 2px !important;
  }

  .item .beat,
  .heartbeat-bar > div,
  .uptime-chart > div {
    width: 6px !important;
    min-width: 6px !important;
    height: 22px !important;
  }

  .item .beat.empty {
    width: 3px !important;
    min-width: 3px !important;
    height: 18px !important;
  }
}