:root { color-scheme: light; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color: #173047; background: #f5f7f8; letter-spacing: 0; }
* { box-sizing: border-box; }
body { margin: 0; }
header,main,footer { max-width: 920px; margin: auto; padding: 24px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: max(24px,env(safe-area-inset-top)); border-bottom: 1px solid #d9e0e4; }
a { color: #096a9c; text-underline-offset: 3px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; text-decoration: none; }
.title-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 14px 0 24px; }
h1 { font-size: 26px; font-weight: 650; margin: 0; }
h2 { font-size: 19px; margin: 0 0 6px; font-weight: 600; }
button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #c9d4db; border-radius: 6px; background: #fff; color: #096a9c; font: inherit; font-size: 25px; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
:focus-visible { outline: 3px solid #159fba; outline-offset: 3px; }
.summary { display: flex; align-items: center; gap: 16px; padding: 22px 0 30px; border-bottom: 1px solid #d9e0e4; }
.summary p { margin: 0; font-size: 14px; color: #546674; line-height: 1.5; }
.mark { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; display: inline-block; background: #788892; }
.operational { color: #17735b; } .mark.operational { background: #21856a; }
.degraded { color: #94610a; } .mark.degraded { background: #b17a18; }
.unavailable { color: #b63e46; } .mark.unavailable { background: #ba4650; }
.unknown,.not_configured { color: #5c6c76; }
table { width: 100%; border-collapse: collapse; text-align: left; }
caption { text-align: left; font-weight: 600; padding: 25px 0 16px; }
th { font-size: 12px; color: #546674; font-weight: 500; padding: 12px 10px; border-bottom: 1px solid #c9d4db; }
td { padding: 18px 10px; border-bottom: 1px solid #dde4e8; font-size: 14px; }
td:first-child { font-weight: 600; }
td:nth-child(2) { font-size: 12px; color: #657883; }
td:last-child { white-space: nowrap; }
td .mark { width: 7px; height: 7px; vertical-align: 1px; margin-right: 8px; }
.scope,#notice,footer { font-size: 13px; line-height: 1.65; color: #546674; }
#notice:empty { display: none; }
#notice { color: #a0323b; }
footer { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #d9e0e4; padding-bottom: max(24px,env(safe-area-inset-bottom)); }
@media(max-width: 540px) { header,main,footer { padding-left: 16px; padding-right: 16px; } header>a:last-child { font-size: 13px; } h1 { font-size: 24px; } th,td { padding-left: 4px; padding-right: 4px; } td { font-size: 13px; } td:nth-child(2) { font-size: 10px; } footer { flex-direction: column; gap: 6px; } }