/* MovieHub Ratings — interactive visitor rating */
.mhr-panel { display: flex; flex-direction: column; gap: 14px; }

.mhr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(145deg, #1a1d29 0%, #141722 100%);
  border: 1px solid #262838;
}

.mhr-avg { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.mhr-avg__num {
  font-size: 36px;
  font-weight: 850;
  letter-spacing: -1px;
  color: #ffb200;
  font-variant-numeric: tabular-nums;
}
.mhr-avg__scale { font-size: 14px; color: #9aa5ad; font-weight: 600; }

.mhr-meta { text-align: right; min-width: 0; }
.mhr-count {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #b0bac2;
  font-variant-numeric: tabular-nums;
}
.mhr-hint { margin: 4px 0 0; font-size: 12px; color: #7cc4ff; font-weight: 600; }

.mhr-bars { display: grid; gap: 6px; }
.mhr-bar {
  display: grid;
  grid-template-columns: 10px 1fr 24px;
  gap: 8px;
  align-items: center;
}
.mhr-bar small { font-size: 10px; color: #8a959d; text-align: center; }
.mhr-bar i {
  display: block;
  height: 6px;
  border-radius: 99px;
  background: #26333d;
  overflow: hidden;
}
.mhr-bar b {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffad16, #ffb200);
  transition: width .35s ease;
}
.mhr-bar em {
  font-style: normal;
  font-size: 10px;
  color: #7a868e;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mhr-vote {
  padding: 14px;
  border-radius: 14px;
  background: #12151e;
  border: 1px solid #262838;
  text-align: center;
}
.mhr-vote__label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9aa5ad;
}

.mhr-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.mhr-star {
  appearance: none;
  width: 44px;
  height: 44px;
  border: 1px solid #2a2d3d;
  border-radius: 12px;
  background: #1a1d29;
  color: #3a4550;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.mhr-star:hover:not(:disabled),
.mhr-star.is-hover {
  color: #ffb200;
  border-color: rgba(255, 178, 0, .45);
  background: rgba(255, 178, 0, .1);
  transform: translateY(-2px);
}
.mhr-star.is-on {
  color: #ffb200;
  border-color: rgba(255, 178, 0, .55);
  background: rgba(255, 178, 0, .16);
}
.mhr-star:disabled {
  cursor: default;
  opacity: .95;
}
.mhr-star:focus-visible {
  outline: 2px solid #ffb200;
  outline-offset: 2px;
}

.mhr-external {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.mhr-ext {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  background: #1a1d29;
  border: 1px solid #2a2d3d;
  color: #b0bac2;
}
.mhr-ext b { color: #fff; font-variant-numeric: tabular-nums; margin-left: 4px; }
.mhr-ext--kp b { color: #ffb200; }
.mhr-ext--imdb { background: #1c1a10; border-color: #3a3420; }
.mhr-ext--imdb b { color: #f3bd18; }

.mhr-status {
  min-height: 1.2em;
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #7cc4ff;
}
.mhr-status.is-error { color: #ff7a7a; }
.mhr-status.is-ok { color: #4dd4ac; }

@media (max-width: 620px) {
  .mhr-star { width: 48px; height: 48px; font-size: 24px; }
  .mhr-avg__num { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .mhr-star,
  .mhr-bar b { transition: none; }
}