:root {
  --theme-base: #0078d7;
  --theme-base-rgb: 0, 120, 215;
  --theme-base-dark: #005a9e;
  --page-bg: #eef2f6;
  --page-surface: #ffffff;
  --page-text: #1f2933;
  --page-muted: #607083;
  --page-line: rgba(31, 41, 51, 0.12);
  --page-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  --page-radius: 8px;
  --control-radius: 6px;
}

* {
  box-sizing: border-box;
}

body {
  color: var(--page-text) !important;
  background: var(--page-bg) !important;
  font-family: Arial, "Segoe UI", Tahoma, sans-serif !important;
}

.box {
  width: min(520px, calc(100% - 32px)) !important;
  margin: clamp(32px, 8vh, 80px) auto !important;
  padding: 22px !important;
  background: var(--page-surface) !important;
  border: 1px solid var(--page-line) !important;
  border-radius: var(--page-radius) !important;
  box-shadow: var(--page-shadow) !important;
}

h1 {
  margin: 0 0 18px !important;
  color: var(--page-text) !important;
  font-size: clamp(1.45rem, 4vw, 2rem) !important;
  line-height: 1.15 !important;
}

a {
  border: 1px solid transparent !important;
  border-radius: var(--control-radius) !important;
  background: var(--theme-base) !important;
  color: #fff !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  box-shadow: 0 8px 20px rgba(var(--theme-base-rgb), 0.16) !important;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

a:hover,
a:focus {
  background: var(--theme-base-dark) !important;
  transform: translateY(-1px);
}

.link-info,
.status-summary {
  display: grid;
  gap: 6px;
  margin: 14px 0 0 !important;
  padding: 12px !important;
  min-height: 42px;
  color: #273d50 !important;
  background: #eef6ff !important;
  border: 1px solid #c9e2ff !important;
  border-radius: var(--control-radius) !important;
  text-align: left !important;
}

.status-summary {
  text-align: center !important;
}

.link-info span {
  display: block;
}

.back-link,
.z {
  background: #475569 !important;
  box-shadow: 0 8px 20px rgba(71, 85, 105, 0.14) !important;
}

.back-link:hover,
.back-link:focus,
.z:hover,
.z:focus {
  background: #334155 !important;
}

.z {
  width: max-content;
  max-width: calc(100% - 16px);
  margin: 8px auto !important;
  color: #e5edf5 !important;
}

.status-badge {
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .box {
    padding: 18px !important;
  }

  a {
    padding: 12px 10px !important;
  }
}
