/* Вкладка «Сообщения». Цвета и приёмы — те же, что у остальной админки
   (admin.css): это её седьмая вкладка, а не отдельная страница. */

#hints-list { display: flex; flex-direction: column; gap: 14px; }
/* У .panel в админке стоит overflow-x: auto ради широких таблиц кодов. Внутри
   такой панели длинный текст сообщения уводит страницу вбок целиком. */
#pane-hints .panel { overflow-x: visible; }

.hn-h {
  margin: 10px 0 -4px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); font-weight: normal;
}

/* ── итог проверки ── */
.hn-verdict {
  padding: 10px 12px; border-radius: 8px;
  font-size: 12px; line-height: 1.65;
  background: rgba(78,205,196,.06); border: 1px solid var(--line);
}
.hn-verdict b { font-weight: normal; color: var(--accent); }
.hn-verdict.hn-warn { background: rgba(243,156,18,.06); border-color: rgba(243,156,18,.3); }
.hn-verdict.hn-warn b { color: #f0c674; }
.hn-verdict.hn-bad  { background: rgba(255,107,107,.07); border-color: rgba(255,107,107,.4); }
.hn-verdict.hn-bad b { color: var(--err); }
.hn-sub { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,107,107,.2); }
.hn-sub b { color: #ff9f9f; font-weight: normal; }

/* ── правила системы ── */
.hn-rules { display: flex; flex-direction: column; gap: 8px; }
.hn-rule {
  padding: 8px 10px; border-left: 2px solid var(--line);
  font-size: 12px; line-height: 1.65; color: var(--text);
}
.hn-rule b { color: var(--accent); font-weight: normal; }
.hn-rule code { font-size: 11px; color: var(--muted); }

/* ── ряд поиска ── */
.hn-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.hn-q {
  flex: 1 1 260px; min-width: 200px; padding: 6px 9px;
  background: rgba(7,20,38,.8); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); font: 12px/1.4 'Courier New', monospace;
}
.hn-q:focus { outline: none; border-color: var(--accent); }
/* Отбор по голосу — узкий, чтобы не отнимать ширину у поиска. */
.hn-voice { flex: 0 0 auto; min-width: 0; width: auto; cursor: pointer; }
.hn-chk { display: flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; }

