@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  /* Обсидиан: почти чёрная основа с холодным подтоном, золото — акцент.
     Поверхности (карточки, окна, меню) — тёмный градиент и тонкая рамка. */
  --bg:          #07070A;
  --bg-2:        #0A0A0E;           /* центральная колонка */
  --panel:       #0E0E13;
  --panel-2:     #16161D;
  --panel-3:     #1C1C25;           /* наведение */
  --border:      #23232D;
  --border-2:    #30303C;           /* рамка при наведении, активная */
  --text:        #E9EAF0;
  --muted:       #767989;
  --faint:       #4F5263;
  --accent:      #C9A24B;
  --accent-dim:  #8A6F35;
  --good:        #3FB950;
  --bad:         #E5534B;
  --warn:        #E0A030;
  --info:        #8CBCFF;
  --surface:     linear-gradient(180deg, #15151c, #0f0f14);
  --well:        #08080B;           /* «колодцы»: чат, журнал, поля ввода */
  --radius:      9px;               /* кнопки, поля */
  --radius-l:    12px;              /* карточки, окна, меню */
  --shadow-pop:  0 12px 32px rgba(0, 0, 0, .55);
  --topbar-h:    52px;
  --left-w:      220px;
  --right-w:     320px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* hidden должен прятать всегда: у кнопок свой display (inline-flex), и без
   этого правила он перебивал атрибут — скрытые кнопки вылезали. */
[hidden] { display: none !important; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,.num { font-family: 'Space Grotesk', 'Inter', sans-serif; }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 2px solid rgba(201, 162, 75, .6); outline-offset: 1px; }

/* ── Buttons ─────────────────────────────────────────────────── */
/* Один вид на всю панель; оттенок несёт смысл: зелёный — запуск,
   жёлтый — остановка, красный — выход/удаление, золото — главное. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 7px 13px;
  font-weight: 500; line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s, transform .06s;
}
.btn:hover { background: rgba(255, 255, 255, .07); border-color: var(--border-2); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn.btn-danger { color: #ff8f88; background: rgba(229, 83, 75, .10); border-color: rgba(229, 83, 75, .38); }
.btn.btn-danger:hover { color: #fff; background: rgba(229, 83, 75, .22); border-color: rgba(229, 83, 75, .6); }
.btn.btn-warn { color: #f2c04d; background: rgba(224, 160, 48, .10); border-color: rgba(224, 160, 48, .38); }
.btn.btn-warn:hover { color: #ffe3a3; background: rgba(224, 160, 48, .2); border-color: rgba(224, 160, 48, .6); }
.btn.btn-ok { color: #7ee08c; background: rgba(63, 185, 80, .10); border-color: rgba(63, 185, 80, .38); }
.btn.btn-ok:hover { color: #c8f5cf; background: rgba(63, 185, 80, .2); border-color: rgba(63, 185, 80, .6); }
.btn.btn-primary { background: var(--accent); color: #1a1305; border-color: var(--accent); font-weight: 600; }
.btn.btn-primary:hover { background: #d8b35e; border-color: #d8b35e; }

/* Сегменты: переключатель из нескольких кнопок (как вкладки инвентаря) */
.seg {
  display: flex; gap: 3px; padding: 3px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 11px;
}
.seg-btn {
  flex: 1; min-width: 0; height: 30px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--muted);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.on, .seg-btn.active { background: var(--panel-2); border-color: var(--border-2); color: var(--text); }

/* ── Dot ─────────────────────────────────────────────────────── */
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #3a3a46;
  flex-shrink: 0;
}
.dot.on   { background: var(--good); box-shadow: 0 0 7px rgba(63, 185, 80, .7); }
.dot.off  { background: var(--bad); box-shadow: 0 0 7px rgba(229, 83, 75, .5); }
/* Жёлтый: Адреналин работает, но бот выключен */
.dot.warn { background: var(--warn); box-shadow: 0 0 7px rgba(224, 160, 48, .5); }

/* ── Toggle ──────────────────────────────────────────────────── */
.toggle {
  width: 34px; height: 20px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.toggle::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--faint);
  top: 2px; left: 2px;
  transition: left .15s, background .15s;
}
.toggle.on { background: rgba(201, 162, 75, .18); border-color: var(--accent-dim); }
.toggle.on::after { left: 16px; background: var(--accent); box-shadow: 0 0 6px rgba(201, 162, 75, .6); }

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
  gap: 12px;
}
.topbar-left  { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.brand-name   { font-size: 15px; font-weight: 600; font-family: 'Space Grotesk', sans-serif; }

/* ── Hamburger ───────────────────────────────────────────────── */
.hamburger {
  display: none;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  width: 38px; height: 34px;
  font-size: 16px; line-height: 1;
  cursor: pointer;
}

/* ── Layout ──────────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: var(--left-w) 1fr var(--right-w);
  grid-template-rows: 1fr;
  height: calc(100vh - var(--topbar-h));
  margin-top: var(--topbar-h);
}

/* ── Sidebars ────────────────────────────────────────────────── */
/* Боковые панели — тон --panel, центр — чуть темнее (--bg-2): три зоны
   читаются без тяжёлых рамок, карточки на тёмном центре выступают. */
.sidebar, .log-sidebar {
  display: flex; flex-direction: column;
  background: var(--panel);
  overflow: hidden;          /* inner areas scroll, the panel itself doesn't */
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  align-self: start;
}
.sidebar     { border-right: 1px solid var(--border); }
.log-sidebar { border-left:  1px solid var(--border); }
/* Only the machine list grows and scrolls; the buttons below stay put. */
.sidebar-pcs {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;   /* no sideways scrollbar */
}
.log-sidebar .sidebar-title {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-section {
  padding: 14px;
  border-bottom: 1px solid var(--border);
}
/* Заголовок секции — один на всю панель: мелкие заглавные, приглушённо */
.sidebar-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 10px;
}


/* ── Alert list ──────────────────────────────────────────────── */
.alert-list {
  display: flex; flex-direction: column; gap: 1px; margin-bottom: 10px;
  padding: 3px; border-radius: var(--radius-l);
  background: var(--surface); border: 1px solid var(--border);
}
.alert-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 8px 7px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s;
}
.alert-row:hover { background: var(--panel-2); }
.alert-name { font-size: 14px; }
.alert-btns { display: flex; gap: 6px; }
.alert-btns .btn { flex: 1; }

/* ── Main content ────────────────────────────────────────────── */
.main {
  overflow-y: auto; padding: 16px;
  background: var(--bg-2);
}

/* ── Machine section ─────────────────────────────────────────── */
/* Чтобы заголовок ПК не уезжал под верхнюю панель при прокрутке к нему */
.machine-section { margin-bottom: 26px; scroll-margin-top: calc(var(--topbar-h) + 10px); }
/* Переход к карточке окна из списка ПК — верх не прячется под шапкой. */
.card { scroll-margin-top: calc(var(--topbar-h) + 10px); }
.machine-head {
  display: flex; align-items: center; gap: 10px;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.machine-head .dot { width: 10px; height: 10px; }
.machine-head h3 { font-size: 20px; font-weight: 700; flex: 1; letter-spacing: .02em; }
.machine-status { font-size: 13px; color: var(--muted); }

/* ── PC Alerts ───────────────────────────────────────────────── */
.pc-alerts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  margin-bottom: 12px;
}
.pc-alerts-label {
  font-size: 11px; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  margin-right: 4px;
}
/* Чип алерта — переключатель: выключен приглушённо, включён — золотом */
.alert-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  background: var(--bg);
  color: var(--muted);
  transition: background .12s, border-color .12s, color .12s;
}
/* Hover only where there is a real pointer: on a phone the tapped chip kept
   the hover border and looked like it was still on. */
@media (hover: hover) {
  .alert-chip:hover { border-color: var(--border-2); color: var(--text); }
}
.alert-chip.on { background: rgba(201, 162, 75, .12); border-color: var(--accent-dim); color: #e6c373; }
.alert-chip .cdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--faint); flex-shrink: 0;
}
.alert-chip.on .cdot { background: var(--accent); box-shadow: 0 0 6px rgba(201, 162, 75, .7); }
.pc-alerts-actions { margin-left: auto; display: flex; gap: 5px; }

/* ── Cards grid ──────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }

/* ── Card ────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  overflow: hidden;
  display: flex; flex-direction: column;   /* equal height across the row */
}

