body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 10% 0, #041d16 0, #020c09 35%, #020407 100%);
  font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Roboto", sans-serif;
}

/* Корневой блок виджета */
#gorboy-flipper-root {
  width: 100%;
  max-width: 480px;
  padding: 18px 20px 14px;
  border-radius: 22px;
  border: 2px solid #00ffbf66;
  box-shadow:
    0 0 0 1px #003326,
    0 0 20px #00ffbf55,
    inset 0 0 16px #001710;
  background:
    radial-gradient(circle at 0 0, rgba(0, 255, 191, 0.16) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(0, 255, 158, 0.22) 0, #020908 70%);
  color: #d9fff2;
  position: relative;
  overflow: hidden;
}

/* Неоновая рамка-бордер */
#gorboy-flipper-root::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  border: 1px solid rgba(0, 255, 191, 0.35);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Хедер */
.gf-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

/* Лого */
.gf-logo {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow:
    0 0 16px rgba(0, 255, 191, 0.7),
    0 0 30px rgba(0, 120, 84, 0.95);
  border: 1px solid rgba(0, 255, 191, 0.85);
  display: block;
  transition: transform 0.15s ease;
  will-change: transform, filter;
}

/* Глитч лого — СИЛЬНЫЙ, чтобы точно было видно */
@keyframes gf-logo-glitch {
  0%   { transform: translate(0, 0) scale(1);        filter: hue-rotate(0deg); }
  10%  { transform: translate(-4px, 2px) scale(1.08); filter: hue-rotate(-15deg); }
  20%  { transform: translate(4px, -3px) scale(1.1);  filter: hue-rotate(10deg); }
  35%  { transform: translate(-6px, -2px) scale(1.08); filter: hue-rotate(-25deg); }
  50%  { transform: translate(5px, 3px) scale(1.09);  filter: hue-rotate(18deg); }
  70%  { transform: translate(-3px, 1px) scale(1.05); filter: hue-rotate(-8deg); }
  85%  { transform: translate(2px, -2px) scale(1.03); filter: hue-rotate(6deg); }
  100% { transform: translate(0, 0) scale(1);        filter: hue-rotate(0deg); }
}

.gf-logo-glitch {
  animation: gf-logo-glitch 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Текстовая часть */
.gf-header-main {
  flex: 1;
  min-width: 0;
}

.gf-title {
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e9fff7;
}

.gf-sub {
  font-size: 11px;
  color: #7cf5c5;
  opacity: 0.9;
}

/* Теги-статусы */
.gf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.gf-tag {
  font-size: 10px;
  padding: 2px 8px 3px;
  border-radius: 999px;
  border: 1px solid rgba(0, 255, 191, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

/* Состояние цепи */
.gf-tag-online {
  background: radial-gradient(circle at 20% 0, #b5ffd6 0, #00ff9a 40%, #003322 100%);
  color: #04110b;
}

.gf-tag-offline {
  background: radial-gradient(circle at 20% 0, #ffb5b5 0, #ff4545 45%, #430000 100%);
  color: #ffecec;
}

.gf-tag-degraded {
  background: radial-gradient(circle at 20% 0, #ffeeb5 0, #ffb93a 45%, #402400 100%);
  color: #2b1200;
}

/* Состояние снапшота */
.gf-tag-snap-wait {
  background: rgba(0, 0, 0, 0.6);
  color: #9cefd2;
  border-color: rgba(0, 255, 191, 0.25);
}

.gf-tag-snap-ok {
  background: rgba(0, 255, 191, 0.12);
  color: #f2fff9;
}

.gf-tag-snap-scan {
  background: rgba(255, 217, 107, 0.12);
  color: #ffd96b;
  border-color: rgba(255, 217, 107, 0.7);
}

/* Кнопка refresh */
.gf-refresh-btn {
  border: none;
  outline: none;
  background: radial-gradient(circle at 30% 0, rgba(0, 255, 191, 0.2) 0, rgba(0, 255, 191, 0.05) 55%, transparent 100%);
  color: #a6ffe2;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 7px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(0, 255, 191, 0.4),
    0 0 10px rgba(0, 255, 191, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.gf-refresh-btn:hover {
  transform: rotate(14deg) scale(1.08);
  background: radial-gradient(circle at 30% 0, rgba(0, 255, 191, 0.3) 0, rgba(0, 255, 191, 0.12) 55%, transparent 100%);
  box-shadow:
    0 0 12px rgba(0, 255, 191, 0.7),
    0 0 26px rgba(0, 255, 191, 0.5);
}

.gf-refresh-btn:active {
  transform: scale(0.96);
  opacity: 0.8;
}

/* Глитч-анимация кнопки */
@keyframes gf-refresh-glitch {
  0% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(18deg) scale(1.12); }
  35% { transform: rotate(-14deg) scale(1.06); }
  55% { transform: rotate(10deg) scale(1.08); }
  75% { transform: rotate(-6deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1); }
}

.gf-refresh-glitch {
  animation: gf-refresh-glitch 0.38s linear;
}

/* Тело */
.gf-body {
  border-top: 1px solid rgba(0, 255, 191, 0.25);
  border-bottom: 1px solid rgba(0, 255, 191, 0.2);
  padding: 8px 0 6px;
  margin: 6px 0 4px;
  font-size: 13px;
}

/* Ряд */
.gf-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
}

.gf-row-label {
  color: #8de9c6;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gf-row-value {
  font-variant-numeric: tabular-nums;
}

/* Цвета риска */
.gf-risk-high {
  color: #ff7d7d;
}

.gf-risk-mid {
  color: #ffd96b;
}

.gf-risk-low {
  color: #96ffd2;
}

/* Футер */
.gf-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #7fe6c4;
  opacity: 0.8;
}

.gf-mint {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.gf-time {
  text-align: right;
}

/* Стейт "ожидание" */
.gf-empty {
  font-size: 12px;
  color: #9cf0cf;
  opacity: 0.9;
  text-align: center;
  padding: 10px 0 4px;
}

/* Мобильная адаптация */
@media (max-width: 480px) {
  #gorboy-flipper-root {
    max-width: 95%;
    padding-inline: 14px;
  }

  .gf-header {
    gap: 10px;
  }

  .gf-logo {
    width: 60px;
    height: 60px;
  }

  .gf-title {
    font-size: 14px;
  }

  .gf-sub {
    font-size: 10px;
  }

  .gf-row {
    font-size: 12px;
  }
}