/* Виджет комментариев/рейтинга super-gadget. Нейтральные токены — подгоните под дизайн-систему сайта. */
#sg-comments, .sg-comments {
  --sg-accent: #2563EB;   /* бренд-синий сайта (--accent) */
  --sg-star: #F5A623;     /* золото для звёзд рейтинга */
  --sg-text: #16233A;     /* --ink */
  --sg-muted: #94A3B8;    /* --muted */
  --sg-border: #E2E8F0;   /* --line */
  --sg-bg: #fff;
  font-family: inherit;
  color: var(--sg-text);
  max-width: 760px;
  margin: 2.5rem 0;
}
.sg-rating { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.sg-rating__avg { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.sg-rating__count { color: var(--sg-muted); font-size: .9rem; }
.sg-star { color: var(--sg-border); font-size: 1.3rem; line-height: 1; }
.sg-star.is-on { color: var(--sg-star); }
.sg-pick { cursor: pointer; font-size: 1.8rem; transition: transform .1s; }
.sg-pick:hover { transform: scale(1.15); }

.sg-form { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; border: 1px solid var(--sg-border); border-radius: 12px; background: var(--sg-bg); margin-bottom: 2rem; }
.sg-form__label { font-weight: 600; font-size: .95rem; }
.sg-form__stars { display: flex; gap: .25rem; }
.sg-input { width: 100%; padding: .65rem .8rem; border: 1px solid var(--sg-border); border-radius: 8px; font: inherit; box-sizing: border-box; }
.sg-input:focus { outline: 2px solid var(--sg-accent); outline-offset: 1px; border-color: var(--sg-accent); }
.sg-textarea { min-height: 96px; resize: vertical; }
.sg-btn { align-self: flex-start; padding: .6rem 1.4rem; border: 0; border-radius: 8px; background: var(--sg-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.sg-btn:disabled { opacity: .6; cursor: default; }
.sg-form__msg { font-size: .9rem; min-height: 1.2em; }
.sg-form__msg.is-ok { color: #15803d; }
.sg-form__msg.is-err { color: #dc2626; }

.sg-list { display: flex; flex-direction: column; gap: 1rem; }
.sg-comment { padding: 1rem 1.1rem; border: 1px solid var(--sg-border); border-radius: 10px; }
.sg-comment__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; flex-wrap: wrap; }
.sg-comment__name { font-weight: 600; }
.sg-comment__rating .sg-star { font-size: .95rem; }
.sg-comment__date { color: var(--sg-muted); font-size: .8rem; margin-left: auto; }
.sg-comment__body { line-height: 1.55; }
.sg-empty { color: var(--sg-muted); }