/* Status-page layout. Shared colors, controls and typography come from kaysson.de. */
.page-shell {
  width: min(1120px, calc(100% - 40px));
  margin: auto;
}

.site-header {
  width: 100%;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(7, 16, 26, .78);
  backdrop-filter: blur(18px);
}

.site-header .topbar {
  width: 100%;
  min-height: 84px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: transparent;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
}

.brand strong { color: var(--accent); }

.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: cover;
  object-position: center 38%;
  border: 1px solid var(--blue);
  border-radius: 10px;
  background: #08111d;
  box-shadow: 0 0 24px rgba(57, 186, 246, .2);
}

.status-navigation {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.status-navigation a,
.status-navigation button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.status-navigation a:hover,
.status-navigation button:hover {
  border-color: #315b76;
  background: rgba(57, 186, 246, .08);
  color: var(--text);
}

.language-control {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border: 1px solid rgba(72, 105, 132, .42);
  border-radius: 999px;
  background: rgba(10, 24, 38, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .015);
}

.language-control button {
  width: auto;
  min-width: 38px;
  height: 30px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #7890a4;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.language-control button:hover {
  background: transparent;
  color: #d9eefb;
}

.language-control button.active {
  background: var(--blue);
  color: #06111b;
  box-shadow: 0 2px 10px rgba(57, 186, 246, .24);
}

.hero {
  padding: 72px 0;
  border-bottom: 1px solid rgba(94, 137, 169, .26);
}

.hero-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.eyebrow,
.type {
  margin: 0 0 12px;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.hero h1 {
  margin: 0;
  font-size: clamp(47px, 7vw, 82px);
  line-height: .93;
  letter-spacing: -.06em;
}

.hero h1 span { color: var(--accent); }
.hero h1 .title-main { color: var(--text); }

.intro-copy {
  max-width: 600px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.status-summary {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 315px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(10, 23, 35, .8);
}

.status-summary strong,
.status-summary small { display: block; }

.status-summary small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.summary-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #94aabb;
  box-shadow: 0 0 15px rgba(148, 170, 187, .35);
}

.summary-dot.operational {
  background: var(--green);
  box-shadow: 0 0 15px rgba(115, 223, 174, .6);
}

.summary-dot.offline { background: var(--accent); }

#refresh-status {
  margin-left: auto;
  padding: 9px 11px;
  font-size: 12px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  padding: 40px 0 72px;
}

.status-card {
  position: relative;
  min-height: 205px;
  padding: 25px 25px 25px 48px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(18, 34, 50, .96), rgba(10, 21, 33, .96));
}

.status-card .type::before {
  position: absolute;
  top: 31px;
  left: 25px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #92a9ba;
  box-shadow: 0 0 14px rgba(146, 169, 186, .3);
  content: "";
}

.status-card.is-operational .type::before {
  background: var(--green);
  box-shadow: 0 0 14px rgba(115, 223, 174, .35);
}

.status-card.is-offline .type::before {
  background: var(--accent);
  box-shadow: 0 0 14px rgba(255, 48, 73, .35);
}

.status-card h2 {
  margin: 0;
  font-size: 23px;
  letter-spacing: -.015em;
}

.status-card > p:not(.type) {
  margin: 20px 0;
  color: var(--muted);
  line-height: 1.6;
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(148, 170, 187, .4);
  border-radius: 7px;
  color: #c4d5e1;
  font-size: 12px;
  font-weight: 700;
}

.state::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94aabb;
  content: "";
}

.state.operational {
  border-color: rgba(115, 223, 174, .45);
  color: #a7edca;
}

.state.operational::before { background: var(--green); }

.state.offline {
  border-color: rgba(255, 48, 73, .6);
  color: #ffbac3;
}

.state.offline::before { background: var(--accent); }

.state.disabled,
.state.unknown,
.state.checking { color: #c4d5e1; }

footer {
  display: flex;
  justify-content: space-between;
  padding: 24px 0 32px;
  border-top: 1px solid rgba(94, 137, 169, .26);
  color: #8fa8ba;
  font-size: 13px;
}

footer a {
  color: #b9dcf4;
  text-decoration: none;
}

@media (max-width: 760px) {
  .site-header .topbar {
    min-height: 68px;
    padding: 10px 12px;
  }

  .brand { gap: 8px; }
  .brand-logo { width: 40px; height: 40px; }
  .language-control button { min-width: 36px; padding: 0 8px; }
  .hero { padding: 50px 0 48px; }
  .hero-content { align-items: stretch; flex-direction: column; gap: 28px; }
  .status-summary { min-width: 0; }
  .status-grid { grid-template-columns: 1fr; padding-top: 28px; }
}

@media (max-width: 680px) {
  .site-header .topbar { flex-wrap: wrap; gap: 8px; }
  .status-navigation { order: 3; width: 100%; margin-left: 0; padding-bottom: 8px; }
  .status-navigation a,
  .status-navigation button { flex: 1; padding-inline: 8px; text-align: center; font-size: 12px; }
}

@media (max-width: 520px) {
  .page-shell { width: min(100% - 28px, 1120px); }
  .brand > span { display: none; }
  .language-control button { min-width: 30px; padding: 0 6px; }
  footer { align-items: flex-start; flex-direction: column; gap: 12px; }
}