.blog-friends-panel {
  background: linear-gradient(145deg, rgba(16, 34, 55, 0.88), rgba(10, 20, 34, 0.94));
  border: 1px solid rgba(126, 199, 255, 0.22);
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(1, 11, 24, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  margin: 0 0 1.4rem;
  overflow: hidden;
  padding: 1.35rem;
}

.blog-friends-panel-head {
  border-bottom: 1px solid rgba(126, 199, 255, 0.14);
  margin: 0 0 1rem;
  padding-bottom: 0.9rem;
}

.blog-friends-kicker {
  color: #7ee7d4;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin: 0 0 0.28rem;
  text-transform: uppercase;
}

.blog-friends-panel h2 {
  border: 0 !important;
  color: #f2fbff;
  font-size: 1.35rem;
  margin: 0 0 0.45rem !important;
  padding: 0 !important;
}

.blog-friends-panel h2::before,
.blog-friends-panel h2::after {
  display: none !important;
}

.blog-friends-panel p {
  color: rgba(226, 242, 255, 0.78);
  line-height: 1.75;
  margin: 0;
}

.blog-friends-form {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1.2rem;
}

.blog-friends-form label {
  color: #c8e9ff;
  font-weight: 800;
}

.blog-friends-form label span {
  color: rgba(200, 233, 255, 0.52);
  font-size: 0.78em;
  font-weight: 700;
}

.blog-friends-input-row {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.blog-friends-input-row input,
.blog-friends-optional-grid input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(185, 221, 244, 0.28);
  border-radius: 14px;
  color: #fff;
  font-size: 0.98rem;
  min-width: 0;
  outline: none;
  padding: 0.82rem 0.95rem;
}

.blog-friends-input-row input:focus,
.blog-friends-optional-grid input:focus {
  border-color: #7ee7d4;
  box-shadow: 0 0 0 3px rgba(126, 231, 212, 0.16);
}

.blog-friends-optional-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-friends-optional-grid label {
  display: grid;
  gap: 0.42rem;
}

.blog-friends-input-row button {
  background: linear-gradient(135deg, #7ee7d4, #74bfff);
  border: 0;
  border-radius: 999px;
  color: #07131f;
  cursor: pointer;
  font-weight: 900;
  padding: 0.82rem 1.15rem;
  white-space: nowrap;
}

.blog-friends-input-row button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.blog-friends-status {
  min-height: 1.4em;
}

.blog-friends-status.is-success {
  color: #8ff0c5;
}

.blog-friends-status.is-error {
  color: #ffb4a8;
}

.blog-friends-status.is-info {
  color: #a8d7ff;
}

.blog-friends-list-title {
  margin-top: 0.4rem !important;
}

.blog-friends-empty {
  color: rgba(226, 242, 255, 0.62) !important;
  font-weight: 700;
  padding: 0.3rem 0;
  width: 100%;
}

.blog-friend-link-item a {
  background: rgba(18, 38, 64, 0.72) !important;
  border: 1px solid rgba(126, 199, 255, 0.18);
}

@media (max-width: 620px) {
  .blog-friends-input-row,
  .blog-friends-optional-grid {
    grid-template-columns: 1fr;
  }

  .blog-friends-input-row button {
    width: 100%;
  }
}

.blog-friend-color-avatar {
  align-items: center;
  background: linear-gradient(135deg, var(--friend-avatar-a), var(--friend-avatar-b));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 14px color-mix(in srgb, var(--friend-avatar-b) 38%, transparent);
  color: rgba(255, 255, 255, 0.94);
  display: flex;
  justify-content: center;
  position: relative;
}

.blog-friend-color-avatar::before {
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.34), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 48%);
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.blog-friend-color-avatar span {
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  position: relative;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  z-index: 1;
}

.blog-friend-color-0 { --friend-avatar-a: #2563eb; --friend-avatar-b: #38bdf8; }
.blog-friend-color-1 { --friend-avatar-a: #0f766e; --friend-avatar-b: #5eead4; }
.blog-friend-color-2 { --friend-avatar-a: #7c3aed; --friend-avatar-b: #c084fc; }
.blog-friend-color-3 { --friend-avatar-a: #be123c; --friend-avatar-b: #fb7185; }
.blog-friend-color-4 { --friend-avatar-a: #b45309; --friend-avatar-b: #fbbf24; }
.blog-friend-color-5 { --friend-avatar-a: #047857; --friend-avatar-b: #34d399; }
.blog-friend-color-6 { --friend-avatar-a: #1d4ed8; --friend-avatar-b: #818cf8; }

#aside-content .card-info .site-data > a.blog-friend-site-data,
#sidebar-menus .site-data > a.blog-friend-site-data {
  color: inherit;
}

#aside-content .card-info .site-data > a.blog-friend-site-data .length-num,
#sidebar-menus .site-data > a.blog-friend-site-data .length-num {
  color: rgba(248, 250, 252, 0.96);
}