/* Author: MERCARO_KZ */
:root {
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:#fff;
  background:#0b0b0c;
  font-synthesis:none;
  --accent:#e04141;
  --surface:#141416;
  --muted:#8a8a93;
  --line:#28282d;
  --green:#22c55e;
  --amber:#f59e0b;
  --red:#ef4444;
  --empty:#303034
}

body {
  isolation:isolate
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:url('/grain.svg') repeat;
  opacity:.035;
  pointer-events:none
}

#sparkles {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  filter:blur(1px);
  pointer-events:none
}

.header,main {
  position:relative;
  z-index:1
}

.digit-slot {
  display:inline-block;
  position:relative;
  width:1ch;
  height:1em;
  overflow:hidden;
  vertical-align:-.08em;
  text-align:center
}

.digit-face {
  display:inline-block;
  position:relative;
  width:100%;
  height:100%;
  vertical-align:top
}

.digit-slot.digit-slot,.digit-slot .digit-face {
  font:inherit;
  color:inherit;
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:0
}

.digit-face[data-old]::before {
  content:attr(data-old);
  position:absolute;
  inset:-100% 0 auto;
  height:100%;
  line-height:1
}

.rank-latency {
  font-variant-numeric:tabular-nums
}

.view-shell {
  position:relative;
  isolation:isolate;
  display:flow-root
}

#view-body {
  display:flow-root
}

.view-shell[data-transitioning=true] {
  overflow:hidden
}

.view-ghost {
  position:absolute;
  inset:0 0 auto;
  z-index:2;
  pointer-events:none;
  user-select:none;
  display:flow-root
}

.view-tabs {
  position:relative
}

.view-tabs button[aria-pressed=true] {
  border-bottom-color:transparent!important
}

.view-indicator {
  position:absolute;
  left:0;
  bottom:-1px;
  height:2px;
  background:var(--accent);
  pointer-events:none
}

.view-indicator[data-ready=true] {
  transition:transform .4s cubic-bezier(.22,.8,.25,1),width .4s cubic-bezier(.22,.8,.25,1)
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

button,a {
  -webkit-tap-highlight-color:transparent
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  cursor:pointer
}

button:focus-visible,a:focus-visible,.day:focus-visible {
  outline:2px solid #b7c7ef;
  outline-offset:4px
}

button:disabled {
  cursor:default
}

[hidden] {
  display:none!important
}

.header {
  position:sticky;
  top:0;
  z-index:20;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:12px max(24px,calc((100vw - 1248px)/2));
  border-bottom:1px solid var(--line);
  background:#0b0b0cf0;
  backdrop-filter:blur(16px)
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:18px;
  font-weight:700;
  letter-spacing:2px
}

.brand img {
  object-fit:contain;
  width:34px;
  height:34px
}

.brand-sub {
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:1.7px;
  margin-left:8px
}

.controls {
  display:flex;
  gap:16px;
  align-items:center
}

.segmented {
  display:flex;
  border:1px solid var(--line);
  border-radius:6px;
  padding:3px;
  background:#14171d
}

.segmented button {
  background:none;
  border:0;
  color:var(--muted);
  padding:8px 14px;
  border-radius:3px;
  font-size:12px;
  font-weight:600
}

.segmented button[aria-pressed=true] {
  color:#f4f5f7;
  background:#303640
}

.segmented button:hover {
  color:white
}

.language button {
  padding:8px 10px
}

main {
  max-width:1344px;
  margin:0 auto;
  padding:42px 48px 24px
}

.intro {
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  align-items:start;
  gap:40px;
  margin-bottom:32px
}

.page-title {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  min-width:0;
  margin:0
}

.page-title p {
  max-width:500px
}

.eyebrow {
  font-size:10px;
  font-weight:600;
  letter-spacing:1.9px;
  color:var(--muted);
  margin-bottom:12px
}

h1 {
  font-size:36px;
  letter-spacing:-.7px;
  font-weight:600;
  margin:0 0 12px
}

p {
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  margin:0
}

.live {
  display:flex;
  align-items:center;
  gap:20px;
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
  padding:10px 12px;
  border:1px solid #ffffff0b;
  border-radius:7px;
  background:#14141670
}

.live #updated {
  color:#c5cbd5;
  font-variant-numeric:tabular-nums
}

.live-status,.live-stamp {
  display:inline-flex;
  align-items:center;
  gap:8px
}

.live-stamp {
  padding-left:16px;
  border-left:1px solid var(--line)
}

.dot {
  display:inline-block;
  flex-shrink:0;
  width:6px;
  height:6px;
  background:var(--empty);
  border-radius:50%;
  vertical-align:middle
}

