/* Виджет комментариев/рейтинга super-gadget. Нейтральные токены — подгоните под дизайн-систему сайта. */
#sg-comments, .sg-comments, #lf-comments, .lf-comments {
  --sg-accent: #2563EB;   /* бренд-синий сайта (--accent) */
  --sg-star: #F5A623;     /* золото для звёзд рейтинга */
  --sg-text: #16233A;     /* --ink */
  --sg-muted: #5C6B80;    /* --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; flex-wrap: wrap; gap: .35rem .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-rating__hint { flex-basis: 100%; color: var(--sg-muted); font-size: .82rem; margin-top: .1rem; }
.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-rating__pick { display: inline-flex; gap: .15rem; }
.sg-ratepick { cursor: pointer; font-size: 1.8rem; transition: transform .1s, color .1s; outline: none; }
.sg-ratepick:hover, .sg-ratepick:focus-visible { transform: scale(1.15); }
.sg-ratepick.is-hover { color: var(--sg-star); }
.sg-rating__pick.is-mine .sg-ratepick.is-on { color: var(--sg-star); }

.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__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.sg-form__head .sg-acct { margin-left: auto; }
.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; transition: filter .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
.sg-btn:hover:not(:disabled) { filter: brightness(1.06); }
.sg-btn:active:not(:disabled) { transform: translateY(1px); }
.sg-btn:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 2px; }
.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); }

