@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root {
  --bg: #0a0b0e;
  --panel: #111318;
  --panel2: #171b22;
  --text: #e8eaef;
  --muted: #8b909c;
  --accent: #ffb020;       /* янтарная искра (в стиле логина) */
  --accent-2: #ff7a1a;
  --line: #23262e;
  --line2: #2e323c;
  --sidebar-bg: #0c0e12;
  --sidebar-active: #191c22;
  --green: #58d38c;
  --amber: #ffb020;
  --spark-soft: rgba(255,176,32,.14);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  background: var(--bg);
  color: var(--text);
}
/* атмосфера в стиле логина: техническая сетка + тёплое зарево искры сверху */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background:
    radial-gradient(65% 38% at 50% -6%, rgba(255,122,26,.10), transparent 62%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
}
h1, h2, h3, .page-title, .card-head, .brand {
  font-family: "Chakra Petch", "IBM Plex Mono", sans-serif;
}

/* ─────────── Оболочка ─────────── */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 92px; flex: 0 0 92px; background: var(--sidebar-bg);
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  align-items: stretch; padding: 14px 6px; position: sticky; top: 0; height: 100vh; z-index: 30;
}
.sidebar-brand { text-align: center; margin-bottom: 16px; }
.sidebar-brand img { width: 100%; max-width: 72px; height: auto; display: inline-block; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sidebar-foot { margin-top: auto; }
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 12px 4px; border-radius: 12px; text-decoration: none; position: relative;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--panel); color: var(--text); }
.nav-item.active { background: var(--sidebar-active); color: #fff; }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 3px; border-radius: 3px; background: var(--accent);
}
.nav-ico { font-size: 20px; line-height: 1; }
.nav-label { font-size: 11px; }
.nav-logout:hover { color: #ff8080; }

.sidebar-backdrop { display: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 20;
}
.burger { display: none; border: 0; background: transparent; color: var(--text); font-size: 22px; cursor: pointer; padding: 0 4px; }
.page-title { font-size: 20px; font-weight: 700; margin: 0; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.who { color: var(--muted); font-size: 13px; }

.content { padding: 18px 20px; }
.view { animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 12-колоночная сетка */
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; align-items: start; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
@media (max-width: 900px) { .grid12 > [class*="span-"] { grid-column: span 12; } }

/* Профиль игрока - JS-masonry: карточки раскладываются по колонкам, каждая
   в самую короткую - пустота под короткими заполняется нижними карточками. */
#player-body.grid12 { display: block; }
.pmason { display: flex; gap: 14px; align-items: flex-start; }
.pmason-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* Карточка */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
/* плавное появление ленивых карточек (инвентарь/активность) - въезжают снизу с fade */
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.card-enter { animation: cardIn .3s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .card-enter { animation: none; } }
.card-head {
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--text);
}
.card-head .geo-select { margin-left: auto; }
.card-body { padding: 16px; }
.chart-box { position: relative; width: 100%; height: 240px; }
.chart-box canvas { width: 100% !important; height: 100% !important; }
.ic { display: inline-flex; width: 20px; justify-content: center; }
.ic-blue { color: var(--accent); }
.ic-green { color: var(--green); }
.ic-amber { color: var(--amber); }

/* Датапойнты */
.datapoint { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 14px; }
.dp-l { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.datapoint b { color: var(--text); font-size: 15px; }
.dp-hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }

.stub { color: var(--muted); text-align: center; padding: 48px 16px; border: 1px dashed var(--line); border-radius: 14px; }
.muted { color: var(--muted); }

/* Профиль игрока */
.player-search { display: flex; gap: 8px; margin-bottom: 14px; }
.search-box { position: relative; flex: 1; }
.search-box .search { width: 100%; }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.sug-item { padding: 9px 14px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.sug-item:hover { background: var(--panel2); }
.sug-sub { color: var(--muted); font-size: 12px; margin-left: auto; }
.search { flex: 1; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 15px; }
.btn { border: 0; background: var(--accent); color: #fff; border-radius: 10px; padding: 10px 18px; font-size: 14px; cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.cnt { margin-left: auto; background: var(--panel2); color: var(--muted); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-rest { margin-top: 6px; }
.btn-more { margin-top: 8px; border: 0; background: var(--panel2); color: var(--accent); border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.btn-more:hover { background: var(--sidebar-active); color: #fff; }
/* инлайн-вариант (внутри ряда чипов твинков) */
.chips .tw-more { margin-top: 0; padding: 4px 10px; font-size: 12.5px; }

/* Сессии игрока */
.sess-body { max-height: 360px; overflow-y: auto; }
.sess-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
.sess-row:last-child { border-bottom: 0; }
.sess-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sess-top b { font-size: 14px; color: var(--text); }
.sess-dur { color: var(--green); font-size: 13px; font-weight: 600; white-space: nowrap; }
.sess-when { color: var(--muted); font-size: 12px; margin-top: 2px; }
.sess-meta { color: var(--muted); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Действия игрока + поиск */
.act-search { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 7px 10px;
  background: var(--bg, #0e1117); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-size: 13px; outline: none; }
.act-search:focus { border-color: var(--accent, #ffb020); }
.act-body { max-height: 380px; overflow-y: auto; }
/* одна компактная строка: [тип] описание … сервер · время */
.act-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.act-row:last-child { border-bottom: 0; }
.act-type { flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: #cbd5e1; background: rgba(148,163,184,.14); padding: 1px 7px; border-radius: 999px;
  min-width: 62px; text-align: center; }
.act-desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  color: var(--text); font-size: 12.5px; }
.act-srv { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.act-when { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.act-empty { color: var(--muted); font-size: 12px; padding: 8px 0; }
/* Стайл-тултип действия (полная инфа сразу, как в графиках) */
.inv-tip .act-tip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.inv-tip .act-tip-when { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.inv-tip .act-tip-desc { color: var(--text); font-size: 12.5px; line-height: 1.45; white-space: pre-wrap;
  word-break: break-word; max-width: 360px; }
.inv-tip .act-tip-meta { color: var(--muted); font-size: 11px; margin-top: 5px; }
/* Цветовые акценты типов */
.act-t-casino { color: #f0abfc; background: rgba(240,171,252,.15); }
.act-t-kill { color: #fca5a5; background: rgba(252,165,165,.15); }
.act-t-death { color: #fda4af; background: rgba(253,164,175,.15); }
.act-t-command { color: #ffc857; background: rgba(147,197,253,.15); }
.act-t-chat { color: #86efac; background: rgba(134,239,172,.15); }
.act-t-auction, .act-t-donate_market { color: #fcd34d; background: rgba(252,211,77,.15); }
.act-t-join { color: #86efac; background: rgba(134,239,172,.15); }
.act-t-quit { color: #cbd5e1; background: rgba(148,163,184,.14); }

/* Лоты аукциона */
.auc-body { max-height: 420px; overflow-y: auto; }
.auc-grid { grid-template-columns: repeat(9, 38px) !important; margin-bottom: 10px; }
.inv-tip .it-price { color: #86efac; font-weight: 600; margin-top: 3px; }
.inv-tip .it-status { color: var(--muted); font-size: 11px; }
/* Приписка лота в стиле плагина AuctionHouse (лор предмета, цвета Minecraft) */
.auc-lore { margin-top: 5px; font-size: 12px; line-height: 1.45; overflow: hidden; }
.auc-lore > div { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.auc-lore .al-sep { color: #ff5555; letter-spacing: 1px; opacity: .85; }
.auc-lore .al-red { color: #ff5555; }
.auc-lore .al-g { color: #55ff55; }
.auc-lore .al-o { color: #ffaa00; }
.auc-lore .al-w { color: #e8e8e8; }
/* Дон Маркет: подкраска иконки ранга цветом красителя + бейдж рублей */
.dm-tint { position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; image-rendering: pixelated; }
.dm-rub { color: #ffd166 !important; }
.auc-lore .al-y { color: #ffd166; }  /* рубли (Дон Маркет) */
.chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; font-size: 13px; color: var(--text); word-break: break-all; }
.chip-link { cursor: pointer; }
.chip-link:hover { border-color: var(--accent); color: #fff; }
/* Наказания: статус в «Основное» + карточка истории */
.pn-ban { color: #f87171 !important; }
.pn-mute { color: #fb923c !important; }
.pn-ok { color: #4ade80 !important; }
.pn-active { font-size: 12.5px; padding: 8px 11px; border-radius: 9px; margin-bottom: 8px; }
.pn-active b { font-weight: 700; }
.pn-active .pn-a-until { color: inherit; opacity: .8; }
.pn-a-ban { color: #fca5a5; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35); }
.pn-a-mute { color: #fdba74; background: rgba(249,115,22,.1); border: 1px solid rgba(249,115,22,.35); }
.pn-a-ok { color: #86efac; background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.3); }
.pn-body { max-height: 340px; overflow-y: auto; }
.pn-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pn-row:last-child { border-bottom: 0; }
.pn-type { flex: 0 0 auto; min-width: 42px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  border-radius: 999px; padding: 1px 7px; }
.pn-t-ban { color: #fca5a5; background: rgba(239,68,68,.16); }
.pn-t-mute { color: #fdba74; background: rgba(249,115,22,.16); }
.pn-reason { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 12.5px; }
.pn-by { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.pn-when { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.inv-tip .dn-tip-paid { color: #86efac; font-weight: 700; font-size: 13px; }
.dp-donate { color: #fcd34d; }
.dp-donate .dp-sub { color: var(--muted); font-weight: 400; font-size: 11px; }
.bar-click { cursor: pointer; }
.bar-click:hover { color: #fff; text-decoration: underline; }
/* Донат в профиле */
.dn-sum { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.dn-body { max-height: 340px; overflow-y: auto; }
.dn-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dn-row:last-child { border-bottom: 0; }
.dn-src { flex: 0 0 auto; min-width: 78px; text-align: center; font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; }
.dn-easydonate { color: #ffc857; background: rgba(147,197,253,.16); }
.dn-multi { color: #fcd34d; background: rgba(252,211,77,.16); }
.dn-prod { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 12.5px; }
.dn-paid { flex: 0 0 auto; color: #86efac; font-size: 12.5px; font-weight: 600; }
.dn-when { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.dn-badge { display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 700; line-height: 1.5;
  border-radius: 999px; padding: 0 6px; vertical-align: middle; }
.dn-badge-surcharge { color: #fca5a5; background: rgba(252,165,165,.15); }
.dn-badge-coupon { color: #c4b5fd; background: rgba(196,181,253,.15); }
.dn-badge-massSale { color: #86efac; background: rgba(134,239,172,.15); }
.inv-tip .dn-tip-sc { color: #fca5a5; font-size: 11.5px; margin-top: 3px; }
.inv-tip .dn-tip-sc .dn-tip-full { color: var(--muted); }
/* Идентификация: аккуратные панели устройств */
.gi-body { max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.gi-dev { background: var(--panel2, #171b25); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.gi-dev-top { display: flex; align-items: center; gap: 8px; }
.gi-dev-ic { font-size: 17px; line-height: 1; }
.gi-dev-name { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gi-xuid { font-size: 11px; color: #86efac; background: rgba(134,239,172,.1); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.gi-dev-cnt { margin-left: auto; font-size: 11px; font-weight: 600; color: #ffc857; background: rgba(147,197,253,.12);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.gi-dev-sub { font-size: 11.5px; color: var(--muted); margin: 4px 0 8px; }
.gi-ips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.gi-ips-l { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-right: 2px; }
.gi-ip { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: #cbd5e1;
  background: rgba(148,163,184,.12); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }
.gi-more { cursor: help; color: var(--muted); }
.gi-idline { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.gi-id { display: inline-flex; align-items: center; gap: 5px; max-width: 210px; font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; color: var(--muted); background: rgba(148,163,184,.06); border-radius: 6px; padding: 2px 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gi-id-l { font-family: inherit; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: #64748b; background: rgba(100,116,139,.18); border-radius: 4px; padding: 1px 4px; }
.gi-first { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.gi-first-ic { font-size: 16px; }
.gi-first-t { font-size: 12px; color: var(--muted); }
.gi-first-s { font-size: 12.5px; color: var(--text); margin-top: 2px; }
/* Твинки: маркеры статуса на чипе + тултип */
.tw-chip { display: inline-flex; align-items: center; gap: 5px; }
.tw-chip .tw-m { font-size: 10px; line-height: 1; }
.tw-chip .tw-m-on { color: #4ade80; }
.tw-chip .tw-m-ban { font-size: 11px; }
/* пилюли статуса (перед ником) - работают и в чипе твинка, и в «Основное» */
.tw-ban-r, .tw-on-r { display: inline-flex; align-items: center; margin-right: 5px; font-size: 10.5px;
  border-radius: 5px; padding: 0 5px; white-space: nowrap; vertical-align: middle; }
.tw-ban-r { color: #fca5a5; background: rgba(239,68,68,.18); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.tw-on-r { color: #86efac; background: rgba(74,222,128,.16); }
.tw-online { border-color: rgba(74,222,128,.5); }
.tw-banned { border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.08); }
.tw-banned:hover { border-color: #ef4444; }
.inv-tip .tw-tip-sec { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-top: 6px; }
.inv-tip .tw-tip-row { font-size: 12px; margin-top: 3px; color: var(--text); }
.inv-tip .tw-tip-k { color: var(--muted); }
.inv-tip .tw-tip-row.tw-on { color: #86efac; }
.inv-tip .tw-tip-row.tw-ban { color: #fca5a5; font-weight: 600; }
.tw-cat { margin-bottom: 14px; }
.tw-cat:last-child { margin-bottom: 0; }
.tw-cat-h { display: flex; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 6px; }

/* Таблица игроков */
.search-sm { flex: 0 1 200px; margin-left: auto; padding: 6px 10px; font-size: 13px; background: var(--panel2); }
.card-head .search-sm { margin-left: auto; }
.card-head .geo-select { margin-left: 8px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.row-link { cursor: pointer; }
.row-link:hover td { background: var(--panel2); }
.tr-idx { color: var(--muted); width: 34px; }
.tr-name { font-weight: 600; }
.tr-last { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* База: doughnut + бары */
.doughnut-wrap { position: relative; width: 100%; height: 200px; }
.doughnut-wrap canvas { width: 100% !important; height: 100% !important; }
.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 1fr 90px auto; align-items: center; gap: 10px; font-size: 13px; }
.bar-lbl { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--panel2); height: 6px; border-radius: 3px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); }
.bar-val { color: var(--muted); text-align: right; min-width: 40px; }

/* Новые игроки по дням (режим «Новые за 3 дня» в Точках входа) */
.np-day { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.np-day:last-child { margin-bottom: 0; }
.np-day-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.np-day + .np-day { margin-top: 2px; }

/* Тепловая карта активности */
.heat { display: flex; flex-direction: column; gap: 3px; overflow-x: auto; }
.heat-row { display: grid; grid-template-columns: 34px repeat(24, 1fr); gap: 3px; align-items: center; min-width: 620px; }
.heat-lbl { color: var(--muted); font-size: 12px; }
.heat-h { color: var(--muted); font-size: 10px; text-align: center; }
.heat-cell { height: 20px; border-radius: 3px; }
.heat-tip { position: fixed; z-index: 100; background: var(--panel2); border: 1px solid var(--line); color: var(--text); font-size: 12px; padding: 5px 9px; border-radius: 8px; pointer-events: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.35); }

/* Инвентарь игрока (визуализация как в игре) */
.inv-note { color: var(--amber, #f59e0b); font-size: 12px; margin-bottom: 10px; }
.inv-nodata { color: #f87171; }
.inv-block { margin-bottom: 14px; }
.inv-h { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 6px; }
/* Броня и рука - в один ряд снизу, слоты того же фикс. размера, что инвентарь */
.inv-armorline { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.inv-grid { display: grid; gap: 3px; }
.inv-hotbar { margin-top: 5px; }
.inv-slot { position: relative; aspect-ratio: 1/1; background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: default; }
.inv-slot.empty { background: rgba(120,132,148,0.06); border-style: dashed; }
/* Зачарование: ванильный фиолетовый glint поверх предмета (маска = форма предмета).
   Два диагональных блика разной скорости (как в игре), плавное движение. */
.inv-glint {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
  width: 82%; height: 82%;
  background:
    linear-gradient(115deg, transparent 38%, rgba(190,110,255,.75) 47%, rgba(230,180,255,.95) 50%, rgba(190,110,255,.75) 53%, transparent 62%),
    linear-gradient(115deg, transparent 40%, rgba(150,70,230,.55) 49%, rgba(200,140,255,.8) 50%, rgba(150,70,230,.55) 51%, transparent 60%);
  background-size: 260% 260%, 200% 200%;
  mix-blend-mode: screen;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  pointer-events: none;
  /* медленно переливается туда-обратно (alternate + ease-in-out), без рывка */
  animation: glint-scroll 6.5s ease-in-out infinite alternate;
}
@keyframes glint-scroll {
  from { background-position: 150% -50%, -50% 150%; }
  to   { background-position: -50% 150%,  150% -50%; }
}
.inv-abbr { font-size: 8px; line-height: 1.05; text-align: center; color: var(--muted); padding: 2px; word-break: break-word; align-items: center; justify-content: center; width: 100%; height: 100%; }
.inv-img { width: 82%; height: 82%; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; }
.inv-count { position: absolute; bottom: 0; right: 2px; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 #000; }
.inv-tip { position: fixed; z-index: 250; background: #14161c; border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font-size: 12px; pointer-events: none; max-width: 280px; box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.inv-tip .it-name { font-weight: 700; margin-bottom: 2px; }
.inv-tip .it-sub { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.inv-tip .it-ench { color: #c9b3f0; }
.inv-tip .it-eff { color: #8fd4ff; }
.inv-tip .it-lore { color: #9aa4b2; }
.inv-tip .it-cont-h { color: var(--muted); font-size: 11px; margin: 6px 0 3px; }
.inv-tip .it-cont { display: grid; grid-template-columns: repeat(9, 22px); gap: 2px; }
.it-cont-slot { position: relative; width: 22px; height: 22px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.it-cont-slot img { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; }
.it-cont-slot b { position: absolute; bottom: -2px; right: 1px; font-size: 9px; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 #000; }
.it-cont-txt { font-size: 6px; color: var(--muted); text-align: center; line-height: 1; }

/* Кликабельный контейнер (шалкер) + окно его содержимого */
.inv-container { cursor: pointer; }
.inv-container::before { content: ""; position: absolute; inset: 0; border: 1.5px solid rgba(255,176,32,.55); border-radius: 5px; pointer-events: none; z-index: 2; }
.cont-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cont-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: 0 14px 44px rgba(0,0,0,.55); }
.cont-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.cont-close { border: 0; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.cont-close:hover { color: #fff; }
.cont-body .inv-grid { grid-template-columns: repeat(9, 40px) !important; gap: 4px; }

/* Панель поиска в разделе Игроки */
.players-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }

/* События (действия) */
.events { display: flex; flex-direction: column; gap: 6px; }
.event-row { display: grid; grid-template-columns: 110px 130px 1fr 120px; gap: 10px; align-items: center; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.event-row:last-child { border-bottom: 0; }
.ev-type { color: var(--muted); }
.ev-player { font-weight: 600; }
.ev-desc { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-ts { color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; }
@media (max-width: 820px) {
  .event-row { grid-template-columns: 1fr auto; gap: 4px; }
  .ev-desc, .ev-ts { grid-column: 1 / -1; }
}

/* ─────────── Гео ─────────── */
.geo-summary { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.geo-select { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.geo-map-canvas { position: relative; width: 100%; aspect-ratio: 1.8 / 1; }
.geo-map-canvas canvas { width: 100% !important; height: 100% !important; }
.geo-top { display: flex; flex-direction: column; gap: 4px; }
.geo-row { display: grid; grid-template-columns: 22px 1fr auto 70px 46px; align-items: center; gap: 8px; padding: 5px 2px; font-size: 14px; }
.geo-flag { display: inline-flex; }
.flag { width: 20px; height: 15px; border-radius: 2px; vertical-align: middle; object-fit: cover; }
.geo-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-count { color: var(--text); font-weight: 600; text-align: right; }
.geo-bar { background: var(--panel2); height: 6px; border-radius: 3px; overflow: hidden; }
.geo-bar-fill { display: block; height: 100%; background: var(--accent); }
.geo-pct { color: var(--muted); font-size: 12px; text-align: right; }

/* ─────────── Мобильный: сайдбар оверлеем ─────────── */
@media (max-width: 820px) {
  .burger { display: block; }
  .sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; width: 200px; flex-basis: 200px;
    transform: translateX(-100%); transition: transform .22s ease;
  }
  .sidebar.open { transform: none; }
  .nav-item { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 16px; }
  .nav-ico { font-size: 18px; }
  .nav-label { font-size: 14px; }
  .sidebar-brand { text-align: left; padding-left: 12px; }
  .sidebar-backdrop.show {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 25;
  }
  .content { padding: 14px 12px; }
}

/* ─────────── Логин / гейт ─────────── */
.login-wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; }
.login-box { text-align: center; max-width: 340px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 32px 24px; }
.login-logo { margin-bottom: 12px; }
.login-logo img { width: 100%; max-width: 240px; height: auto; }
.login-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.login-sub { color: var(--muted); font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
.login-err { color: #ff6b6b; font-size: 13px; margin-bottom: 16px; }
.login-btn-wrap { display: flex; justify-content: center; min-height: 46px; }

.gate {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px; z-index: 50;
}
.gate-box { text-align: center; max-width: 320px; }
.gate-emoji { font-size: 44px; margin-bottom: 12px; }
.gate-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.gate-sub { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ─────────── Сотрудники (owner) ─────────── */
#staff-add-btn { margin-left: auto; }
.stf-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--panel2, #171b25); transition: border-color .2s, background .2s; }
.stf-row.stf-off { opacity: .55; }
.stf-row.stf-ok { border-color: #86efac; }
.stf-row.stf-err { border-color: #fca5a5; }
.stf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stf-head > b { font-size: 14px; }
.stf-id { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.stf-note { flex: 1 1 160px; min-width: 120px; background: var(--bg, #0f131a); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text); font-size: 12px; padding: 4px 8px; }
.stf-save { margin-left: auto; }
.stf-del { color: #fca5a5; padding: 4px 9px; }
.stf-views { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; margin-top: 9px;
  padding-top: 9px; border-top: 1px dashed var(--line); }
.stf-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); cursor: pointer; user-select: none; }
.stf-chk input { accent-color: #ffb020; }
.stf-flag { color: #fcd34d; }
.stf-flag input { accent-color: #fcd34d; }
.stf-active { color: #86efac; }
.stf-sep { flex: 1 1 auto; }
/* аватар/имя TG */
.stf-sec { font-size: 13px; font-weight: 700; color: var(--muted); margin: 14px 2px 8px; display: flex; align-items: center; gap: 7px; }
.stf-sec:first-child { margin-top: 2px; }
.stf-sec-n { font-size: 11px; font-weight: 600; background: var(--panel2, #171b25); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.tg-avw { position: relative; width: 34px; height: 34px; flex: 0 0 auto; display: inline-block; }
.tg-av { position: absolute; inset: 0; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.tg-av-ph { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  color: #cbd5e1; background: linear-gradient(135deg, #3b4252, #232833); }
.stf-idn { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.stf-name { color: #ffc857; font-weight: 700; font-size: 14px; text-decoration: none; }
.stf-name:hover { text-decoration: underline; }
.stf-un { color: var(--muted); font-size: 12px; }
.own-list { display: flex; flex-wrap: wrap; gap: 10px; }
.own-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px 8px 8px; background: var(--panel2, #171b25); }
.own-meta { display: flex; flex-direction: column; gap: 2px; }
.own-meta .stf-id { font-size: 10.5px; }

/* ─────────── Поиск предметов ─────────── */
.isr-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.isr-f-lbl { font-size: 12.5px; color: var(--muted); }
.isr-f { background: var(--panel2, #171b25); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; transition: all .15s; }
.isr-f:hover { border-color: #ffb020; }
.isr-f.active { background: rgba(255,176,32,.16); border-color: #ffb020; color: #ffc857; font-weight: 600; }
.isr-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.isr-in { background: var(--bg, #0f131a); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
  font-size: 13px; padding: 7px 10px; flex: 1 1 180px; min-width: 120px; }
.isr-in.isr-sm { flex: 0 0 90px; min-width: 70px; }
.isr-in:focus { outline: none; border-color: #ffb020; }
#isr-go { flex: 0 0 auto; }
.isr-info { font-size: 12.5px; margin-bottom: 10px; }
.isr-info b { color: #86efac; }
.isr-results { display: flex; flex-wrap: wrap; gap: 8px; max-height: 620px; overflow-y: auto; }
.isr-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; background: var(--panel2, #171b25); font-size: 12.5px; }
.isr-pl { color: #ffc857; }
.isr-cnt { color: #fcd34d; font-weight: 700; font-variant-numeric: tabular-nums; }
/* быстрый просмотр инвентаря из поиска */
.cont-box.pi-box { min-width: 340px; max-width: 420px; max-height: 88vh; overflow-y: auto; }
.pi-actions { display: flex; align-items: center; gap: 8px; }
.pi-profile { padding: 3px 12px; font-size: 12px; }
/* подсветка найденного предмета (из поиска) */
.inv-slot.inv-hit { border-color: #22c55e !important; box-shadow: inset 0 0 0 2px #22c55e, 0 0 10px rgba(34,197,94,.6); z-index: 2; }
.inv-slot.inv-hit-in { position: relative; border-color: rgba(34,197,94,.6) !important; box-shadow: inset 0 0 0 2px rgba(34,197,94,.45); }
.inv-slot.inv-hit-in::after { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px;
  border-radius: 50%; background: #22c55e; box-shadow: 0 0 4px #22c55e; }
/* полный дамп предмета по Shift */
.it-hint { margin-top: 6px; font-size: 10px; color: var(--muted); opacity: .65; }
.it-full-h { margin-top: 6px; font-size: 11px; font-weight: 700; color: #ffc857; }
.it-full { margin: 3px 0 0; font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; line-height: 1.35;
  white-space: pre-wrap; word-break: break-word; max-width: 340px; max-height: 320px; overflow: auto; color: var(--text);
  background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }

/* ─────────── Аудит доступа (owner) ─────────── */
#audit-staff, #audit-days { margin-left: 8px; }
.audit-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-left: 10px; cursor: pointer; }
.audit-counters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.aud-cnt { font-size: 12px; background: var(--panel2, #171b25); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; color: var(--muted); }
.aud-cnt b { color: var(--text); }
.aud-cnt-s { border-color: rgba(252,165,165,.4); }
.aud-s { color: #fca5a5; }
.audit-rows { max-height: 620px; overflow-y: auto; font-variant-numeric: tabular-nums; }
.aud-row { display: grid; grid-template-columns: 150px 130px 1fr 110px 44px 120px; gap: 8px; align-items: center;
  padding: 4px 6px; border-bottom: 1px solid var(--line); font-size: 11.5px; white-space: nowrap; }
.aud-row:hover { background: var(--panel2, #171b25); }
.aud-sens { border-left: 3px solid #fca5a5; padding-left: 3px; }
.aud-ts { color: var(--muted); }
.aud-who { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.aud-path { color: #ffc857; overflow: hidden; text-overflow: ellipsis; }
.aud-target { color: #fcd34d; overflow: hidden; text-overflow: ellipsis; }
.aud-st { text-align: center; color: #86efac; }
.aud-bad .aud-st { color: #fca5a5; }
.aud-ip { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .aud-row { grid-template-columns: 1fr auto; }
  .aud-ts, .aud-ip, .aud-target { display: none; }
}


/* Город -> Google Карты: нейтральная пилюля в стиле онлайн-плашки (не зелёная) */
.datapoint b a.geo-pill { display: inline-flex; align-items: center; font-size: 11px; line-height: 1.6;
  border-radius: 5px; padding: 0 6px; margin-right: 6px; white-space: nowrap; vertical-align: middle;
  color: var(--text); background: var(--panel2); border: 1px solid var(--line); text-decoration: none; }
.datapoint b a.geo-pill:hover { border-color: var(--accent); color: #fff; }

/* Под-вкладки поиска (Предметы / Валюты) */
.srch-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.srch-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted);
  font-size: 14px; padding: 8px 14px; margin-bottom: -1px; cursor: pointer; }
.srch-tab:hover { color: var(--text); }
.srch-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
/* Кнопки выбора валюты - как поля предметов */
.cur-f { background: var(--panel2, #171b25); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; transition: all .15s; }
.cur-f:hover { border-color: #ffb020; }
.cur-f.active { background: rgba(255,176,32,.16); border-color: #ffb020; color: #ffc857; font-weight: 600; }
/* Бейдж валюты в результатах */
.cur-badge { font-size: 10.5px; border-radius: 5px; padding: 0 6px; background: var(--panel2);
  color: var(--muted); border: 1px solid var(--line); }
.cur-money { color: #86efac; }
.cur-tokens { color: #ffc857; }
.cur-rubles { color: #fcd34d; }

/* Поиск по устройствам: кнопки полей (как валюты), textarea, значение */
.dev-f { background: var(--panel2, #171b25); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; transition: all .15s; }
.dev-f:hover { border-color: #ffb020; }
.dev-f.active { background: rgba(255,176,32,.16); border-color: #ffb020; color: #ffc857; font-weight: 600; }
.isr-form-col { flex-direction: column; align-items: flex-start; }
.isr-area { width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.5; }
.isr-cnt.dev-val { color: var(--muted); font-weight: 400; font-variant-numeric: normal;
  font-family: ui-monospace, Consolas, monospace; }

/* Динамические поля значений устройства (растут по мере ввода) */
.dev-values { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; max-width: 520px; }
.dev-row { display: flex; align-items: center; gap: 6px; }
.dev-row .dev-val-in { flex: 1 1 auto; }
.dev-rm { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px;
  padding: 4px 8px; border-radius: 8px; line-height: 1; }
.dev-rm:hover { color: #f87171; background: var(--panel2); }
/* Тумблеры совпадения/сессий - как поля */
.dev-m, .dev-s { background: var(--panel2, #171b25); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; transition: all .15s; }
.dev-m:hover, .dev-s:hover { border-color: #ffb020; }
.dev-m.active, .dev-s.active { background: rgba(255,176,32,.16); border-color: #ffb020; color: #ffc857; font-weight: 600; }
.dev-scope { display: inline-flex; gap: 6px; align-items: center; margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--line); }

/* Per-field поля ввода устройства (показ по активному ползунку, авто-рост) */
.dev-inputs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; max-width: 560px; }
.dev-in-block { display: flex; flex-direction: column; gap: 4px; }
.dev-in-block label { font-size: 12px; color: var(--muted); }
.dev-ta { flex: none; width: 100%; box-sizing: border-box; resize: none; overflow: hidden;
  height: 38px; min-height: 38px;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.5; }

/* Дата последнего входа в результатах поиска устройств */
.dev-last-lbl { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* АФК-бейдж у «Наиграно» (пилюля в стиле онлайн-плашки, приглушённый янтарь) */
.afk-badge { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600;
  border-radius: 5px; padding: 1px 6px; margin-right: 6px; vertical-align: middle; white-space: nowrap;
  color: #d8b06a; background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.22); }