/* Personalized recommendations and project community UI. */
.mods-recommend-onboarding.auth-required {
  position: relative;
  width: min(760px, 100%);
  min-height: 330px;
  margin: 24px auto;
  padding: clamp(34px, 6vw, 58px);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% -15%, rgba(56, 224, 118, .2), transparent 48%),
    linear-gradient(150deg, rgba(27, 38, 32, .98), rgba(10, 16, 12, .98));
  border: 1px solid rgba(113, 255, 162, .18);
  border-radius: 22px;
  box-shadow: 0 24px 65px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .045);
}
.mods-recommend-onboarding.auth-required::after {
  content: "";
  position: absolute;
  inset: auto 12% -70px;
  height: 110px;
  background: #29cf6e;
  filter: blur(70px);
  opacity: .12;
  pointer-events: none;
}
.auth-required .mods-recommend-orb {
  display: grid;
  width: 74px;
  height: 74px;
  margin: 0 auto 22px;
  place-items: center;
  color: #83f5aa;
  background: linear-gradient(145deg, rgba(71, 230, 128, .18), rgba(15, 38, 24, .76));
  border: 1px solid rgba(109, 244, 157, .28);
  border-radius: 22px;
  box-shadow: 0 15px 38px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .07);
  transform: none;
}
.auth-required .mods-recommend-orb i { font-size: 1.7rem; }
.mods-recommend-onboarding.auth-required h2,
.mods-recommend-onboarding.auth-required > strong { margin: 0 0 10px; color: #f4fbf6; font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.25; }
.mods-recommend-onboarding.auth-required p { max-width: 520px; margin: 0 auto 24px; color: rgba(222, 238, 228, .68); line-height: 1.7; }
.mods-recommend-onboarding button[data-recommend-login] {
  min-width: 168px;
  height: 46px;
  padding: 0 22px;
  color: #07150c;
  font: inherit;
  font-weight: 800;
  background: linear-gradient(135deg, #6cf29b, #29cb6c);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(41, 203, 108, .22);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.mods-recommend-onboarding button[data-recommend-login]:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 34px rgba(41, 203, 108, .3); }

.mod-comments-root { display: grid; gap: 16px; max-width: 980px; margin: 0 auto; }
.mod-comments-head,
.mod-comments-login,
.mod-comment-form,
.mod-comments-list article {
  border: 1px solid rgba(116, 255, 166, .12) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(27, 37, 31, .96), rgba(11, 17, 13, .96)) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .04) !important;
}
.mod-comments-head { position: relative; overflow: hidden; padding: 26px 28px !important; }
.mod-comments-head::after { content: ""; position: absolute; width: 180px; height: 180px; right: -80px; top: -110px; border-radius: 50%; background: rgba(48, 216, 111, .18); filter: blur(38px); pointer-events: none; }
.mod-comments-head span { color: #65e993 !important; font-size: .72rem !important; font-weight: 900 !important; letter-spacing: .14em !important; }
.mod-comments-head h2 { margin: 7px 0 0 !important; color: #f5fbf7 !important; }
.mod-comments-login { padding: 24px 26px !important; text-align: center; }
.mod-comments-login p { margin: 0 0 16px !important; color: rgba(224, 238, 229, .68) !important; }
.mod-comments-login button,
.mod-comment-form button[type="submit"] {
  min-height: 43px !important;
  padding: 0 20px !important;
  color: #07140b !important;
  font-weight: 850 !important;
  background: linear-gradient(135deg, #6cf09a, #29c96b) !important;
  border: 0 !important;
  border-radius: 11px !important;
  box-shadow: 0 10px 24px rgba(41, 201, 107, .2) !important;
  cursor: pointer;
}
.mod-comment-form { padding: 22px !important; }
.mod-comment-form textarea {
  min-height: 118px !important;
  padding: 15px 16px !important;
  color: #eff8f2 !important;
  background: rgba(1, 7, 4, .55) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 12px !important;
  resize: vertical;
}
.mod-comment-form textarea:focus { outline: none !important; border-color: rgba(82, 231, 134, .64) !important; box-shadow: 0 0 0 3px rgba(45, 212, 105, .09) !important; }
.mod-comments-list { display: grid; gap: 12px; }
.mod-comments-list article { padding: 20px 22px !important; transition: transform .2s ease, border-color .2s ease !important; }
.mod-comments-list article:hover { transform: translateY(-2px); border-color: rgba(112, 246, 159, .25) !important; }
.mod-comment-author img { border-radius: 11px !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .28) !important; }
@media (max-width: 700px) {
  .mods-recommend-onboarding.auth-required { min-height: 0; border-radius: 17px; }
  .mod-comments-head, .mod-comments-login, .mod-comment-form, .mod-comments-list article { border-radius: 14px !important; }
}