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

#membranes-list { display: flex; flex-direction: column; gap: 14px; }

/* Панель этой вкладки прокручивается страницей, а не собой: в admin.css у
   .panel стоит overflow-x: auto ради широких таблиц кодов, и липкий ряд знаков
   в такой панели прилипал бы к неподвижному. Та же правка, что у «Уровней». */
#pane-membranes .panel { overflow-x: visible; }

.mb-h {
  margin: 8px 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;
}

/* ── ряд знаков для быстрого перехода ── */
.mb-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: -4px -4px 0; padding: 8px 4px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.mb-nav-i {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted); font-size: 11px; text-decoration: none;
}
.mb-nav-i:hover { border-color: var(--accent); color: var(--accent); }

/* ── знак мембраны ── */
/* Иконка — встроенный SVG из игры, красится currentColor. Размер задаём и
   ширину, и высоту: без них WebKit рисует 300×150 вместо пропорции viewBox
   (та же грабля, что в шапке ресурсов игры). */
.mb-ic { display: inline-flex; width: 22px; height: 22px; color: #c77dff; }
.mb-ic svg { width: 22px; height: 22px; display: block; }
.mb-nav-i .mb-ic, .mb-nav-i .mb-ic svg { width: 16px; height: 16px; }
.mb-sym { color: #c77dff; font-size: 16px; }

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

/* Таблица расписания прокручивается СВОЕЙ обёрткой, а не страницей: у панели
   этой вкладки overflow снят ради липкого ряда знаков, и без обёртки узкий
   экран уезжал вбок целиком. */
.mb-tw { overflow-x: auto; }
.mb-sched { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 12px; }
.mb-sched th {
  padding: 4px 8px; text-align: left; font-weight: normal;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.mb-sched td { padding: 5px 8px; border-bottom: 1px solid rgba(78,205,196,.08); vertical-align: top; }
.mb-sched tr:last-child td { border-bottom: none; }
.mb-no { width: 42px; color: var(--accent); }
.mb-first { width: 34%; color: var(--muted); font-size: 11px; }
.mb-row-boss td { color: rgba(199,125,255,.8); }
.mb-places { display: flex; flex-direction: column; }
.mb-place-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 10px;
  padding: 6px 8px; border-bottom: 1px solid rgba(78,205,196,.08);
  font-size: 12px; line-height: 1.6;
}
.mb-place-row:last-of-type { border-bottom: none; }
.mb-place { color: var(--accent); }
.mb-place-txt { color: var(--text); }

.mb-chip {
  display: inline-block; padding: 1px 6px; margin: 1px 0;
  border: 1px solid; border-radius: 3px; font-size: 11px;
}
.mb-cnt { color: var(--muted); font-size: 11px; margin: 0 8px 0 3px; }

.mb-quote {
  margin-top: 8px; padding: 8px 10px;
  background: rgba(78,205,196,.05); border: 1px solid var(--line); border-radius: 6px;
  font-size: 12px; line-height: 1.6; color: var(--text);
}
.mb-quote-lab {
  display: block; margin-bottom: 4px;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
}

.mb-dead-note {
  padding: 9px 11px;
  background: rgba(243,156,18,.07); border: 1px solid rgba(243,156,18,.35); border-radius: 6px;
  font-size: 12px; line-height: 1.6; color: #f0c674;
}
.mb-dead-note b { color: #f39c12; font-weight: normal; }

/* ── карточки ── */
.mb-grid { display: flex; flex-direction: column; gap: 12px; }
.mb-card {
  padding: 12px 14px;
  background: rgba(7,20,38,.6); border: 1px solid var(--line); border-radius: 8px;
  scroll-margin-top: 48px;
}
.mb-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.mb-name { font-size: 15px; letter-spacing: 1px; color: #c77dff; }
.mb-key { font-size: 11px; color: var(--muted); }
.mb-usym { margin-left: auto; font-size: 15px; color: var(--muted); }

.mb-sec { margin-top: 10px; }
.mb-sec-h {
  margin-bottom: 5px;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
}
.mb-sec-h i { text-transform: none; letter-spacing: 0; font-style: normal; color: rgba(243,156,18,.75); }

.mb-f {
  display: grid; grid-template-columns: 110px 1fr 150px; gap: 10px;
  padding: 5px 0; border-top: 1px solid rgba(78,205,196,.08);
  font-size: 12px; line-height: 1.6;
}
.mb-f-lab { color: var(--accent); }
.mb-f-txt { color: var(--text); }
.mb-f-note { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-style: normal; }
.mb-f-dead .mb-f-txt { color: var(--muted); }
.mb-f-empty .mb-f-txt { font-style: italic; }
.mb-muted { color: var(--muted); }

.mb-tag { font-size: 10px; line-height: 1.5; text-align: right; }
.mb-tag-on  { color: rgba(78,205,196,.8); }
.mb-tag-off { color: rgba(255,107,107,.7); }
.mb-tag-new { color: #f39c12; }

.mb-nar {
  padding: 5px 0 5px 10px; margin-top: 4px;
  border-left: 2px solid rgba(199,125,255,.3);
  font-size: 12px; line-height: 1.6; color: var(--muted);
}

/* Узкий экран: админку открывают и с телефона, а три столбца строки поля в
   360 px не живут. Ничто в одну строку не должно становиться двумя — здесь
   строка честно перестраивается в три. */
@media (max-width: 720px) {
  .mb-f { grid-template-columns: 1fr; gap: 2px; }
  .mb-place-row { grid-template-columns: 1fr; gap: 2px; }
  .mb-tag { text-align: left; }
  .mb-first { display: none; }
}

/* ── предмет, который оставляет мембрана (24.09.2026) ── */
.mb-item { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; }
.mb-item-img {
  flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain;
  border: 1px solid var(--line); border-radius: 4px; background: rgba(155,89,182,.08);
}
.mb-item-body { min-width: 0; font-size: 12px; line-height: 1.55; }
.mb-item-name { color: var(--text); margin-bottom: 2px; }
.mb-item-desc { color: var(--text); }
.mb-item-full { color: var(--muted); font-size: 11px; margin-top: 3px; }