.online {
  background:var(--green)
}

.degraded {
  background:var(--amber)
}

.down {
  background:var(--red)
}

.unknown {
  background:var(--empty)
}

.notice {
  padding:13px 16px;
  border:1px solid #695638;
  border-radius:6px;
  color:#e6c99e;
  background:#241f17;
  font-size:12px;
  line-height:1.6;
  margin-bottom:24px
}

.overview {
  border:1px solid var(--line);
  background:#171a20;
  padding:24px;
  border-radius:8px;
  margin-bottom:32px
}

.section-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px
}

h2 {
  font-size:14px;
  margin:0;
  font-weight:600
}

.section-label>span {
  font-size:11px;
  color:var(--muted)
}

.metrics {
  display:grid;
  grid-template-columns:1fr 1fr 1.5fr;
  gap:24px;
  margin-bottom:30px
}

.metric {
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:12px
}

.metric:last-child {
  border:0
}

.metric>span {
  font-size:11px;
  color:var(--muted)
}

.metric>strong {
  font-size:35px;
  font-weight:500;
  letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
  line-height:1
}

.metric small {
  font-size:10px;
  color:var(--muted)
}

.counts {
  display:flex;
  flex-wrap:wrap;
  gap:9px 14px;
  font-size:10px;
  color:var(--muted)
}

.counts b {
  font-weight:600;
  color:#d8dde6;
  margin-left:4px
}

.counts>span {
  white-space:nowrap
}

.history {
  display:grid;
  grid-template-columns:repeat(30,minmax(0,1fr));
  gap:3px
}

.network-history {
  grid-template-columns:repeat(30,minmax(0,1fr));
  gap:3px
}

.day {
  height:26px;
  min-width:0;
  border:0;
  border-radius:2px;
  padding:0;
  opacity:.83
}

.day:hover,.day:focus-visible {
  opacity:1;
  outline:1px solid #e8ebf1;
  outline-offset:2px
}

.timeline-labels {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:10px;
  margin-top:9px
}

.cards-label {
  margin-bottom:16px
}

.cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}

.card {
  border:1px solid var(--line);
  background:#171a20;
  border-radius:8px;
  padding:20px;
  min-width:0
}

.card-top {
  display:flex;
  align-items:flex-start;
  gap:8px;
  justify-content:space-between
}

.card h3 {
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  margin:0;
  overflow-wrap:anywhere
}

.badge {
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:9px;
  border:1px solid var(--line);
  border-radius:4px;
  padding:4px 6px;
  white-space:nowrap;
  color:#b8c0cc
}

.protocol {
  font-size:9px;
  color:var(--muted);
  letter-spacing:.7px;
  margin-top:8px;
  min-height:12px
}

.card-metrics {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:25px 0 20px
}

.card-metrics>div {
  display:flex;
  flex-direction:column;
  gap:8px
}

.card-metrics>div:last-child {
  text-align:right
}

.card-metrics span {
  font-size:10px;
  color:var(--muted)
}

.card-metrics strong {
  font-size:23px;
  font-weight:500;
  letter-spacing:-.5px;
  font-variant-numeric:tabular-nums
}

.card .day {
  height:22px
}

.empty {
  border:1px dashed var(--line);
  border-radius:8px;
  padding:40px;
  text-align:center;
  grid-column:1/-1
}

.legend {
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px
}

.legend>span {
  display:flex;
  align-items:center;
  gap:6px
}

.legend-block {
  display:inline-block;
  width:7px;
  height:10px;
  border-radius:1px
}

footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:28px;
  border-top:1px solid var(--line);
  padding-top:20px;
  font-size:10px;
  color:var(--muted)
}

.tooltip {
  position:fixed;
  z-index:30;
  pointer-events:none;
  white-space:pre-line;
  font-size:11px;
  line-height:1.7;
  background:#252b35;
  border:1px solid #586273;
  border-radius:5px;
  color:#edf0f6;
  box-shadow:0 5px 20px #0006;
  padding:10px 14px;
  max-width:260px
}

@media(min-width:1450px) {
  main {
    padding-top:50px
  }
}

