.hover-help {
  display: none;
  position: fixed;
  z-index: 40000;
  width: min(300px, calc(100vw - 16px));
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(16, 16, 18, 0.94);
  color: #f3f3f4;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: auto;
}

.hover-help.is-open { display: block; }

.hover-help-clip {
  position: relative;
  height: 158px;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.04) 55%);
  background-size: 220% 100%;
  background-color: #09090b;
}

.hover-help-clip.is-loading { animation: hover-help-shimmer 1.1s linear infinite; }

.hover-help-clip img {
  display: block;
  width: 100%;
  height: 158px;
  object-fit: contain;
  background: #070709;
}

.hover-help-kicker {
  margin: 0 6px 2px;
  color: #9a9aa3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hover-help[dir="rtl"] .hover-help-kicker {
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
}

.hover-help-title {
  margin: 0 6px 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.hover-help-body {
  margin: 0 6px 6px;
  color: #c8c8ce;
  font-size: 12px;
  line-height: 1.55;
}

.hover-help[dir="rtl"] .hover-help-title,
.hover-help[dir="rtl"] .hover-help-body {
  text-align: right;
}

@keyframes hover-help-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hover-help-clip.is-loading { animation: none; }
}

html[data-tooltips="off"] .hover-help,
html[data-tooltips="off"] #hover-preview-tooltip,
html[data-tooltips="off"] .info-tooltip .tooltip-text {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}