/* ── карточка сообщения ── */
.hn-grid { display: flex; flex-direction: column; gap: 10px; }
.hn-card {
  padding: 10px 12px;
  background: rgba(7,20,38,.6); border: 1px solid var(--line); border-radius: 8px;
}
.hn-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hn-id    { color: #c77dff; font-size: 12px; }
.hn-label { color: var(--accent); font-size: 13px; letter-spacing: 1px; }

.hn-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; }
.hn-t, .hn-rk {
  padding: 1px 7px; border: 1px solid var(--line); border-radius: 3px;
  font-size: 10px; letter-spacing: .5px; color: var(--muted); white-space: nowrap;
}
.hn-t-glitch     { color: #ff9f9f; border-color: rgba(255,107,107,.35); }
.hn-t-classified { color: #f0c674; border-color: rgba(243,156,18,.35); }
.hn-t-off        { color: var(--muted); border-style: dashed; }
.hn-t-gate       { color: #9ecbff; border-color: rgba(120,180,255,.35); }
.hn-t-dead       { color: var(--err); border-color: rgba(255,107,107,.45); }
/* Голос записи: кто говорит с игроком (docs/tone-of-voice.md). */
.hn-v { padding: 1px 7px; border: 1px solid; border-radius: 3px; font-size: 10px; letter-spacing: .5px; }
.hn-v-system    { color: #7fd8ff; border-color: rgba(127,216,255,.4); }
.hn-v-institute { color: #f0d060; border-color: rgba(240,208,96,.4); }
.hn-v-circle    { color: #c77dff; border-color: rgba(199,125,255,.4); }

/* ── знаки ресурсов в тексте: тот же набор, что в игре ── */
.gi { display: inline-block; height: 1em; width: auto; line-height: 0; vertical-align: -0.14em; }
.gi > svg { height: 100%; width: auto; display: block; }
.txt-ic { height: 1.05em; margin: 0 .12em; vertical-align: -0.16em; }
.txt-ic-gold   { color: #f0d060; }
.txt-ic-teal   { color: #4ecdc4; }
.txt-ic-green  { color: #2ecc71; }
.txt-ic-yellow { color: #f39c12; }
.txt-ic-red    { color: #e74c3c; }
.txt-ic-purple { color: #9b59b6; }
.txt-ic-blue   { color: #3b82f6; }
.txt-ic-warp   { color: #9b59b6; }
.txt-ic-data   { color: #7fd8ff; }
.txt-ic-energy { color: #f0d060; }
.txt-ic-hp     { color: #4ecdc4; }
/* Ранг красится по ступеням: 1–2 — про жизнь и правила слоя, 7–8 — азбука. */
.hn-rk-1, .hn-rk-2 { color: #ff9f9f; border-color: rgba(255,107,107,.4); }
.hn-rk-3, .hn-rk-4 { color: #f0c674; border-color: rgba(243,156,18,.35); }
.hn-rk-0 { color: var(--err); border-color: rgba(255,107,107,.5); }

.hn-when { margin-bottom: 8px; font-size: 12px; line-height: 1.6; color: var(--text); }
.hn-when b { color: var(--accent); font-weight: normal; }

.hn-text { font-size: 12px; line-height: 1.7; color: var(--text); white-space: normal; }
.hn-part {
  display: grid; grid-template-columns: 110px 1fr; gap: 10px;
  padding: 3px 0; border-top: 1px solid rgba(78,205,196,.08);
  font-size: 12px; line-height: 1.6;
}
.hn-part:first-of-type { border-top: none; }
.hn-pk { color: var(--muted); font-size: 11px; }
.hn-empty { color: var(--err); font-size: 12px; }

/* ── замечания ── */
.hn-notes { margin: 8px 0 0; display: flex; flex-direction: column; gap: 3px; }
.hn-note { padding: 4px 8px; border-radius: 4px; font-size: 11px; line-height: 1.55; }
.hn-n-err  { background: rgba(255,107,107,.08); color: #ff9f9f; }
.hn-n-warn { background: rgba(243,156,18,.07); color: #f0c674; }

/* ── где зовут: функция, строка и сама строка кода ── */
.hn-sites { margin-top: 8px; }
.hn-site {
  display: grid; grid-template-columns: 190px 90px 1fr; gap: 8px; align-items: baseline;
  padding: 3px 0; border-top: 1px solid rgba(78,205,196,.08);
  font-size: 11px; line-height: 1.55;
}
.hn-fn  { color: var(--accent); }
.hn-ln  { color: var(--muted); }
.hn-tag { color: #f0c674; font-size: 10px; }
.hn-site code { grid-column: 1 / -1; color: var(--muted); font-size: 11px; word-break: break-word; }

.hn-keys { margin-top: 8px; font-size: 11px; color: var(--muted); }
.hn-keys code { color: #9ecbff; font-size: 11px; }

@media (max-width: 860px) {
  .hn-part { grid-template-columns: 1fr; gap: 1px; }
  .hn-site { grid-template-columns: 1fr; gap: 1px; }
}

/* ── Архив: карточки Массивов ── */
.hn-arcs { display: flex; flex-direction: column; gap: 8px; }
.hn-arc {
  padding: 8px 10px;
  background: rgba(7,20,38,.6); border: 1px solid var(--line); border-radius: 8px;
}
.hn-arc-bad { border-color: rgba(243,156,18,.45); }
.hn-arc-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.hn-arc-what { color: var(--accent); font-size: 12px; }
.hn-arc-hd code { color: #9ecbff; font-size: 11px; margin-left: auto; }
.hn-arc-txt { font-size: 12px; line-height: 1.65; color: var(--text); }
@media (max-width: 860px) { .hn-arc-hd code { margin-left: 0; } }

/* ─── ВКЛЮЧЕНИЯ (14.10.2026): текст слева, два ролика справа ─── */
.vc-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; margin-top: 8px; }
.vc-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.vc-slot { border: 1px solid rgba(126,168,190,.24); border-radius: 3px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.vc-slot-hd { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.vc-prev { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 2px; }
.vc-acts { display: flex; gap: 8px; align-items: center; }
.vc-up, .vc-drop {
  font-size: 12px; padding: 4px 10px; cursor: pointer; border-radius: 2px;
  border: 1px solid rgba(78,205,196,.5); color: #4ecdc4; background: rgba(78,205,196,.06);
}
.vc-drop { border-color: rgba(231,76,60,.45); color: #ef7264; background: none; }
.vc-st { font-size: 12px; color: #4ecdc4; }
.vc-st-bad { color: #ef7264; }
@media (max-width: 900px) { .vc-body, .vc-slots { grid-template-columns: 1fr; } }