@media(max-width:1100px) {
  .intro {
    grid-template-columns:minmax(0,1fr) 360px;
    gap:24px
  }
  .cards {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .header {
    padding:12px 32px
  }
  main {
    padding:36px 32px 24px
  }
  .metrics {
    grid-template-columns:1fr 1fr 1.2fr
  }
  .metric>strong {
    font-size:30px
  }
  .network-history {
    gap:2px
  }
}

@media(max-width:700px) {
  .header {
    padding:10px 16px;
    flex-wrap:nowrap;
    gap:12px
  }
  .brand {
    gap:0
  }
  .brand>span {
    display:none
  }
  .brand img {
    width:32px;
    height:32px
  }
  .controls {
    flex:1;
    min-width:0;
    justify-content:space-between;
    gap:8px
  }
  .segmented button {
    padding:9px 10px;
    font-size:11px
  }
  main {
    padding:24px 20px 20px
  }
  .page-title {
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    margin:0
  }
  h1 {
    font-size:26px;
    margin-bottom:8px
  }
  .eyebrow {
    display:none
  }
  .live {
    padding:10px 12px;
    width:100%;
    justify-content:space-between;
    gap:8px
  }
  .overview {
    padding:18px
  }
  .metrics {
    grid-template-columns:1fr 1fr;
    gap:20px 16px;
    margin-bottom:24px
  }
  .metric:nth-child(2) {
    border:0
  }
  .metric:last-child {
    grid-column:1/-1;
    border-top:1px solid var(--line);
    padding-top:18px;
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    gap:8px 16px
  }
  .metric:last-child>span,.metric:last-child>strong {
    grid-column:1
  }
  .metric>strong {
    font-size:29px
  }
  .counts {
    grid-column:2;
    grid-row:1/3;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:center;
    gap:12px 8px;
    font-size:11px
  }
  .cards {
    grid-template-columns:1fr;
    gap:12px
  }
  .card {
    padding:20px
  }
  .network-history {
    gap:1px
  }
  .network-history .day {
    height:22px;
    border-radius:1px
  }
  .section-label>span {
    font-size:10px
  }
  footer {
    align-items:flex-start;
    flex-direction:column;
    gap:16px
  }
  .legend {
    gap:10px 16px
  }
  .card-metrics {
    margin:22px 0 20px
  }
}

.segmented {
  position:relative;
  background:#101012
}

.segmented button {
  transition:color .2s,background .2s
}

.segmented button[aria-pressed=true] {
  background:var(--accent);
  color:#fff
}

.overview,.card {
  background:var(--surface)
}

.day {
  transition:background-color .35s,opacity .2s
}

.cards,.metrics,.network-history {
  transition:opacity .18s
}

.switching .cards,.switching .metrics,.switching .network-history {
  opacity:.45
}

.card h3 {
  display:flex;
  align-items:center;
  gap:9px
}

.country-flag {
  display:block;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 0 0 1px #ffffff20;
  flex-shrink:0
}

.card-metrics .loss {
  color:var(--muted);
  font-size:9px;
  font-weight:400;
  letter-spacing:0
}

.time-zone {
  color:var(--muted);
  font-size:10px
}

.tooltip {
  background:var(--surface);
  border-color:#49494e;
  color:#fff;
  max-width:340px
}

.segmented button:focus-visible,a:focus-visible,.day:focus-visible,.badge:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px
}

.live #updated,.counts b,.badge {
  color:#fff
}

.notice {
  color:var(--amber);
  border-color:#f59e0b55;
  background:#f59e0b0d
}

.server-plans {
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:10px;
  line-height:1.6;
  letter-spacing:0
}

.rank-identity {
  min-width:0
}

.rank-top>span {
  white-space:nowrap
}

.cards-shell {
  position:relative;
  isolation:isolate
}

.cards-shell[data-transitioning=true] {
  overflow:hidden
}

.grid-ghost {
  position:absolute;
  inset:0 0 auto;
  z-index:2;
  pointer-events:none;
  user-select:none
}

.history-period {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:var(--muted);
  margin-bottom:10px
}

.history-period strong {
  font-size:12px;
  font-weight:500;
  color:#d5d5da;
  font-variant-numeric:tabular-nums
}

.month-period {
  margin-top:24px
}

.hourly-history {
  grid-template-columns:repeat(24,minmax(0,1fr))
}

.overview .network-history {
  gap:3px
}

.overview .day {
  height:24px;
  border-radius:2px
}

.card .server-plans,
.connection-tag {
  display:inline-block;
  margin:0;
  max-width:100%;
  padding:4px 7px;
  border:1px solid #ffffff0b;
  border-radius:5px;
  background:#ffffff03;
  font-size:10px;
  line-height:1.4;
  color:#c5c5cd
}

.cadence {
  display:grid;
  grid-template-columns:1fr;
  align-items:flex-start;
  gap:12px;
  margin:0;
  padding:0 16px 16px
}

.cadence-item {
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:8px;
  font-size:11px;
  color:var(--muted);
  padding:14px;
  border:1px solid #ffffff08;
  border-radius:8px;
  background:#0b0b0c60
}