/* ===== Фича #382: вход / лайки / аватары / ответы / кабинет ===== */
.sg-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.sg-likebar { display: flex; align-items: center; gap: .6rem; }
.sg-like { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: 1px solid var(--sg-border); border-radius: 999px; background: var(--sg-bg); font: inherit; font-weight: 600; cursor: pointer; transition: .15s; }
.sg-like:hover { border-color: var(--sg-accent); }
.sg-like__heart { color: var(--sg-muted); font-size: 1.1rem; line-height: 1; transition: .15s; }
.sg-like.is-on { border-color: #e11d48; color: #e11d48; }
.sg-like.is-on .sg-like__heart { color: #e11d48; transform: scale(1.12); }
.sg-like__hint { color: var(--sg-muted); font-size: .82rem; }

.sg-acct__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .7rem .35rem .4rem; border: 1px solid var(--sg-border); border-radius: 999px; background: var(--sg-bg); font: inherit; font-weight: 600; cursor: pointer; }
.sg-acct__btn:hover { border-color: var(--sg-accent); }

/* Аватар: всегда по центру, круглый кроп */
.sg-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #eef2f7 center/cover no-repeat; color: var(--sg-muted); font-weight: 700; overflow: hidden; }
.sg-ava--ph.is-user { background: var(--sg-accent); color: #fff; }
.sg-ava--lg { width: 72px; height: 72px; font-size: 1.6rem; }
.sg-acct__btn .sg-ava { width: 28px; height: 28px; }
.sg-ava--lg.has-img { color: transparent; }

.sg-comment { display: flex; gap: .8rem; }
.sg-comment__main { flex: 1; min-width: 0; }
.sg-comment--reply { margin-top: .9rem; margin-left: 1.4rem; padding-left: 1rem; border-left: 2px solid var(--sg-border); border-radius: 0; padding-top: .3rem; padding-bottom: .3rem; }
.sg-badge { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sg-accent); border: 1px solid currentColor; border-radius: 4px; padding: .05rem .3rem; }
.sg-reply { margin-top: .5rem; }
.sg-reply__link { background: none; border: 0; color: var(--sg-accent); font: inherit; font-weight: 600; cursor: pointer; padding: .2rem 0; }
.sg-form--reply { margin: .6rem 0 0; padding: .9rem; }

/* Модалка — токены заданы прямо здесь: окно рендерится в <body>, вне #sg-comments,
   поэтому var(--sg-*) от контейнера сюда НЕ доходят (иначе кнопка/инпут «пропадают»). */
.sg-modal {
  --sg-accent: #2563EB; --sg-star: #F5A623; --sg-text: #16233A;
  --sg-muted: #5C6B80; --sg-border: #E2E8F0; --sg-bg: #fff;
  position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  font-family: inherit; color: var(--sg-text);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sg-modal__win { width: 100%; max-width: 420px; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(15,23,42,.28); overflow: hidden; animation: sg-pop .18s ease; }
@keyframes sg-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.sg-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px .65rem; font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; }
.sg-modal__x { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--sg-muted); cursor: pointer; padding: 0 .1em; border-radius: 8px; }
.sg-modal__x:hover { color: var(--sg-text); }
.sg-modal__box { padding: .55rem 20px 20px; display: flex; flex-direction: column; gap: 1.05rem; }
.sg-modal__ico { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg,var(--sg-accent),#4f83ff); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: .1rem 0; box-shadow: 0 8px 20px rgba(37,99,235,.28); }
.sg-modal .sg-input { padding: .85rem .95rem; border: 1.5px solid var(--sg-border); border-radius: 11px; background: #F8FAFC; font-size: 1rem; }
.sg-modal .sg-input:focus { background: #fff; border-color: var(--sg-accent); outline: 3px solid rgba(37,99,235,.14); outline-offset: 0; }
.sg-modal .sg-btn { display: block; width: 100%; box-sizing: border-box; align-self: stretch; text-align: center; padding: .95rem 1.2rem; margin-top: .2rem; font-size: 1.05rem; border-radius: 11px; box-shadow: 0 8px 20px rgba(37,99,235,.24); }
.sg-modal .sg-btn:hover:not(:disabled) { filter: brightness(1.05); }
.sg-modal__hint { color: var(--sg-muted); font-size: .93rem; margin: .15rem 0 .5rem; line-height: 1.5; }
.sg-modal__dev { font-size: .8rem; color: #b45309; background: #fffbeb; border: 1px dashed #f59e0b; border-radius: 8px; padding: .4rem .6rem; margin: 0; }
.sg-input--code { font-size: 1.5rem; letter-spacing: .5rem; text-align: center; }
.sg-consent { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: var(--sg-muted); line-height: 1.4; }
.sg-consent a { color: var(--sg-accent); }
/* Единый вертикальный ритм формы входа — базовый отступ 20px между заголовком/иконкой/текстом/инпутом/чекбоксом/кнопкой */
.sg-modal .sg-modal__step > * { margin: 0 0 20px; }
.sg-modal .sg-modal__step > *:last-child { margin-bottom: 0; }
.sg-modal .sg-modal__step .sg-btn { margin-top: 0; }
.sg-modal .sg-modal__step .sg-hp { margin: 0; }
.sg-modal .sg-modal__step .sg-form__msg { min-height: 0; margin: 0; }
.sg-modal .sg-modal__step .sg-form__msg:not(:empty) { margin: 0 0 20px; }
.sg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sg-lbl { font-weight: 600; font-size: .85rem; margin-top: .2rem; }
.sg-seg { display: flex; gap: .5rem; }
.sg-seg__b { flex: 1; padding: .55rem; border: 1px solid var(--sg-border); border-radius: 8px; background: #fff; font: inherit; cursor: pointer; }
.sg-seg__b.is-on { border-color: var(--sg-accent); color: var(--sg-accent); font-weight: 600; }
.sg-file__drop { display: flex; align-items: center; gap: .8rem; padding: .6rem; border: 1px dashed var(--sg-border); border-radius: 10px; cursor: pointer; }
.sg-file { display: none; }

/* Личный кабинет */
.sg-lk__head { display: flex; align-items: center; gap: 1rem; }
.sg-lk__mail { color: var(--sg-muted); font-size: .85rem; }
.sg-lk__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.sg-btn--ghost { background: none; color: var(--sg-accent); border: 1px solid var(--sg-border); }
.sg-btn--ghost:hover:not(:disabled) { filter: none; background: rgba(37,99,235,.08); border-color: var(--sg-accent); }
.sg-lk__h { margin: .4rem 0 0; font-size: .95rem; }
.sg-lk__likes { display: flex; flex-direction: column; gap: .6rem; }
.sg-lk__like { color: var(--sg-accent); text-decoration: none; font-size: .9rem; padding: .4rem .6rem; border: 1px solid var(--sg-border); border-radius: 8px; }
.sg-lk__like:hover { border-color: var(--sg-accent); }
/* Превью лайкнутой статьи в кабинете — карточка с миниатюрой (как на главной) */
.sg-likecard { display: flex; align-items: center; gap: .85rem;
  text-decoration: none; color: var(--sg-text); background: var(--sg-bg);
  border: 1px solid var(--sg-border); border-radius: 12px; padding: .7rem .8rem; transition: .15s; }
.sg-likecard:hover { border-color: var(--sg-accent); box-shadow: 0 6px 18px rgba(37,99,235,.1); }
.sg-likecard__thumb { flex: 0 0 auto; width: 84px; height: 84px; object-fit: cover;
  border-radius: 9px; background: var(--sg-border); }
.sg-likecard__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.sg-likecard__badge { align-self: start; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--sg-accent);
  background: rgba(37,99,235,.08); border-radius: 6px; padding: .1rem .4rem; margin-bottom: .3rem; }
.sg-likecard__t { font-weight: 700; font-size: .98rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-likecard__d { color: var(--sg-muted); font-size: .84rem; line-height: 1.45; margin-top: .25rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-likecard__go { flex: 0 0 auto; align-self: center; color: var(--sg-muted); font-size: 1.2rem; }
.sg-likecard:hover .sg-likecard__go { color: var(--sg-accent); }
@media (max-width: 480px) { .sg-likecard__thumb { width: 64px; height: 64px; } }

/* ---- Избранное (закладки): кнопка на статье, значок на карточке, раздел ---- */
.sg-favbar { display: inline-flex; align-items: center; }
.sg-fav { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: 1px solid var(--sg-border); border-radius: 999px; background: var(--sg-bg); color: var(--sg-muted); font: inherit; font-weight: 600; cursor: pointer; transition: .15s; }
.sg-fav:hover { border-color: var(--sg-accent); color: var(--sg-accent); }
.sg-fav:disabled { opacity: .6; cursor: default; }
.sg-fav__i { display: inline-flex; line-height: 0; }
.sg-fav.is-on { border-color: var(--sg-accent); color: var(--sg-accent); }
.sg-fav.is-on .sg-fav__i svg { fill: currentColor; }
.sg-fav:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 2px; }
/* Компактный значок-закладка в углу карточки статьи и в карточке раздела «Избранное». */
.sg-fav--card { position: absolute; top: .6rem; right: .6rem; z-index: 2; padding: .38rem; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(15,23,42,.12); color: var(--sg-muted); }
.sg-fav--card:hover { color: var(--sg-accent); }
.sg-fav--card .sg-fav__t { display: none; }
/* Раздел «Избранное»: строка поиска + счётчик найденного. */
.sg-fav-gate { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.sg-fav-gate .sg-btn { margin-top: .4rem; }
.sg-fav__bar { display: flex; align-items: center; gap: .75rem; margin: .2rem 0 1rem; }
.sg-fav__search { max-width: 420px; }
.sg-fav__count { color: var(--sg-muted); font-size: .85rem; white-space: nowrap; }
.sg-lk__likes .sg-likecard { position: relative; padding-right: 3rem; }

/* ===== Страница входа / кабинета (#lf-auth / #sg-auth) ===== */
#sg-auth, .sg-auth, #lf-auth, .lf-auth {
  --sg-accent:#2563EB; --sg-star:#F5A623; --sg-text:#16233A; --sg-muted:#5C6B80; --sg-border:#E2E8F0; --sg-bg:#fff;
  font-family:inherit; color:var(--sg-text);
  max-width:600px; margin:0 auto; box-sizing:border-box;
  display:flex; flex-direction:column; gap:.7rem;
  padding:20px; border:1px solid var(--sg-border); border-radius:16px;
  background:#fff; box-shadow:0 12px 40px rgba(15,23,42,.06);
}
.sg-auth__title { font-size:1.7rem; font-weight:800; margin:0; letter-spacing:-.01em; }
.sg-auth__sub { color:var(--sg-muted); font-size:.92rem; line-height:1.5; margin:0 0 .4rem; }
#sg-auth .sg-btn, .sg-auth .sg-btn, #lf-auth .sg-btn, .lf-auth .sg-btn { align-self:stretch; text-align:center; padding:.7rem 1.4rem; }
#sg-auth .sg-lk__head, .sg-auth .sg-lk__head, #lf-auth .sg-lk__head, .lf-auth .sg-lk__head { margin:.3rem 0; }

/* ===== Счётчики лайков/комментариев на карточках статей (задача #433) ===== */
.sg-card-stat { display: inline-flex; align-items: center; gap: .5rem; margin-top: .55rem;
  font-size: .82rem; font-weight: 600; color: #5C6B80; line-height: 1; }
.sg-card-stat__grp { display: inline-flex; align-items: center; gap: .3rem; }
.sg-card-stat__i { display: inline-flex; align-items: center; line-height: 0; }
.sg-card-stat__i svg { width: 16px; height: 16px; display: block; }
/* Пиктограммы по умолчанию — нейтральный контур */
.sg-card-stat__i.is-like { color: #5C6B80; }
.sg-card-stat__i.is-cmt { color: #5C6B80; }
/* Пользователь сам лайкнул статью → сердце залито фирменным красным */
.sg-card-stat__grp.is-liked .sg-card-stat__i.is-like { color: #e11d48; }
.sg-card-stat__grp.is-liked .sg-card-stat__i.is-like svg { fill: currentColor; }
/* Мини-рейтинг: жёлтая звезда + средняя оценка + число голосов в скобках */
.sg-card-stat__i.is-rate { color: #f59e0b; }
.sg-card-stat__grp--rate { color: #334155; }
.sg-card-stat__rc { color: #5C6B80; font-weight: 600; }
/* В карточках-ссылках (super-gadget: <a class="card">) прижимаем строку книзу */
a.card .sg-card-stat { margin-top: .5rem; }
.sg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===== Подтверждение выхода из аккаунта (задача #443) ===== */
.sg-modal__ico--danger { background: linear-gradient(135deg,#e11d48,#f43f5e); box-shadow: 0 8px 20px rgba(225,29,72,.28); }
.sg-confirm__row { display: flex; gap: 10px; margin-top: 4px; }
.sg-confirm__row .sg-btn { flex: 1; margin: 0; width: auto; }
.sg-btn--danger { background: #e11d48; color: #fff; box-shadow: 0 8px 20px rgba(225,29,72,.24); }
.sg-btn--danger:hover:not(:disabled) { filter: brightness(1.05); }

/* ===== Кнопка входа / пиктограмма аккаунта в шапке (задача #443, #447, #550) =====
   ГОСТЬ = текстовая кнопка-пилюля «Войти в аккаунт».
   АВТОРИЗОВАН = круглая пиктограмма-человек (личный кабинет), текст для скринридеров. */
.sg-authlink { display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 18px; border: 1px solid var(--sg-accent,#2563EB);
  border-radius: 22px; color: var(--sg-accent,#2563EB); background: var(--sg-bg,#fff);
  font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
/* color !important — в статичной разметке ссылка несёт inline style="color:…"
   (accent), а inline перебивает :hover-класс → на ховере текст оставался синим
   на синей заливке и «пропадал». Форсируем белый на ховере (задача #551). */
.sg-authlink:hover { background: var(--sg-accent,#2563EB); color: #fff !important; }
/* Круглая пиктограмма — только для авторизованного пользователя. */
.sg-authlink--icon { width: 42px; padding: 0; border-radius: 50%;
  border-color: var(--sg-border,#E2E8F0); }
/* Мягкий ховер вместо резкого синего кольца по пустому кругу (задача #1398):
   лёгкая голубая заливка + приглушённая рамка, иконка остаётся акцентной. */
.sg-authlink--icon:hover { background: rgba(37,99,235,.08); color: var(--sg-accent,#2563EB);
  border-color: rgba(37,99,235,.32); }
.sg-authlink--icon:focus-visible { outline: 2px solid var(--sg-accent,#2563EB); outline-offset: 2px; }
.sg-authlink__ico { display: inline-flex; line-height: 0; }
.sg-authlink__ico svg { width: 20px; height: 20px; display: block; }
.sg-authlink__t { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== Anti-FOUC для кнопки входа в шапке =====
   Статичная разметка отдаёт текстовую ссылку «Войти в аккаунт»; widget.js после
   проверки сессии (/me) превращает её в круглую пиктограмму и ставит data-sg-ready.
   До этого держим ссылку невидимой, чтобы при КАЖДОЙ смене страницы не мигал
   текст, который тут же сменяется иконкой (выглядело как «разный хедер»). */
a.js-auth:not([data-sg-ready]),
a[href="/profile/"]:not([data-sg-ready]),
a[href="/vojti/"]:not([data-sg-ready]),
a[href="/vojti"]:not([data-sg-ready]) { visibility: hidden; }