.metrics-real {
  margin: 0 17px 14px;
  padding: 13px;
  border: 1px solid #244561;
  border-radius: 13px;
  background: #071725;
  display: grid;
  gap: 10px;
}

.metric-head {
  display: flex;
  justify-content: space-between;
  color: #b7c9dc;
  font-size: 10px;
}

.metric-head strong { color: var(--ink); }

.metric-track {
  height: 6px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: #17334d;
}

.metric-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  box-shadow: 0 0 10px #31d5d177;
}

.metric-row small {
  display: block;
  margin-top: 3px;
  color: #607b96;
  font-size: 8px;
}

.metrics-checked {
  padding-top: 9px;
  border-top: 1px solid #17334d;
  color: var(--muted);
  font-size: 9px;
}

.metrics-checked strong {
  color: var(--green);
  font-weight: 600;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ui-icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.telegram-icon {
  fill: currentColor;
  stroke: none;
}

.telegram-mark {
  color: #fff;
  transform: none;
}

.telegram-mark .ui-icon { width: 25px; height: 25px; }
.icon-button .ui-icon { width: 20px; height: 20px; }
.summary-icon .ui-icon { width: 23px; height: 23px; }
.server-icon .ui-icon { width: 22px; height: 22px; }
.chevron .ui-icon { width: 18px; height: 18px; }
.bottom-nav .ui-icon { width: 21px; height: 21px; }
.back-button .ui-icon { width: 27px; height: 27px; }

.server-info {
  display: grid;
  gap: 9px;
  margin: 0 17px 13px;
}

.server-address,
.billing-card {
  border: 1px solid #244561;
  border-radius: 12px;
  background: #071725;
}

.server-address {
  min-height: 42px;
  padding: 8px 9px 8px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #cfe2f5;
  font: 600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.copy-button {
  border: 1px solid #285477;
  border-radius: 9px;
  padding: 7px 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #102b45;
  color: #9bcfff;
  font: 600 9px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.copy-button .ui-icon { width: 14px; height: 14px; }

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

.billing-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #102f43;
  color: var(--cyan);
}

.billing-icon .ui-icon { width: 19px; height: 19px; }
.billing-main { min-width: 0; }
.billing-main strong { display: block; font-size: 11px; }
.billing-main span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.billing-side { text-align: right; }
.billing-side small { display: block; color: #cfe2f5; font-size: 9px; }
.billing-side em { display: block; margin-top: 4px; font-size: 8px; font-style: normal; }
.billing-side .renew-on { color: var(--green); }
.billing-side .renew-off { color: var(--amber); }

@media(max-width:520px){
  .billing-card { grid-template-columns: auto minmax(0, 1fr); }
  .billing-side { grid-column: 2; text-align: left; }
}