.cadence-item strong {
  font-weight:600;
  font-size:13px;
  color:#d5d5da;
  font-variant-numeric:tabular-nums
}

.cadence-countdown {
  font-variant-numeric:tabular-nums;
  color:var(--muted)
}

.refresh-next {
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  border-top:1px solid var(--line);
  padding-top:10px;
  margin-top:2px;
  line-height:1.5
}

#refresh-at {
  font-size:10px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}

@media(max-width:700px) {
  .cadence {
    grid-template-columns:1fr;
    gap:20px
  }
  .cadence-item {
    width:100%;
    font-size:12px;
    gap:8px
  }
  .cadence-countdown {
    flex-basis:100%;
    padding:0;
    border:0
  }
  .plan-options button {
    min-width:0
  }
}

@media(max-width:700px) {
  .live {
    flex-wrap:wrap
  }
  .card h3 {
    font-size:13px
  }
  .time-zone {
    font-size:9px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto;
    transition:none!important;
    animation:none!important
  }
}

.view-tabs {
  display:flex;
  gap:24px;
  border-bottom:1px solid var(--line);
  margin:0 0 24px
}

.view-tabs button {
  border:0;
  border-bottom:2px solid transparent;
  padding:12px 0;
  background:none;
  color:var(--muted);
  font-size:13px;
  transition:color .2s,border-color .2s
}

.view-tabs button[aria-pressed=true] {
  color:#fff;
  border-color:var(--accent)
}

.plan-picker {
  display:flex;
  align-items:center;
  gap:20px;
  margin:0 0 24px
}

.monitoring-details {
  margin:0;
  border:1px solid var(--line);
  border-radius:12px;
  background:#141416b0;
  min-width:0
}

.monitoring-details summary {
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 26px;
  align-items:center;
  gap:14px 12px;
  padding:16px;
  list-style:none;
  cursor:pointer;
  font-size:12px;
  color:var(--muted)
}

.monitoring-details summary::-webkit-details-marker {
  display:none
}

.monitoring-chevron {
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#ffffff05;
  transition:background .2s
}

.monitoring-chevron::after {
  content:"";
  width:6px;
  height:6px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s
}

.monitoring-details:is([data-expanded=true],[open]:not([data-expanded])) .monitoring-chevron::after {
  transform:rotate(225deg)
}

.monitoring-details summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:8px
}

.monitoring-icon {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid #e0414118;
  border-radius:9px;
  background:#e041410a;
  color:var(--accent)
}

.monitoring-heading {
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0
}

.monitoring-heading>span:first-child {
  font-size:13px;
  font-weight:500;
  color:#e5e5ea
}

.monitoring-heading>span:last-child {
  font-size:11px
}

.monitoring-previews {
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-height:96px;
  overflow:hidden;
  opacity:1;
}

.monitoring-details:is([data-expanded=true],[open]:not([data-expanded])) .monitoring-previews {
  max-height:0;
  opacity:0
}

.monitoring-details:is([data-expanded=true],[open]:not([data-expanded])) summary {
  row-gap:0
}

.monitoring-previews>span {
  display:inline-flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px 8px;
  border:1px solid #ffffff08;
  border-radius:5px;
  font-size:10px;
  line-height:1.4
}

.monitoring-previews>span>span:last-child {
  font-variant-numeric:tabular-nums;
  color:#d5d5da
}

.monitoring-details summary:hover .monitoring-chevron {
  background:#ffffff0c
}

.monitoring-details[data-expanding=true],.monitoring-details[data-expanding=true] summary {
  overflow:hidden
}

html[data-monitoring-transition=true] {
  overflow-anchor:none
}

.availability-history {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px
}

.history-window {
  min-width:0
}

.plan-picker>span {
  font-size:12px;
  color:var(--muted)
}

.plan-options {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:560px;
  max-width:100%;
  gap:4px;
  padding:5px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px
}

.plan-indicator {
  position:absolute;
  left:0;
  top:0;
  z-index:0;
  border:1px solid #e0414155;
  border-radius:8px;
  background:#e0414118;
  pointer-events:none
}

.plan-indicator[data-ready=true] {
  transition:transform .34s cubic-bezier(.22,.8,.25,1),width .34s,height .34s
}

.plan-options button {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:42px;
  padding:10px 18px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  transition:color .2s,background .2s,border-color .2s
}

.plan-options button:hover {
  color:#fff;
  background:#ffffff05
}

.plan-options button[aria-pressed=true] {
  color:#fff;
  background:transparent
}