/* Screenshot */
.shot-wrap { position: relative; background: #000; border-bottom: 1px solid var(--border); }
.shot {
  width: 100%; display: block; height: auto;
  /* No fixed aspect-ratio: the game window isn't 16/9, so forcing one either
     cropped the sides (cover) or added letterbox bars (contain). Letting the
     image keep its own proportions shows the full frame with neither. */
  cursor: pointer;
}
.shot-label {
  position: absolute; top: 8px; left: 8px;
  background: rgba(7, 7, 10, .72); color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px; font-weight: 600; padding: 3px 9px;
  border-radius: 7px;
}
.shot-offline {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 14px;
  background: radial-gradient(circle at 50% 40%, #17171e, #0b0b0f 75%);
}

/* Inline inventory strip — чипы в стиле расходки: иконка в тёмной плитке */
.inv-mini {
  display: flex; flex-wrap: wrap; align-items: center;
  align-content: flex-start; gap: 5px;
  padding: 8px 12px 0;
  /* Two rows' worth: a card with one row of items no longer sits higher
     than its neighbour with two. */
  min-height: 74px; max-height: 140px; overflow-y: auto;
}
.inv-mini:empty { padding: 0; min-height: 0; }
.inv-mini-item {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 9px; padding: 2px 9px 2px 3px; font-size: 13px;
}
.inv-mini-item img {
  width: 24px; height: 24px; object-fit: cover; display: block;
  border-radius: 6px; background: #111116;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.inv-mini-name { color: var(--muted); }
.inv-mini-count { font-weight: 700; font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; color: var(--accent); }
.inv-mini-count.low { color: #ff7b72; }
.inv-mini-count.ok  { color: #7ee08c; }

/* Card body */
.card-body {
  padding: 10px 12px 12px;
  flex: 1 1 auto; display: flex; flex-direction: column;
}
.char-name {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 14px;
}
/* Кнопок в карточке стало три (бот, выход, запуск) — разрешаем перенос,
   иначе на узких экранах они сжимаются в нечитаемые огрызки. */
.card-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Buttons row */
.btn-row { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }

/* Chat inputs */
.chat-group { margin-bottom: 8px; }
.chat-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 4px;
}
.chat-row { display: flex; gap: 5px; }
.chat-input {
  flex: 1;
  background: var(--well); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius);
  padding: 7px 10px; min-width: 0;
}
.chat-input:focus { outline: none; border-color: var(--accent-dim); }
.nick-input { flex: 0 0 80px; }


/* ── Log sidebar ─────────────────────────────────────────────── */
.log-lines {
  overflow-y: auto; flex: 1;
  display: flex; flex-direction: column-reverse;
  gap: 3px; padding: 8px 14px;
  font-size: 13.5px;
}
.log-line {
  color: var(--muted); line-height: 1.4;
  /* .log-lines — флекс-колонка, и без этого строки сжимались в полоски
     вместо того, чтобы переполнять контейнер и включать прокрутку. */
  flex: 0 0 auto;
}
.log-line .lt { color: var(--faint); margin-right: 4px; font-variant-numeric: tabular-nums; }
.log-line .ls { color: var(--accent); margin-right: 4px; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0;
  background: rgba(3, 3, 5, .72); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-box {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-l); width: 100%; max-width: 480px; overflow: hidden;
  box-shadow: var(--shadow-pop);
  animation: modal-in .16s ease-out;
}
@keyframes modal-in { from { transform: translateY(8px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .modal-box { animation: none; } }
.modal-box--wide {
  max-width: 98vw; width: 98vw;
  height: 96vh; display: flex; flex-direction: column;
}
/* Image area fills the modal and keeps the picture centred.
   "safe" centring matters: plain centring makes the top/left overflow
   unreachable once the image is zoomed past the container, so the corners
   could never be dragged into view. */
.fs-wrap {
  flex: 1 1 auto; overflow: auto; background: #000;
  display: flex;
  align-items: safe center; justify-content: safe center;
  user-select: none; touch-action: none;
}
.fs-wrap > img {
  flex: none;                /* never let flex shrink the zoomed image */
  -webkit-user-drag: none; user-select: none;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 15px;
}
/* Кнопки в шапке окна (✕, масштаб) — квадратные иконки */
.modal-head .btn-sm { min-width: 32px; height: 32px; padding: 0 8px; }
.modal-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
#inventoryTitle { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
#inventoryTitle .it-nick {
  font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#inventoryTitle .it-sub {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted);
  text-transform: uppercase;
}
.modal-body { padding: 14px 16px 16px; }
/* Подпись поля в формах окон */
.upd-head {
  display: block; margin: 12px 0 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.modal-body > .upd-head:first-child { margin-top: 0; }

/* ── Инвентарь окна ──────────────────────────────────────────────
   Сверху — плитки закреплённых, ниже — сумка с вкладками и поиском.
   Без размытия и тяжёлых теней: на телефоне список должен листаться
   плавно. Строки создаются один раз, вкладки только прячут/показывают их. */
/* Высота постоянная, а не по содержимому: окно стоит по центру, и при
   переключении вкладок с разным числом строк оно прыгало вверх-вниз.
   Теперь рамка на месте, список прокручивается внутри. */
#inventoryModal .modal-box {
  max-width: 780px; height: min(88vh, 780px);   /* 620 — названия вкладок обрезались («Су…», «Прода…») */
  display: flex; flex-direction: column;
  border-radius: 12px;
  animation: inv-pop .16s ease-out;
}
@keyframes inv-pop { from { transform: translateY(10px); opacity: .5; } }
@keyframes inv-sheet { from { transform: translateY(40px); opacity: .6; } }
#inventoryModal .modal-head { flex: none; font-size: 15px; }

/* Плитки закреплённых */
#inventoryContent {
  flex: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 6px; padding: 12px 14px 4px;
  max-height: 30vh; overflow-y: auto;
}
#inventoryContent:empty { display: none; }
.inv-tiles-wait { grid-column: 1 / -1; color: var(--muted); font-size: 13px; padding: 6px 2px; }
.inv-tile {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 7px 10px 7px 7px; border-radius: 10px;
  background: linear-gradient(180deg, #17171f, #121218);
  border: 1px solid var(--border);
}
.inv-tile.low { border-color: rgba(229, 83, 75, .45); background: linear-gradient(180deg, #1d1416, #141013); }
.inv-tile-b { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.inv-tile-nm {
  color: var(--muted); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-tile-qty {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px;
  font-variant-numeric: tabular-nums; color: #7ee08c;
}
.inv-tile.low .inv-tile-qty { color: #ff7b72; }

/* Иконка предмета в тёмной плитке — общая для плиток и строк */
/* Иконки игры квадратные 32×32: плитка ровно под них, картинка во всю
   плитку со скруглёнными углами — без пустых полей по краям. Масштаб 1:1,
   пиксели не размываются. Сверху — тонкий блик-рамка. */
.inv-ic {
  position: relative; flex: none;
  width: 34px; height: 34px; border-radius: 9px; padding: 1px;
  background: #111116;
  box-shadow: 0 0 0 1px #2a2a35;
}
.inv-ic img {
  display: block; width: 32px; height: 32px; border-radius: 8px;
  object-fit: cover; image-rendering: pixelated;
}
.inv-ic::after {
  content: ''; position: absolute; inset: 1px; border-radius: 8px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* Сумка */
#inventoryAll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* Место под полосу прокрутки занято всегда: иначе на длинной вкладке она
     появлялась, на короткой пропадала, и строки ездили влево-вправо. */
  scrollbar-gutter: stable;
  padding: 0 14px 14px;
  overscroll-behavior: contain;
}
.inv-bar {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel);
  padding: 12px 0 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.inv-tabs {
  display: flex; gap: 3px;
  padding: 3px; border-radius: 11px;
  background: var(--bg); border: 1px solid var(--border);
}
.inv-tab {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; height: 34px; padding: 0 6px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: background .12s, color .12s;
}
.inv-tab:hover { color: var(--text); }
.inv-tab.on { background: var(--panel-2); border-color: #2e2e3a; color: var(--text); }
.inv-tab-ic { font-size: 14px; line-height: 1; filter: grayscale(1); opacity: .6; }
.inv-tab.on .inv-tab-ic { filter: none; opacity: 1; }
.inv-tab-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-tab-n {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .06); color: var(--muted);
}
.inv-tab.empty .inv-tab-n { opacity: .45; }
.inv-tab-n:empty { display: none; }
.inv-tab.on[data-inv-tab="bag"]    .inv-tab-n { background: rgba(201, 162, 75, .2);  color: #e6c373; }
.inv-tab.on[data-inv-tab="sell"]   .inv-tab-n { background: rgba(63, 185, 80, .2);   color: #7ee08c; }
.inv-tab.on[data-inv-tab="pin"]    .inv-tab-n { background: rgba(56, 139, 253, .22); color: #8cbcff; }
.inv-tab.on[data-inv-tab="hidden"] .inv-tab-n { background: rgba(229, 83, 75, .18);  color: #ff9d96; }
.inv-tab-n.bump { animation: inv-bump .5s ease-out; }
/* Поиск: вкладки с совпадениями светятся золотом, пустые тускнеют */
.inv-tab.hit { color: var(--text); border-color: rgba(201, 162, 75, .55); box-shadow: 0 0 12px rgba(201, 162, 75, .16); }
.inv-tab.hit .inv-tab-ic { filter: none; opacity: 1; }
.inv-tab.hit .inv-tab-n { background: var(--accent) !important; color: #1a1305 !important; opacity: 1; animation: inv-hit 1.6s ease-in-out infinite; }
.inv-tab.miss { opacity: .4; }
@keyframes inv-hit { 50% { box-shadow: 0 0 0 4px rgba(201, 162, 75, .22); } }
.inv-search.active input { border-color: var(--accent-dim); box-shadow: 0 0 0 3px rgba(201, 162, 75, .1); }
.inv-search.active svg { color: var(--accent); }
.inv-jumps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.inv-jump {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 18px; cursor: pointer;
  background: rgba(201, 162, 75, .12); border: 1px solid var(--accent-dim);
  color: #e6c373; font-size: 13px; font-weight: 600;
  transition: background .12s, transform .08s;
}
.inv-jump:hover { background: rgba(201, 162, 75, .22); }
.inv-jump:active { transform: scale(.95); }
.inv-jump b { background: var(--accent); color: #1a1305; border-radius: 9px; padding: 1px 7px; font-size: 11px; }
@keyframes inv-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); background: var(--accent); color: #1a1305; }
  100% { transform: scale(1); }
}

.inv-search { position: relative; display: block; }
.inv-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.inv-search input {
  width: 100%; height: 36px; padding: 0 10px 0 32px;
  border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 14px;
  outline: none; transition: border-color .12s;
}
.inv-search input:focus { border-color: var(--accent-dim); }
.inv-search input::placeholder { color: #545766; }

.inv-meta { color: var(--muted); font-size: 12px; padding: 0 2px 6px; }

.inv-list { display: flex; flex-direction: column; gap: 2px; }
.inv-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px;
  padding: 6px 8px; border-radius: 10px;
  transition: background .12s;
  /* Полоска слева у каждой строки: серая в сумке, зелёная — продажа,
     синяя — закреп, красная — скрыто. */
  box-shadow: inset 3px 0 0 #3a3a46;
}
.inv-row[hidden] { display: none; }
.inv-row:hover { background: var(--panel-2); }
.inv-row.is-sell { box-shadow: inset 3px 0 0 #2ea043; }
.inv-row.is-pin { box-shadow: inset 3px 0 0 #388bfd; }
.inv-row.is-hidden { box-shadow: inset 3px 0 0 #6e3a3a; }
.inv-row.is-hidden .inv-ic img { opacity: .55; }
.inv-nm { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.inv-nm-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.inv-nm-id { color: #5d6070; font-size: 11px; font-variant-numeric: tabular-nums; }
.inv-qty {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px;
  font-variant-numeric: tabular-nums; text-align: right; padding-right: 2px;
}
.inv-acts { display: flex; gap: 6px; }
.inv-act {
  width: 36px; height: 36px; border-radius: 9px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  font-size: 16px; line-height: 1;
  filter: grayscale(1); opacity: .5;
  transition: opacity .12s, background .12s, border-color .12s, transform .08s;
}
.inv-act:hover { opacity: .9; filter: none; }
.inv-act:active { transform: scale(.92); }
.inv-act.on { filter: none; opacity: 1; }
.inv-act-sell.on { background: rgba(63, 185, 80, .16); border-color: #2ea043; }
.inv-act-mail.on { background: rgba(242, 192, 77, .16); border-color: #d9a53a; color: #f2c04d; }
/* конверт: светлый, как заливка у 💰📌🚫; в вкладке, пустой вкладке и заголовке — золотой */
.ic-mail { display: block; flex: none; }
.inv-act-mail { color: #e2e4ea; }   /* у <button> свой чёрный цвет — конверт пропадал */
.inv-tab-ic .ic-mail, .inv-empty-ic .ic-mail, .mail-ov-title .ic-mail { color: #f2c04d; }
.inv-empty-ic .ic-mail { margin: 0 auto; }
.inv-jump .ic-mail, .mail-ov-title .ic-mail, .btn .ic-mail { display: inline-block; vertical-align: -0.12em; }
#invMailBtn { --mail-flap: var(--accent); }
.btn-ok .ic-mail { --mail-flap: #1d2a20; }
.inv-act-pin.on  { background: rgba(56, 139, 253, .16); border-color: #388bfd; }
.inv-act-hide.on { background: rgba(229, 83, 75, .14); border-color: #b8453e; }
.inv-act:disabled { cursor: default; opacity: .45; }
.inv-act-none { border: 0; cursor: default; }

.inv-empty { text-align: center; padding: 34px 16px 30px; color: var(--muted); }
.inv-empty-ic { font-size: 30px; line-height: 1; margin-bottom: 10px; opacity: .8; }
.inv-empty-t { color: var(--text); font-weight: 600; margin-bottom: 4px; }
.inv-empty-s { font-size: 13px; max-width: 300px; margin: 0 auto; }
.inv-spin { animation: inv-spin 1.6s linear infinite; display: inline-block; }
@keyframes inv-spin { to { transform: rotate(360deg); } }

/* Телефон: окно выезжает снизу на всю ширину, кнопки крупнее под палец */
@media (max-width: 560px) {
  #inventoryModal { padding: 0; align-items: flex-end; }
  #inventoryModal .modal-box {
    max-width: 100%; height: 92vh; height: 92dvh; max-height: none;
    border-radius: 16px 16px 0 0; border-bottom: 0;
    animation: inv-sheet .2s ease-out;
  }
  #inventoryContent { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 10px 2px; max-height: 26vh; }
  .inv-tile { padding: 6px 8px 6px 6px; gap: 8px; }
  .inv-tile-qty { font-size: 15px; }
  #inventoryAll { padding: 0 10px 12px; }
  .inv-tab { flex-direction: column; gap: 1px; height: 46px; font-size: 11px; }
  .inv-tab-ic { font-size: 15px; }
  .inv-tab { position: relative; }
  .inv-tab-n { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 15px; line-height: 15px; padding: 0 4px; font-size: 10px; }
  .inv-search input { font-size: 16px; height: 40px; }   /* 16px — iOS не зумит */
  /* Три кнопки справа — названию остаётся мало места: переносим на две
     строки, а не обрезаем. */
  .inv-row { gap: 8px; padding: 6px 2px 6px 6px; }
  .inv-nm-t {
    white-space: normal; font-size: 13px; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .inv-qty { font-size: 14px; }
  .inv-acts { gap: 4px; }
  .inv-act { width: 38px; height: 38px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  #inventoryModal .modal-box, .inv-tab-n.bump, .inv-spin { animation: none; }
}

/* ── Custom items list ───────────────────────────────────────── */
.custom-item-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 2px 7px; font-size: 13px; margin: 2px;
}
.custom-item-remove { cursor: pointer; color: var(--bad); font-size: 15px; line-height: 1; }

/* ── Cards offline ───────────────────────────────────────────── */
.cards-empty {
  color: var(--muted); font-size: 14px; padding: 18px;
  border: 1px dashed var(--border-2); border-radius: var(--radius-l);
  background: rgba(255, 255, 255, .015); text-align: center;
}

/* ── Sidebar overlay ─────────────────────────────────────────── */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 150;
}
.sidebar-overlay.open { display: block; }

/* ── Mobile log panel ────────────────────────────────────────── */
.mobile-log-panel {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 88vh;
  height: 88dvh;          /* dvh не скачет, когда Safari прячет нижнюю панель */
  background: var(--panel);
  border-top: 1px solid var(--border-2);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
  z-index: 160; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .25s ease;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
}
.mobile-log-panel.open { transform: translateY(0); }
.mobile-log-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); flex-shrink: 0;
}
.mobile-log-btn {
  display: none; position: fixed; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--accent); color: #1a1305;
  border: none; border-radius: 20px;
  padding: 8px 16px; font-size: 15px; font-weight: 600;
  cursor: pointer; z-index: 140; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* ── Login ───────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh; display: flex;
  align-items: center; justify-content: center; padding: 24px;
}
.login-wrap {
  background: radial-gradient(ellipse at 50% 30%, rgba(201, 162, 75, .07), transparent 60%);
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 16px; padding: 32px 30px 30px;
  box-shadow: var(--shadow-pop);
}
.login-card h1 { font-size: 22px; margin-bottom: 4px; letter-spacing: .01em; }
.login-card .sub { color: var(--muted); margin-bottom: 24px; font-size: 14px; }
.login-card input[type=password] {
  width: 100%; background: var(--well); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius);
  height: 42px; padding: 0 12px; margin-bottom: 14px; font-size: 16px;
  outline: none; transition: border-color .12s;
}
.login-card input[type=password]:focus { border-color: var(--accent-dim); }
.login-card .login-btn,
.login-card form button {
  width: 100%; background: var(--accent); color: #1a1305;
  border: none; border-radius: var(--radius);
  height: 42px; font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background .12s;
}
.login-card .login-btn:hover,
.login-card form button:hover { background: #d8b35e; }
.login-error,
.login-card .error {
  color: #ff8f88; font-size: 13px; margin-bottom: 12px;
  padding: 8px 11px; border-radius: var(--radius);
  background: rgba(229, 83, 75, .1); border: 1px solid rgba(229, 83, 75, .3);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --right-w: 200px; }
}

@media (max-width: 800px) {
  .hamburger { display: block; }
  /* На телефоне прокручивается страница, а не .main. Жёсткая высота в один
     экран оставляла коробку .main короче содержимого: sticky-панель
     отлипала на её нижней границе, а под списком висел пустой хвост. */
  .layout {
    grid-template-columns: 1fr; grid-template-rows: auto;
    height: auto; min-height: calc(100dvh - var(--topbar-h));
  }
  .main { overflow: visible; }

  .sidebar {
    position: fixed; top: 0; left: 0;
    width: 280px;
    height: 100vh;
    /* 100vh в Safari не учитывает нижнюю панель браузера, и низ меню
       оказывается под ней. dvh считает реально видимую высоту. */
    height: 100dvh;
    z-index: 160;
    transform: translateX(-100%);
    transition: transform .25s ease;
    border-right: 1px solid var(--border);
    padding-top: var(--topbar-h);
  }
  .sidebar.open { transform: translateX(0); }

  .log-sidebar { display: none; }
  .mobile-log-btn { display: block; }

  .main { padding: 10px; max-width: 100vw; }
  .cards { grid-template-columns: 1fr; }

  /* Prevent horizontal overflow */
  .topbar-right .btn-danger span,
  .topbar-right .btn-warn span { display: none; }
  .topbar-right { gap: 5px; }
  .card-head { flex-wrap: wrap; gap: 6px; }

  /* Полное название не влезает, но кнопка «на главную» нужна: оставляем
     короткую подпись рядом с индикатором связи, чтобы зелёный кружок
     перестал быть непонятным украшением. */
  /* Название целиком не влезает, но переход на главную нужен: оставляем
     только иконку домика рядом с индикатором связи. */
  .brand-name {
    font-size: 0; padding: 4px 6px;
    /* без этого долгое касание выделяет иконку как текст */
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .brand-name::after {
    content: '⌂'; font-size: 28px; line-height: 1; color: var(--muted);
  }
  .brand-name:active::after { color: #fff; }
  .topbar-left { gap: 6px; }
}

@media (max-width: 420px) {
  .topbar { padding: 0 10px; }
  .main { padding: 8px; }
  .card-body { padding: 8px 10px 10px; }
  .chat-row { flex-wrap: wrap; }
  .chat-input { min-width: 0; }
}

/* ── Add item button in inv-mini strip ───────────────────────── */
.inv-add-btn {
  display: flex; align-items: center; justify-content: center;
  /* Match the chip height (24px icon + 2px padding + borders) so the plus
     sits on the same line instead of riding high. */
  width: 32px; height: 32px; flex: none; align-self: center;
  background: transparent;
  border: 1px dashed var(--border-2);
  color: var(--muted);
  border-radius: 9px;
  font-size: 14px; line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.inv-add-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Removable custom item hint */
.inv-mini-item.removable { cursor: context-menu; }
.inv-mini-item.removable:hover { border-color: var(--bad); }

/* × remove button inside custom inv-mini item */
.inv-mini-remove {
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  margin-left: 1px;
  flex-shrink: 0;
}
.inv-mini-remove:hover { color: var(--bad); }

/* ── In-card chat window (L2-style) ───────────────────────── */
.chat-panel {
  margin: 0;                 /* sits in the card's left column now */
  background: var(--well); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .12s;
}
.chat-panel:focus-within { border-color: var(--accent-dim); }
.chat-box {
  height: 150px; overflow-y: auto;
  padding: 6px 8px;
  font-size: 14px; line-height: 1.45;
}
/* Input as the last line of the chat window itself — no box of its own */
.chat-entry {
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: stretch;
}
.chat-entry-input {
  width: 100%; box-sizing: border-box;
  background: transparent; border: 0; outline: none;
  color: #d8dee9; caret-color: #d8dee9;
  font: inherit; font-size: 14px;
  padding: 6px 8px;
}
.chat-entry-input::placeholder { color: var(--faint); }
.chat-send {
  flex: none; background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: 14px; padding: 0 12px;
  transition: color .12s;
}
.chat-send:hover { color: var(--accent); }
.chat-empty { color: var(--muted); font-size: 13px; }
/* Columns: fixed-width time, then nick, then the text — so nothing shifts
   about as timestamps and nick lengths change. */
.chat-msg {
  display: flex; align-items: baseline; gap: 6px;
  white-space: pre-wrap; word-break: break-word;
}
.chat-msg .cm-time {
  flex: none; width: 42px; text-align: right; white-space: nowrap;
  color: var(--faint); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.chat-msg .cm-who  { flex: none; }
.chat-msg .cm-text { flex: 1 1 auto; min-width: 0; }
/* L2 colours: general chat white, private pink */
.chat-msg.all  .cm-who, .chat-msg.all  .cm-text { color: #d8dee9; }
.chat-msg.priv .cm-who, .chat-msg.priv .cm-text { color: #ff9ad5; }
/* Личка от нас — тот же розовый, но заметно глуше: где пишут мне, а где
   пишу я, должно читаться цветом, не вчитываясь в стрелку перед ником.
   Плюс тонкая полоска слева — второй признак на случай яркого солнца
   или скверного экрана телефона. */
.chat-msg.priv.out .cm-who,
.chat-msg.priv.out .cm-text { color: #96607f; }
/* Полоска слева — только у входящих: сразу видно, что написали мне, а не я.
   Розовая для лички, белёсая для общего чата. */
.chat-msg.priv:not(.out),
.chat-msg.all:not(.out) {
  border-left: 2px solid;
  padding-left: 5px; margin-left: -7px;
}
.chat-msg.priv:not(.out) { border-left-color: #ff9ad5; }
.chat-msg.all:not(.out)  { border-left-color: #d8dee9; }
/* В общем чате различаем только цветом — полоска в узкой панели лишняя */
.global-chat .chat-msg {
  border-left: 0; padding-left: 0; margin-left: 0;
}
/* Свои сообщения в общий чат тоже слегка приглушаем */
.chat-msg.all.out .cm-who,
.chat-msg.all.out .cm-text { color: #9aa3b0; }
.chat-msg.out  .cm-who { opacity: .75; }

/* ── Per-slot event log (right column of the card) ────────── */
.card-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px; align-items: stretch; margin-top: 2px;
  flex: 1 1 auto;                          /* fill whatever height is left */
}
.card-col-main { min-width: 0; display: flex; flex-direction: column; }
.card-col-log  {
  min-width: 0; padding: 0; min-height: 0;
  display: flex; flex-direction: column;
}
/* One shared title style, so both columns start on the same line */
.col-title {
  font-size: 11px; font-weight: 700; color: var(--muted); line-height: 16px;
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.col-clear {
  background: transparent; border: 0; cursor: pointer;
  color: var(--faint); font-size: 11px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  padding: 2px 4px; border-radius: 5px;
  transition: color .12s, background .12s;
}
.col-clear:hover { color: #ff8f8f; background: rgba(229, 83, 75, .1); }
.slot-log {
  /* Fixed height, not flex-grow: with an auto-sized grid row the box simply
     kept growing with its content and stretched the whole card instead of
     scrolling. 186px lines up with the chat panel (150 box + input row). */
  flex: none; height: 186px; min-height: 0; overflow-y: auto;
  background: var(--well); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 8px;
  font-size: 13px; line-height: 1.4;
}
.slot-log .log-line { white-space: pre-wrap; word-break: break-word; }
.slot-log .lt {
  color: var(--faint); margin-right: 6px;
  display: inline-block; min-width: 42px; white-space: nowrap;
}

/* Narrow screens: stack again, log underneath */
@media (max-width: 900px) {
  .card-cols { grid-template-columns: 1fr; }
  .card-col-log { padding: 0 12px; }
}

/* Alerts stand out inside the per-slot log */
.slot-log .log-alert {
  color: #ffb4b4; background: rgba(229, 83, 75, .1);
  box-shadow: inset 2px 0 0 #e05656;
  padding: 1px 4px; margin: 2px -4px; border-radius: 6px;
}
.slot-log .la-who, .log-line.log-alert .la-who { color: #ffd9a0; }
.log-line.log-alert {
  color: #ffb4b4; background: rgba(229, 83, 75, .1);
  box-shadow: inset 2px 0 0 #e05656;
  padding: 1px 6px; margin: 2px 0; border-radius: 6px;
}
.log-line.log-alert .la-pc  { color: var(--info); font-weight: 600; }
.log-line.log-alert .la-sep { color: var(--faint); }
.log-line.log-alert .la-what { color: #ff8f8f; font-weight: 700; letter-spacing: .03em; }
.slot-log .la-what { color: #ff8f8f; font-weight: 700; letter-spacing: .03em; }

/* ── Card head above the inventory strip ──────────────────── */
/* Шапка карточки: сверху ник с ботом и перезапуском скрипта (и кнопки
   окна справа, если влезают), ниже — ряд игровых плиток: SOE, маршрут,
   алерты, инвентарь. Узкая карточка — всё столбиком. */
.card-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name actions" "tools tools";
  align-items: center; gap: 10px;
  padding: 12px 12px 2px; margin-bottom: 8px;
}
.card-head .char-name { grid-area: name; min-width: 0; }
.card-head .card-actions { grid-area: actions; }
.card-head .card-tools { grid-area: tools; }
.card-head .char-name > span:nth-child(2) {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-head .char-name > .btn-sm { height: 34px; min-width: 36px; padding: 0 6px; flex: none; }

/* Игровые плитки: векторная иконка во всю кнопку, тонкий блик, при
   наведении плитка чуть приподнимается и светится золотом. */
.card-tools { display: flex; flex-wrap: wrap; gap: 7px; }
.tool-btn {
  position: relative; flex: none;
  width: 40px; height: 40px; padding: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--border);
  transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease;
}
.tool-btn .ico { width: 32px; height: 32px; display: block; border-radius: 8px; }
.tool-btn::after {
  content: ''; position: absolute; inset: 3px; border-radius: 8px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .16);
}
@media (hover: hover) {
  .tool-btn:hover {
    transform: translateY(-2px); border-color: var(--accent-dim);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45), 0 0 12px rgba(201, 162, 75, .25);
  }
}
.tool-btn:active { transform: translateY(0) scale(.94); }
/* Идёт маршрут или SoE: иконка гаснет, поверх бегут три жёлтые точки */
.busy-dots { display: none; }
.tool-btn.busy { border-color: rgba(242, 192, 77, .65); box-shadow: 0 0 14px rgba(242, 192, 77, .3); }
.tool-btn.busy .ico { opacity: .3; filter: saturate(.5); }
.tool-btn.busy .busy-dots {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.busy-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #f2c04d; box-shadow: 0 0 6px rgba(242, 192, 77, .9);
  opacity: .25; animation: busy-dot 1.2s ease-in-out infinite;
}
.busy-dots i:nth-child(2) { animation-delay: .2s; }
.busy-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes busy-dot {
  0%, 70%, 100% { opacity: .25; transform: scale(.8); }
  35%           { opacity: 1;   transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) { .busy-dots i { animation: none; opacity: 1; } }
/* Открытое меню алертов — колокол в золотом кольце */
.alerts-wrap:has(.alerts-pop.open) .alerts-btn {
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(201, 162, 75, .35);
}
@container card (max-width: 480px) {
  .card-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "tools" "actions";
    gap: 10px;
  }
}
.card-head .char-name { display: flex; align-items: center; gap: 9px; }
.card-head .char-name > span:nth-child(2) { font-size: 21px; font-weight: 700; }
.card-head .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.card-head .dot.on  { box-shadow: 0 0 7px rgba(70, 220, 120, .65); }
.card-head .dot.off { box-shadow: 0 0 7px rgba(224, 86, 86, .55); }
.chat-title {
  margin: 10px 12px 4px; font-size: 13px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
@media (max-width: 900px) {
  .card-head .char-name > span:nth-child(2) { font-size: 17px; }
  .card-head .dot { width: 10px; height: 10px; }
}

/* Per-character alert chips */
.slot-alerts {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 12px 0;
}


/* Logout lives at the bottom of the sidebar now */
.sidebar-logout { padding: 0 14px 18px; }
.logout-btn {
  display: flex; width: 100%; box-sizing: border-box; text-align: center;
  text-decoration: none;
  color: #ff8f88; border-color: rgba(229, 83, 75, .38);
  background: rgba(229, 83, 75, .10);
}
.logout-btn:hover {
  color: #fff; background: rgba(229, 83, 75, .22);
  border-color: rgba(229, 83, 75, .6);
}

/* Right sidebar: event log on top, all-PC chat underneath */
.log-side-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 14px 14px 10px; margin-bottom: 0;
}
.log-sidebar .log-lines { flex: 1 1 0; min-height: 90px; }
.global-chat {
  padding-top: 4px;
  /* Plain block flow: .log-lines is a column-reverse flex box for the event
     log, and "justify-content: flex-end" made the top of the chat
     unreachable while scrolling. JS keeps it pinned to the newest message. */
  display: block;
  overflow-y: auto;
}
/* Separator sits above the chat heading, so it reads exactly like the
   journal block: one line under the title, nothing doubled. */
.log-sidebar .log-side-head + .log-lines { border-top: 0; }
.log-sidebar .log-lines + .log-side-head { border-top: 1px solid var(--border); }
.global-chat .cm-pc {
  color: var(--info); font-weight: 600;
  display: inline; white-space: nowrap; cursor: pointer;
  /* Мельче текста сообщения — служебная метка не должна забирать место */
  font-size: .82em;
}
.global-chat .cm-who { font-size: .88em; }
/* Имя окна, на котором пришло сообщение — приглушённее имени ПК */
.global-chat .cm-win {
  color: var(--muted); font-weight: 500;
}
.global-chat .cm-win::before { content: '·'; margin: 0 2px; opacity: .6; }
.global-chat .chat-msg {
  /* Метка ПК живёт внутри тела сообщения: отдельной колонкой она забирала
     ширину у текста тем сильнее, чем длиннее ник окна. */
  display: grid; grid-template-columns: 42px minmax(0, 1fr);
  /* baseline, а не start: метка ПК мельче текста, и по верхнему краю она
     висела выше строки времени. */
  align-items: baseline; gap: 0 6px; padding: 1px 0;
}
.global-chat .cm-body { min-width: 0; }
.global-chat .cm-who  { white-space: nowrap; }
.global-chat .cm-text { display: inline; }

/* ── Scrollbars ───────────────────────────────────────────────
   The default Windows scrollbar is wide and pale — it cut the layout in
   half visually. Slim, dark, and only visible against its own track. */
* { scrollbar-width: thin; scrollbar-color: #33333f transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #33333f; border-radius: 4px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #4a4a58; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ── Streamer mode ────────────────────────────────────────────
   Eight windows at once: 4 columns x 2 rows fills a 2K screen without
   scrolling. Side panels stay; only the centre column changes. */
.stream-btn { width: 100%; }
.sidebar-stream { padding: 16px 14px 14px; }
.sidebar-logout, .sidebar-stream {
  flex: none;
  border-bottom: 0;      /* .sidebar-section's divider drew a line between
                            the two buttons */
}
body.streamer .main {
  padding: 6px;
  height: calc(100vh - var(--topbar-h));
  overflow: hidden;          /* the grid fills the viewport, no scrolling */
}
/* The grid lives inside this wrapper — without a height here, its own
   height:100% had nothing to resolve against and the rows collapsed. */
body.streamer #machineSections { height: 100%; }

.stream-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Rows share the available height: sizing them from the cell width made
     the second row overflow the screen as soon as columns got wider. */
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
  height: 100%;
}
.stream-cell {
  position: relative; background: #000;
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden;
}
.stream-cell { display: flex; }
.stream-cell .shot { max-height: 100%; }
.stream-cell .shot {
  width: 100%; height: 100%; display: block; cursor: zoom-in;
  object-fit: contain;       /* fill the cell, keep the real proportions */
}
/* Заглушка занимает всю ячейку — у неё нет картинки, которая задала бы размер */
.stream-cell .shot-offline { position: absolute; inset: 0; font-size: 14px; }

.stream-label {
  position: absolute; top: 6px; left: 6px;
  display: flex; align-items: center; gap: 7px;
  background: rgba(7, 7, 10, .72); color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 13px; font-weight: 600;
  padding: 4px 10px; border-radius: 8px;
}
.stream-label .dot { width: 10px; height: 10px; border-radius: 50%; }
.stream-goto {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(7, 7, 10, .72); color: var(--text);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px;
  font-size: 12px; font-weight: 500; padding: 6px 11px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.stream-goto:hover { background: rgba(201, 162, 75, .22); border-color: var(--accent-dim); color: #fff; }

@media (max-width: 1600px) {
  /* Две колонки — значит четыре ряда: высота делится на все, иначе два
     верхних ряда сжимались, а нижние вываливались за экран. */
  .stream-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .stream-grid.mains { grid-template-rows: repeat(2, minmax(0, 1fr)); }
}

/* ── Streamer toolbar and panel folding ──────────────────────── */
.stream-bar { display: flex; gap: 6px; margin-bottom: 6px; }
.stream-tgl {
  background: rgba(255, 255, 255, .035); color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 12px; font-weight: 600; padding: 6px 12px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.stream-tgl:hover { color: var(--text); border-color: var(--border-2); }
.stream-tgl.on { color: #e6c373; background: rgba(201, 162, 75, .12); border-color: var(--accent-dim); }

/* Only the main characters: four windows, two by two, so each is twice
   the size of the eight-window view. */
.stream-grid.mains { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The toolbar eats a little height — keep the grid inside the viewport */
body.streamer #machineSections {
  display: flex; flex-direction: column;
}
body.streamer .stream-grid { flex: 1 1 auto; min-height: 0; }

/* ── Collapsible side panels ─────────────────────────────────── */
/* Pin each child to its own column: hiding a panel with display:none makes
   the rest re-flow into the free columns, which put .main into the 0px one
   and let the log sidebar eat the whole screen. */
.layout > .sidebar     { grid-column: 1; }
.layout > .main        { grid-column: 2; }
.layout > .log-sidebar { grid-column: 3; }

body.hide-left  .sidebar     { display: none; }
body.hide-right .log-sidebar { display: none; }
body.hide-left  .layout { grid-template-columns: 0 1fr var(--right-w); }
body.hide-right .layout { grid-template-columns: var(--left-w) 1fr 0; }
body.hide-left.hide-right .layout { grid-template-columns: 0 1fr 0; }

.panel-handle {
  position: fixed; top: 50%; z-index: 120;
  transform: translateY(-50%);
  width: 16px; height: 54px;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border-2);
  font-size: 13px; line-height: 1; cursor: pointer;
  transition: background .12s, color .12s;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.panel-handle:hover { color: var(--text); background: var(--panel-3); }
.handle-left  { left: var(--left-w);  border-radius: 0 8px 8px 0; border-left: 0; }
.handle-right { right: var(--right-w); border-radius: 8px 0 0 8px; border-right: 0; }
body.hide-left  .handle-left  { left: 0; }
body.hide-right .handle-right { right: 0; }
@media (max-width: 800px) { .panel-handle { display: none; } }



/* ── Screenshot rate dropdown ─────────────────────────────────── */
.rate-menu { position: relative; margin-top: 8px; }
.rate-menu summary {
  list-style: none; cursor: pointer;
  padding: 7px 28px 7px 11px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .035); border: 1px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--text);
  transition: background .12s, border-color .12s;
}
.rate-menu summary:hover { background: rgba(255, 255, 255, .07); border-color: var(--border-2); }
.rate-menu summary::-webkit-details-marker { display: none; }
.rate-menu summary::after {
  content: '⌄'; position: absolute; right: 9px; top: 4px; color: var(--muted);
}
.rate-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 130;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-l); padding: 4px; box-shadow: var(--shadow-pop);
}
.rate-opt {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--text); font: inherit; font-size: 13px;
  padding: 7px 10px; cursor: pointer;
}
.rate-opt:hover { background: var(--panel-2); }
.rate-opt.on { color: var(--accent); }
.rate-remember {
  display: flex; align-items: center; gap: 7px;
  margin-top: 4px; padding: 7px 8px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted); cursor: pointer;
}
.rate-remember input { accent-color: var(--accent); cursor: pointer; }
.rate-hint { padding: 0 8px 6px; font-size: 11px; color: var(--muted); }

/* ── Update distribution ─────────────────────────────────────── */
.dist-list { font-size: 12px; margin-bottom: 8px; }
.dist-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.dist-time { color: var(--muted); }
.dist-result { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.dist-result .ok  { color: #b8e3c0; }
.dist-result .bad { color: #ff8f8f; }

/* ── Updater modal + clickable brand ─────────────────────────── */
#updateModal .modal-box { width: 440px; max-width: 92vw; }
#pushUpdateBtn { color: #7ee08c; background: rgba(63, 185, 80, .10); border-color: rgba(63, 185, 80, .38); margin-top: 2px; }
#pushUpdateBtn:hover { color: #c8f5cf; background: rgba(63, 185, 80, .2); border-color: rgba(63, 185, 80, .6); }

.brand-name {
  cursor: pointer; padding: 4px 8px; border-radius: 5px;
  transition: background .12s, color .12s;
}
/* hover только там, где есть настоящий курсор: на телефоне это состояние
   залипало после тапа и иконка оставалась в сером прямоугольнике. */
@media (hover: hover) {
  .brand-name:hover { background: rgba(255, 255, 255, .05); color: #fff; }
}
.brand-name:active { background: rgba(255, 255, 255, .09); }
.brand-name:focus { outline: none; background: transparent; }


.topbar-left #updaterBtn { margin-left: 14px; }




/* ── Phone layout ─────────────────────────────────────────────
   Everything added after the original mobile block — cards, chat, logs,
   streamer grid, updater — sized for a narrow screen. */
@media (max-width: 800px) {
  /* Topbar: brand hidden already, keep the updater but compact */
  /* Updating is a desktop job — the button only takes space here */
  #updaterBtn { display: none; }
  .topbar { padding: 0 8px; }
  /* Keep every topbar button on screen instead of pushing them off the edge */
  .topbar-right { flex-wrap: nowrap; min-width: 0; }
  .topbar-right .btn {
    font-size: 12px; padding: 5px 8px; white-space: nowrap;
  }

  /* Bottom sheet holds the journal and the all-PC chat, one above the other */
  /* Journal on top, all-PC chat underneath — both need a real height or the
     chat section collapses to nothing and looks empty. */
  .mobile-log-panel { display: flex; flex-direction: column; }
  /* min-height: 0 обязателен — без него flex-элемент не даёт себя сжать
     и содержимое вылезает за низ экрана вместо того, чтобы скроллиться. */
  .mobile-log-panel .log-lines {
    flex: 1 1 0; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* Чат обычно нужнее журнала — отдаём ему чуть больше места */
  .mobile-log-panel #mobileGlobalChat { flex: 1.4 1 0; }
  .mobile-log-panel .mobile-log-head { flex: none; }
  .mobile-chat-head { border-top: 1px solid var(--border); }
  .mobile-log-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .mlh-actions { display: flex; align-items: center; gap: 10px; }

  /* Cards stack; chat and log go under each other, taller for touch */
  .card-cols { grid-template-columns: 1fr; gap: 10px; }
  .card-col-log { padding: 0; }
  .chat-box { height: 180px; }
  .slot-log { height: 180px; }
  .chat-entry-input { font-size: 16px; }   /* 16px stops iOS zooming in */

  /* Nick row: name, SOE and buttons wrap instead of squeezing */
  .card-head { padding: 10px 10px 2px; }
  .card-head .char-name > span:nth-child(2) { font-size: 19px; }
  /* На телефоне: бот занимает всю первую строку, выход и запуск делят
     вторую пополам. Когда окна нет, кнопка выхода скрыта и запуск
     растягивается на всю ширину сам. */
  .card-actions { width: 100%; display: flex; gap: 6px; flex-wrap: wrap; }
  .card-actions .btn,
  .card-actions .launch-busy {
    /* block, а не inline-flex: многоточие работает только у блока */
    display: block; text-align: center;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 8px;
    padding-right: 8px;
  }
  .card-actions [id^="togglebot-"] { flex: 1 1 100%; }
  .card-actions [id^="closewin-"],
  .card-actions [id^="launch-"] { flex: 1 1 calc(50% - 3px); }

  /* Item strip and alert chips: roomier taps, no fixed two-row height */
  .inv-mini { min-height: 0; max-height: none; padding: 8px 10px 0; }
  .inv-mini-item { padding: 3px 9px 3px 5px; }
  .slot-alerts { padding: 6px 10px 0; gap: 5px; }
  .alert-chip { padding: 5px 10px; }

  /* Sidebar sections: the machine list scrolls, buttons stay reachable */
  .sidebar { width: min(86vw, 320px); }
  .sidebar-pcs { overflow-y: auto; }

  /* Плавающая кнопка «Журнал» висит в правом нижнем углу и перекрывает
     последнюю кнопку на странице. Оставляем под неё свободное место. */
  .main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* Колонка на телефоне одна. Десктопные .layout > * { grid-column: N }
     и шаблоны body.hide-* стоят ниже по файлу и перебивали её: контент
     уезжал в неявную вторую колонку и жался к правому краю. */
  .layout > .sidebar,
  .layout > .main,
  .layout > .log-sidebar { grid-column: 1; }
  .layout,
  body.hide-left .layout,
  body.hide-right .layout,
  body.hide-left.hide-right .layout {
    grid-template-columns: 1fr;
  }

  /* Streamer mode: one column, scrollable, buttons stay tappable */
  body.streamer .main {
    height: auto; overflow: visible;
    padding: 8px 8px calc(84px + env(safe-area-inset-bottom, 0px));
  }
  body.streamer #machineSections { height: auto; }
  .stream-grid,
  .stream-grid.mains { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .stream-cell .shot { max-height: none; }
  /* Одна колонка — сдвиг от догрузки тут самый заметный */
  .shot-wrap { min-height: 200px; }
  .stream-goto { font-size: 13px; padding: 7px 12px; }
  /* Переключатель окон закрепляем под шапкой: в режиме стримера он уезжал
     наверх вместе с прокруткой, и чтобы сменить режим, надо было листать
     весь список обратно. */
  /* Нижняя закреплённая панель — пара к верхней: слева переключатель окон,
     справа кнопка журнала. Sticky не годился: его держит родительская
     коробка, и кнопка отлипала на её границе. */
  body.streamer .stream-bar {
    flex-wrap: nowrap; margin: 0; z-index: 140;
    position: fixed; left: 0; right: 0; bottom: 0;
    align-items: center;
    padding: 5px 10px calc(5px + env(safe-area-inset-bottom, 0px));
    padding-right: 112px;              /* место под кнопку «Журнал» */
    background: var(--panel);
    border-top: 1px solid var(--border);
  }
  .stream-bar .stream-tgl { flex: 1 1 auto; padding: 5px 8px; font-size: 12px; }

  /* В режиме стримера кнопка журнала становится частью этой панели */
  body.streamer .mobile-log-btn {
    z-index: 141;
    bottom: calc(5px + env(safe-area-inset-bottom, 0px));
    right: 10px; padding: 5px 10px; font-size: 12px; border-radius: 14px;
    box-shadow: none;
  }
  /* Хвост под панелью, чтобы последнее превью не пряталось за ней */
  body.streamer .main {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  /* Updater popup fits the screen */
  #updateModal .modal-box { width: 94vw; }

  /* Fullscreen viewer uses the whole screen */
  .modal { padding: 6px; }
  .modal-box--wide { width: 100vw; max-width: 100vw; height: 94vh; }
}

/* Very narrow phones */
@media (max-width: 420px) {
  .card-head .char-name > span:nth-child(2) { font-size: 17px; }
  .inv-mini-item img { width: 20px; height: 20px; }
  .chat-box, .slot-log { height: 150px; }
}

/* Collapsible sidebar sections */
.sidebar-acc > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}
.sidebar-acc > summary::-webkit-details-marker { display: none; }
/* A proper chevron drawn from two borders — sharper than a text glyph and
   it rotates cleanly. */
.sidebar-acc > summary {
  padding: 2px 2px 2px 0; border-radius: 4px;
  -webkit-tap-highlight-color: transparent;   /* no grey flash on tap */
  user-select: none;
}
@media (hover: hover) {
  .sidebar-acc > summary:hover { background: rgba(255,255,255,.05); color: var(--text); }
}
.sidebar-acc > summary:focus { outline: none; }
.sidebar-acc > summary::after {
  content: '';
  width: 8px; height: 8px; margin: 0 6px 3px 8px; flex: none;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);                    /* points down = collapsed */
  transition: transform .18s ease, border-color .12s;
}
.sidebar-acc[open] > summary::after {
  transform: rotate(225deg); margin-bottom: -2px;
  border-color: var(--text);
}

@media (max-width: 800px) {
  /* The whole panel scrolls on a phone, so the logout button is reachable.
     overscroll-behavior keeps the swipe inside the panel instead of handing
     it to the page underneath. */
  .sidebar { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  body.nav-open { overflow: hidden; }
  body.nav-open .main { overflow: hidden; }
  /* Same chevron on a phone, just no hover tint */
  .sidebar-acc > summary:hover { background: none; }
  .sidebar-pcs { flex: none; overflow: visible; }
  .sidebar-logout { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}

button, summary, .alert-chip, .pc-jump-link, .inv-mini-remove, .col-clear {
  -webkit-tap-highlight-color: transparent;
}

/* System messages from the scripts: same shape as alerts, amber instead
   of red, so they read as "worth noticing" rather than "something broke". */
.log-notice {
  color: #ffdca8; background: rgba(224, 160, 48, .08);
  box-shadow: inset 2px 0 0 var(--warn);
  padding: 1px 6px; margin: 2px 0; border-radius: 6px;
}
.log-notice .ln-who  { color: #ffd9a0; }
.log-notice .ln-what { color: #e8b964; }

/* Watch toggle on an item chip */
.inv-watch {
  cursor: pointer; color: #3d4653; font-size: 12px; padding: 0 2px;
  transition: color .12s;
}
.inv-watch.on { color: var(--good); }
@media (hover: hover) { .inv-watch:hover { color: #9fb4c7; } }

/* Loot lines: green, distinct from red alerts and amber notices */
.log-loot {
  color: #bff0c6; background: rgba(63, 185, 80, .10);
  box-shadow: inset 2px 0 0 var(--good);
  padding: 1px 6px; margin: 2px 0; border-radius: 6px;
}
.log-loot .ll-who  { color: #ffd9a0; }
.log-loot .ll-what { color: #7ee08c; font-weight: 700; }
.log-loot .ll-cnt  { color: #bff0c6; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* ── Log columns ──────────────────────────────────────────────
   Time, who and the event each get their own column so rows line up no
   matter how long the nick or the message is. */
.slot-log .log-line {
  display: grid; grid-template-columns: 42px 84px minmax(0, 1fr);
  align-items: baseline; gap: 0 6px;
}
.slot-log .log-line > .lt { min-width: 0; text-align: right; }
.slot-log .la-who, .slot-log .ln-who, .slot-log .ll-who {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Sidebar log: one compact line per event. PC is a small muted tag, the
   nick is trimmed if needed, repeats collapse into a ×N badge — ten
   identical blocks stacked on top of each other were unreadable. */
/* Как в общем чате: обычный поток, метки в начале строки, текст
   переносится на всю ширину панели. Никаких колонок и обрезки. */
.log-sidebar .log-line.lg {
  display: block; padding: 2px 0; margin: 0;
  border-radius: 0; background: none;
  white-space: normal; line-height: 1.35;
}
.log-sidebar .lg .lt {
  color: var(--faint); margin-right: 5px;
  font-variant-numeric: tabular-nums;
}
/* Метка «ПК·окно» — один в один как в общем чате */
.log-sidebar .lg-pc {
  color: var(--info); font-size: .82em; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.log-sidebar .lg-who {
  color: var(--muted); font-size: .82em; font-weight: 500;
  white-space: nowrap; margin-right: 4px;
}
.log-sidebar .lg-who::before { content: '·'; margin: 0 2px; opacity: .6; }
.log-sidebar .lg-what { font-weight: 500; overflow-wrap: anywhere; }
.log-sidebar .lg-x { margin-left: 4px; }
/* Тип события виден по цвету текста — фон и полоска лишние. Кроме алертов:
   их подсвечиваем так же, как в журнале карточек. */
.log-sidebar .log-line.lg.log-notice,
.log-sidebar .log-line.lg.log-loot {
  background: none; border-left: 0; box-shadow: none; padding: 2px 0; margin: 0;
}
.log-sidebar .log-line.lg.log-alert {
  background: rgba(229, 83, 75, .1);
  border-left: 0; box-shadow: inset 2px 0 0 #e05656;
  padding: 2px 6px; margin: 2px -6px; border-radius: 6px;
}
.log-sidebar .lg-x {
  flex: none; font-size: 11px; color: var(--muted);
  background: rgba(255,255,255,.07); border-radius: 9px; padding: 1px 6px;
}
.log-sidebar .log-alert.lg .lg-what  { color: #ff8f8f; }
.log-sidebar .log-notice.lg .lg-what { color: #e8b964; font-weight: 500; }
.log-sidebar .log-loot.lg .lg-what   { color: #7ee08c; }

/* Card log: same compact row as the sidebar. The nick is redundant here —
   the card already says whose window this is. */
.slot-log .log-line.lg {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 6px; margin: 2px 0; border-radius: 6px;
}
.slot-log .lg .lt { flex: none; color: var(--faint); }
.slot-log .lg-what {
  flex: 1 1 auto; min-width: 0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-log .lg-x {
  flex: none; font-size: 12px; color: var(--muted);
  background: rgba(255,255,255,.07); border-radius: 9px; padding: 1px 6px;
}
.slot-log .log-alert.lg  .lg-what { color: #ff8f8f; }
.slot-log .log-notice.lg .lg-what { color: #e8b964; font-weight: 500; }
.slot-log .log-loot.lg   .lg-what { color: #7ee08c; }

.tg-block { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.tg-input {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  min-height: 38px; padding: 8px 11px; border-radius: var(--radius);
  background: var(--well); border: 1px solid var(--border);
  color: var(--text); font: inherit; font-size: 13.5px;
  transition: border-color .12s;
}
.tg-input:focus { outline: none; border-color: var(--accent-dim); }
select.tg-input {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23767989' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
select.tg-input option { background: var(--panel); color: var(--text); }
textarea.tg-input { resize: vertical; line-height: 1.45; }
.travel-hidden { padding: 8px 10px; border-radius: var(--radius); background: rgba(224, 160, 48, .06); border: 1px solid rgba(224, 160, 48, .2); }

/* Clickable PC name in the sidebar feeds */
.lg-pc, .cm-pc { cursor: pointer; }
.cm-who[data-reply-nick] { cursor: pointer; }
.cm-who[data-reply-nick]:hover { text-decoration: underline; }
@media (hover: hover) {
  .lg-pc:hover, .cm-pc:hover { text-decoration: underline; }
}

/* Кнопка запуска окна и индикатор стадии входа */
.launch-busy {
  opacity: .8;
  cursor: default;
  white-space: nowrap;
}

/* Успешные события в журнале (вход в игру) */
.log-line.log-ok .lg-what { color: #4ade80; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   Верхняя навигация, счётчики, расходка и нижняя панель телефона
   ═══════════════════════════════════════════════════════════════ */

/* --- Навигация рядом с названием --- */
.top-nav {
  display: flex; gap: 3px; margin-left: 14px; padding: 3px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 11px;
}
.top-nav-btn {
  background: none; border: 1px solid transparent; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 600;
  height: 28px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  white-space: nowrap; transition: background .12s, color .12s;
}
.top-nav-btn:hover { color: var(--text); }
.top-nav-btn.active { color: var(--text); background: var(--panel-2); border-color: var(--border-2); }

/* --- Счётчики: ПК 4  ОКНА 7  БОТЫ 6  АЛЕРТЫ 3 --- */
/* Капсула счётчиков: плитки «число над подписью», тонкие разделители.
   Цвет числа — по состоянию (data-state ставит renderTopStats). */
.top-stats {
  display: flex; align-items: stretch; gap: 0; margin-left: 20px;
  padding: 3px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--border);
}
.ts-item {
  position: relative;
  display: flex; flex-direction: column-reverse; align-items: center; justify-content: center;
  gap: 4px; min-width: 60px; padding: 4px 12px; border-radius: 9px;
  transition: background .2s;
}
.top-stats .ts-item + .ts-item::before {
  content: ''; position: absolute; left: 0; top: 24%; bottom: 24%;
  width: 1px; background: var(--border);
}
.ts-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; line-height: 1;
  color: var(--muted); text-transform: uppercase;
}
.ts-num {
  font-size: 17px; font-weight: 700; line-height: 1; color: var(--text);
  font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums;
}
.ts-num small { font-size: 11px; font-weight: 600; color: var(--faint); margin-left: 1px; }
.ts-item[data-state="good"] .ts-num { color: #7ee08c; }
.ts-item[data-state="warn"] .ts-num { color: #f2c04d; }
.ts-item[data-state="bad"]  .ts-num { color: #ff7b72; }
.ts-item[data-state="zero"] .ts-num { color: var(--faint); }
/* Есть алерты — плитка краснеет, в углу мигает точка */
.ts-item[data-stat="alerts"][data-state="bad"] { background: rgba(229, 83, 75, .14); }
.ts-item[data-stat="alerts"][data-state="bad"]::after {
  content: ''; position: absolute; top: 5px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: #ff5a4f;
  box-shadow: 0 0 6px rgba(255, 90, 79, .8);
  animation: ts-blink 1.2s ease-in-out infinite;
}
@keyframes ts-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ts-item::after { animation: none !important; } }

/* Те же счётчики наверху бокового меню — только на телефоне, где их нет
   в шапке. Четыре плитки в ряд. */
.side-stats { display: none; }
@media (max-width: 900px) {
  .side-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    padding: 14px 14px 0;
  }
  .side-stats .ts-item {
    min-width: 0; padding: 10px 4px 9px; gap: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  }
  .side-stats .ts-num { font-size: 19px; }
  .side-stats .ts-label { font-size: 9px; }
  .side-stats .ts-item[data-stat="alerts"][data-state="bad"] {
    background: rgba(229, 83, 75, .14); border-color: rgba(229, 83, 75, .45);
  }
}

/* --- Расходка в панели --- */
.supply-list { display: flex; flex-direction: column; gap: 10px; }
.supply-pc { display: flex; flex-direction: column; gap: 3px; }
.supply-pc-name {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); padding-left: 2px;
}

/* --- Низ левой панели --- */
.sidebar-foot {
  margin-top: auto; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 0 2px; border-top: 1px solid rgba(255,255,255,.07);
}
.sidebar { display: flex; flex-direction: column; }

/* --- Нижняя панель на телефоне --- */
.mobile-nav { display: none; }
@media (max-width: 800px) {
  .mobile-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mn-btn {
    flex: 1; background: none; border: 0; color: var(--muted);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 2px 7px; font: inherit; cursor: pointer;
  }
  .mn-btn.active { color: #e6c373; }
  .mn-btn { position: relative; }
  .mn-btn.active::before {
    content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 2px;
    border-radius: 0 0 2px 2px; background: var(--accent);
  }
  .mn-ico { font-size: 17px; line-height: 1; position: relative; }
  .mn-lbl { font-size: 11px; font-weight: 600; }
  .mn-badge {
    position: absolute; top: -6px; right: -10px;
    background: #ef4444; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
    padding: 2px 5px; border-radius: 9px;
  }

  /* Панель перекрывает низ страницы — оставляем под неё место */
  .main { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .mobile-log-panel { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* Навигация и счётчики в шапке телефона не помещаются:
     навигация живёт в нижней панели, из счётчиков оставляем главное */
  .top-nav { display: none; }
  .top-stats { margin-left: 10px; gap: 10px; }
  .top-stats .ts-label { display: none; }
  .top-stats .ts-item::before {
    content: attr(data-short);
    font-size: 10px; font-weight: 700; color: var(--muted);
  }
}



/* ── Обсидиан: правки поверх базовых стилей ─────────────────── */


/* Карточка окна не должна менять высоту, когда окна нет: заглушка
   занимает то же место, что занял бы кадр. */
.shot-wrap { min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.shot { height: 100%; object-fit: contain; }
.stream-cell .shot-wrap { aspect-ratio: auto; height: 100%; }

/* Панели на обсидиановом фоне: разделяем не рамкой, а тоном */
.topbar, .sidebar, .log-sidebar { background: var(--panel); }


/* ── Правки компоновки ─────────────────────────────────────── */

/* Меню частоты открывается ВВЕРХ: оно живёт внизу панели, и выпадающий
   список уезжал за нижний край экрана. */
.sidebar-foot .rate-menu { position: relative; }
.sidebar-foot .rate-menu .rate-pop {
  position: absolute; bottom: calc(100% + 6px); top: auto;
  left: 0; right: 0; z-index: 40;
}

/* Низ панели: не липнет к краю, кнопки не слипаются */
.sidebar-foot {
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 6px;
}
.sidebar-foot .logout-btn { margin-top: 6px; }

/* Счётчики переехали вправо, к общим кнопкам — и стали крупнее */
.topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-right .top-stats { margin-left: 0; margin-right: 4px; }

/* Чёрных полос по краям кадра быть не должно: соотношение задаём только
   для пустой карточки — чтобы высота не прыгала, — а живой кадр снова
   показывается в своих пропорциях. */
.shot-wrap { aspect-ratio: auto; }
.shot { height: auto; object-fit: fill; }
.shot-wrap:has(.shot-offline) { aspect-ratio: 16 / 9; }
.stream-cell .shot { height: 100%; object-fit: contain; }


/* ── Низ панели и стрелки ──────────────────────────────────── */






/* ── Стрелки: везде один и тот же уголок, нарисованный рамками ── */

/* Меню частоты: тот же уголок, что у секций панели. Символ ⌄ из базовых
   стилей убираем — он рисовался шрифтом и выглядел инородно. */
.rate-menu summary::after,
.rate-menu > summary::after {
  content: '';
  position: absolute; right: 10px; top: 50%;
  width: 7px; height: 7px; margin: 0;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  /* смотрит ВВЕРХ: список раскрывается над кнопкой */
  transform: translateY(-30%) rotate(-135deg);
  transition: transform .18s ease, border-color .12s;
}
.rate-menu[open] summary::after {
  transform: translateY(-70%) rotate(45deg);
  border-color: var(--text);
}

/* Секции панели: уголок прижат к правому краю, без лишних отступов */
.sidebar-acc > summary::after {
  width: 7px; height: 7px;
  margin: 0 0 3px 8px;
}

/* Низ панели: одинаковые поля по бокам, как у остальных секций */
.sidebar-foot { padding-left: 10px; padding-right: 10px; }


/* Секция алертов раскрывается вверх — уголок смотрит туда же */
.sidebar-acc#accAlerts > summary::after {
  transform: rotate(225deg); margin-bottom: -2px;
}
.sidebar-acc#accAlerts[open] > summary::after {
  transform: rotate(45deg); margin-bottom: 3px;
  border-color: var(--text);
}


/* Заголовок секции: текст и уголок на одной оси.
   Раньше уголок сдвигался margin-bottom (разным в открытом и закрытом
   виде) — из-за этого строка выглядела съехавшей. */
.sidebar-acc > summary {
  padding: 4px 8px 4px 2px;
  min-height: 28px;
}
.sidebar-acc > summary::after {
  margin: 0 0 0 8px;
  align-self: center;
  position: relative;
  top: -2px;                  /* уголок из рамок визуально тяжелее снизу */
}
.sidebar-acc#accAlerts > summary::after,
.sidebar-acc#accAlerts[open] > summary::after { margin-bottom: 0; }
.sidebar-acc#accAlerts > summary::after { top: 2px; }
.sidebar-acc#accAlerts[open] > summary::after { top: -2px; }


/* У .sidebar-title есть margin-bottom под содержимое. В свёрнутой секции
   содержимого нет, и этот отступ делал полосу снизу шире, чем сверху. */
.sidebar-acc:not([open]) > summary.sidebar-title { margin-bottom: 0; }


/* ── Телефон: нижняя панель и шапка ────────────────────────── */
@media (max-width: 900px) {
  /* Панель показываем жёстко: в прошлый раз её перекрывали более поздние
     правила, и на части экранов она не появлялась. */
  .mobile-nav {
    display: flex !important;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Счётчики ПК/ОКНА/БОТЫ/АЛЕРТЫ в шапке телефона не нужны — они
     вытесняли кнопки «Остановить всех» и «Выйти со всех». */
  .top-stats { display: none !important; }
  .topbar-right { gap: 6px; flex: 1; justify-content: flex-end; }
  .topbar-right .btn { padding: 6px 10px; font-size: 13px; white-space: nowrap; }

  /* Плавающая кнопка журнала больше не нужна — журнал в нижней панели */
  .mobile-log-btn { display: none !important; }

  .main { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .mobile-log-panel { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}


/* ── Телефон: панель снизу всегда поверх шторки журнала ────── */
@media (max-width: 900px) {
  .mobile-nav { z-index: 200 !important; }

  /* Шторка журнала открывается НАД панелью, а не поверх неё */
  .mobile-log-panel {
    z-index: 160;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(84dvh - 58px);
    border-radius: 14px 14px 0 0;
  }
  .sidebar-overlay { z-index: 150; }

  /* Кнопки в шапке: коротко, чтобы влезли рядом с гамбургером */
  .topbar-right .btn { padding: 6px 9px; font-size: 12.5px; }
  .topbar { gap: 6px; }
  .brand-name { display: none; }        /* название занимает всю ширину */
}


/* ── Режим стримера на телефоне ────────────────────────────── */
@media (max-width: 900px) {
  /* Полоса «Только мейны» жила на bottom:0 и теперь оказалась под новой
     нижней панелью. Поднимаем её ровно над панелью. */
  body.streamer .stream-bar {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    padding-right: 10px !important;      /* кнопка журнала переехала в панель */
    z-index: 150;
  }
  body.streamer .mobile-log-btn { display: none !important; }
  body.streamer .main { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}


/* ── Шапка на десктопе ─────────────────────────────────────── */
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: .01em; }

/* Кнопка Updater — зелёная, мелкими заглавными */
.topbar-left #updaterBtn {
  margin-left: 12px;
  height: 32px; padding: 0 12px;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  /* На телефоне в шапке нет места — апдейтер живёт в боковой панели */
  .topbar-left #updaterBtn { display: none; }
}

/* Дубль апдейтера в панели нужен только на узких экранах */
.sidebar-updater { display: none; }
@media (max-width: 900px) { .sidebar-updater { display: block; } }



@media (max-width: 900px) {
  /* Низ боковой панели уходил под закреплённую нижнюю панель */
  .sidebar { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .sidebar-foot { margin-bottom: 0; }

}


@media (max-width: 900px) {

  /* «Очистить» в шторке журнала: у верхней строки справа ещё крестик,
     из-за него надпись уезжала. Резервируем под крестик одинаковое место,
     чтобы обе «Очистить» стояли на одной вертикали. */
  .mobile-log-panel .mobile-chat-head { padding-right: 52px; }
}


/* ── Отклик на касание ─────────────────────────────────────── */
/* Системная подсветка тапа отключена глобально, а :active нигде не задан —
   поэтому нажатие проходило «вникуда» на вид. Даём короткую реакцию. */
.btn:active,
.alert-chip:active,
.pc-jump-link:active,
.mn-btn:active,
.rate-opt:active,
.col-clear:active {
  transform: scale(.96);
  filter: brightness(1.35);
  transition: transform .05s ease, filter .05s ease;
}



/* Подсветка нажатия, которую ставит JS (см. .tapped в app.js) */
.tapped {
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
  color: #1a1305 !important;
  transform: scale(.96);
  transition: transform .06s ease;
}

/* Длинные строки в журнале переносятся, а не уезжают вправо */
.log-line { align-items: flex-start; }
.log-line .lg-what,
.log-lines .lg-what,
.slot-log .lg-what {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.log-lines, .slot-log { overflow-x: hidden; }


/* ── Журнал на телефоне: те же стили, что в десктопной колонке ──
   Раньше всё оформление было привязано к .log-sidebar, поэтому в шторке
   строки слипались («PC4KRIPTOSEОКНО») и шли другим цветом. */
.mobile-log-panel .log-line.lg {
  display: block; padding: 2px 0; margin: 0;
  border-radius: 0; background: none;
  white-space: normal; line-height: 1.35;
}
.mobile-log-panel .lg .lt {
  color: var(--faint); margin-right: 5px;
  font-variant-numeric: tabular-nums;
}
.mobile-log-panel .lg-pc {
  color: var(--info); font-size: .82em; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.mobile-log-panel .lg-who {
  color: var(--muted); font-size: .82em; font-weight: 500;
  white-space: nowrap; margin-right: 4px;
}
.mobile-log-panel .lg-who::before { content: '·'; margin: 0 2px; opacity: .6; }
.mobile-log-panel .lg-what { font-weight: 500; overflow-wrap: anywhere; }
.mobile-log-panel .log-line.lg.log-notice,
.mobile-log-panel .log-line.lg.log-loot {
  background: none; border-left: 0; box-shadow: none; padding: 2px 0; margin: 0;
}
.mobile-log-panel .log-line.lg.log-alert {
  background: rgba(229, 83, 75, .1);
  border-left: 0; box-shadow: inset 2px 0 0 #e05656;
  padding: 2px 6px; margin: 2px -6px; border-radius: 6px;
}
.mobile-log-panel .lg-x {
  flex: none; font-size: 11px; color: var(--muted);
  background: rgba(255,255,255,.07); border-radius: 9px; padding: 1px 6px;
  margin-left: 4px;
}
.mobile-log-panel .log-line.log-ok .lg-what { color: #4ade80; font-weight: 600; }


/* Кнопка антифриза рядом с SOE */
.af-btn { opacity: .65; }
.af-btn.on {
  opacity: 1;
  background: rgba(63,185,80,.16);
  border-color: rgba(63,185,80,.5);
  color: #7ee08c;
}


/* Перезапуск скрипта Adrenaline */
.rl-btn { padding: 3px 5px; line-height: 0; color: var(--info); }
.rl-btn .rl-ico { width: 22px; height: 22px; display: block; }
.rl-btn:hover { color: #cfe3ff; filter: brightness(1.2); }

/* Успешные события в общем журнале */
.log-sidebar .log-line.log-ok .lg-what,
.mobile-log-panel .log-line.log-ok .lg-what { color: #4ade80; font-weight: 600; }


/* ── Окно браузера средней ширины (половина 2К-монитора) ─────── */
/* Боковые панели уже — карточкам достаётся больше места. */
@media (min-width: 801px) and (max-width: 1600px) {
  :root { --left-w: 190px; --right-w: 270px; }
}


/* Карточка перестраивается по своей ширине, а не по ширине окна: две
   карточки в ряд на половине монитора давали колонки чата и журнала по
   150 px, и текст ломался по слову в строке. */
.card { container: card / inline-size; }
@container card (max-width: 480px) {
  .card-cols { grid-template-columns: 1fr; gap: 8px; }
  .card-col-log { padding: 0; }
  .chat-box { height: 120px; }
  .slot-log { height: 110px; }
  .card-head { padding: 8px 10px 2px; gap: 6px; }
  .card-head .char-name { gap: 6px; flex-wrap: wrap; }
  .card-head .char-name > span:nth-child(2) { font-size: 18px; }
  .card-actions { justify-content: flex-start; width: 100%; gap: 4px; }
  .card-actions .btn { font-size: 12px; padding: 4px 8px; }
  .card-body { padding: 8px 10px 10px; }
}


/* ── 🔔 Алерты и антифриз в выпадающем меню ─────────────────── */
.alerts-wrap { position: relative; display: inline-flex; }
.alerts-badge { z-index: 1; box-shadow: 0 0 0 2px #0f0f14; }
.alerts-badge {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: #d29922; color: #1a1305;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.alerts-badge[hidden] { display: none; }
.alerts-pop {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  width: 240px; max-width: calc(100vw - 32px); padding: 12px; border-radius: var(--radius-l);
  background: var(--surface); border: 1px solid var(--border-2);
  box-shadow: var(--shadow-pop);
}
.alerts-pop.open { display: block; }
.alerts-pop-title {
  font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .09em; margin-bottom: 10px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.alerts-pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.alerts-pop .alert-chip { justify-content: flex-start; width: 100%; font-size: 13px; }
.alerts-pop-sep { height: 1px; background: var(--border); margin: 10px 0; }
.alerts-pop .af-chip { font: inherit; font-size: 13px; cursor: pointer; }
.alerts-pop .af-chip.on { background: rgba(63, 185, 80, .12); border-color: rgba(63, 185, 80, .5); color: #7ee08c; }
.alerts-pop .af-chip.on .cdot { background: #3fb950; }


/* ── Кнопка бота: иконка вместо «ВКЛ / ВЫКЛ бот» ─────────────── */
.bot-btn {
  padding: 3px 5px; line-height: 0;
  background: rgba(248, 81, 73, .10); border-color: rgba(248, 81, 73, .45);
}
.bot-btn .bot-ico {
  width: 22px; height: 22px; display: block;
  color: #ff5a4f; filter: drop-shadow(0 0 3px rgba(248, 81, 73, .65));
}
.bot-btn.on { background: rgba(63, 185, 80, .12); border-color: rgba(63, 185, 80, .55); }
.bot-btn.on .bot-ico {
  color: #4ade80; filter: drop-shadow(0 0 4px rgba(74, 222, 128, .75));
  animation: bot-spin 3.2s linear infinite;
}
.bot-btn:hover { filter: brightness(1.25); }
@keyframes bot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bot-btn.on .bot-ico { animation: none; } }

/* Телефон: все иконки в шапке карточки — одного размера и с нормальной
   площадью касания. */
@media (max-width: 900px) {
  .card-head .bot-btn, .card-head .rl-btn {
    min-width: 42px; min-height: 38px; padding: 6px 8px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .card-head .bot-ico, .card-head .rl-ico { width: 24px; height: 24px; }
  .tool-btn { width: 46px; height: 46px; border-radius: 12px; }
  .tool-btn .ico { width: 38px; height: 38px; border-radius: 9px; }
  .tool-btn::after { border-radius: 9px; }
  .card-tools { gap: 8px; }
}

/* ── Машины и расходка (левая панель) ────────────────────────────
   В одном стиле с инвентарём: карточка ПК, внутри по строке на персонажа,
   расходка — чипами с иконкой в тёмной плитке. Панель узкая (190–220 px),
   поэтому всё плотно и без переносов. */
.pc-jump-list { display: flex; flex-direction: column; gap: 8px; }
.pc-jump-block {
  border-radius: 12px; padding: 3px;
  background: linear-gradient(180deg, #15151c, #0f0f14);
  border: 1px solid var(--border);
}
.pc-jump-block.offline { opacity: .6; }
/* Широкая карточка ПК (панель на телефоне, ~290 px) — персонажи рядом, в
   две колонки: список вдвое короче. На узкой панели компьютера (190–220 px)
   две колонки не влезают — остаётся одна. Решает ширина самой карточки. */
.pc-jump-block { container: pcblock / inline-size; }
@container pcblock (min-width: 170px) {
  .pc-jump-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-jump-inner > .pc-jump-link { grid-column: 1 / -1; }
  .pc-jump-inner > .so-row:nth-child(odd) { border-left: 1px solid rgba(255, 255, 255, .05); }
  .pc-jump-inner > .so-row { padding: 6px 5px 7px 8px; }
  .pc-jump-inner .so-items { gap: 3px; }
  .pc-jump-inner .so-item { gap: 4px; padding: 2px 5px 2px 2px; }
  .pc-jump-inner .so-ic { width: 18px; height: 18px; }
  .pc-jump-inner .so-cnt { font-size: 12.5px; }
}
.pc-jump-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 9px; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700;
  letter-spacing: .02em; color: var(--text);
  transition: background .12s;
}
.pc-jump-link:hover { background: var(--panel-2); }
.pc-jump-link .dot { width: 10px; height: 10px; flex: none; }
.pc-jump-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-jump-count {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  height: 20px; padding: 0 8px; border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .06); color: var(--muted);
}
/* Срок ключа Адреналина */
.key-chip {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer;
  height: 22px; padding: 0 9px; border-radius: 11px;
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border); color: var(--muted);
  transition: background .12s, border-color .12s, color .12s;
}
.key-chip:hover { background: rgba(255, 255, 255, .08); color: var(--text); border-color: var(--border-2); }
.key-chip.warn { background: rgba(224, 160, 48, .14); border-color: rgba(224, 160, 48, .45); color: #f2c04d; }
.key-chip.bad  { background: rgba(229, 83, 75, .14); border-color: rgba(229, 83, 75, .5); color: #ff8f88; }
.machine-head .key-chip { height: 24px; font-size: 12px; }

.pc-jump-off {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  color: #ff9d96; background: rgba(229, 83, 75, .14);
  padding: 2px 7px; border-radius: 10px;
}
.pc-jump-count.old { background: rgba(224, 160, 48, .16); color: #f2c04d; box-shadow: inset 0 0 0 1px rgba(224, 160, 48, .45); }
.pc-jump-old {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
  color: #f2c04d; background: rgba(224, 160, 48, .14);
  padding: 2px 6px; border-radius: 10px;
}

/* Персонаж: точка состояния и ник, под ними — расходка */
.so-row {
  padding: 6px 6px 7px 8px; border-radius: 9px; cursor: pointer;
  border-top: 1px solid rgba(255, 255, 255, .05);
  transition: background .12s;
}
.so-row:hover { background: rgba(255, 255, 255, .03); }
.so-who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.so-who .dot { width: 7px; height: 7px; flex: none; box-shadow: none; }
.so-who .dot:not(.on):not(.off):not(.warn) { background: #3a3a46; }
.so-nick {
  font-size: 13px; font-weight: 600; color: #e9d5b0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.so-items {
  /* Чипы по ширине числа и с переносом: большие запасы встают по одному,
     маленькие — парой. Сетка в две колонки на узкой панели резала числа. */
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.so-item {
  display: flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 2px 7px 2px 2px; border-radius: 8px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .05);
}
.so-item.low { background: rgba(229, 83, 75, .1); border-color: rgba(229, 83, 75, .35); }
.so-ic {
  position: relative; flex: none; width: 20px; height: 20px; border-radius: 6px;
  overflow: hidden; background: #111116;
}
.so-ic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.so-ic::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.so-cnt {
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.so-cnt.ok  { color: #b8e3c0; }
.so-cnt.low { color: #ff8f8f; font-weight: 700; }

/* Тревога: пульсирует строка персонажа или шапка ПК */
@keyframes alertPulse {
  0%, 100% { background: transparent; }
  50%      { background: rgba(224, 86, 86, .28); }
}
.pc-jump-link.alerting, .so-row.alerting { animation: alertPulse 1s ease-in-out infinite; }
.so-row.alerting .so-nick { color: #ff8f8f; }
.pc-jump-block:has(.alerting) { border-color: rgba(229, 83, 75, .55); }
@media (prefers-reduced-motion: reduce) {
  .pc-jump-link.alerting, .so-row.alerting { animation: none; background: rgba(224, 86, 86, .2); }
}

/* ── Окно «Бафы» ─────────────────────────────────────────────────
   Сверху переключатели и числа, дальше очередь бафов строками с иконками,
   под ней все скиллы персонажа плитками и свёрнутые «Скрытые». */
.buff-box { width: 520px; max-width: 94vw; max-height: 92vh; display: flex; flex-direction: column; }
.buff-box .modal-body { overflow-y: auto; }

.buff-top { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; }
.buff-switch { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; user-select: none; }
.buff-switch input { position: absolute; opacity: 0; pointer-events: none; }
.buff-switch .sw {
  position: relative; width: 34px; height: 20px; border-radius: 10px; flex: none;
  background: var(--panel-3); border: 1px solid var(--border-2); transition: background .15s, border-color .15s;
}
.buff-switch .sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--muted); transition: transform .15s, background .15s;
}
.buff-switch input:checked + .sw { background: rgba(201, 162, 75, .22); border-color: var(--accent-dim); }
.buff-switch input:checked + .sw::after { transform: translateX(14px); background: var(--accent); }

.buff-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.buff-nums label {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.buff-nums .tg-input { margin: 0; padding-right: 38px; font-variant-numeric: tabular-nums; }
.buff-nums i { position: absolute; right: 11px; bottom: 11px; font-style: normal; font-size: 11.5px; color: var(--faint); text-transform: none; }

.buff-sec {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 16px 0 7px; padding: 0;
  background: none; border: 0; color: var(--muted); font: inherit; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.buff-sec span {
  margin-left: auto; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--faint);
}
.buff-fold { cursor: pointer; }
.buff-fold::before { content: '▸'; font-size: 11px; color: var(--faint); transition: transform .15s; }
.buff-fold.open::before { transform: rotate(90deg); }
.buff-fold:hover { color: var(--text); }
.buff-empty { padding: 12px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* Иконка скилла: заглушка с буквами, поверх — картинка, если есть. */
.sk-ico {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 7px; overflow: hidden;
  background: linear-gradient(145deg, hsl(var(--h) 38% 30%), hsl(var(--h) 45% 12%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), 0 2px 6px rgba(0, 0, 0, .45);
}
.sk-ico b { font: 700 12px/1 'Space Grotesk', sans-serif; letter-spacing: .02em; color: hsl(var(--h) 60% 82%); }
.sk-ico img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; }

/* Очередь */
.buff-list { display: flex; flex-direction: column; gap: 5px; }
.buff-row {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 5px 8px 5px 6px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--border);
  transition: border-color .12s, opacity .12s;
}
.buff-row:hover { border-color: var(--border-2); }
.buff-row.off { opacity: .55; }
.buff-row.off .sk-ico { filter: grayscale(1); }
.buff-tog {
  width: 18px; height: 18px; flex: none; border-radius: 5px; cursor: pointer;
  background: var(--well); border: 1px solid var(--border-2); position: relative;
}
.buff-tog.on { background: var(--accent); border-color: var(--accent); }
.buff-tog.on::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #1a1204; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.buff-ico-wrap { position: relative; flex: none; }
.buff-n {
  position: absolute; right: -5px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #0b0b0f; border: 1px solid var(--border-2);
  font: 700 10px/14px 'Space Grotesk', sans-serif; color: var(--accent); text-align: center;
}
.buff-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buff-name small { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; color: var(--muted); }
.buff-name em { font-style: normal; color: #ff8f88; }
.buff-left {
  flex: none; min-width: 52px; padding: 3px 8px; border-radius: 999px; text-align: center;
  font: 600 12px/1.3 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums;
  color: #7ee08c; background: rgba(63, 185, 80, .10); border: 1px solid rgba(63, 185, 80, .25);
}
.buff-left.warn { color: #f2c04d; background: rgba(224, 160, 48, .12); border-color: rgba(224, 160, 48, .35); }
.buff-left.bad  { color: #ff8f88; background: rgba(229, 83, 75, .12); border-color: rgba(229, 83, 75, .35); }
.buff-left.removed { text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; cursor: help; }
.buff-left.offline { color: var(--faint); background: var(--well); border-color: var(--border); font-size: 10.5px; letter-spacing: .03em; cursor: help; }
.buff-acts { display: flex; gap: 3px; flex: none; }
.buff-mv {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 10px;
  background: var(--well); border: 1px solid var(--border); color: var(--muted);
}
.buff-mv:hover:not(:disabled) { color: var(--text); border-color: var(--border-2); }
.buff-mv:disabled { opacity: .3; cursor: default; }
.buff-mv.del:hover { color: #ff8f88; border-color: rgba(229, 83, 75, .45); }

/* Скиллы плитками */
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.sk-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 5px 7px; border-radius: 10px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border);
  transition: border-color .12s, transform .12s, background .12s;
}
.sk-tile:hover { border-color: var(--accent-dim); background: var(--panel-3); transform: translateY(-1px); }
.sk-tile .sk-ico { width: 38px; height: 38px; }
.sk-name {
  width: 100%; font-size: 11px; line-height: 1.25; text-align: center; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sk-hide {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 5px;
  display: grid; place-items: center; cursor: pointer; font-size: 10px;
  background: rgba(0, 0, 0, .55); border: 1px solid var(--border-2); color: var(--muted);
  opacity: 0; transition: opacity .12s;
}
.sk-tile:hover .sk-hide { opacity: 1; }
.sk-hide:hover { color: #ff8f88; border-color: rgba(229, 83, 75, .5); }
@media (hover: none) { .sk-hide { opacity: .8; } }
.sk-grid.small { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.sk-grid.small .sk-tile { opacity: .7; }
.sk-grid.small .sk-tile:hover { opacity: 1; }
.sk-grid.small .sk-ico { width: 30px; height: 30px; filter: grayscale(.6); }

.buff-save { display: flex; gap: 8px; margin-top: 16px; }
.buff-save .btn-ok { flex: 1; }

@media (max-width: 520px) {
  .buff-nums { gap: 6px; }
  .buff-row { gap: 8px; }
  .buff-mv { width: 24px; }
  .sk-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .sk-tile, .buff-switch .sw::after, .buff-fold::before { transition: none; }
}

/* Подробности алерта (у «Сняли баф» — какой баф и сколько оставалось) */
.log-alert .lg-detail {
  display: block; flex-basis: 100%; margin-top: 2px; font-size: 12px; line-height: 1.4;
  font-weight: 400; color: #ffb3ad; overflow-wrap: anywhere; white-space: normal;
}
.slot-log .log-line.lg.log-alert { flex-wrap: wrap; row-gap: 0; }
.buff-target { display: flex; margin: 16px 0 0; }
.buff-target .seg-btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.buff-target .seg-btn b { font-weight: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buff-target .seg-btn span { flex: none; }
.buff-target .seg-btn span {
  min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 16px;
  background: rgba(255, 255, 255, .07); color: var(--muted);
}
/* Подсказка в окне «Бафы» — свёрнута под кнопку */
.buff-help { margin-top: 12px; }
.buff-help summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: 12px; color: var(--muted); user-select: none;
}
.buff-help summary::-webkit-details-marker { display: none; }
.buff-help summary::before {
  content: 'i'; display: inline-grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; border: 1px solid var(--border-2);
  font: 700 10px/1 'Space Grotesk', sans-serif; color: var(--muted);
}
.buff-help summary:hover, .buff-help[open] summary { color: var(--text); }
.buff-help .dist-result { margin-top: 6px; }

/* Описание спота в окне маршрута */
.spot-note { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 6px; flex-wrap: wrap; }
.spot-note textarea { margin: 0; }
.spot-note > div[style] { width: 100%; }
.spot-note-text {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: var(--radius);
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.spot-note-text.empty { color: var(--faint); font-style: italic; }
.spot-note-edit {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius); cursor: pointer;
  background: var(--well); border: 1px solid var(--border); color: var(--muted);
}
.spot-note-edit:hover { color: var(--text); border-color: var(--border-2); }

/* ── Окна поверх сайта на телефоне ──────────────────────────────
   Окно не выше видимой части экрана (dvh — с учётом адресной строки),
   листается только его тело, шапка с крестиком на месте. Прокрутка не
   проваливается на сайт под окном даже в конце списка, а сам сайт, пока
   открыто окно, стоит. Раньше высокие окна (бафы, маршрут) вылезали за
   экран, и жест листал страницу, а не окно. Инвентарь и полноэкранный
   просмотр устроены по-своему — у них только запрет проваливания. */
.modal {
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.modal-box:not(.modal-box--wide) {
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column;
}
.modal-box:not(.modal-box--wide) > .modal-head { flex: none; }
.modal-box:not(.modal-box--wide) > .modal-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
#inventoryAll, #inventoryContent, .fs-wrap, .buff-list, .sk-grid {
  overscroll-behavior: contain;
}
/* Страница не листается, пока открыто окно: одного overscroll-behavior мало —
   если в окне нечего листать (пустой инвентарь), жест уходил на сайт. */
html:has(.modal[style*="flex"]), body:has(.modal[style*="flex"]) {
  overflow: hidden; overscroll-behavior: none;
}
@media (max-width: 560px) {
  .modal:not(#inventoryModal):not(#fullscreenModal) { padding: 8px; align-items: center; }
  .modal-box:not(.modal-box--wide) {
    max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
  }
  .buff-box { max-height: calc(100dvh - 16px); }
}
/* На телефоне во вкладках «Бафов» только ники: «На бойца · » не влезало */
.buff-target .seg-btn em { font-style: normal; }
@media (max-width: 560px) { .buff-target .seg-btn em { display: none; } }
/* Инвентарь по последней выгрузке (окно закрыто / скрипт выключен) */
.inv-stale {
  margin: 8px 0 6px; padding: 8px 10px; border-radius: var(--radius);
  background: rgba(224, 160, 48, .08); border: 1px solid rgba(224, 160, 48, .3);
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
}
.inv-stale b { color: #f2c04d; font-weight: 600; }

/* Переключатели «Бафов» — одна строка коротких кнопок */
.buff-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-bottom: 12px; }
.buff-chip {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 6px; border-radius: var(--radius); cursor: pointer; user-select: none;
  background: var(--well); border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.buff-chip input { position: absolute; opacity: 0; pointer-events: none; }
.buff-chip::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint);
}
.buff-chip:hover { border-color: var(--border-2); color: var(--text); }
.buff-chip:has(input:checked) { color: var(--text); background: rgba(201, 162, 75, .12); border-color: var(--accent-dim); }
.buff-chip:has(input:checked)::before { background: var(--accent); box-shadow: 0 0 6px rgba(201, 162, 75, .7); }
.buff-chip.bchip-main:has(input:checked) { background: rgba(63, 185, 80, .13); border-color: rgba(63, 185, 80, .5); }
.buff-chip.bchip-main:has(input:checked)::before { background: #3fb950; box-shadow: 0 0 6px rgba(63, 185, 80, .7); }
.buff-chip:has(input:focus-visible) { outline: 2px solid var(--accent-dim); outline-offset: 1px; }
@media (max-width: 480px) {
  .buff-chips { gap: 4px; }
  .buff-chip { font-size: 11.5px; gap: 4px; padding: 0 2px; height: 32px; }
  .buff-chip::before { width: 6px; height: 6px; }
}
@media (max-width: 340px) { .buff-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Очередь бафов на телефоне: название в две строки вместо «Improve Co…»,
   уровень — в подсказке, ▲▼ столбиком, плашка времени уже. */
@media (max-width: 560px) {
  .buff-row { gap: 7px; padding: 5px 6px 5px 5px; }
  .buff-name {
    white-space: normal; font-size: 12.5px; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .buff-name small { display: none; }
  .buff-name em { display: block; font-size: 10.5px; }
  .buff-left { min-width: 42px; padding: 2px 6px; font-size: 11.5px; }
  .buff-acts {
    display: grid; grid-template-columns: 24px 24px; grid-template-rows: 15px 15px; gap: 2px;
  }
  .buff-acts .buff-mv { width: 24px; height: 15px; font-size: 7px; border-radius: 5px; padding: 0; }
  .buff-acts .buff-mv[data-buff="up"] { grid-column: 1; grid-row: 1; }
  .buff-acts .buff-mv[data-buff="down"] { grid-column: 1; grid-row: 2; }
  .buff-acts .buff-mv.del { grid-column: 2; grid-row: 1 / 3; height: 32px; font-size: 10px; }
}
/* Сообщение внутри сетки плиток («все бафы в очереди…») — на всю ширину
   одной строкой, а не в узкой колонке по слову. */
.sk-grid > .buff-empty { grid-column: 1 / -1; padding: 8px 10px; font-size: 12px; }
/* Поля «Ребаф за / Стоять до / после» — той же высоты, что переключатели
   над ними, и мельче: были крупнее всего остального в окне. */
.buff-nums { gap: 6px; }
.buff-nums label { gap: 4px; font-size: 10px; letter-spacing: .05em; }
.buff-nums .tg-input {
  min-height: 34px; height: 34px; padding: 4px 30px 4px 10px;
  font-size: 13px; font-weight: 600;
}
.buff-nums i { right: 9px; bottom: 9px; font-size: 10.5px; }
/* Стрелочки браузера у числовых полей в стиль панели не вписываются —
   прячем; число вводится с клавиатуры, стрелки ↑↓ на ней работают. */
.buff-nums input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.buff-nums input[type="number"]::-webkit-inner-spin-button,
.buff-nums input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Папка Адреналина в блоке «Настройки ПК» окна обновления */
.adr-field { margin-top: 4px; }
.adr-field .upd-head { margin-top: 6px; }
.adr-field #adrHint { margin: -4px 0 10px; }
.adr-field .ok { color: #7ee08c; }
.adr-field .bad { color: #ff8f88; }

/* Мобы спота — в окне маршрута */
.spot-mobs { margin: 2px 0 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--well); }
.sm-head { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.sm-head span { color: var(--accent); margin-left: 4px; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.sm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px; border-radius: 999px;
  font-size: 12px; background: rgba(201, 162, 75, .12); border: 1px solid var(--accent-dim); color: var(--text); }
.sm-chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0 3px; }
.sm-chip button:hover { color: #f85149; }
.sm-empty { font-size: 12px; color: var(--faint); font-style: italic; padding: 4px 2px; }
.sm-find { display: flex; gap: 6px; }
.sm-find .tg-input { margin: 0; flex: 1; min-width: 0; }
.sm-res { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; margin-top: 6px; }
.sm-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; margin: 0 0 3px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel, transparent); color: var(--text);
  font-size: 12.5px; cursor: pointer; }
.sm-row:hover:not([disabled]) { border-color: var(--accent-dim); }
.sm-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-row i { color: var(--faint); font-style: normal; font-size: 11px; }
.sm-row em { color: var(--faint); font-style: normal; font-size: 11px; }
.sm-row b { color: var(--accent); width: 14px; text-align: center; }
.sm-row.on { opacity: .55; cursor: default; }
.sm-row u { color: var(--muted); text-decoration: none; font-size: 11px; white-space: nowrap; }
.sm-chip u { color: var(--muted); text-decoration: none; font-size: 11px; }
.sm-apply { margin-left: auto; border: 1px solid var(--border); background: none; color: var(--muted);
  border-radius: var(--radius); font-size: 11.5px; padding: 2px 8px; cursor: pointer; }
.sm-apply:hover { color: var(--text); border-color: var(--accent-dim); }
/* Приоритет моба — «таблетка» в тон чипа: без системной рамки и стрелки */
.sm-prio { -webkit-appearance: none; appearance: none; margin: 0 0 0 4px; cursor: pointer;
  height: 18px; padding: 0 7px; border-radius: 999px; border: 1px solid transparent;
  background: rgba(255, 255, 255, .06); color: var(--muted); font: inherit; font-size: 10.5px; line-height: 16px; }
.sm-prio:hover { border-color: var(--border-2); color: var(--text); }
.sm-prio:focus { outline: none; border-color: var(--accent-dim); }
.sm-prio option { background: var(--panel-2); color: var(--text); }
.sm-prio.p0 { color: var(--faint); }
.sm-prio.p2 { color: var(--warn); background: rgba(224, 160, 48, .12); }
.sm-prio.p3 { color: var(--bad); background: rgba(229, 83, 75, .12); }

/* ── Бафы → «Хил и бафы профиля» (правила Адреналина) ─────── */
.buff-pages { margin-bottom: 14px; }
.buff-pages .seg-btn { font-size: 13px; }
#buffModal .buff-box:has(.prof-top) { width: 900px; }
.prof-top { display: flex; gap: 6px; margin-bottom: 10px; }
.prof-sel { flex: 1; min-width: 0; margin: 0; }
.prof-item { display: flex; flex-direction: column; }
.prof-row { cursor: pointer; }
.prof-row .buff-name small { display: block; white-space: normal; line-height: 1.35; }
.prof-item.open .prof-row { border-color: var(--accent-dim); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.prof-item.del .prof-row { opacity: .45; }
.prof-item.del .buff-name { text-decoration: line-through; }
.prof-item.del .buff-name small { text-decoration: none; }
.prof-new { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--accent); margin-left: 4px; }
.prof-tgt-chip {
  flex: none; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 7px; border-radius: 999px; font-size: 11px; color: var(--muted);
  background: var(--well); border: 1px solid var(--border);
}
.prof-prio { flex: none; display: inline-flex; gap: 2px; align-items: center; }
.prof-prio i { width: 6px; height: 12px; border-radius: 2px; background: var(--panel-3); border: 1px solid var(--border); }
.prof-prio i.on { background: #7ee08c; border-color: rgba(63, 185, 80, .6); }
.prof-prio i.on:nth-child(3) { background: #f2c04d; border-color: rgba(224, 160, 48, .6); }
.prof-prio i.on:nth-child(4) { background: #f0883e; border-color: rgba(240, 136, 62, .6); }
.prof-prio.norm { font: 600 11px/1 'Space Grotesk', sans-serif; color: var(--muted); letter-spacing: .02em; }
.prof-ed {
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
  background: var(--well); border: 1px solid var(--accent-dim); border-top: 0;
  border-radius: 0 0 10px 10px; margin-bottom: 4px;
}
.prof-ed .buff-chips { margin: 0; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.prof-ed-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.prof-ed-l, .prof-num > span, .prof-cond > span {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.prof-num > span, .prof-cond > span { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.prof-seg { flex: 1; min-width: 200px; }
.prof-seg .seg-btn { padding: 0 6px; height: 28px; }
.prof-tgt .buff-chip { height: 30px; padding: 0 10px; }
.prof-tgt .tg-input { flex: 1; min-width: 120px; margin: 0; height: 32px; }
.prof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.prof-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.prof-num { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.prof-num > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-num .tg-input, .prof-cond .tg-input, .prof-bt .tg-input, .prof-inline .tg-input { margin: 0; font-variant-numeric: tabular-nums; }
.prof-num i, .prof-inline i { position: absolute; right: 11px; bottom: 11px; font-style: normal; font-size: 11.5px; color: var(--faint); }
.prof-num:has(i) .tg-input { padding-right: 38px; }
.prof-check { display: flex; align-items: center; gap: 7px; min-height: 38px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.prof-check input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.prof-bt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prof-inline { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.prof-inline .prof-check { flex: 1; min-width: 0; }
.prof-inline > .tg-input[data-num] { width: 78px; flex: none; padding-right: 30px; }
.prof-inline.wide > .tg-input { flex: 1; min-width: 0; }
.prof-inline.wide .prof-check { flex: none; }
.prof-cmp { width: 52px; flex: none; padding: 0 6px; }
.prof-conds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prof-cond { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prof-cond > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-cond .tg-input { height: 34px; font-size: 12.5px; padding: 0 8px; }
.prof-cond select.tg-input { padding-right: 22px; text-overflow: ellipsis; }
.prof-cond-in { display: flex; gap: 5px; }
.prof-cond-in select { flex: 1; min-width: 0; }
.prof-cond-in input { width: 54px; flex: none; }
.buff-chip.on { color: var(--text); background: rgba(201, 162, 75, .12); border-color: var(--accent-dim); }
.buff-chip.on::before { background: var(--accent); box-shadow: 0 0 6px rgba(201, 162, 75, .7); }
.prof-add-btn { width: 100%; margin-top: 8px; border-style: dashed; }
.prof-add { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--well); border: 1px dashed var(--border-2); }
.prof-add .prof-ed-row { margin-bottom: 10px; }
.prof-add .sk-grid { max-height: 300px; overflow-y: auto; }
.prof-warn {
  margin-top: 12px; padding: 9px 11px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.4;
  color: #f2c04d; background: rgba(224, 160, 48, .10); border: 1px solid rgba(224, 160, 48, .35);
}
.prof-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11.5px; color: var(--faint); }
.prof-foot #prDirty { color: var(--accent); }
#buffBody .buff-save:has([data-pr]) { flex-wrap: wrap; }
#buffBody .buff-save [data-pr] { min-width: 0; }
@media (max-width: 560px) {
  #buffBody .buff-save [data-pr] { flex: 1 1 100%; }
  .prof-grid, .prof-grid.two, .prof-conds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prof-grid.two { grid-template-columns: 1fr; }
  .prof-conds { grid-template-columns: 1fr; }
  .prof-grid > .prof-inline { grid-column: 1 / -1; }
  .prof-prio, .prof-tgt-chip { display: none; }
}

/* Поле-список (цель, имена бафов) и окошко «Список имён» */
.prof-list {
  flex: 1; min-width: 0; min-height: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: var(--radius); cursor: pointer; text-align: left;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font: inherit;
}
.prof-list:hover { border-color: var(--accent-dim); }
.prof-list b { font-weight: 500; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--well); border: 1px solid var(--border-2); }
.prof-list em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.prof-bt .prof-list { flex: none; }
.pick-wrap { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.pick-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.pick-box {
  position: relative; width: 300px; max-width: 100%; max-height: 80vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
.pick-head { padding: 12px 14px 8px; font-weight: 600; font-size: 13.5px; text-align: center; }
.pick-list { flex: 1; min-height: 80px; overflow-y: auto; padding: 0 10px; }
.pick-sec { margin: 8px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.pick-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.pick-row:hover { background: var(--well); }
.pick-row input, .pick-all input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.pick-empty, .pick-hint { font-size: 11.5px; color: var(--faint); padding: 2px 4px 6px; }
.pick-hint { padding: 6px 14px 0; }
.pick-add { display: flex; gap: 6px; padding: 8px 10px 0; }
.pick-add .tg-input { flex: 1; min-width: 0; margin: 0; height: 32px; }
.pick-all { display: flex; align-items: center; gap: 8px; padding: 8px 14px 0; font-size: 12.5px; cursor: pointer; }
.pick-foot { display: flex; gap: 8px; padding: 12px 10px; }
.pick-foot .btn { flex: 1; }

/* Редактор правила — расположение как в окне Адреналина */
.adr-ed {
  display: flex; gap: 10px; padding: 10px 10px 10px 12px;
  background: var(--well); border: 1px solid var(--accent-dim); border-top: 0;
  border-radius: 0 0 10px 10px; margin-bottom: 4px;
}
.adr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.adr-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.adr-gap { flex: 1; }
.adr-lbl { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.adr-head b { font-size: 13px; font-weight: 600; }
.adr-head .adr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adr-box { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); }
.adr-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; white-space: nowrap; }
.adr-chk input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; margin: 0; }
.adr-chk.dis { opacity: .45; cursor: default; }
.adr-ed .tg-input { margin: 0; height: 30px; font-size: 12.5px; padding: 0 8px; }
.adr-num { width: 62px; flex: none; text-align: center; font-variant-numeric: tabular-nums; }
.adr-num.w { width: 70px; }
.adr-num.off { visibility: hidden; }
.adr-cmp { width: 50px; flex: none; padding: 0 4px !important; }
.adr-grid3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 6px 12px; align-items: center; }
.adr-tl { flex-wrap: nowrap; justify-content: flex-end; }
.adr-tl .adr-chk { flex: 1; min-width: 0; }
.adr-box.adr-grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.adr-names {
  grid-column: 1 / 3; min-height: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--radius); cursor: pointer; font: inherit; color: var(--text);
  background: var(--well); border: 1px solid var(--border);
}
.adr-names:hover:not(:disabled) { border-color: var(--accent-dim); }
.adr-names.off { opacity: .45; cursor: default; }
.adr-names b, .adr-t b { font-weight: 500; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--border-2); }
.adr-names em, .adr-t em { font-style: normal; font-size: 12px; color: var(--muted); }
.adr-t {
  margin-left: auto; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; max-width: 60%;
  padding: 3px 8px 3px 4px; border-radius: var(--radius); cursor: pointer; font: inherit; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border);
}
.adr-t:hover { border-color: var(--accent-dim); }
.adr-t i {
  font-style: normal; font-weight: 600; font-size: 12px; padding: 0 4px 0 6px; color: var(--accent);
}
.adr-conds { align-items: end; }
.adr-cond { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adr-cond > span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.adr-cond-in { display: flex; gap: 6px; }
.adr-cond-in select { flex: 1; min-width: 0; }
.adr-shot { width: 190px; flex: none; }
/* Полоса приоритета: снизу «Норм», сверху 4 */
.prio-bar {
  position: relative; flex: none; width: 16px; border-radius: 5px; cursor: ns-resize; touch-action: none;
  background: linear-gradient(to top, #3fb950 0%, #9bd24a 35%, #f2c04d 65%, #f0883e 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.prio-bar i {
  position: absolute; left: -3px; right: -3px; height: 4px; margin-bottom: -2px; border-radius: 2px;
  background: #58a6ff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 6px rgba(88, 166, 255, .8); pointer-events: none;
}
.prio-bar span {
  position: absolute; top: -2px; left: 50%; transform: translate(-50%, -100%); pointer-events: none;
  font: 700 10px/1 'Space Grotesk', sans-serif; color: var(--muted);
}
.adr-ed .prio-bar { margin-top: 14px; }
@media (max-width: 700px) {
  .adr-grid3, .adr-box.adr-grid3 { grid-template-columns: 1fr; }
  .adr-chk { white-space: normal; }
  .adr-grid3 > .adr-tl { grid-column: 1 / -1; justify-content: flex-start; }
  .adr-conds { grid-template-columns: 1fr; }
  .adr-names { grid-column: 1 / -1; }
  .adr-t { max-width: 100%; margin-left: 0; }
  .adr-shot { flex: 1; width: auto; min-width: 120px; }
}

.prof-deleted { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.prof-undel {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; color: #ff8f88; text-decoration: line-through;
  background: rgba(229, 83, 75, .08); border: 1px solid rgba(229, 83, 75, .35);
}
.prof-undel b { text-decoration: none; color: var(--text); font-weight: 600; }
.prof-undel:hover { border-color: rgba(229, 83, 75, .6); }

.adr-shot.off { opacity: .55; }

.adr-pet { display: inline-flex; gap: 10px; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--border-2); }
.adr-cnt { width: 64px; }

/* «Пати настройки» — две колонки, как в Адреналине */
.pp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: stretch; }
.pp-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pp-box { display: flex; flex-direction: column; gap: 7px; }
.pp-box .adr-names { grid-column: auto; min-height: 30px; }
.pp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; }
.pp-two .adr-chk { margin: 2px 8px 2px 0; }
.pp-radios { gap: 6px 18px; }
.pp-radios.col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pp-sel { width: auto; min-width: 150px; flex: 1; }
.pp-hint { font-size: 11px; color: var(--faint); text-align: center; }
.adr-chk input[type="radio"] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
@media (max-width: 700px) {
  .pp-grid { grid-template-columns: 1fr; }
}
.adr-num.xs { width: 44px; padding: 0 4px; }
.pp-box .adr-lbl { white-space: normal; }
/* Пары «галочка — переключатель» строками, как в Адреналине */
.pp-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; align-items: center; }
.pp-pair > .adr-row { flex-wrap: nowrap; }
.pp-box .adr-names.off { opacity: .4; cursor: not-allowed; }

/* «Атака» — расположение как «Настройки боя» Адреналина */
.ft-grid { display: grid; grid-template-columns: auto auto auto minmax(320px, 1fr); gap: 8px; align-items: stretch; }
.ft-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ft-rep { justify-content: flex-start; }
.ft-conds { min-width: 0; }
.ft-cond { display: flex; gap: 6px; min-width: 0; }
.ft-cond select { flex: 1; min-width: 170px; }
.ft-cond .ft-val, .ft-cond .adr-num { width: 100px; flex: none; }
.ft-cond .adr-names.ft-val { grid-column: auto; min-height: 30px; justify-content: flex-start; }
.ft-mobs { flex: 1; min-width: 160px; grid-column: auto; min-height: 30px; }
.ft-monc { width: 64px; }
.ft-rep-chip { min-width: 52px; text-align: center; }
@media (max-width: 800px) {
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .ft-conds { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .ft-grid { grid-template-columns: 1fr; }
}
#buffModal .buff-box:has(.ft-grid) { width: 1100px; max-width: 96vw; }
.ft-grid .adr-row { flex-wrap: nowrap; }
@media (max-width: 800px) { .ft-grid .adr-row { flex-wrap: wrap; } }
.act-ico { background: none; box-shadow: none; }
.act-ico .ico { width: 100%; height: 100%; display: block; }
/* Неактивные поля в редакторах профиля — заметно серые, как в Адреналине */
.adr-ed .tg-input:disabled, .pp-grid .tg-input:disabled {
  opacity: .6; cursor: not-allowed; color: var(--muted);
  background: repeating-linear-gradient(135deg, var(--well) 0 6px, var(--panel-2) 6px 12px);
}
.adr-ed .adr-chk.dis span, .adr-ed label.adr-chk:has(input:disabled) span { color: var(--faint); }
.adr-ed label.adr-chk:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* «Атака»: области, как в окне Адреналина —
   ряд 1: Цель (на две колонки) | Общая дистанция | Условия (на два ряда)
   ряд 2: Дистанция умения | Повтор | Мобов вокруг
   ряд 3: Исп. только на / кроме (на три колонки) | Исп. заряды
   ряд 4: список мобов (на три колонки) */
.ft-grid {
  grid-template-columns: auto auto auto minmax(300px, 1fr) !important;
  grid-template-areas: "tgt tgt gen cond" "dist rep mon cond" "filt filt filt shot" "list list list shot";
}
.ft-a-tgt { grid-area: tgt; } .ft-a-gen { grid-area: gen; } .ft-a-dist { grid-area: dist; }
.ft-a-rep { grid-area: rep; } .ft-a-mon { grid-area: mon; } .ft-a-cond { grid-area: cond; }
.ft-a-filt { grid-area: filt; } .ft-a-list { grid-area: list; min-height: 32px; }
.ft-a-shot { grid-area: shot; align-self: end; flex-wrap: nowrap; }
.ft-a-shot .adr-shot { flex: 1; width: auto; min-width: 0; }
.ft-indent { padding-left: 18px; }
.ft-radios { display: flex; flex-direction: column; gap: 4px; }
.ft-cond .ft-val:disabled { text-align: center; }
@media (max-width: 800px) {
  .ft-grid { grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "tgt tgt" "gen gen" "dist rep" "mon mon" "cond cond" "filt filt" "list list" "shot shot"; }
}
@media (max-width: 520px) {
  .ft-grid { grid-template-columns: 1fr !important;
    grid-template-areas: "tgt" "gen" "dist" "rep" "mon" "cond" "filt" "list" "shot"; }
}

/* Меню слева, как в Адреналине */
/* Окно настроек одного размера во всех разделах — не прыгает при переходах */
#buffModal .buff-box:has(.adr-shell) { width: 1280px; max-width: 96vw; height: min(900px, 92vh); max-height: 92vh; }
#buffModal .buff-box:has(.adr-shell) > .modal-body { flex: 1; min-height: 0; overflow-y: auto; }
.adr-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: start; }
.adr-menu {
  position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 10px; border-radius: 10px; background: var(--well); border: 1px solid var(--border);
}
.adr-menu-title { font: 700 12px/1 'Space Grotesk', sans-serif; letter-spacing: .12em; color: var(--muted); text-align: center; padding: 2px 0 6px; border-bottom: 1px solid var(--border); }
.adr-menu-list { display: flex; flex-direction: column; gap: 2px; }
.adr-menu-it {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
  padding: 6px 9px; border-radius: 7px; border: 1px solid transparent; background: none;
  color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.adr-menu-it:hover:not(:disabled) { background: var(--panel-2); }
.adr-menu-it.on { background: var(--panel-2); border-color: var(--accent-dim); color: var(--accent); font-weight: 600; }
.adr-menu-it:disabled { color: var(--faint); cursor: default; }
.adr-menu-it i { font-style: normal; font-size: 11px; color: var(--muted); }
.adr-menu-bottom { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.adr-menu-bottom .prof-top { margin: 0; }
.adr-menu-bottom .prof-foot { flex-direction: column; gap: 2px; margin: 0; }
.adr-content { min-width: 0; }
.adr-content-title {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; padding: 8px 12px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--border); font-weight: 600; font-size: 14px;
}
.adr-content-title small { margin-left: auto; font-weight: 400; font-size: 11.5px; color: var(--faint); }
@media (max-width: 800px) {
  .adr-shell { grid-template-columns: 1fr; }
  .adr-menu { position: static; }
  .adr-menu-list { flex-direction: row; overflow-x: auto; }
  .adr-menu-it { width: auto; white-space: nowrap; }
  .adr-menu-it:disabled { display: none; }
}
.adr-shell > * { min-width: 0; }

/* «Поиск цели»: «Общие настройки» — две колонки и «Менять цель» во всю ширину,
   «Фильтр» — таблица мобов, строки «Все монстры / Все NPC», ниже настройки строки. */
fieldset.adr-box { margin: 0; min-width: 0; }
fieldset.adr-box > legend { padding: 0 6px; font-size: 12px; color: var(--muted); }
fieldset.adr-box > legend small { font-size: 11px; color: var(--faint); }
fieldset.adr-box > legend .adr-chk { font-size: 12.5px; }
.mn-tabs { margin-bottom: 10px; }
.mn-tabs i { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 4px; }
.mn-wrap { display: flex; flex-direction: column; gap: 8px; }
.mn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: start; }
.mn-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mn-inner { background: var(--well); }
.mn-cond select { flex: 1; min-width: 170px; }
.mn-pair { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 7px 14px; }
.mn-title input[type="text"] { flex: 1; min-width: 200px; text-align: center; }
.mn-wrap .tg-input, .nf-ed .tg-input { margin: 0; font-size: 12.5px; }
.mn-wrap input.tg-input, .nf-ed input.tg-input { padding: 0 8px; }
.mn-wrap select.tg-input, .nf-ed select.tg-input { padding: 0 28px 0 8px; background-position: right 9px center; }
.mn-wrap .tg-input:disabled {
  opacity: .6; cursor: not-allowed; color: var(--muted);
  background: repeating-linear-gradient(135deg, var(--well) 0 6px, var(--panel-2) 6px 12px);
}
.mn-wrap label.adr-chk:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.nf-table { border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); overflow: hidden; }
.nf-row {
  display: grid; grid-template-columns: minmax(0, 1.6fr) 44px minmax(0, 1.8fr) minmax(0, 1.3fr) minmax(0, 1fr) 56px 28px;
  gap: 8px; align-items: center; padding: 5px 8px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.nf-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-row:hover { background: var(--panel-3); }
.nf-row.on { background: var(--well); box-shadow: inset 3px 0 0 var(--accent); }
.nf-row.del { opacity: .5; text-decoration: line-through; }
.nf-row.del .buff-mv { text-decoration: none; }
.nf-row .buff-mv { width: 26px; height: 24px; }
.nf-head { cursor: default; font-size: 11.5px; color: var(--muted); background: var(--well); }
.nf-head:hover { background: var(--well); }
.nf-c { text-align: center; color: var(--muted); }
.nf-name { font-weight: 500; }
.nf-own { max-height: 260px; overflow-y: auto; }
.nf-def { border-top: 2px solid var(--border-2); }
.nf-def .nf-row:last-child, .nf-own:empty { border-bottom: 0; }
.nf-empty, .nf-hint { font-size: 12px; color: var(--faint); padding: 8px; }
.nf-find { display: flex; gap: 6px; margin-top: 8px; }
.nf-find .tg-input { margin: 0; flex: 1; min-width: 0; height: 32px; }
.nf-res:empty { display: none; }
.nf-ed { margin-top: 8px; }
.nf-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.nf-grid .adr-row { flex-wrap: nowrap; }
.nf-cond { flex: 1; min-width: 120px; }
.nf-cmp { min-width: 62px; flex: none; }
.nf-names { min-height: 30px; }
.nf-prio-cols { display: flex; gap: 22px; }
.nf-inc .nf-inc-item { flex: 1; min-width: 160px; }
@media (max-width: 1000px) {
  .nf-grid { grid-template-columns: 1fr 1fr; }
  .nf-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .mn-grid, .mn-pair, .nf-grid { grid-template-columns: 1fr; }
  .mn-wrap .adr-chk { white-space: normal; }
  .nf-grid .adr-row { flex-wrap: wrap; }
  .nf-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 50px 28px; }
  .nf-type, .nf-prio, .nf-pos { display: none; }
}

/* Буфер правил профиля («⧉» / «Вставить сюда») */
.prof-copy { font-size: 13px; }
.prof-copy.on { color: var(--accent); border-color: var(--accent-dim); }
.prof-clip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 10px;
  border-radius: 8px; border: 1px dashed var(--accent-dim); background: var(--well); font-size: 12px;
}
.prof-clip.off { border-color: var(--border-2); }
.prof-clip-t { color: var(--muted); }
.prof-clip b { font-weight: 500; padding: 1px 8px; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--border-2); }
.prof-clip em { font-style: normal; color: var(--faint); }

/* ══ «Настройки Адреналина» — оформление окна ══════════════════════════
   Своя, более контрастная палитра внутри окна: светлее подписи, заметные
   рамки у полей, свои галочки и переключатели, золото — только у того, что
   выбрано или главное. Правила ниже перекрывают общие стили панели только
   внутри .adr-shell. */
#buffModal .buff-box:has(.adr-shell), .modal-box.adr-theme {
  background: radial-gradient(1200px 500px at 0% 0%, rgba(201, 162, 75, .06), transparent 60%),
              linear-gradient(180deg, #121219, #0B0B10);
  border-color: #2C2C39;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .02) inset;
}
#buffModal .buff-box:has(.adr-shell) > .modal-head, .modal-box.adr-theme > .modal-head {
  border-bottom: 1px solid #23232E;
  background: linear-gradient(90deg, rgba(201, 162, 75, .10), transparent 45%);
}
#buffModal .buff-box:has(.adr-shell) #buffTitle, .modal-box.adr-theme > .modal-head > span:first-child { font: 600 16px/1.2 'Space Grotesk', sans-serif; letter-spacing: .01em; }

.adr-shell { gap: 18px; }
:is(.adr-shell, .adr-theme) {
  --muted:  #A6AABB;
  --faint:  #6F7387;
  --border: #2A2A37;
  --border-2: #3C3C4D;
  --well:   #0A0A10;
  --panel-2: #15151D;
  --panel-3: #1F1F2A;
  --gold-hi: #EACB7C;
  --gold-bg: rgba(201, 162, 75, .14);
  --field:  #0B0B11;
  --field-b: #3A3A49;
  --card:   linear-gradient(180deg, #17171F, #121219);
}

/* Меню слева */
:is(.adr-shell, .adr-theme) .adr-menu {
  background: linear-gradient(180deg, #14141C, #0D0D13); border: 1px solid #262633;
  border-radius: 14px; padding: 12px; gap: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
:is(.adr-shell, .adr-theme) .adr-menu-title { color: var(--gold-hi); border-bottom-color: #262633; letter-spacing: .22em; font-size: 11px; padding-bottom: 10px; }
:is(.adr-shell, .adr-theme) .adr-menu-it { padding: 8px 10px; border-radius: 9px; font-size: 13.5px; color: #DCDEE7; }
:is(.adr-shell, .adr-theme) .adr-menu-it:hover:not(:disabled) { background: #1C1C26; color: #fff; }
:is(.adr-shell, .adr-theme) .adr-menu-it.on {
  color: var(--gold-hi); font-weight: 600; border-color: rgba(201, 162, 75, .45);
  background: linear-gradient(90deg, rgba(201, 162, 75, .26), rgba(201, 162, 75, .05));
  box-shadow: inset 3px 0 0 var(--accent);
}
:is(.adr-shell, .adr-theme) .adr-menu-it i {
  min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center;
  background: #22222D; color: #C9CCD8; font-weight: 600;
}
:is(.adr-shell, .adr-theme) .adr-menu-it.on i { background: rgba(201, 162, 75, .25); color: var(--gold-hi); }
:is(.adr-shell, .adr-theme) .adr-menu-it:disabled { color: #50546A; }
:is(.adr-shell, .adr-theme) .adr-menu-it:disabled::after {
  content: 'скоро'; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; border: 1px solid #262633; color: #50546A;
}
:is(.adr-shell, .adr-theme) .adr-menu-bottom { border-top-color: #262633; gap: 8px; padding-top: 12px; }
:is(.adr-shell, .adr-theme) .adr-menu-bottom [data-pr="save-load"] {
  height: 40px; font-weight: 700; font-size: 14px; letter-spacing: .02em;
  color: #1B1405; background: linear-gradient(180deg, #E2BE62, #B8903A); border-color: #EBC873;
  box-shadow: 0 6px 18px rgba(201, 162, 75, .28);
}
:is(.adr-shell, .adr-theme) .adr-menu-bottom [data-pr="save-load"]:hover:not(:disabled) { filter: brightness(1.08); }
:is(.adr-shell, .adr-theme) .adr-menu-bottom [data-pr="save-load"]:disabled {
  color: #5E6175; background: #17171F; border-color: #262633; box-shadow: none; filter: none;
}
:is(.adr-shell, .adr-theme) .prof-foot #prDirty { color: var(--gold-hi); font-weight: 600; }

/* Заголовок раздела */
:is(.adr-shell, .adr-theme) .adr-content-title {
  align-items: center; padding: 12px 16px; margin-bottom: 14px; border-radius: 12px;
  font: 600 17px/1.2 'Space Grotesk', sans-serif; color: #F5F6FA;
  background: linear-gradient(90deg, rgba(201, 162, 75, .16), rgba(201, 162, 75, 0) 55%), #13131A;
  border: 1px solid #2F2B22;
}
:is(.adr-shell, .adr-theme) .adr-content-title small {
  font: 500 11.5px/1 'Inter', sans-serif; color: #B9BCCB; padding: 5px 10px; border-radius: 999px;
  background: #0B0B11; border: 1px solid #2A2A37;
}

/* Блоки и подписи */
:is(.adr-shell, .adr-theme) .adr-box, :is(.adr-shell, .adr-theme) fieldset.adr-box {
  background: var(--card); border: 1px solid #292936; border-radius: 12px; padding: 10px 12px 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
}
:is(.adr-shell, .adr-theme) fieldset.adr-box > legend {
  padding: 2px 8px; margin-left: -2px; border-radius: 6px;
  font: 700 10.5px/1.2 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-hi); background: #121219; border: 1px solid #2E2A20;
}
:is(.adr-shell, .adr-theme) fieldset.adr-box > legend small { text-transform: none; letter-spacing: 0; font: 400 11px 'Inter', sans-serif; color: var(--faint); }
:is(.adr-shell, .adr-theme) fieldset.adr-box > legend .adr-chk span { font: 700 10.5px/1.2 'Space Grotesk', sans-serif; letter-spacing: .12em; }
:is(.adr-shell, .adr-theme) .mn-inner { background: #0E0E14; }
:is(.adr-shell, .adr-theme) .adr-lbl { color: #AEB1C1; }
:is(.adr-shell, .adr-theme) .adr-chk { gap: 8px; font-size: 13px; }
:is(.adr-shell, .adr-theme) .adr-chk span { color: #BFC2CF; transition: color .12s; }
:is(.adr-shell, .adr-theme) .adr-chk:has(input:checked) span { color: #FFFFFF; }
:is(.adr-shell, .adr-theme) .adr-chk:hover span { color: #fff; }

/* Галочки и переключатели — свои, хорошо видимые */
:is(.adr-shell, .adr-theme) input[type="checkbox"], :is(.adr-shell, .adr-theme) input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  width: 17px; height: 17px; display: inline-grid; place-content: center; cursor: pointer;
  background: var(--field); border: 1.5px solid #5A5E73; border-radius: 5px;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
:is(.adr-shell, .adr-theme) input[type="radio"] { border-radius: 50%; }
:is(.adr-shell, .adr-theme) input[type="checkbox"]::before {
  content: ''; width: 9px; height: 5px; margin-top: -2px; opacity: 0;
  border: solid #1B1405; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg);
}
:is(.adr-shell, .adr-theme) input[type="radio"]::before { content: none; }
:is(.adr-shell, .adr-theme) input[type="checkbox"]:checked {
  background: linear-gradient(180deg, #E2BE62, #C29A40); border-color: #E2BE62;
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .16);
}
:is(.adr-shell, .adr-theme) input[type="checkbox"]:checked::before { opacity: 1; }
:is(.adr-shell, .adr-theme) input[type="radio"]:checked {
  border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(201, 162, 75, .16);
  background: radial-gradient(circle closest-side, var(--gold-hi) 0 55%, transparent 62%) var(--field);
}
:is(.adr-shell, .adr-theme) input[type="checkbox"]:hover:not(:disabled):not(:checked),
:is(.adr-shell, .adr-theme) input[type="radio"]:hover:not(:disabled):not(:checked) { border-color: #9296AA; }
:is(.adr-shell, .adr-theme) input[type="checkbox"]:focus-visible, :is(.adr-shell, .adr-theme) input[type="radio"]:focus-visible { outline: 2px solid rgba(234, 203, 124, .6); outline-offset: 2px; }

/* Поля ввода и списки */
:is(.adr-shell, .adr-theme) .tg-input {
  background-color: var(--field); border: 1px solid var(--field-b); color: #F4F5F9; border-radius: 8px;
  min-height: 34px; height: 34px;
}
:is(.adr-shell, .adr-theme) .tg-input:hover:not(:disabled) { border-color: #56566B; }
:is(.adr-shell, .adr-theme) .tg-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201, 162, 75, .18); }
:is(.adr-shell, .adr-theme) .tg-input::placeholder { color: #6F7387; }
:is(.adr-shell, .adr-theme) select.tg-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23EACB7C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:is(.adr-shell, .adr-theme) .adr-num { font-weight: 600; }
:is(.adr-shell, .adr-theme) .tg-input:disabled, :is(.adr-shell, .adr-theme) .adr-ed .tg-input:disabled, :is(.adr-shell, .adr-theme) .pp-grid .tg-input:disabled {
  opacity: .42; color: #8A8DA0; border-color: #2A2A37; cursor: not-allowed;
  background: repeating-linear-gradient(135deg, #0B0B11 0 6px, #13131A 6px 12px);
}
:is(.adr-shell, .adr-theme) label.adr-chk:has(input:disabled) { opacity: .45; }
:is(.adr-shell, .adr-theme) .adr-names {
  min-height: 34px; background: var(--field); border: 1px dashed #4A4A5C; border-radius: 8px;
}
:is(.adr-shell, .adr-theme) .adr-names:hover:not(:disabled) { border-color: var(--accent); border-style: solid; background: #111118; }
:is(.adr-shell, .adr-theme) .adr-names em { color: #7C8095; }
:is(.adr-shell, .adr-theme) .adr-names b { background: rgba(201, 162, 75, .14); border-color: rgba(201, 162, 75, .4); color: var(--gold-hi); }

/* Кнопки */
:is(.adr-shell, .adr-theme) .btn { background: #1A1A23; border-color: #363645; color: #ECEDF3; }
:is(.adr-shell, .adr-theme) .btn:hover:not(:disabled) { background: #23232F; border-color: #50506A; }
:is(.adr-shell, .adr-theme) .btn:disabled { opacity: .45; }
:is(.adr-shell, .adr-theme) .btn.btn-ok { color: #0F1A10; background: linear-gradient(180deg, #5DD66E, #36A546); border-color: #6BE07B; font-weight: 700; }
:is(.adr-shell, .adr-theme) .btn.btn-danger { color: #FFB0AA; background: rgba(229, 83, 75, .12); border-color: rgba(229, 83, 75, .45); }
:is(.adr-shell, .adr-theme) .prof-add-btn {
  height: 42px; border: 1.5px dashed rgba(201, 162, 75, .5); color: var(--gold-hi); background: rgba(201, 162, 75, .05);
  font-weight: 600;
}
:is(.adr-shell, .adr-theme) .prof-add-btn:hover:not(:disabled) { background: rgba(201, 162, 75, .12); border-color: var(--accent); }

/* Переключатели вкладок */
:is(.adr-shell, .adr-theme) .seg { background: #0A0A10; border: 1px solid #262633; border-radius: 11px; padding: 4px; }
:is(.adr-shell, .adr-theme) .seg-btn { height: 34px; border-radius: 8px; color: #A9ACBC; font-weight: 600; font-size: 13px; }
:is(.adr-shell, .adr-theme) .seg-btn:hover { color: #fff; }
:is(.adr-shell, .adr-theme) .seg-btn.on {
  color: var(--gold-hi); border-color: rgba(201, 162, 75, .5);
  background: linear-gradient(180deg, rgba(201, 162, 75, .24), rgba(201, 162, 75, .08));
}
:is(.adr-shell, .adr-theme) .mn-tabs i { color: inherit; opacity: .8; }

/* Правила (Сельф баф, Пати хил-баф, Атака) */
:is(.adr-shell, .adr-theme) .buff-list { gap: 7px; }
:is(.adr-shell, .adr-theme) .buff-row {
  min-height: 54px; padding: 7px 10px 7px 8px; border-radius: 12px;
  background: var(--card); border: 1px solid #292936;
}
:is(.adr-shell, .adr-theme) .buff-row:hover { border-color: #43435A; background: linear-gradient(180deg, #1B1B24, #15151C); }
:is(.adr-shell, .adr-theme) .buff-name { font-size: 14px; color: #F3F4F8; }
:is(.adr-shell, .adr-theme) .buff-name small { color: #9EA2B4; font-size: 11.5px; margin-top: 2px; }
:is(.adr-shell, .adr-theme) .buff-row.off { opacity: 1; }
:is(.adr-shell, .adr-theme) .buff-row.off .buff-name { color: #80849A; }
:is(.adr-shell, .adr-theme) .buff-row.off .buff-name small { color: #62667A; }
:is(.adr-shell, .adr-theme) .buff-row.off .sk-ico { filter: grayscale(1) brightness(.55); }
:is(.adr-shell, .adr-theme) .buff-tog { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #5A5E73; background: var(--field); }
:is(.adr-shell, .adr-theme) .buff-tog.on { background: linear-gradient(180deg, #E2BE62, #C29A40); border-color: #E2BE62; box-shadow: 0 0 0 3px rgba(201, 162, 75, .14); }
:is(.adr-shell, .adr-theme) .buff-tog.on::after { left: 6px; top: 2px; }
:is(.adr-shell, .adr-theme) .prof-tgt-chip { background: #0E0E14; border-color: #2E2E3C; color: #B4B7C6; }
:is(.adr-shell, .adr-theme) .buff-mv { width: 28px; height: 28px; border-radius: 8px; background: #121219; border-color: #2E2E3C; color: #9EA2B4; }
:is(.adr-shell, .adr-theme) .buff-mv:hover:not(:disabled) { color: #fff; border-color: #50506A; }
:is(.adr-shell, .adr-theme) .prof-item.open .prof-row {
  border-color: rgba(201, 162, 75, .6); background: linear-gradient(180deg, rgba(201, 162, 75, .12), rgba(201, 162, 75, .03)), #15151C;
}
:is(.adr-shell, .adr-theme) .adr-ed, :is(.adr-shell, .adr-theme) .prof-ed {
  background: #0D0D13; border: 1px solid rgba(201, 162, 75, .6); border-top: 0; border-radius: 0 0 12px 12px;
  padding: 12px 12px 12px 14px;
}
:is(.adr-shell, .adr-theme) .adr-head { padding-bottom: 8px; border-bottom: 1px solid #22222D; }
:is(.adr-shell, .adr-theme) .adr-head b { color: #fff; font-size: 14px; }
:is(.adr-shell, .adr-theme) .prof-new { color: #0F1A10; background: #5DD66E; padding: 1px 6px; border-radius: 999px; font-size: 10px; letter-spacing: .03em; }
:is(.adr-shell, .adr-theme) .prof-clip { border-color: rgba(201, 162, 75, .55); background: rgba(201, 162, 75, .06); }
:is(.adr-shell, .adr-theme) .prof-clip b { background: rgba(201, 162, 75, .14); border-color: rgba(201, 162, 75, .4); color: var(--gold-hi); }
:is(.adr-shell, .adr-theme) .prof-copy.on { background: rgba(201, 162, 75, .18); color: var(--gold-hi); border-color: var(--accent); }
:is(.adr-shell, .adr-theme) .buff-help summary { color: #9EA2B4; }

/* «Поиск цели» → «Фильтр»: таблица как в Адреналине */
:is(.adr-shell, .adr-theme) .nf-table { border: 1px solid #292936; border-radius: 12px; background: #101017; }
:is(.adr-shell, .adr-theme) .nf-row { grid-template-columns: minmax(0, 1.5fr) 58px minmax(0, 1.9fr) minmax(0, 1.4fr) minmax(0, 1fr) 64px 30px; padding: 6px 10px 6px 12px; min-height: 40px; border-bottom-color: #1E1E28; }
:is(.adr-shell, .adr-theme) .nf-own { min-height: 170px; max-height: 300px; background: repeating-linear-gradient(180deg, transparent 0 36px, rgba(255, 255, 255, .015) 36px 37px); }
:is(.adr-shell, .adr-theme) .nf-own .nf-row { background: #13131B; }
:is(.adr-shell, .adr-theme) .nf-own .nf-row:nth-child(even) { background: #15151E; }
:is(.adr-shell, .adr-theme) .nf-row:hover:not(.nf-head) { background: #1C1C26; }
:is(.adr-shell, .adr-theme) .nf-row.on, :is(.adr-shell, .adr-theme) .nf-own .nf-row.on {
  background: linear-gradient(90deg, rgba(201, 162, 75, .22), rgba(201, 162, 75, .05)); box-shadow: inset 3px 0 0 var(--accent);
}
:is(.adr-shell, .adr-theme) .nf-row.on .nf-name { color: var(--gold-hi); }
:is(.adr-shell, .adr-theme) .nf-head { background: #0C0C12; font: 700 10.5px/1.2 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8E92A6; }
:is(.adr-shell, .adr-theme) .nf-name { color: #F1F2F7; font-weight: 600; }
:is(.adr-shell, .adr-theme) .nf-c { color: #B2B5C4; }
:is(.adr-shell, .adr-theme) .nf-act.atk { color: #7EE08C; }
:is(.adr-shell, .adr-theme) .nf-act.no { color: #F2A49E; }
:is(.adr-shell, .adr-theme) .nf-tag { font: 700 10px/1 'Space Grotesk', sans-serif; letter-spacing: .06em; font-style: normal; padding: 3px 7px; border-radius: 999px; }
:is(.adr-shell, .adr-theme) .nf-tag.mob { color: #9CC7FF; background: rgba(88, 166, 255, .12); border: 1px solid rgba(88, 166, 255, .35); }
:is(.adr-shell, .adr-theme) .nf-tag.npc { color: #D7B4FF; background: rgba(170, 120, 255, .12); border: 1px solid rgba(170, 120, 255, .35); }
:is(.adr-shell, .adr-theme) .nf-def { margin-top: 10px; border-color: #2E2A20; background: #121017; }
:is(.adr-shell, .adr-theme) .nf-def .nf-row { background: transparent; }
:is(.adr-shell, .adr-theme) .nf-cap {
  padding: 8px 12px; border-bottom: 1px solid #2E2A20; font: 700 10.5px/1.3 'Space Grotesk', sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi);
  background: linear-gradient(90deg, rgba(201, 162, 75, .12), transparent 60%);
}
:is(.adr-shell, .adr-theme) .nf-cap span { text-transform: none; letter-spacing: 0; font: 400 11.5px 'Inter', sans-serif; color: #8E92A6; }
:is(.adr-shell, .adr-theme) .nf-empty { padding: 18px 14px; text-align: center; color: #8E92A6; line-height: 1.6; }
:is(.adr-shell, .adr-theme) .nf-undel { font-style: normal; font-size: 11px; color: var(--gold-hi); margin-left: 6px; text-decoration: none; display: inline-block; }
:is(.adr-shell, .adr-theme) .nf-find { margin-top: 12px; }
:is(.adr-shell, .adr-theme) .nf-find .tg-input { height: 36px; }
:is(.adr-shell, .adr-theme) .nf-ed { margin-top: 12px; border: 1px solid rgba(201, 162, 75, .55); border-radius: 12px; }
:is(.adr-shell, .adr-theme) .nf-ed-head .adr-lbl:first-child { font: 700 10.5px/1 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); }
:is(.adr-shell, .adr-theme) .nf-hint { color: #7C8095; }
:is(.adr-shell, .adr-theme) .nf-cmp { color: var(--gold-hi); border-color: rgba(201, 162, 75, .45); background: rgba(201, 162, 75, .08); font-weight: 700; }

/* Нижняя строка редактора (радиус, запрос пати, заряд) — в одну линию */
:is(.adr-shell, .adr-theme) .adr-last { flex-wrap: nowrap; }
:is(.adr-shell, .adr-theme) .adr-last .adr-shot { flex: 1 1 120px; width: auto; min-width: 100px; }
:is(.adr-shell, .adr-theme) .adr-last .adr-num { width: 58px; }
@media (max-width: 800px) { :is(.adr-shell, .adr-theme) .adr-last { flex-wrap: wrap; } }

/* Низ настроек строки фильтра — как в Адреналине: слева «Не атаковать» и
   «Отбиваться» под блоком «Действие», справа «Увеличить приоритет» */
:is(.adr-shell, .adr-theme) .nf-noatk { grid-column: 1; gap: 8px 22px; padding: 2px 12px; }
:is(.adr-shell, .adr-theme) .nf-inc { grid-column: 2 / -1; }
@media (max-width: 1000px) { :is(.adr-shell, .adr-theme) .nf-noatk, :is(.adr-shell, .adr-theme) .nf-inc { grid-column: 1 / -1; } }

/* Поиск моба — выпадающий список поверх окна, а не вставка в страницу:
   страница не растёт, колесо над списком листает его, а у края — страницу. */
:is(.adr-shell, .adr-theme) .nf-q { position: relative; flex: 1; min-width: 0; }
:is(.adr-shell, .adr-theme) .nf-q .tg-input { width: 100%; }
:is(.adr-shell, .adr-theme) .nf-res {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0;
  max-height: min(340px, 50vh); overflow-y: auto; overscroll-behavior: auto; padding: 6px;
  background: #101017; border: 1px solid rgba(201, 162, 75, .55); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}
:is(.adr-shell, .adr-theme) .nf-res:empty { display: none; }
:is(.adr-shell, .adr-theme) .nf-res .sm-row { background: #15151D; border-color: #262633; }
:is(.adr-shell, .adr-theme) .nf-res .sm-row:hover:not([disabled]) { background: #1D1D28; border-color: var(--accent); }
:is(.adr-shell, .adr-theme) .nf-res .sm-row b { color: var(--gold-hi); }

/* Удаление мобов фильтра: ✕ в строке, зачёркнуто до сохранения, ↩ вернуть */
:is(.adr-shell, .adr-theme) .nf-x { width: 28px; height: 26px; justify-self: end; }
:is(.adr-shell, .adr-theme) .nf-x.del:hover { color: #FFB0AA; border-color: rgba(229, 83, 75, .6); background: rgba(229, 83, 75, .12); }
:is(.adr-shell, .adr-theme) .nf-x.undo { color: var(--gold-hi); border-color: rgba(201, 162, 75, .55); background: rgba(201, 162, 75, .1); }
:is(.adr-shell, .adr-theme) .nf-row.del { opacity: 1; text-decoration: none; }
:is(.adr-shell, .adr-theme) .nf-row.del > span { opacity: .45; text-decoration: line-through; }
:is(.adr-shell, .adr-theme) .nf-row.del .nf-undel { text-decoration: none; font-size: 10.5px; color: #FFB0AA; }
:is(.adr-shell, .adr-theme) .nf-undo-all { color: var(--gold-hi); border-color: rgba(201, 162, 75, .5); }

/* Окошко «Список имён» */
:is(.adr-shell, .adr-theme) .pick-box { background: linear-gradient(180deg, #17171F, #101016); border: 1px solid #34343F; }
:is(.adr-shell, .adr-theme) .pick-sec { color: var(--gold-hi); }
:is(.adr-shell, .adr-theme) .pick-row span { color: #E4E6EE; }

@media (max-width: 800px) {
  :is(.adr-shell, .adr-theme) .nf-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 56px 30px; }
  :is(.adr-shell, .adr-theme) .adr-menu-it:disabled::after { display: none; }
}

/* «Маршрут» (идти на спот) — в том же стиле, что «Настройки Адреналина» */
.travel-box { width: 540px; max-width: 94vw; }
.travel-box .modal-body { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.travel-box .tr-mode { margin: 0; }
.travel-box .tr-mode .seg-btn { height: 38px; font-size: 13.5px; }
.travel-box fieldset.adr-box { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.travel-box .tr-lbl { font-size: 12px; color: #AEB1C1; margin-bottom: -2px; }
.travel-box .tg-input { margin: 0; height: 38px; min-height: 38px; font-size: 13.5px; }
.travel-box #travelPoint { font-weight: 600; color: var(--gold-hi); }
.travel-box .spot-note { margin: 0; }
.travel-box .spot-note-text { background: var(--field); border: 1px solid var(--field-b); border-radius: 8px; color: #E4E6EE; }
.travel-box .spot-note-edit { background: #1A1A23; border-color: #363645; color: #C9CCD8; border-radius: 8px; }
.travel-box .spot-note-edit:hover { color: #fff; border-color: var(--accent); }
.travel-box .spot-mobs { margin: 0; padding: 0; border: 0; background: none; }
.travel-box .sm-head {
  font: 700 10.5px/1.2 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-hi); margin-bottom: 8px;
}
.travel-box .sm-head span { color: #1B1405; background: var(--gold-hi); padding: 1px 7px; border-radius: 999px; letter-spacing: 0; }
.travel-box .sm-apply { text-transform: none; letter-spacing: 0; font: 600 11.5px 'Inter', sans-serif; color: #7EE08C;
  border-color: rgba(63, 185, 80, .45); background: rgba(63, 185, 80, .08); border-radius: 8px; padding: 4px 10px; }
.travel-box .sm-apply:hover { color: #fff; background: rgba(63, 185, 80, .18); }
.travel-box .sm-chip { padding: 4px 5px 4px 10px; font-size: 12.5px; font-weight: 600;
  background: rgba(201, 162, 75, .12); border-color: rgba(201, 162, 75, .45); color: #F3F4F8; }
.travel-box .sm-chip u { color: var(--gold-hi); }
.travel-box .sm-prio { background: #0B0B11; border-color: #2E2E3C; color: #C9CCD8; height: 20px; }
.travel-box .sm-empty { color: #8E92A6; }
.travel-box .sm-find .tg-input { height: 36px; min-height: 36px; }
.travel-box .sm-res { overscroll-behavior: auto; max-height: 260px; }
.travel-box .sm-row { background: #15151D; border-color: #262633; border-radius: 8px; }
.travel-box .sm-row:hover:not([disabled]) { background: #1D1D28; border-color: var(--accent); }
.travel-box .sm-row b { color: var(--gold-hi); }
.travel-box .tr-actions { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 8px; }
.travel-box .tr-actions .btn { height: 44px; font-size: 14px; font-weight: 700; border-radius: 10px; }
.travel-box .tr-actions .tr-pair {
  color: #1B1405; background: linear-gradient(180deg, #E2BE62, #B8903A); border-color: #EBC873;
  box-shadow: 0 6px 18px rgba(201, 162, 75, .28);
}
.travel-box .tr-actions .tr-pair:hover { filter: brightness(1.08); }
.travel-box .tr-actions .tr-one { color: var(--gold-hi); background: rgba(201, 162, 75, .08); border-color: rgba(201, 162, 75, .5); }
.travel-box .tr-actions .tr-one:hover { background: rgba(201, 162, 75, .16); }
.travel-box .buff-help { margin-top: 0; }
.travel-box .dist-result { color: #A6AABB; }
.travel-box .travel-hidden { border-radius: 10px; color: #E6C98A; }
@media (max-width: 520px) { .travel-box .tr-actions { grid-template-columns: 1fr 1fr; } .travel-box .tr-actions .btn-danger { grid-column: 1 / -1; } }
/* «Настройки Адреналина на споте» в окне «Маршрут» */
.travel-box .sp-prof { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid #1E1E28; }
.travel-box .sp-who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.travel-box .sp-btns { display: flex; gap: 6px; justify-content: flex-end; }
.travel-box .sp-btns .btn { white-space: nowrap; }
@media (max-width: 520px) { .travel-box .sp-prof { grid-template-columns: 1fr; } .travel-box .sp-btns { justify-content: flex-start; flex-wrap: wrap; } }
.travel-box .sp-prof:last-of-type { border-bottom: 0; }
.travel-box .sp-prof > b { color: #F3F4F8; font-size: 13.5px; }
.travel-box .sp-tag { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; color: #B4B7C6; background: #0E0E14; border: 1px solid #2E2E3C;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.travel-box .sp-tag.own { color: #7EE08C; background: rgba(63, 185, 80, .10); border-color: rgba(63, 185, 80, .4); }
.travel-box .sp-tag.off { color: #6F7387; }
.travel-box .sp-open { color: var(--gold-hi); border-color: rgba(201, 162, 75, .5); background: rgba(201, 162, 75, .08); }
.travel-box .sp-make { color: #7EE08C; border-color: rgba(63, 185, 80, .45); background: rgba(63, 185, 80, .06); }
.travel-box .sp-prof-hint { font-size: 11.5px; line-height: 1.5; color: #7C8095; }
.travel-box .sm-own { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: #B9BCC9; }
.travel-box .sm-own b { color: var(--gold-hi); }
:is(.adr-shell, .adr-theme) .prof-loaded { color: #8E92A6; }
:is(.adr-shell, .adr-theme) .prof-loaded.on { color: #7EE08C; }
:is(.adr-shell, .adr-theme) .prof-load-btn { color: #9CC7FF; border-color: rgba(88, 166, 255, .45); background: rgba(88, 166, 255, .07); }
:is(.adr-shell, .adr-theme) .prof-load-btn.same { color: #8E92A6; border-color: #2E2E3C; background: #15151D; }
.travel-box .sp-unspot { color: #FFB0AA; border-color: rgba(229, 83, 75, .4); background: rgba(229, 83, 75, .06); }
/* «Консьерж» и «Я здесь» в шапке */
.night-btn.on { color: #1B1405; background: linear-gradient(180deg, #E2BE62, #B8903A); border-color: #EBC873; font-weight: 700; }
.night-ack { color: #8E92A6; }
.night-ack.alarm { color: #fff; background: #C6362E; border-color: #FF6B61; font-weight: 700; animation: night-pulse 1s ease-in-out infinite; }
@keyframes night-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 83, 75, .7); } 50% { box-shadow: 0 0 0 8px rgba(229, 83, 75, 0); } }
/* Подзаголовок «Чат в Telegram» под тревогами */
.alerts-sub { grid-column: 1 / -1; width: 100%; margin: 8px 0 2px; padding-top: 8px; border-top: 1px solid var(--border);
  font: 700 10.5px/1.2 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.alert-list .alerts-sub { margin: 10px 0 4px; }
/* «Зона поиска» */
.pz-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: start; }
.pz-grid > .pz-evs { justify-self: end; }
.pz-types { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pz-types .adr-row { flex-wrap: wrap; }
.pz-radius { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: -6px; }
.pz-zone { font-size: 11.5px; color: #8E92A6; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) { .pz-grid { grid-template-columns: 1fr; } .pz-grid > .pz-evs { justify-self: stretch; } }
.pz-zone-sel { width: auto; min-width: 180px; max-width: 240px; flex: 0 1 220px; }
/* «Дроп» */
.dg-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: start; }
.dg-gap { height: 8px; }
.dg-right { align-items: flex-end; }
.df-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; }
.df-grid .adr-row { flex-wrap: wrap; }
:is(.adr-shell, .adr-theme) .df-row { grid-template-columns: minmax(0, 1.6fr) 80px minmax(0, 2.2fr) 70px 30px; }
@media (max-width: 1000px) { .df-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .dg-grid { grid-template-columns: 1fr; } .dg-right { align-items: flex-start; }
  :is(.adr-shell, .adr-theme) .df-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 56px 30px; }
}
.pz-top { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.pz-top-l { display: flex; flex-direction: column; gap: 8px; }
:is(.adr-shell, .adr-theme) fieldset.pz-shape { margin: -8px 0 0; padding: 2px 12px 7px; border: 1px solid #3A3A4C; border-radius: 10px; min-width: 0; background: #121219; }
.pz-shape legend { padding: 0 5px; font-size: 11.5px; color: #AEB1C1; }
.pz-shape.off { visibility: hidden; }
/* «Зона поиска» → «Настройка многоугольной зоны» */
.pt-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr); gap: 10px 16px; align-items: start; }
:is(.adr-shell, .adr-theme) .pt-row { grid-template-columns: repeat(3, minmax(0, 1fr)) 70px; }
.pt-row > span { font-variant-numeric: tabular-nums; }
.pt-list { max-height: 190px; overflow-y: auto; }
.pt-list .nf-row:last-child { border-bottom: 0; }
.pt-empty { padding: 10px; font-size: 12px; color: var(--muted); }
.pt-form { display: flex; flex-direction: column; gap: 6px; }
.pt-form .adr-lbl { width: 14px; }
.pt-form .btn { min-width: 92px; }
.pt-opts { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1000px) { .pt-grid { grid-template-columns: 1fr; } }
/* «Разное» (Настройки зарядов) */
.sh-grid { display: grid; grid-template-columns: auto minmax(0, 1.3fr) auto minmax(0, 1.1fr) auto 90px auto 56px auto; gap: 8px 8px; align-items: center; }
.sh-name { width: 100%; min-width: 0; }
.sh-name.wide { width: 100%; }
.sh-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
:is(.adr-shell, .adr-theme) .sh-db .nf-row { grid-template-columns: 110px minmax(0, 1fr) 130px 76px; }
@media (max-width: 1000px) { .sh-grid { grid-template-columns: auto minmax(0, 1fr); } .sh-two { grid-template-columns: 1fr; } }
/* «События» (Настройки событий) */
:is(.adr-shell, .adr-theme) .ev-row { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1.5fr) 30px; }
.ev-list { max-height: 220px; }
.ev-on { display: flex; justify-content: center; }
.ev-row .ev-act-c { text-align: center; color: var(--muted); }
.ev-row.off .ev-sum { opacity: .6; }
.ev-undo { display: flex; justify-content: flex-end; margin-top: 6px; }
.ev-ed { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; align-items: start; }
.ev-left, .ev-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ev-typebar { flex-wrap: nowrap; }
.ev-typebar .ev-type { flex: 1; min-width: 150px; }
.ev-draft { font-size: 12px; color: var(--gold-hi, var(--accent)); }
.ev-txt { display: flex; gap: 6px; flex: 1; min-width: 0; }
.ev-txt .ev-in { flex: 1; min-width: 0; width: 100%; }
.ev-pick { flex: none; min-width: 30px; }
.ev-none { padding: 24px 8px; font-size: 16px; color: var(--muted); text-align: center; }
.ev-tp { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.ev-lt { justify-content: flex-end; }
.adr-num.big { width: 110px; }
.ev-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.ev-sel { flex: 1; min-width: 110px; }
.ev-cmp { width: 62px; flex: none; }
.ev-snd { flex: 1; min-width: 0; }
.ev-snd.ev-bad { color: #FFB0AA; border-color: #8A4040; }
.ev-sub { padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
.ev-sub.adr-row { flex-direction: row; }
.ev-foot { margin-top: 4px; }
.ev-off { opacity: .8; }
.adr-chk.ev-guess span { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: #8E92A6; }
.tg-input.ev-guess { border-style: dashed; }
.ev-hint { padding: 0 2px; }
@media (max-width: 1000px) { .ev-ed { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .ev-two { grid-template-columns: 1fr; }
  :is(.adr-shell, .adr-theme) .ev-row { grid-template-columns: 24px minmax(0, 1fr) 30px; }
  .ev-row .ev-act-c { display: none; }
}
/* Платные услуги игры (премиум, автолут, инвентарь) — корона у ника окна */
.svc-pop { position: fixed; z-index: 3000; width: 380px; max-width: calc(100vw - 16px); padding: 10px 12px; border-radius: 10px; background: var(--panel, #16161d); border: 1px solid var(--border-2, #3a3a4c); box-shadow: 0 10px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.svc-pop-head { font-weight: 700; }
.svc-pop-row { display: grid; grid-template-columns: 150px 1fr; gap: 2px 8px; align-items: center; }
.svc-pop-row .tg-input { margin: 0; height: 28px; font-size: 12.5px; }
.svc-pop-row small { grid-column: 2; color: var(--muted); font-size: 11px; }
.svc-pop-nick { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-pop-hint { color: var(--faint, #8e92a6); font-size: 11px; }
.svc-pop-foot { display: flex; justify-content: flex-end; gap: 6px; }
.svc-crown { background: none; border: 0; padding: 0 2px; margin-left: 4px; cursor: pointer; font-size: 14px; line-height: 1;
  filter: drop-shadow(0 0 2px rgba(242, 192, 77, .35)); }
.svc-crown.off { opacity: .35; filter: grayscale(1); }
.svc-crown.off:hover { opacity: .8; }
.svc-crown.warn { filter: drop-shadow(0 0 4px rgba(242, 192, 77, .9)); }
.svc-crown.bad { filter: drop-shadow(0 0 4px rgba(255, 90, 80, .95)); }

/* ПК: журнал событий и общий чат — не правой колонкой, а панелью, прибитой к
   низу экрана (как верхняя панель): карточкам достаётся вся ширина. */
@media (min-width: 801px) {
  /* Правой колонки нет — левая шире: оба окна ПК в «Машинах и расходке» в одну
     строку (два столбца включаются, когда блок ПК шире 230 px). */
  :root { --dock-h: 230px; --left-w: 268px; }
  .layout, body.hide-right .layout { grid-template-columns: var(--left-w) 1fr 0; }
  body.hide-left .layout, body.hide-left.hide-right .layout { grid-template-columns: 0 1fr 0; }
  .layout > .log-sidebar, body.hide-right .layout > .log-sidebar {
    display: grid; position: fixed; top: auto; left: var(--left-w); right: 0; bottom: 0;
    height: var(--dock-h); z-index: 90;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    grid-auto-flow: column;
    border-left: 0; border-top: 1px solid var(--border-2);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .35);
  }
  body.hide-left .layout > .log-sidebar { left: 0; }
  .log-sidebar .log-side-head { padding: 8px 14px 6px; }
  .log-sidebar .log-lines { min-height: 0; }
  .log-sidebar .log-lines + .log-side-head { border-top: 0; border-left: 1px solid var(--border); }
  .log-sidebar #globalChat { border-left: 1px solid var(--border); }
  .main { padding-bottom: calc(var(--dock-h) + 16px); }
  body.streamer .main { padding-bottom: calc(var(--dock-h) + 6px); }
  .handle-right { display: none; }
  .handle-left { top: calc(50% - var(--dock-h) / 2); }
}

/* Карточка окна: шапка над скриншотом — ник, корона, бот, скрипт, окно
   (значками), под скриншотом — плитки. Ник на самом скриншоте убран: он был
   дважды. */
.card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent);
}
.card-top .char-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.card-top .char-name > span:nth-child(2) {
  font-size: 18px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-top .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.card-top .dot.on  { box-shadow: 0 0 7px rgba(70, 220, 120, .65); }
.card-top .dot.off { box-shadow: 0 0 7px rgba(224, 86, 86, .55); }
.card-top-btns { display: flex; align-items: center; gap: 5px; flex: none; }
.card-top-btns > .btn-sm { height: 30px; min-width: 32px; padding: 0 6px; }
.card-top-btns .rl-btn .rl-ico { width: 20px; height: 20px; }
.top-sep { width: 1px; height: 20px; background: var(--border-2); margin: 0 2px; }
.btn.top-ico { font-size: 16px; line-height: 1; padding: 0; width: 30px; justify-content: center; }
.btn.top-exit { color: #ff8f88; border-color: rgba(229, 83, 75, .35); background: rgba(229, 83, 75, .08); }
.btn.top-exit:hover { background: rgba(229, 83, 75, .2); border-color: rgba(229, 83, 75, .6); }
.card-top-btns .launch-busy, .card-top-btns .btn-ok { height: 30px; font-size: 12px; }
.card > .card-head { display: block; padding: 10px 12px 2px; margin-bottom: 6px; }
@media (max-width: 800px) {
  .card-top .char-name > span:nth-child(2) { font-size: 17px; }
}

/* Чат и журнал окна — всегда столбиком: сверху чат, под ним журнал (25.09:
   после того как правая колонка ушла вниз, карточки стали шире 480 px и
   чат с журналом разъехались на две половины). */
.card-cols { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.card-col-log { padding: 0; }
.card .chat-box { height: 120px; }
.card .slot-log { height: 110px; }

/* «Консьерж» и «Я здесь» на ПК — строкой над «Машинами и расходкой» */
.night-row { display: flex; gap: 6px; padding: 12px 14px 0; flex: none; }
.night-row .btn { flex: 1 1 0; min-width: 0; height: 34px; justify-content: center; white-space: nowrap; }
.night-row .night-ack[hidden] { display: none; }

/* БД корректор: правка из панели (25.09) — «⇉» на все ПК, «✕» удалить, строка добавления. */
.sh-db-act { display: flex; gap: 4px; justify-content: flex-end; }
.sh-db-act .btn { min-width: 30px; height: 28px; padding: 0 6px; justify-content: center; }
.sh-db-new .tg-input { height: 30px; min-width: 0; width: 100%; }

/* «Основное» (Базовые опции Адреналина), 25.09. */
.gen-wrap .gen-bot { width: 100%; height: 34px; border-radius: 8px; border: 1px solid var(--border-2);
  background: var(--panel-2); color: inherit; font-weight: 600; cursor: pointer; }
.gen-wrap .gen-bot.on { background: rgba(70, 200, 120, .16); border-color: rgba(70, 200, 120, .55); }
.gen-autos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gen-auto { height: 32px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--panel-2);
  color: inherit; cursor: pointer; }
.gen-auto.on { background: rgba(80, 150, 255, .2); border-color: rgba(80, 150, 255, .6); }
.gen-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.gen-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gen-perf input[type=range] { width: 100%; }
.gen-perf-lbl { display: flex; justify-content: space-between; font-size: 12px; opacity: .75; }
.gen-keys { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.gen-path { flex: 1 1 auto; min-width: 0; }
.gen-sub { padding-left: 22px; }
@media (max-width: 800px) {
  .gen-grid { grid-template-columns: minmax(0, 1fr); }
  .gen-autos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* «Сельф хил» (25.09): два условия в строку, «Отдых» — выбор умения. */
:is(.adr-shell, .adr-theme) .adr-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.rx-skill { min-width: 0; flex: 1 1 auto; }
@media (max-width: 800px) { :is(.adr-shell, .adr-theme) .adr-grid2 { grid-template-columns: minmax(0, 1fr); } }

/* driver settings: список клавиш — узкий, в строку с «Use driver». */
:is(.adr-shell, .adr-theme) select.drv-key { width: 78px; min-width: 0; flex: none; height: 30px; }

/* driver settings: статус как в окне Адреналина; пока жмём — всё серое. */
.drv-status { justify-content: center; }
.drv-st.ok { color: #46d27a; }
.drv-st.bad { color: #ff7b72; }
.drv-st-img { height: 20px; border-radius: 4px; }
.drv-busy .seg-btn, .drv-busy .adr-chk, .drv-busy select, .drv-busy input, .drv-busy .btn {
  opacity: .4; filter: grayscale(1); cursor: wait; pointer-events: none;
}

/* Значок driver settings у ключа Адреналина и его окошко (25.09). */
.drv-chip { cursor: pointer; }
.drv-chip.ok { color: #46d27a; }
.drv-chip.bad { color: #ff7b72; }
.drv-pop { width: 360px; }
.drv-pop .adr-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.drv-pop .drv-seg { display: flex; margin: 8px 0; }
.drv-pop .drv-seg .seg-btn { flex: 1 1 0; }
.drv-pop select.drv-key { width: 78px; flex: none; height: 30px; }

/* Карта окна и редактор зоны (map.js, 25.09). */
.map-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .6); display: flex;
  align-items: stretch; justify-content: stretch; padding: 0; }
/* на весь экран — как отдельное окно карты */
.map-box { width: 100%; height: 100%; display: flex; flex-direction: column;
  background: #101017; overflow: hidden; }
.map-foot { display: flex; align-items: center; gap: 6px; padding: 6px 12px; flex-wrap: wrap;
  border-top: 1px solid #22222e; font-size: 12px; color: #8a8fa0; background: #0d0d13; }
.map-gap { flex: 1 1 auto; }
.map-src { font-size: 12px; color: #aab; }
.map-tb.on { background: rgba(80, 150, 255, .22); border-color: rgba(80, 150, 255, .7); }
.map-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.map-wrap canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.map-menu { position: absolute; z-index: 5; min-width: 230px; background: #f4f4f6; color: #111; border: 1px solid #aaa;
  border-radius: 6px; padding: 4px 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); font-size: 13px; }
.map-menu[hidden] { display: none; }
.map-mi { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 12px 6px 6px;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.map-mi:hover:not(:disabled) { background: #d6e6fb; }
.map-mi:disabled, .map-mi.dis { color: #999; cursor: default; }
.map-chk { width: 16px; text-align: center; flex: none; }
.map-arr { margin-left: auto; }
.map-sep { height: 1px; background: #ccc; margin: 4px 6px; }
.map-sub { display: none; left: 100%; top: -4px; max-height: 60vh; overflow: auto; }
.map-mi.has-sub:hover > .map-sub, .map-mi.has-sub.open > .map-sub { display: block; }
@media (max-width: 800px) {
  .map-modal { padding: 0; }
  .map-box { width: 100%; height: 100%; border-radius: 0; }
  .map-sub { left: 16px; top: 100%; }
}

/* Карта: кто вокруг — список справа (как «NPC» Адреналина). */
.map-body { flex: 1 1 auto; min-height: 0; display: flex; }
.map-body .map-wrap { flex: 1 1 auto; min-width: 0; }
.map-list { width: 290px; flex: none; overflow: auto; border-left: 1px solid #292936; font-size: 12px; background: #0f0f15; }
.map-list[hidden] { display: none; }
.map-list-head, .map-list-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px 48px 34px; gap: 4px; padding: 4px 8px; }
.map-list-head { position: sticky; top: 0; z-index: 2; background: #16161f; color: #aab; font-weight: 600; }
.map-list-row { cursor: pointer; border-bottom: 1px solid #1a1a24; }
.map-list-row:hover { background: #1b2233; }
.map-list-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-list-row.dead { opacity: .5; }
.map-list-row.ghost { opacity: .35; font-style: italic; }
.map-list-row.k-C span:first-child, .map-list-row.k-G span:first-child { color: #8fc4ff; }
.map-list-row.k-D span:first-child { color: #ffd24a; }
.map-list-empty { padding: 12px; color: #889; }
.map-list-group { position: sticky; top: 24px; z-index: 1; display: flex; align-items: center; gap: 7px; padding: 6px 8px; font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; background: #13131b; border-bottom: 1px solid #292936; }
.map-list-group i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.map-list-group b { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 9px; font-size: 11px; text-align: center; letter-spacing: 0; }
.map-list-group.in { color: #6fe880; background: linear-gradient(90deg, rgba(51, 224, 74, .16), rgba(51, 224, 74, 0) 70%), #13131b; box-shadow: inset 3px 0 0 #33e04a; }
.map-list-group.in i { background: #39d353; box-shadow: 0 0 6px #39d353; }
.map-list-group.in b { background: rgba(51, 224, 74, .18); color: #9ff0aa; }
.map-list-group.out { color: #9aa0ad; box-shadow: inset 3px 0 0 #4a4f5c; border-top: 1px solid #292936; margin-top: 8px; }
.map-list-group.out i { border: 1.5px solid #8a90a0; }
.map-list-group.out b { background: rgba(140, 146, 160, .15); color: #b8bcc6; }
.map-list-group + .map-list-empty { padding: 6px 12px; font-style: italic; }
.map-list-row.out { opacity: .6; }
.map-list-row.out:hover, .map-list-row.out.sel, .map-list-row.out.tgt { opacity: 1; }
@media (max-width: 800px) { .map-list { position: absolute; right: 0; top: 0; bottom: 0; width: 60%; z-index: 4; } .map-body { position: relative; } }
.map-list-row.sel { background: rgba(255, 159, 26, .22); box-shadow: inset 3px 0 0 #ff9f1a; }
.map-list-row.sel span:first-child { color: #fff; font-weight: 700; }
.map-list-row.tgt:not(.sel) { background: rgba(214, 30, 30, .2); }
.map-list-row.tgt:not(.sel) span:first-child { color: #ff8a8a; font-weight: 700; }

/* ── Карта: шапка-«пульт» (сервер, ПК, окна, кнопки окна), панель чат / журнал ── */
.map-head { position: relative; z-index: 6; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #181824 0%, #12121a 100%); border-bottom: 1px solid #262636;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.mh-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-width: 0; }
.mh-row2 { padding-top: 0; gap: 12px; }
.mh-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; letter-spacing: .02em; color: #f1e2b8; flex: none; }
.mh-logo .ico { width: 26px; height: 26px; display: block; border-radius: 7px; box-shadow: 0 0 12px rgba(201, 162, 75, .35); }
.map-src { font-size: 11.5px; color: #7d8296; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* сервер: сегмент White / Black */
.mh-seg { display: flex; flex: none; padding: 3px; gap: 3px; border-radius: 12px; background: #0b0b11;
  border: 1px solid #262636; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.mh-srv { display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border-radius: 9px; border: 0;
  background: transparent; color: #8a8fa0; font: 600 12.5px system-ui, sans-serif; cursor: pointer; transition: all .16s ease; }
.mh-srv small { font-size: 10.5px; opacity: .6; font-weight: 700; }
.mh-srv:hover { color: #e6e8ef; background: rgba(255, 255, 255, .04); }
.mh-srv i, .mn-srv { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.srv-none { border: 1.5px dashed #8a8fa0; box-sizing: border-box; }
.mh-srv.on[data-srv="none"] { color: #fff; background: #262636; box-shadow: 0 0 0 1px #4a4a60; }
.srv-white { background: radial-gradient(circle at 35% 35%, #fff, #c9d2e0); box-shadow: 0 0 8px rgba(230, 238, 255, .7); }
.srv-black { background: radial-gradient(circle at 35% 35%, #5d5f70, #0b0b10); box-shadow: 0 0 0 1.5px #8b7dff, 0 0 8px rgba(139, 125, 255, .6); }
.mh-srv.on[data-srv="white"] { color: #111318; background: linear-gradient(180deg, #f4f6fb, #cfd6e4); box-shadow: 0 2px 10px rgba(220, 230, 255, .25); }
.mh-srv.on[data-srv="black"] { color: #e9e6ff; background: linear-gradient(180deg, #2b2840, #17151f); box-shadow: 0 0 0 1px #6f62e8, 0 2px 12px rgba(111, 98, 232, .35); }

/* ПК: вкладки с огоньками окон */
.mh-pcs { display: flex; gap: 6px; flex: none; }
.mh-pc { position: relative; display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 10px;
  border: 1px solid #2a2a3a; background: #15151f; color: #c9ccd8; font: 700 12.5px system-ui, sans-serif; cursor: pointer;
  transition: all .16s ease; }
.mh-pc::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--pc); box-shadow: 0 0 8px var(--pc); }
.mh-pc:hover { border-color: var(--pc); transform: translateY(-1px); }
.mh-pc.on { color: #fff; border-color: var(--pc); background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 26%, #15151f), #15151f);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc) 40%, transparent), 0 4px 16px color-mix(in srgb, var(--pc) 25%, transparent); }
.mh-pc.dim { opacity: .38; }
.mh-pc-dots { display: flex; gap: 3px; }
.mh-pc-dots .dot { width: 6px; height: 6px; }

/* окна выбранного ПК */
.mh-nicks { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.mh-nicks::-webkit-scrollbar { display: none; }
.mh-nick { position: relative; display: flex; flex-direction: column; gap: 5px;
  align-items: stretch; padding: 6px 8px 7px 10px; border-radius: 12px; border: 1px solid #2a2a3a; flex: none;
  background: linear-gradient(180deg, #1a1a26, #13131b); color: #cfd3df; cursor: pointer; transition: all .16s ease; }
.mh-nick:hover { border-color: color-mix(in srgb, var(--pc) 70%, #2a2a3a); transform: translateY(-1px); }
.mh-nick.on { border-color: var(--pc); color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 50%, transparent), 0 0 18px color-mix(in srgb, var(--pc) 28%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 18%, #1a1a26), #13131b); }
.mh-nick.other { opacity: .45; }
.mn-name { font: 700 13.5px system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap; }
.mn-srv { width: 8px; height: 8px; }
.mn-top { display: flex; align-items: center; gap: 7px; }
.mn-bars { display: flex; flex-direction: column; gap: 2px; min-width: 90px; }
.mn-bars b { display: block; height: 3px; border-radius: 2px; transition: width .6s ease; }
.mn-bars .hp { background: linear-gradient(90deg, #7a1712, #ff4d42); box-shadow: 0 0 6px rgba(255, 77, 66, .45); }
.mn-bars .mp { background: linear-gradient(90deg, #123a7a, #3d9bff); box-shadow: 0 0 6px rgba(61, 155, 255, .4); }

/* кнопки окна — плитки как на карточке, плотнее */
.mh-acts-wrap { position: relative; flex: none; }
.mh-acts { display: flex; align-items: center; gap: 5px; padding: 4px; border-radius: 14px;
  background: rgba(8, 8, 12, .55); border: 1px solid #262636; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.ma-btn { position: relative; width: 36px; height: 36px; padding: 2px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid #2c2c3c; background: rgba(255, 255, 255, .03); color: #d6d9e4; cursor: pointer;
  font-size: 17px; line-height: 1; transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease; }
.ma-btn .ico { width: 30px; height: 30px; display: block; border-radius: 7px; }
.ma-btn > svg:not(.ico) { width: 22px; height: 22px; }
.ma-btn:hover { transform: translateY(-2px); border-color: #8a6d2f; box-shadow: 0 6px 16px rgba(0, 0, 0, .45), 0 0 12px rgba(201, 162, 75, .25); }
.ma-btn:active, .ma-btn.tapped { transform: scale(.92); }
.ma-btn.on { border-color: rgba(201, 162, 75, .7); box-shadow: 0 0 12px rgba(201, 162, 75, .3); }
.ma-bot { color: #ff6b5e; }
.ma-bot.on { color: #4be07a; border-color: rgba(75, 224, 122, .55); box-shadow: 0 0 14px rgba(75, 224, 122, .25); }
.ma-bot.on svg { animation: ma-spin 3.2s linear infinite; }
@keyframes ma-spin { to { transform: rotate(360deg); } }
.ma-btn.busy { border-color: rgba(242, 192, 77, .7); box-shadow: 0 0 14px rgba(242, 192, 77, .35); animation: ma-pulse 1.2s ease-in-out infinite; }
@keyframes ma-pulse { 50% { box-shadow: 0 0 4px rgba(242, 192, 77, .15); } }
.ma-ok { color: #4be07a; border-color: rgba(75, 224, 122, .5); }
.ma-danger { color: #ff7a70; }
.ma-danger:hover { border-color: rgba(255, 90, 80, .7); box-shadow: 0 0 14px rgba(255, 90, 80, .3); }
.ma-sep { width: 1px; height: 24px; background: #2c2c3c; margin: 0 2px; flex: none; }
.ma-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #e5534b; color: #fff; font: 700 10px/16px system-ui, sans-serif; box-shadow: 0 0 0 2px #12121a; }
.ma-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: 260px; padding: 12px; border-radius: 14px;
  background: rgba(20, 20, 30, .96); border: 1px solid #34344a; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); }
.ma-pop[hidden] { display: none; }
.ma-pop .alert-chip { justify-content: flex-start; width: 100%; font-size: 13px; }
.ma-pop .af-chip { font: inherit; font-size: 13px; cursor: pointer; }
.ma-pop .af-chip.on { background: rgba(63, 185, 80, .12); border-color: rgba(63, 185, 80, .5); color: #7ee08c; }

/* инструменты карты справа в шапке */
.mh-tools { display: flex; gap: 4px; flex: none; }
.mh-tool { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 9px;
  border: 1px solid #2a2a3a; background: #15151f; color: #c9ccd8; font: 600 12.5px system-ui, sans-serif; cursor: pointer; transition: all .15s ease; }
.mh-tool:hover:not(:disabled) { border-color: #4a6fb0; color: #fff; }
.mh-tool:disabled { opacity: .4; cursor: default; }
.mh-tool.on { background: linear-gradient(180deg, rgba(80, 150, 255, .3), rgba(80, 150, 255, .12)); border-color: rgba(80, 150, 255, .75); color: #fff;
  box-shadow: 0 0 12px rgba(80, 150, 255, .25); }
.mh-close:hover { border-color: rgba(255, 90, 80, .7); color: #ff8a80; }

/* панель чат / журнал поверх карты */
.map-dock { position: absolute; left: 12px; bottom: 12px; z-index: 4; width: min(420px, calc(100% - 24px));
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: rgba(14, 14, 22, .86); border: 1px solid #2e2e42; box-shadow: 0 14px 40px rgba(0, 0, 0, .55); backdrop-filter: blur(8px); }
.md-tabs { display: flex; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid #262636; }
.md-tab { height: 26px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #8a8fa0;
  font: 700 12px system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.md-tab:hover { color: #e6e8ef; }
.md-tab.on { color: #f1e2b8; background: rgba(201, 162, 75, .14); box-shadow: inset 0 -2px 0 #c9a24b; }
.md-fold { font-size: 14px; text-transform: none; transition: transform .2s ease; }
.map-dock.fold .md-body { display: none; }
.map-dock.fold .md-tabs { border-bottom: 0; }
.map-dock.fold .md-fold { transform: rotate(180deg); }
.map-dock.fold .md-tab.on { background: transparent; box-shadow: none; color: #8a8fa0; }
.md-body { height: 212px; }
.md-pane { height: 100%; display: flex; flex-direction: column; }
.md-pane[hidden] { display: none; }
/* чат и журнал одной высоты: список растягивается, поле ввода — снизу */
.md-box { flex: 1 1 auto; min-height: 0; height: auto; overflow-y: auto; padding: 6px 10px; font-size: 13px; }
.map-dock .chat-entry { background: rgba(0, 0, 0, .25); }
body.map-open .modal { z-index: 1300; }

@media (max-width: 800px) {
  .mh-row { flex-wrap: wrap; gap: 8px; padding: 6px 8px; }
  .mh-brand b, .mh-tool span, .map-src { display: none; }
  .mh-pcs { order: 5; width: 100%; overflow-x: auto; }
  .mh-row2 { flex-wrap: wrap; }
  .mh-acts-wrap { width: 100%; }
  .mh-acts { overflow-x: auto; }
  .ma-btn { width: 34px; height: 34px; flex: none; }
  .map-dock { left: 6px; bottom: 6px; width: calc(100% - 12px); }
  .md-body { height: 170px; }
}

/* плашка окна: кнопка «экран поверх карты» и расходка */
.mn-pip { margin-left: auto; width: 24px; height: 22px; padding: 2px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; border: 1px solid #33334a; background: rgba(255, 255, 255, .04); color: #9aa0b4; cursor: pointer; transition: all .15s ease; }
.mn-pip svg { width: 16px; height: 16px; display: block; }
.mn-pip:hover { color: #fff; border-color: var(--pc); box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 40%, transparent); }
.mn-pip.on { color: #10131a; background: var(--pc); border-color: var(--pc); box-shadow: 0 0 12px color-mix(in srgb, var(--pc) 55%, transparent); }
.mn-cons { display: flex; gap: 4px; flex-wrap: nowrap; }
.mn-cons .mc { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px 0 2px; border-radius: 10px;
  background: rgba(0, 0, 0, .35); border: 1px solid #2a2a3a; font: 700 11px/1 system-ui, sans-serif; color: #d9dde8; white-space: nowrap; }
.mn-cons .mc img, .mn-cons .mc i { width: 16px; height: 16px; border-radius: 4px; display: block; flex: none; }
.mn-cons .mc i { background: #2a2a3a; }
.mn-cons .mc.low { color: #ffb4ad; border-color: rgba(255, 90, 80, .7); background: rgba(120, 20, 20, .35);
  box-shadow: 0 0 8px rgba(255, 70, 60, .35); animation: mc-low 1.4s ease-in-out infinite; }
@keyframes mc-low { 50% { box-shadow: 0 0 2px rgba(255, 70, 60, .1); } }

/* экран окна поверх карты */
.map-pip { position: absolute; z-index: 10; min-width: 240px; min-height: 160px; display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden; resize: both; background: #07070b;
  border: 1px solid color-mix(in srgb, var(--pc) 60%, #2e2e42);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .5), 0 0 24px color-mix(in srgb, var(--pc) 22%, transparent); }
.map-pip.drag { opacity: .85; cursor: grabbing; }
.pip-head { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 6px 0 10px; flex: none; cursor: grab; user-select: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 22%, #181824), #12121a); border-bottom: 1px solid #262636; }
.pip-head b { font: 700 13px system-ui, sans-serif; color: #fff; }
.pip-head small { font: 600 11px system-ui, sans-serif; color: var(--pc); }
.pip-fps { font: 600 10.5px system-ui, sans-serif; color: #7d8296; }
.pip-head button { width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: #9aa0b4; cursor: pointer; font-size: 13px; }
.pip-head button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.pip-body { position: relative; flex: 1 1 auto; min-height: 0; cursor: zoom-in; }
.pip-body img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pip-off { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #7d8296; font: 600 13px system-ui, sans-serif; }
.pip-off[hidden] { display: none; }

/* Купить соски у игроков: иконка сосок в плитке и окошко покупки */
.tool-btn .ss-ico, .ma-btn .ss-ico { object-fit: contain; background: radial-gradient(circle at 50% 40%, #2f4a2a, #141c12); padding: 3px; box-sizing: border-box; }
.buy-box { width: 460px; max-width: calc(100vw - 16px); }
.buy-item { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.buy-item img { width: 32px; height: 32px; border-radius: 7px; box-shadow: 0 0 10px rgba(80, 200, 90, .25); }
.buy-item b { font-size: 15px; }
.buy-item small { color: var(--muted); margin-left: auto; }
.buy-load { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.buy-load input { font-size: 16px; font-weight: 700; letter-spacing: .02em; height: 38px; }
.buy-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.buy-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); }
.buy-grid input { height: 32px; }
.buy-preview { margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: rgba(63, 185, 80, .08); border: 1px solid rgba(63, 185, 80, .28); font-size: 13px; }
.buy-preview:empty { display: none; }
.buy-preview .warn { color: #ffb36b; }
.buy-hint { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.buy-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.buy-btns .btn { min-width: 130px; height: 36px; font-weight: 700; }
.buy-msg { margin-top: 8px; font-size: 12.5px; color: #7ee08c; min-height: 16px; }
.buy-msg.bad { color: #ff8f88; }
.buy-seg { display: flex; margin-bottom: 12px; }
.buy-seg .seg-btn { flex: 1 1 0; }
.buy-run { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #f2c04d; }
.buy-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(242, 192, 77, .3); border-top-color: #f2c04d; animation: ma-spin .8s linear infinite; }
.buy-last { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid var(--border); font-size: 13px; }
/* Живой кадр окна — в ходе продажи и покупки сосок */
.live-shot { position: relative; width: min(560px, 100%); flex: none; border-radius: 10px; overflow: hidden; background: #05060a;
  border: 1px solid #2c2c3c; box-shadow: 0 8px 28px rgba(0, 0, 0, .55); aspect-ratio: 16 / 9; }
.live-shot[hidden] { display: none; }
.live-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.live-shot-fps { position: absolute; right: 6px; bottom: 5px; padding: 1px 6px; border-radius: 6px; font-size: 11px;
  color: #c9d1d9; background: rgba(0, 0, 0, .55); }
.live-shot-fps:empty { display: none; }
.sell-ov-body { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.buy-shot { width: 100%; margin-top: 10px; }
.buy-have { margin-top: 10px; font-size: 14px; color: var(--text); }
.buy-have b { color: #7ee08c; font-size: 16px; }
.buy-have small { color: var(--muted); }
.buy-log { margin-top: 8px; max-height: 150px; overflow-y: auto; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .3);
  border: 1px solid var(--border); font-size: 12.5px; line-height: 1.5; }
.buy-log span { color: var(--muted); margin-right: 8px; font-variant-numeric: tabular-nums; }
.buy-log .bad { color: #ffb36b; }
.buy-run.ok { color: #7ee08c; }
.buy-run.bad { color: #ffb36b; }
@media (max-width: 800px) { .buy-grid { grid-template-columns: 1fr 1fr; } }
.buy-need { margin: -4px 0 12px; font-size: 13px; color: #9ff0aa; }
.buy-need:empty { display: none; }
.buy-need .warn { color: #ffb36b; }
.buy-calc { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: rgba(0, 0, 0, .18); }
.buy-calc summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); }
.buy-calc summary small { color: var(--muted); font-weight: 400; }
.buy-calc[open] summary { margin-bottom: 10px; }
.buy-calc .buy-span2 { grid-column: span 3; }
.buy-preview .btn { margin-left: 8px; height: 24px; }

/* плашка окна: окно не запущено / в окне чужой персонаж (трейдер) */
.mh-nick.offl { background: linear-gradient(180deg, #16161e, #111117); border-style: dashed; }
.mh-nick.offl .mn-name { color: #9aa0b4; }
.mh-nick.intr { border-color: rgba(255, 170, 80, .6); }
.mn-sub { font: 600 11px system-ui, sans-serif; color: #7d8296; white-space: nowrap; }
.mn-sub.warn { color: #ffb36b; }
.mn-go { width: 24px; height: 22px; padding: 0; border-radius: 7px; border: 1px solid rgba(75, 224, 122, .55); background: rgba(75, 224, 122, .12);
  color: #4be07a; font-size: 12px; cursor: pointer; }
.mn-go:hover { background: rgba(75, 224, 122, .25); box-shadow: 0 0 10px rgba(75, 224, 122, .35); }
.mh-pc.allo { opacity: .7; border-style: dashed; }
.mh-pc.down { opacity: .45; border-style: dashed; cursor: default; }
.mh-pc.down small { font-weight: 600; font-size: 10.5px; color: #ff8f88; }
.md-clear { height: 22px; margin-left: 6px; padding: 0 9px; border-radius: 7px; border: 1px solid #3a3a4c; background: rgba(255, 255, 255, .04);
  color: #b8bcc6; font: 600 11.5px system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.md-clear:hover { color: #ff8f88; border-color: rgba(255, 90, 80, .6); background: rgba(229, 83, 75, .12); }
.md-clear:hover { color: #ff8f88; }
.map-dock.fold .md-clear { display: none; }

/* Ход продажи поверх окна инвентаря */
#inventoryModal .modal-box { position: relative; }
.sell-ov { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-y: auto;
  gap: 12px; padding: 24px; text-align: center; border-radius: inherit;
  background: rgba(14, 14, 20, .82); backdrop-filter: blur(3px) grayscale(.6); animation: sell-ov-in .2s ease; }
@keyframes sell-ov-in { from { opacity: 0; } }
/* Почта: форма поверх инвентаря */
.mail-ov { gap: 10px; overflow-y: auto; justify-content: flex-start; padding-top: 34px; }
.mail-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 420px; max-height: 30vh; overflow-y: auto; }
.mail-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 8px; font-size: 12.5px;
  background: rgba(255, 255, 255, .05); border: 1px solid #2c2c3c; color: #d4d8e0; }
.mail-chip img { width: 20px; height: 20px; }
.mail-chip b { color: #f2c04d; font-weight: 600; }
.mail-fld { display: flex; flex-direction: column; gap: 4px; width: min(300px, 100%); text-align: left; font-size: 12px; color: #8a8fa0; }
.mail-fld input { height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid #3a3a4c; background: rgba(0, 0, 0, .35);
  color: #f1e2b8; font: 600 15px system-ui, sans-serif; outline: none; }
.mail-fld input:focus { border-color: #d9a53a; box-shadow: 0 0 0 2px rgba(242, 192, 77, .2); }
.mail-btns { display: flex; gap: 10px; margin-top: 4px; }
.mail-sent { color: #c9d1d9; }
.sell-ov-spin { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(242, 192, 77, .2); border-top-color: #f2c04d;
  animation: ma-spin .9s linear infinite; box-shadow: 0 0 24px rgba(242, 192, 77, .2); }
.sell-ov-ico { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 28px system-ui, sans-serif; }
.sell-ov-ico.ok { color: #10131a; background: radial-gradient(circle at 35% 35%, #8af59e, #2fb34a); box-shadow: 0 0 30px rgba(63, 185, 80, .45); }
.sell-ov-ico.bad { color: #fff; background: radial-gradient(circle at 35% 35%, #ff8a80, #c53b32); box-shadow: 0 0 30px rgba(229, 83, 75, .4); }
.sell-ov-title { font: 700 18px system-ui, sans-serif; color: #f1e2b8; }
.sell-ov-big { font: 800 30px system-ui, sans-serif; color: #7ee08c; letter-spacing: .01em; }
.sell-ov-big small { font-size: 15px; color: #9ff0aa; font-weight: 600; }
.sell-ov-sub { font-size: 12.5px; color: #8a8fa0; }
.sell-ov-note { font-size: 13px; color: #ffb36b; max-width: 360px; }
.sell-ov-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 6px 0; }
.sell-ov-steps span { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; color: #7d8296; border: 1px solid #2c2c3c; background: rgba(0, 0, 0, .3); }
.sell-ov-steps span.on { color: #f2c04d; border-color: rgba(242, 192, 77, .6); box-shadow: 0 0 12px rgba(242, 192, 77, .25); }
.sell-ov-steps span.done { color: #7ee08c; border-color: rgba(63, 185, 80, .45); }
.sell-ov-steps i { width: 14px; height: 1px; background: #3a3a4c; }

/* Список справа: группы сворачиваются, игроки рядом — своей группой */
.map-list-group { cursor: pointer; user-select: none; }
.map-list-group:hover { filter: brightness(1.15); }
.map-list-group .lg-arr { font-style: normal; font-size: 10px; width: 10px; transition: transform .15s ease; opacity: .8; }
.map-list-group.folded .lg-arr { transform: rotate(-90deg); }
.map-list-group.near { color: #cfd3df; box-shadow: inset 3px 0 0 #4a6fb0; margin-top: 0; }
.map-list-group.near i { background: #4aa8ff; }
.map-list-group.pl { color: #8fc4ff; box-shadow: inset 3px 0 0 #4aa8ff; border-top: 1px solid #292936; margin-top: 8px;
  background: linear-gradient(90deg, rgba(74, 168, 255, .14), rgba(74, 168, 255, 0) 70%), #13131b; }
.map-list-group.pl i { background: #4aa8ff; border-radius: 50%; box-shadow: 0 0 6px #4aa8ff; }
.map-list-group.pl b { background: rgba(74, 168, 255, .18); color: #bfe0ff; }

/* Ход маршрута в окне «Маршрут»: шапка, живые кадры окон, шаги */
.trip-card { margin-bottom: 12px; padding: 12px; border-radius: 14px; border: 1px solid rgba(242, 192, 77, .35);
  background: linear-gradient(180deg, rgba(242, 192, 77, .08), rgba(0, 0, 0, .25)); box-shadow: 0 0 18px rgba(242, 192, 77, .08); }
.trip-head { display: flex; align-items: center; gap: 10px; font: 700 15px system-ui, sans-serif; color: #f2c04d; flex-wrap: wrap; }
.trip-head small { font-weight: 500; font-size: 12px; color: #8a8fa0; margin-left: auto; }
.trip-head.ok { color: #7ee08c; }
.trip-head.bad { color: #ff8f88; }
.trip-head.bad small { margin-left: 0; width: 100%; color: #ffb3ab; }
.trip-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(242, 192, 77, .3); border-top-color: #f2c04d; animation: ma-spin .8s linear infinite; }
.trip-ico { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
  color: #10131a; background: currentColor; }
.trip-head.ok .trip-ico { background: #3fb950; color: #10131a; }
.trip-head.bad .trip-ico { background: #e5534b; color: #fff; }
.trip-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 10px 0; }
.trip-shot { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid #2c2c3c; background: #07070b; }
.trip-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #0b0b10; }
.trip-shot figcaption { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font: 600 12px system-ui, sans-serif; color: #cfd3df; }
.trip-shot figcaption i { font-style: normal; color: #7d8296; font-weight: 500; }
.trip-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 150px; overflow: auto; }
.trip-steps li { display: flex; gap: 8px; font-size: 12.5px; color: #9aa0b4; padding: 3px 6px; border-radius: 6px; }
.trip-steps li time { color: #5d6275; flex: none; width: 38px; }
.trip-steps li.cur { color: #f1e2b8; background: rgba(242, 192, 77, .1); }
.trip-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
/* поход закончен — короткая строка: итог и «✕» (27.09) */
.trip-card.done { padding: 8px 10px; }
.trip-done-row { display: flex; align-items: center; gap: 8px; }
.trip-done-row #tripHead { flex: 1 1 auto; min-width: 0; }
.trip-done-row .trip-head { font-size: 13.5px; }
.trip-card.done .trip-steps { margin-top: 6px; }
.trip-x { flex: none; width: 26px; padding: 0; }

/* Панель чат / журнал: колонка «Игроки рядом» справа (~ треть ширины) */
/* чат/журнал ~420, игроки ~210 справа */
.map-dock.with-pl { width: min(640px, calc(100% - 24px)); }
.md-body { display: flex; min-width: 0; }
.md-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.md-pl { flex: 0 0 210px; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid #262636; background: rgba(0, 0, 0, .2); }
.md-pl[hidden] { display: none; }
.md-pl-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid #262636; font-size: 12px; color: #8fc4ff; }
.md-pl-head b { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: 11px; white-space: nowrap; }
.md-pl-head #mapPlN { min-width: 18px; padding: 0 6px; border-radius: 8px; background: rgba(74, 168, 255, .18); color: #bfe0ff; font: 700 11px/16px system-ui, sans-serif; text-align: center; }
.md-pl-seg { margin-left: auto; display: flex; border: 1px solid #2c2c3c; border-radius: 7px; overflow: hidden; }
.md-pl-seg button { border: 0; background: transparent; color: #7d8296; font: 600 10.5px system-ui, sans-serif; padding: 3px 7px; cursor: pointer; white-space: nowrap; }
.md-pl-seg button.on { background: rgba(74, 168, 255, .2); color: #dbeeff; }
.md-pl-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 3px 0; }
.md-pl-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 12.5px; color: #9fd0ff; cursor: pointer; }
.md-pl-row:hover { background: rgba(74, 168, 255, .08); }
.md-pl-row.grp { color: #8ff0c4; }
.md-pl-row.dead { opacity: .45; }
.md-pl-row.sel { background: rgba(255, 159, 26, .18); color: #fff; }
.md-pl-row .pl-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-pl-row .pl-pc { font-style: normal; font: 700 9.5px system-ui, sans-serif; padding: 1px 5px; border-radius: 6px; color: #10131a; background: var(--pc); }
.md-pl-row .pl-d { flex: none; color: #5d6275; font-size: 11px; min-width: 32px; text-align: right; }
.md-pl-empty { padding: 8px; color: #5d6275; font-size: 12px; font-style: italic; }
.md-plchk { display: inline-flex; align-items: center; gap: 5px; font: 600 12px system-ui, sans-serif; color: #8fc4ff; cursor: pointer; padding: 0 8px; user-select: none; }
.md-plchk input { accent-color: #4aa8ff; margin: 0; }
.map-dock.fold .md-plchk { display: none; }
@media (max-width: 800px) { .md-pl { flex-basis: 40%; min-width: 120px; } }
.md-badge { display: inline-block; min-width: 16px; height: 16px; margin-left: 5px; padding: 0 4px; border-radius: 8px; vertical-align: 1px;
  background: #e5534b; color: #fff; font: 700 10px/16px system-ui, sans-serif; text-align: center; letter-spacing: 0;
  box-shadow: 0 0 8px rgba(229, 83, 75, .5); }
.md-badge[hidden] { display: none; }

.buy-item .btn-sm { margin-left: 4px; }
.buy-have-line { margin: -4px 0 10px; font-size: 12px; color: var(--muted); }
.buy-shotpick { margin: -2px 0 12px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: grid; gap: 6px; }
.buy-shotpick[hidden] { display: none; }
.sp-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-t { width: 118px; font-size: 12px; color: var(--muted); }
.sp-chip { min-width: 36px; height: 28px; padding: 0 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: inherit; cursor: pointer; font-size: 12.5px; }
.sp-chip:hover { border-color: #c9a24b; }
.sp-chip.on { border-color: #c9a24b; background: rgba(201,162,75,.2); color: #ecc978; }
.buy-run small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.buy-now { margin: 6px 0 4px; font-size: 14px; }
.buy-now.bad { color: #ff9a8f; }
.wc-sec { margin: 12px 0; display: grid; gap: 8px; }
.wc-chk { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.wc-chk input { width: 16px; height: 16px; accent-color: #c9a24b; }
.wc-chk small { color: var(--muted); }
.wc-h { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.gr-box { width: min(1040px, calc(100vw - 16px)); max-width: none; }
.gr-intro { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.gr-intro small { display: block; margin-top: 4px; opacity: .8; }
.gr-card { padding: 12px; margin-bottom: 12px; border-radius: 12px; border: 1px solid rgba(201,162,75,.3); background: rgba(201,162,75,.04); }
.gr-head { display: flex; gap: 8px; margin-bottom: 10px; }
.gr-head input { flex: 1; }
.gr-row.on { display: grid; grid-template-columns: minmax(150px, 1fr) 170px minmax(0, 1.6fr) auto; gap: 10px; align-items: center; }
.gr-list { display: grid; gap: 6px; }
.gr-list .gr-row.on { padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.03); }
.gr-pctag { font: 700 10.5px system-ui; color: var(--pc); border: 1px solid var(--pc); border-radius: 6px; padding: 1px 5px; letter-spacing: .03em; }
.gr-rm { width: 30px; padding: 0; }
.gr-add { margin-top: 8px; height: 32px; width: auto; min-width: 220px; font-size: 12.5px; }
.gr-seg { margin: 0; }
.gr-seg .seg-btn { padding: 5px 8px; font-size: 12.5px; }
.gr-what { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gr-warn { color: #e0a030; }
.buff-mass { flex: none; padding: 3px 7px; border-radius: 7px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--muted); font-size: 11.5px; cursor: pointer; }
.buff-mass.on { border-color: #c9a24b; background: rgba(201,162,75,.2); color: #ecc978; }
.gr-thead { font-size: 11px; color: var(--muted); padding: 0 8px 4px; }
.gr-thead span:nth-child(n+3) { text-align: center; }
.gr-pc { margin-bottom: 8px; padding: 4px 8px; border-left: 2px solid var(--pc); border-radius: 4px; background: rgba(255,255,255,.02); }
.gr-pc-h { font: 700 11.5px system-ui; color: var(--pc); margin: 2px 0 4px; letter-spacing: .04em; }
.gr-pc-h small { color: var(--muted); font-weight: 400; }
.gr-row { padding: 3px 0; }
.gr-row.off { opacity: .45; }
.gr-name { display: flex; align-items: center; gap: 7px; min-width: 0; cursor: pointer; font-size: 13px; }
.gr-name small { color: var(--muted); font-size: 11px; }
.gr-name .gr-why { color: #e0a030; }
.gr-row input[type=checkbox] { width: 16px; height: 16px; accent-color: #c9a24b; }
.gr-buff { height: 30px; font-size: 12.5px; padding: 0 8px; }
.gr-cell { display: flex; justify-content: center; cursor: pointer; }
.gr-cell.na { color: var(--muted); cursor: default; }
.gr-area { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 2px 0 8px 24px; font-size: 12px; color: var(--muted); }
.gr-chip { padding: 2px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: inherit; font-size: 12px; cursor: pointer; }
.gr-chip.on { border-color: #c9a24b; background: rgba(201,162,75,.2); color: #ecc978; }
.gr-note { margin-top: 8px; font-size: 12px; color: #9fd3a8; }
@media (max-width: 760px) {
  .gr-thead { display: none; }
  .gr-row.on { grid-template-columns: 1fr auto auto; }
  .gr-row.on .gr-what { grid-column: 1 / -1; margin-left: 0; order: 1; }
  .gr-cell { justify-content: flex-start; gap: 6px; font-size: 12px; }
  .gr-cell::after { content: attr(data-l); color: var(--muted); }
  .gr-area { margin-left: 0; }
}