.plan-check {
  display:block;
  width:14px;
  height:14px;
  flex-shrink:0;
  border:1px solid #55555d;
  border-radius:50%;
  transition:background .2s,border-color .2s
}

.plan-options button[aria-pressed=true] .plan-check {
  border-color:var(--accent);
  background:var(--accent);
  box-shadow:inset 0 0 0 3px var(--surface)
}

.plan-options button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px
}

.badge {
  cursor:help;
  background:transparent;
  max-width:100%
}

.analysis-metrics {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-bottom:20px
}

.analysis-metrics>div {
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px
}

.analysis-metrics span {
  font-size:12px;
  color:var(--muted)
}

.analysis-metrics strong {
  font-size:26px;
  font-weight:500;
  font-variant-numeric:tabular-nums
}

.analysis-metrics small {
  font-size:11px;
  line-height:1.6;
  color:var(--muted)
}

.analysis-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}

.analysis-panel {
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  padding:24px;
  min-width:0
}

.analysis-panel h3 {
  font-size:14px;
  margin:0 0 22px;
  font-weight:500
}

.rank-row {
  padding:12px 0;
  border-bottom:1px solid var(--line)
}

.rank-top {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  align-items:center
}

.rank-name {
  display:flex;
  align-items:center;
  gap:8px
}

.rank-bar {
  height:3px;
  background:var(--line);
  border-radius:3px;
  margin-top:10px;
  overflow:hidden
}

.rank-fill {
  height:100%;
  background:var(--accent);
  max-width:100%;
  transition:width .4s
}

.diagnostic-row {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px;
  border-bottom:1px solid var(--line);
  padding:12px 0;
  line-height:1.7
}

.diagnostic-row .dot {
  margin-top:7px
}

.diagnostic-row strong {
  display:block;
  font-size:12px;
  font-weight:500
}

.diagnostic-row p {
  font-size:11px
}

.analysis-note {
  margin-top:24px;
  font-size:11px;
  line-height:1.7
}

[data-decoding=true] {
  text-shadow:0 0 14px #e0414160
}

@media(max-width:700px) {
  .view-tabs {
    gap:20px;
    justify-content:space-between
  }
  .view-tabs button {
    font-size:11px
  }
  .plan-picker {
    align-items:flex-start;
    flex-direction:column;
    gap:0
  }
  .plan-picker>span {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    overflow:hidden;
    clip-path:inset(50%)
  }
  .plan-options {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:4px
  }
  .plan-options button {
    justify-content:flex-start;
    padding:10px 12px;
    font-size:12px
  }
  .analysis-metrics,.analysis-columns {
    grid-template-columns:1fr
  }
  .analysis-panel {
    padding:18px
  }
  .analysis-metrics>div {
    padding:18px
  }
  .card-top {
    flex-wrap:wrap
  }
  .tooltip {
    max-width:calc(100vw - 16px)
  }
  .intro {
    grid-template-columns:1fr;
    gap:20px;
    margin-bottom:24px
  }
  .monitoring-details summary {
    padding:14px
  }
  .availability-history {
    grid-template-columns:1fr;
    gap:22px
  }
  .overview .section-label {
    margin-bottom:20px
  }
  .metric>span {
    font-size:12px
  }
  .metric small {
    font-size:11px;
    line-height:1.5
  }
  .view-tabs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px
  }
  .view-tabs button {
    font-size:12px;
    padding:12px 0
  }
  .card-metrics .loss,.card .card-probe-info {
    font-size:11px
  }
}

.card .card-top {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:12px
}

.card .badge {
  margin-top:1px;
  padding:5px 7px;
  font-size:9px
}

.card-meta {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin-top:14px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  min-height:48px
}

.card .protocol {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  min-height:0;
  letter-spacing:0
}

.connection-tag {
  display:inline-flex;
  align-items:center
}

.card .card-metrics {
  margin:20px 0 18px;
  align-items:flex-start
}

.card-probe-info {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 12px;
  font-size:9px;
  line-height:1.5;
  color:var(--muted);
  margin-bottom:12px
}

.card-probe-info time {
  font-variant-numeric:tabular-nums;
  color:#b7b7bf;
  white-space:nowrap
}

@media(max-width:360px) {
  .counts {
    grid-template-columns:1fr;
    gap:8px
  }
  .live {
    flex-direction:column;
    align-items:flex-start;
    gap:10px
  }
  .live-stamp {
    padding:0;
    border:0
  }
}

@media(min-width:701px) and (max-width:900px) {
  .intro {
    grid-template-columns:1fr
  }
  .monitoring-details {
    max-width:560px;
    width:100%
  }
}