/* style.css */
/* Тема в стиле старого headlinecs.ru: тёмно-синий космос + фиолетовый акцент */
/* Тема старого headlinecs.ru (шаблон standart): звёздный фон fon1, тёмно-синие блоки, фиолетовый акцент */
:root {
  --bg: #0b0d24;
  --bg2: #0f1126;
  --card: #15183a;
  --card2: #1a1d3d;
  --line: rgba(155, 109, 255, .18);
  --line2: rgba(155, 109, 255, .32);
  --text: #e0e3f0;
  --muted: #a8aec5;
  --muted2: #6c7290;
  --accent: #9b6dff;
  --accent2: #b794ff;
  --green: #2ecc71;
  --green2: #4ade80;
  --red: #ef4444;
  --amber: #f59e0b;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: #1b1838 url(/assets/img/fon1.jpg) no-repeat center center fixed; background-size: cover; min-height: 100%; }
body {
  background: transparent;
  color: var(--text);
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent2); text-decoration: none; }
a:hover { color: #d4c2ff; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 14px; font-weight: 600; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
p { margin: 0 0 12px; }
code { background: rgba(155,109,255,.12); padding: 1px 6px; border-radius: 6px; font-size: .92em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.online { color: var(--green2); }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.main { flex: 1; padding-top: 26px; padding-bottom: 30px; }

/* ---------- шапка как на старом сайте: меню по центру (иконка над подписью), справа колокольчик и плашка профиля ---------- */
.header {
  position: sticky; top: 0; z-index: 1200; padding: 10px 0;
  background: rgba(14, 16, 36, .82);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(155, 109, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 30px -22px rgba(0,0,0,.9);
}
.header-in { display: flex; align-items: center; gap: 12px; min-height: 50px; }
.nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.nav-item {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 14px; min-width: 64px; border-radius: 10px; border: 0; background: transparent; cursor: pointer;
  font: 600 11.5px/1.15 "Segoe UI", system-ui, sans-serif; letter-spacing: .2px; color: #9498b8; white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.nav-item > i:first-child { font-size: 19px; color: var(--accent); transition: color .16s ease; }
.nav-item:hover { background: rgba(155,109,255,.12); color: #fff; }
.nav-item:hover > i:first-child { color: var(--accent2); }
.nav-item.active, .dd.open > .nav-item { background: rgba(155,109,255,.14); color: #fff; }
.nav-item::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, #9b6dff, #b794ff); transform: scaleX(0); opacity: 0; transition: transform .2s ease, opacity .2s ease;
}
.nav-item:hover::after, .nav-item.active::after, .dd.open > .nav-item::after { transform: scaleX(1); opacity: 1; }
.nav-item .caret { position: absolute; top: 9px; right: 4px; font-size: 9px; color: #9498b8; margin: 0; transition: transform .2s; }
.dd.open > .nav-item .caret { transform: rotate(180deg); }
.caret { font-size: 10px; margin-left: 4px; color: var(--muted2); }

.dd { position: relative; }
.dd-menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 210px; padding: 6px; background: #14162e; border: 1px solid rgba(155,109,255,.20); border-radius: 12px;
  z-index: 2000; box-shadow: 0 12px 30px rgba(0,0,0,.42);
}
.nav-dd .dd-menu { left: 50%; transform: translateX(-50%); }
.dd-right .dd-menu { left: auto; right: 0; }
.dd-center .dd-menu { left: 50%; transform: translateX(-50%); }
.dd.open .dd-menu { display: block; animation: ddIn .16s ease; }
@keyframes ddIn { from { opacity: 0; margin-top: -6px; } to { opacity: 1; margin-top: 0; } }
.dd-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px; color: #c0c0e0; font-size: 13px; font-weight: 500; white-space: nowrap; }
.dd-menu a i { width: 18px; text-align: center; color: var(--accent); font-size: 15px; }
.dd-menu a:hover { background: rgba(155,109,255,.14); color: #fff; }
.dd-menu a:hover i { color: var(--accent2); }
.dd-menu .dd-strong { font-weight: 700; color: #fff; background: rgba(255,255,255,.03); }
.dd-menu .dd-money, .dd-menu .dd-money i { color: #2ecc71; font-weight: 600; }
.dd-sep { height: 1px; background: rgba(255,255,255,.06); margin: 5px 4px; }

.userbox { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.bell-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0;
  border-radius: 11px; background: rgba(155,109,255,.12); border: 1px solid rgba(155,109,255,.30); color: var(--accent2);
  font-size: 17px; cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.bell-btn:hover, .dd.open > .bell-btn { background: rgba(155,109,255,.22); border-color: rgba(155,109,255,.5); color: #c9b3ff; }
.bell-count {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; border: 2px solid #0f1126;
}
.profile-pill {
  position: relative; display: flex; align-items: center; height: 46px; max-width: 260px; padding: 0 30px 0 0;
  border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(155,109,255,.20); overflow: hidden;
  font: inherit; cursor: pointer; transition: background .16s ease, border-color .16s ease;
}
.profile-pill:hover, .dd.open > .profile-pill { background: rgba(155,109,255,.14); border-color: rgba(155,109,255,.40); }
.profile-pill::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; pointer-events: none;
  border-right: 2px solid #9498b8; border-bottom: 2px solid #9498b8; transform: translateY(-65%) rotate(45deg); transition: transform .2s ease, border-color .2s ease;
}
.dd.open > .profile-pill::after { transform: translateY(-35%) rotate(-135deg); border-color: var(--accent2); }
.pp-ava { flex: 0 0 46px; width: 46px; height: 46px; object-fit: cover; font-size: 18px; }
.pp-point { position: absolute; top: 4px; left: 4px; width: 9px; height: 9px; border-radius: 50%; background: #ff4d6a; border: 2px solid #14162e; }
.pp-role, .hl-card-bar { display: none; }
.pp-name { padding-left: 12px; font-size: 13.5px; font-weight: 700; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ava-letter { display: grid; place-items: center; background: linear-gradient(135deg, #2b2463, #1a1d3d); color: var(--accent2); font-weight: 700; }
.burger { display: none; position: relative; width: 42px; height: 42px; padding: 0; border-radius: 11px; background: rgba(255,255,255,.03); border: 1px solid rgba(155,109,255,.16); cursor: pointer; }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 11px; width: 18px; height: 2px; border-radius: 2px; background: var(--accent2); content: ""; }
.burger span { top: 19px; }
.burger span::before { top: -6px; left: 0; }
.burger span::after { top: 6px; left: 0; }

/* шторка уведомлений под колокольчиком */

/* ---------- кнопки, формы ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--accent), #7c3aed); color: #fff; border: 0; border-radius: 11px;
  padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: filter .15s, transform .15s;
}
.btn:hover { filter: brightness(1.12); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 7px 14px; font-size: 14px; }
.btn-ghost { background: rgba(26,29,61,.8); color: var(--text); border: 1px solid var(--line2); }
.btn-ghost:hover { background: rgba(155,109,255,.12); color: var(--text); }
.btn-outline { background: transparent; color: var(--accent2); border: 1px solid var(--accent); }
.btn-outline:hover { background: var(--accent); color: #fff; }
.btn-danger { background: var(--red); }
.btn-steam { background: #171a21; border: 1px solid #2a475e; }
.btn-steam:hover { background: #2a475e; }
.btn-block { width: 100%; }

.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-weight: 500; font-size: 14px; }
.form .hint { color: var(--muted); font-weight: 400; font-size: 13px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=file], select, textarea {
  width: 100%; background: rgba(11, 13, 36, .8); color: var(--text);
  border: 1px solid var(--line2); border-radius: 11px; padding: 10px 12px; font: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(155,109,255,.15); }
textarea { min-height: 140px; resize: vertical; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1; min-width: 150px; }
.row > .btn { flex: 0 0 auto; }
.radio-row { display: flex; gap: 16px; flex-wrap: wrap; }
.radio-row label { display: flex; align-items: center; gap: 6px; font-weight: 400; }

/* ---------- карточки ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}
.card + .card { margin-top: 16px; }
[class*="grid"] > .card + .card, .layout-side > .card + .card { margin-top: 0; }
/* Заголовок блока как block_head старого сайта: по центру, с линией снизу */
.card-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -4px -20px 18px; padding: 0 20px 14px; border-bottom: 1px solid rgba(155,109,255,.12); }
.card-title:not(:has(> :nth-child(2))) { justify-content: center; }
.card-title h1, .card-title h2, .card-title h3 { margin: 0; font-size: 18px; font-weight: 600; }
.block-title { font-size: 17px; font-weight: 600; }
.card > .block-title:first-child { text-align: center; margin: -4px -20px 16px; padding: 0 20px 14px; border-bottom: 1px solid rgba(155,109,255,.12); }
.card-title .block-title { font-size: 18px; }
.block-title a { color: var(--text); }
.section-title { margin-bottom: 16px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.layout-side { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.narrow { max-width: 440px; margin: 0 auto; }
.empty { color: var(--muted); text-align: center; padding: 26px 0; }

.alert { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; border: 1px solid; }
.alert-success { background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .35); color: #86efac; }
.alert-error { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .35); color: #fca5a5; }
.alert-info { background: rgba(155, 109, 255, .1); border-color: var(--line2); color: #d4c2ff; }

/* ---------- мониторинг: карточки серверов как на старом сайте ---------- */
.monitor { margin-bottom: 30px; }
.mon-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mon-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mon-tabs button , .mon-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mon-tabs button span , .mon-tabs a span { min-width: 22px; padding: 1px 7px; border-radius: 8px; background: rgba(155,109,255,.16); color: var(--accent2); font-size: 12px; }
.mon-tabs button:hover , .mon-tabs a:hover { color: var(--text); }
.mon-tabs button.active , .mon-tabs a.active { background: rgba(155,109,255,.18); color: #fff; border-color: var(--accent); }
.mon-tabs button.active span , .mon-tabs a.active span { background: var(--accent); color: #fff; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch span { width: 34px; height: 19px; border-radius: 10px; background: #2a2d55; position: relative; transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #8b8fb3; transition: transform .15s, background .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(15px); background: #fff; }
.hl-servers-grid { display: flex; flex-wrap: wrap; gap: 14px; width: 100%; }
.hl-servers-grid > .hl-server-card { flex: 1 1 280px; max-width: 360px; min-width: 240px; }
.hl-server-card {
  position: relative; display: flex; align-items: stretch; overflow: hidden; min-height: 110px; cursor: pointer;
  border-radius: 14px; background: linear-gradient(135deg, #15183a 0%, #0a0a1a 100%); border: 1px solid rgba(155,109,255,.25);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.hl-server-card:hover { transform: translateY(-2px); border-color: var(--accent2); box-shadow: 0 8px 24px rgba(155,109,255,.35); }
.hl-card-img { position: relative; width: 40%; min-width: 110px; flex-shrink: 0; overflow: hidden; background: #1a0f2e linear-gradient(135deg, #2a1a4a 0%, #1a1230 50%, #0a0a1a 100%); }
.hl-card-img-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(21,24,58,.9) 100%); }
.hl-card-noimg { display: none; }
.hl-card-img.no-img { background: linear-gradient(135deg, #8a8f99, #4b4f5c); }
.hl-card-img.no-img .hl-card-noimg {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; text-align: center;
  font: 800 13px/1.05 Impact, "Arial Black", sans-serif; color: #fff; text-transform: uppercase; letter-spacing: .5px; text-shadow: 0 2px 0 #333;
}
.hl-card-noimg b { font-size: 25px; color: #d13cff; text-shadow: 2px 2px 0 #4a1060; margin-bottom: 4px; }
.hl-card-heart { position: absolute; top: 6px; left: 8px; z-index: 1; color: #ff3a6e; font-size: 16px; filter: drop-shadow(0 0 6px rgba(255,58,110,.6)); }
.hl-card-body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; padding: 10px 12px; min-width: 0; }
.hl-card-name { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; }
.hl-card-num { display: inline-flex; align-items: center; justify-content: center; flex: none; background: linear-gradient(135deg, #9b6dff 0%, #6d3fcc 100%); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; box-shadow: 0 2px 6px rgba(155,109,255,.4); }
.hl-card-map { font-size: 11px; color: var(--accent2); font-family: Consolas, ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.hl-card-players-pill { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 8px; box-shadow: 0 2px 6px rgba(46,204,113,.3); white-space: nowrap; }
.hl-card-players-pill i { font-size: 10px; }
.hl-card-players-pill.off { background: #3b3f63; box-shadow: none; color: var(--muted); }
.hl-card-copy-mini {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer;
  background: rgba(155,109,255,.18); border: 1px solid rgba(155,109,255,.4); border-radius: 10px; color: var(--accent2); font-size: 12px; transition: .2s;
}
.hl-card-copy-mini:hover { background: rgba(155,109,255,.3); color: #fff; }
.hl-card-copy-mini.copied, .hl-modal-btn-copy.copied { background: rgba(62,207,110,.2); border-color: #3ecf6e; color: #3ecf6e; }
.hl-card-play {
  margin-left: auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); border-radius: 10px; color: #fff; font-size: 13px; box-shadow: 0 3px 10px rgba(46,204,113,.4); transition: .2s;
}
.hl-card-play:hover { transform: scale(1.05); color: #fff; box-shadow: 0 5px 14px rgba(46,204,113,.55); }
.hl-empty { width: 100%; padding: 40px 20px; text-align: center; color: var(--accent2); background: linear-gradient(135deg, #1a0f2e 0%, #0a0a1a 100%); border: 1px dashed rgba(155,109,255,.3); border-radius: 14px; }

/* окно сервера со списком игроков */
.hl-modal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5,5,15,.85); backdrop-filter: blur(8px); }
.hl-modal-overlay[hidden] { display: none; }
.hl-modal { width: 100%; max-width: 760px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(135deg, #15183a 0%, #0a0a1a 100%); border: 1px solid rgba(155,109,255,.4); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: modalIn .25s ease; }
@keyframes modalIn { from { transform: scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }
.hl-modal-header { position: relative; display: flex; align-items: center; gap: 16px; min-height: 110px; padding: 18px 22px; background: center / cover; border-bottom: 1px solid rgba(155,109,255,.25); }
.hl-modal-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(21,24,58,.92) 0%, rgba(10,10,26,.95) 100%); }
.hl-modal-header > * { position: relative; z-index: 1; }
.hl-modal-refresh { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(155,109,255,.15); border: 1px solid rgba(155,109,255,.4); border-radius: 50%; color: var(--accent2); cursor: pointer; font-size: 14px; transition: .3s; }
.hl-modal-refresh:hover { transform: rotate(180deg); color: #fff; background: rgba(155,109,255,.3); }
.hl-modal-map-icon { width: 70px; height: 70px; flex-shrink: 0; border-radius: 14px; background: linear-gradient(135deg, #9b6dff 0%, #6d3fcc 100%) center / cover; box-shadow: 0 6px 20px rgba(155,109,255,.45); }
.hl-modal-stats { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hl-modal-stat-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 12px; color: #c0c0e0; }
.hl-modal-stat-row b { color: #fff; font-weight: 700; }
.hl-modal-server-name { font-size: 15px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 36px; }
.hl-modal-header .hl-modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: #fff; font-size: 18px; cursor: pointer; transition: .2s; }
.hl-modal-close:hover { background: rgba(255,51,102,.3); border-color: #ff3366; }
.hl-modal-body { flex: 1; overflow-y: auto; }
.hl-players-loader { text-align: center; padding: 40px 0; color: var(--accent2); }
.hl-empty-players { padding: 40px 20px; text-align: center; color: #888aa0; }
.hl-players-table thead { background: rgba(155,109,255,.08); }
.hl-players-table th { padding: 10px 14px; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--accent2); border-bottom: 1px solid rgba(155,109,255,.15); }
.hl-players-table td { padding: 11px 14px; font-size: 13px; color: var(--text); border-bottom: 1px solid rgba(155,109,255,.06); }
.hl-players-table tr > :first-child { padding-left: 22px; }
.hl-players-table tr > :last-child { padding-right: 22px; text-align: right; }
.hl-players-table .col-rank { width: 32px; color: #888aa0; font-weight: 700; font-family: Consolas, monospace; }
.hl-players-table .col-name { font-weight: 600; }
.hl-players-table .col-frags { width: 70px; font-weight: 800; color: #ffcc00; font-family: Consolas, monospace; }
.hl-players-table .col-time { width: 90px; font-family: Consolas, monospace; font-size: 12px; color: #c0c0e0; }
.hl-modal-footer { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 22px; background: rgba(10,10,26,.5); border-top: 1px solid rgba(155,109,255,.2); }
.hl-modal-btn { flex: 1; min-width: 140px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 10px; border: none; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; transition: .2s; }
.hl-modal-btn-play { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); color: #fff; box-shadow: 0 4px 14px rgba(46,204,113,.45); }
.hl-modal-btn-play:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 6px 18px rgba(46,204,113,.6); }
.hl-modal-btn-copy { background: rgba(155,109,255,.15); border: 1px solid rgba(155,109,255,.4); color: var(--accent2); }
.hl-modal-btn-copy:hover { background: rgba(155,109,255,.3); color: #fff; }
@media (max-width: 580px) {
  .hl-modal-header { flex-wrap: wrap; }
  .hl-modal-map-icon { width: 50px; height: 50px; }
  .hl-players-table .col-time { display: none; }
}

/* ---------- главная: колонка слева + контент ---------- */
.with-side { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.side .card + .card { margin-top: 16px; }
.side-user { padding: 18px; }
.su-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--text); }
.su-ava { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line2); flex: 0 0 auto; }
.su-head b { display: block; font-size: 16px; }
.su-head small { font-weight: 600; }
.su-balance {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; padding: 12px 14px;
  background: rgba(10, 12, 32, .7); border: 1px solid var(--line); border-radius: 12px;
}
.su-balance > i { color: var(--accent); font-size: 20px; }
.su-balance span { flex: 1; display: grid; }
.su-balance small { color: var(--muted); font-size: 12px; }
.su-plus { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.su-plus:hover { color: #fff; filter: brightness(1.1); }
.side-menu { display: grid; gap: 6px; }
.side-menu a {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px;
  background: rgba(10, 12, 32, .55); color: var(--text); font-weight: 500; font-size: 14px;
}
.side-menu a i { color: var(--accent); width: 18px; text-align: center; }
.side-menu a:hover { background: rgba(155,109,255,.12); }
.side-login h3 { text-align: center; }
.mini-user { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--text); }
.mini-user + .mini-user { border-top: 1px solid rgba(155,109,255,.08); }
.mu-ava { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.mini-user span { display: grid; min-width: 0; }
.mini-user b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-user small { font-size: 12px; }
.mini-user .mu-stats { display: flex; gap: 12px; color: #f472b6; }
.mini-user .mu-stats span { display: inline-flex; gap: 5px; align-items: center; }

/* слайдер карточками */
.slider { position: relative; margin-bottom: 16px; }
.slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.slider-track::-webkit-scrollbar { display: none; }
.slide {
  position: relative; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; scroll-snap-align: start;
  background: #1a1d3d center / cover no-repeat; border: 1px solid var(--line); display: flex; align-items: flex-end;
  transition: transform .2s;
}
.slide:hover { transform: translateY(-3px); }
.slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 35%, rgba(0,0,0,1)); }
.slide-text { position: relative; padding: 0 24px 20px; color: #fff; display: grid; justify-items: start; gap: 4px; }
.slide-text b { font-size: 1.5rem; font-weight: 600; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.slide-text small { font-size: 14px; color: #e5e7f5; }
.slide-more { margin-top: 10px; padding: 9px 20px; border-radius: 10px; background: linear-gradient(135deg, #a97dff, #7b4fe0); color: #fff; font-weight: 700; font-size: 13px; box-shadow: 0 6px 18px rgba(155,109,255,.4); }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.slider-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.25); cursor: pointer; transition: .2s; }
.slider-dots button.active { width: 26px; border-radius: 6px; background: var(--accent); }
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line2); background: rgba(15,18,48,.85); color: var(--text); cursor: pointer; z-index: 2;
}
.slider-arrow.prev { left: -12px; }
.slider-arrow.next { right: -12px; }

/* форма отправки в личных сообщениях (чат на главной — в chat.css) */
.chat-form { display: flex; gap: 10px; margin-top: 12px; }

/* новости, события */
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.news-card { display: grid; gap: 6px; padding: 14px; border-radius: 12px; background: rgba(10, 12, 32, .55); border: 1px solid var(--line); color: var(--text); }
.news-card:hover { border-color: var(--line2); color: var(--text); }
.news-excerpt { color: var(--muted); font-size: 14px; }
.news-item h2 a { color: var(--text); }
.news-date { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.event { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; font-size: 14px; }
.event + .event { border-top: 1px solid rgba(155,109,255,.08); }

/* ---------- таблицы ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
td.actions { white-space: nowrap; text-align: right; }
td.actions form { display: inline; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--card2); color: var(--muted); }
.badge-green { background: rgba(34, 197, 94, .14); color: var(--green2); }
.badge-red { background: rgba(239, 68, 68, .14); color: #f87171; }
.badge-accent { background: rgba(155, 109, 255, .18); color: var(--accent2); }
.pager { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.pager a, .pager span { padding: 6px 12px; border-radius: 9px; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.pager a.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- магазин ---------- */

/* ---------- правила ---------- */

/* ---------- люди ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.person { display: grid; justify-items: center; gap: 4px; padding: 14px 10px; border-radius: 14px; background: rgba(10,12,32,.5); color: var(--text); text-align: center; }
.person:hover { background: rgba(155,109,255,.1); color: var(--text); }
.people-big .person { margin: 0 !important; }
.person b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.person small { color: var(--muted); font-size: 12px; }
.person-ava { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line2); }
.person-ava.ava-letter { font-size: 24px; }

/* ---------- профиль ---------- */
.profile-head { display: flex; gap: 20px; align-items: center; }
.big-ava { width: 88px; height: 88px; border-radius: 20px; object-fit: cover; background: var(--card2); display: grid; place-items: center; font-size: 34px; font-weight: 700; color: var(--accent2); border: 2px solid var(--line2); }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }
.price-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }

/* ---------- админка ---------- */
.slides-admin { display: grid; gap: 12px; }
.sa-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 14px; align-items: center; }
.sa-img { width: 80px; height: 100px; border-radius: 10px; background: #1a1d3d center / cover; }
details summary { cursor: pointer; color: var(--accent2); font-size: 13px; }

/* ---------- футер старого сайта ---------- */
.footer { position: relative; overflow: hidden; margin-top: 50px; padding: 40px 0 20px; background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2a 100%); border-top: 3px solid #ff3366; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #ff3366, #3366ff, transparent); background-size: 200% 100%; animation: shine 3s infinite linear; }
@keyframes shine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.footer-grid { display: grid; grid-template-columns: 5fr 2.4fr 2fr 2.6fr; gap: 24px; }
.footer-logo img { max-height: 60px; filter: drop-shadow(0 0 10px rgba(255,51,102,.5)); transition: .3s; }
.footer-logo:hover img { transform: scale(1.05); filter: drop-shadow(0 0 15px rgba(255,51,102,.8)); }
.footer-brand { margin-top: 14px; color: #ffcc00; font-size: 17px; font-weight: 700; }
.footer-about p { color: #88aaff; font-size: 13px; margin-top: 5px; }
.footer strong { position: relative; display: block; margin-bottom: 15px; padding-bottom: 8px; color: #ffcc00; font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 1px; }
.footer strong::after { content: ""; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #ff3366, #3366ff); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 10px; }
.footer ul li a { position: relative; display: block; padding: 5px 0; border-radius: 4px; color: #c0c0ff; transition: .3s; }
.footer ul li a:hover { color: #fff; background: rgba(255,51,102,.1); padding-left: 10px; transform: translateX(5px); }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; font-size: 17px; transition: .3s; }
.footer-social a:hover { transform: translateY(-3px); color: #fff; }
.footer-social a.vk:hover { background: #0077ff; }
.footer-social a.telegram:hover { background: #229ed9; }
.footer-social a.discord:hover { background: #5865f2; }
.footer-copyright-line { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); text-align: center; color: #88aaff; font-size: 13px; }
.footer-copyright-line .heart { display: inline-block; color: #ff3366; animation: heartbeat 1.5s infinite; }
@keyframes heartbeat { 50% { transform: scale(1.15); } }
.footer-valve { margin-top: 8px; text-align: center; opacity: .6; font-size: 13px; }
.footer-valve a { color: #e1a111; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }

@media (max-width: 1100px) {
  .with-side { grid-template-columns: 1fr; }
  .side { order: 2; }
  .slider-track { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 960px) {
  .header { padding: 8px 0; }
  .header-in { flex-wrap: wrap; justify-content: space-between; }
  .burger { display: block; }
  .nav { display: none; order: 5; flex: 0 0 100%; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; margin-top: 6px; }
  .nav.open { display: flex; }
  .nav-item { flex-direction: row; justify-content: flex-start; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 9px; font-size: 13px; }
  .nav-item > i:first-child { font-size: 16px; width: 20px; text-align: center; }
  .nav-item::after { display: none; }
  .nav-item .caret { position: static; margin-left: auto; }
  .nav .dd-menu, .nav-dd .dd-menu { position: static; transform: none; box-shadow: none; margin: 2px 0 2px 14px; }
  .layout-side, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .profile-pill { height: 42px; max-width: 150px; padding-right: 26px; }
  .pp-ava { flex-basis: 42px; width: 42px; height: 42px; }
  .pp-name { max-width: 80px; font-size: 12.5px; }
  .dd-center .dd-menu { position: fixed; top: 62px; left: 10px; right: 10px; width: auto; transform: none; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 8px; }
}
@media (max-width: 600px) {
  .hl-servers-grid > .hl-server-card { max-width: none; }
  .slider-track { grid-auto-columns: 78%; }
  .news-grid { grid-template-columns: 1fr; }
  .slider-arrow { display: none; }
}

.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; margin-left: 4px; }

/* ---------- вкладки ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-weight: 500; }
.tabs a:hover { color: var(--text); }
.tabs a.active { background: rgba(155,109,255,.18); border-color: var(--accent); color: #fff; }
.inline-form { display: inline; margin: 0; }
.link-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 7px; }
.link-btn:hover { color: var(--accent2); background: rgba(155,109,255,.08); }

/* ---------- профиль ---------- */
.profile-top { padding: 0; overflow: hidden; }
.cover { height: 220px; background: linear-gradient(120deg, #2b1857, #1a1d3d 45%, #3b1f6e) center / cover no-repeat; position: relative; }
.profile-top .profile-head { padding: 0 24px; margin-top: -48px; align-items: flex-end; flex-wrap: wrap; position: relative; }
.profile-top .big-ava { width: 112px; height: 112px; border-radius: 24px; border: 4px solid #12153a; flex: 0 0 auto; }
.big-ava.ava-letter { font-size: 42px; }
.ph-main { flex: 1; min-width: 200px; padding-bottom: 6px; }
.ph-main h1 { margin: 0 0 6px; }
.ph-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ph-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; }
.ph-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; margin-top: 20px; border-top: 1px solid var(--line); background: var(--line); }
.ph-stats div, .ph-stats .ph-stat-link { background: #12153a; padding: 14px 18px; display: grid; color: var(--text); }
.ph-stats .ph-stat-link:hover { background: #171a44; }
.ph-stats b { font-size: 20px; }
.ph-stats .money { color: var(--green2); }
.ph-stats small { color: var(--muted); font-size: 12px; }
.profile-body { margin-top: 20px; }
.friends-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.friends-mini a { display: grid; justify-items: center; gap: 4px; color: var(--muted); min-width: 0; }
.friends-mini small { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-ava { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; }
.contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.contact { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(10,12,32,.55); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.contact i { font-size: 22px; color: var(--accent); }
.contact span { display: grid; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.contact small { color: var(--muted); font-size: 11px; }
.copyable { cursor: pointer; }
.cover-preview { height: 150px; border-radius: 12px; display: flex; align-items: flex-end; padding: 12px; margin-bottom: 14px; }
.cover-preview .big-ava { width: 72px; height: 72px; border-radius: 16px; border: 3px solid #12153a; }
.upload-row { display: flex; gap: 8px; flex-wrap: wrap; }
.upload-form { margin: 0; }
.upload-form label { cursor: pointer; }

/* ---------- друзья, сообщения, уведомления ---------- */
.friend-row, .dialog-row, .notif-row { display: flex; align-items: center; gap: 14px; padding: 12px 8px; border-radius: 12px; color: var(--text); }
.friend-row + .friend-row, .dialog-row + .dialog-row, .notif-row + .notif-row { border-top: 1px solid rgba(155,109,255,.08); }
.fr-info { flex: 1; display: grid; min-width: 0; }
.fr-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dialog-row:hover, .notif-row:hover { background: rgba(155,109,255,.07); color: var(--text); }
.dialog-row.unread { background: rgba(155,109,255,.1); }
.dr-main { flex: 1; display: grid; min-width: 0; }
.dr-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-side { display: grid; justify-items: end; gap: 4px; }
.notif-row i { width: 34px; height: 34px; border-radius: 10px; background: rgba(155,109,255,.14); color: var(--accent2); display: grid; place-items: center; flex: 0 0 auto; }
.notif-row span { flex: 1; }
.notif-row.unread { background: rgba(155,109,255,.08); }
.dialog { display: flex; flex-direction: column; height: calc(100vh - 170px); min-height: 420px; }
.dialog-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dm-list { flex: 1; overflow-y: auto; padding: 14px 4px; display: flex; flex-direction: column; gap: 6px; }
.dm { display: flex; }
.dm-mine { justify-content: flex-end; }
.dm-bubble { max-width: min(560px, 80%); padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: #1d2150; overflow-wrap: anywhere; }
.dm-mine .dm-bubble { background: linear-gradient(135deg, #7c4dff, #6d28d9); border-radius: 14px 14px 4px 14px; }
.dm-time { display: block; font-size: 10px; color: rgba(255,255,255,.55); text-align: right; margin-top: 2px; }
.dialog .chat-form textarea { min-height: 44px; height: 44px; resize: none; }

@media (max-width: 600px) {
  .icon-btn { width: 40px; height: 40px; }
  .cover { height: 140px; }
  .profile-top .profile-head { padding: 0 16px; }
  .profile-top .big-ava { width: 88px; height: 88px; }
  .friend-row { flex-wrap: wrap; }
}

[hidden]{display:none !important}

/* Заявки */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.req { color: var(--red); }
.ticket-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ticket-head > div { flex: 1; }
.ticket-fields { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px 16px; margin: 0; }
.ticket-fields dt { color: var(--muted); font-size: 14px; }
.ticket-fields dd { margin: 0; word-break: break-word; }
.badge-yellow { background: rgba(245,158,11,.15); color: #fcd34d; }
.badge-blue { background: rgba(59,130,246,.15); color: #93c5fd; }
.badge-gray { background: rgba(148,163,184,.12); color: #cbd5e1; }

code.copyable { cursor: pointer; }

@media (max-width: 760px) {
  .form-grid, .ticket-fields { grid-template-columns: 1fr; }
}

/* Общее для этапа 3 */
.btn-lg { padding: 14px 28px; font-size: 16px; }
.thumb { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; vertical-align: middle; margin-right: 6px; }
.row-active td { background: rgba(155,109,255,.08); }
.mini-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 14px; }
.mini-row + .mini-row { border-top: 1px solid rgba(155,109,255,.08); }
.mini-row b { color: var(--green2); }
.form label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.modal { position: fixed; inset: 0; background: rgba(5,6,20,.7); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal-box { position: relative; width: 100%; max-width: 440px; background: var(--card); border: 1px solid var(--line2); border-radius: var(--radius); padding: 24px; }
.modal-box h3 { margin-top: 0; }
.modal-x { position: absolute; top: 12px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; }

/* Достижения и стрик */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ach { display: flex; gap: 12px; padding: 12px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); border-left: 3px solid var(--rarc, #9ca3af); opacity: .55; }
.ach.done { opacity: 1; }
.ach.secret { border-style: dashed; }
.ach[data-rarity="rare"] { --rarc: #60a5fa; }
.ach[data-rarity="epic"] { --rarc: #c084fc; }
.ach[data-rarity="legendary"] { --rarc: #fbbf24; }
.ach > i { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(155,109,255,.12); color: var(--rarc, var(--accent2)); font-size: 18px; }
.ach > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ach small { color: var(--muted); font-size: 12px; }
.ach-ok { color: var(--green2); font-size: 12px; font-weight: 600; }
.ach-bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 4px; }
.ach-bar span { display: block; height: 100%; background: var(--accent); }
.streak-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.1); color: #fcd34d; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.streak-badge.lvl-0 { filter: grayscale(1); opacity: .7; }
.streak-badge.lvl-5, .streak-badge.lvl-6 { color: #fb923c; border-color: #fb923c; box-shadow: 0 0 10px rgba(251,146,60,.35); }
.streak-ladder { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 16px 0; }
.streak-ladder div { display: grid; justify-items: center; gap: 4px; padding: 8px 0; border-radius: 10px; background: var(--card2); color: var(--muted2); }
.streak-ladder div.on { color: #fb923c; background: rgba(251,146,60,.12); }
.streak-ladder small { font-size: 11px; }

/* Profile Plus */
.nick-grad { background-clip: text; -webkit-background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
.dd-menu a.dd-plus i { color: #c084fc; }



.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.seg { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--bg2); margin-bottom: 12px; }
.seg button { flex: 1; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.seg button.active { background: #fff; color: #12153a; }
.donor { position: relative; }
.donor .place { margin-left: auto; font-style: normal; font-weight: 800; font-size: 18px; color: rgba(255,255,255,.12); }
.donor .place.p1 { color: #fbbf24; }
.donor .place.p2 { color: #cbd5e1; }
.donor .place.p3 { color: #d97706; }

/* ---------- общие мелочи: крошки, строки «ключ — значение», цитата, мелкие кнопки, выбор иконки ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumbs i { font-size: 9px; color: var(--muted2); }
.kv-row { display: flex; justify-content: space-between; padding: 7px 0; color: var(--muted); }
.kv-row + .kv-row { border-top: 1px solid var(--line); }
.kv-row b { color: var(--text); }
.btn-xs { padding: 4px 10px; font-size: 13px; border-radius: 8px; }
.bb-quote { margin: 8px 0; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: rgba(155,109,255,.08); color: var(--muted); }
.bb-quote-by { font-weight: 600; color: var(--accent2); font-size: 13px; margin-bottom: 4px; }
.bb-help { padding-left: 18px; color: var(--muted); line-height: 2; }
.icon-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.form .icon-pick label { display: block; cursor: pointer; }
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); }
.icon-pick input:checked + i { border-color: var(--accent); color: #fff; background: rgba(155,109,255,.2); }

/* ---------- статистика ---------- */
.stats-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.stats-search { gap: 6px; flex-wrap: nowrap; align-items: center; }
.stats-search > * { min-width: 0; }
.stats-search .btn { flex: 0 0 auto; width: auto; height: 42px; }
.stats-search input { width: 220px; }
.stats-table td { vertical-align: middle; }
.stats-nick a { color: var(--text); font-weight: 600; }
.stats-nick a:hover { color: var(--accent2); }
.stats-nick .stats-site { color: var(--green2); font-size: 13px; }
.stats-table .place { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; background: var(--card2); font-weight: 700; font-size: 13px; color: var(--muted); }
.stats-table .place.p1 { background: rgba(251,191,36,.18); color: #fbbf24; }
.stats-table .place.p2 { background: rgba(203,213,225,.15); color: #e2e8f0; }
.stats-table .place.p3 { background: rgba(217,119,6,.18); color: #f59e0b; }
.stats-hero { display: flex; align-items: center; gap: 18px; }
.stats-hero h1 { margin: 0 0 2px; }
.sh-img { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 18px; object-fit: cover; font-size: 30px; }
.sh-main { flex: 1; min-width: 0; }
.sh-place { display: flex; flex-direction: column; align-items: center; padding: 10px 18px; border-radius: 14px; background: rgba(155,109,255,.12); }
.sh-place b { font-size: 28px; color: var(--accent2); line-height: 1.1; }
.sh-place small { color: var(--muted); font-size: 12px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 16px; }
.stats-grid .card + .card { margin-top: 0; }
.stat-tile { display: flex; flex-direction: column; gap: 2px; padding: 16px; }
.stat-tile i { color: var(--accent2); font-size: 18px; margin-bottom: 6px; }
.stat-tile b { font-size: 22px; }
.stat-tile small { color: var(--muted); }
@media (max-width: 600px) {
  .stats-search, .stats-search input { width: 100%; }
  .stats-hero { flex-wrap: wrap; }
}

/* ---------- кланы ---------- */
.clan-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.clan-totals .card + .card { margin-top: 0; }
.clan-totals .card { display: flex; flex-direction: column; gap: 2px; padding: 16px; }
.clan-totals i { color: var(--accent2); font-size: 18px; margin-bottom: 6px; }
.clan-totals b { font-size: 22px; }
.clan-totals small { color: var(--muted); }
.clan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.clan-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--line); color: var(--text); transition: transform .15s, border-color .15s; }
.clan-card:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--text); }
.cc-banner { position: relative; height: 96px; background: linear-gradient(135deg, #2b2463, #160f33) center/cover; }
.cc-place, .cc-level { position: absolute; top: 10px; padding: 3px 9px; border-radius: 8px; font-size: 12px; font-weight: 700; background: rgba(10,12,34,.75); }
.cc-place { left: 10px; }
.cc-place.p1 { color: #fbbf24; } .cc-place.p2 { color: #e2e8f0; } .cc-place.p3 { color: #f59e0b; }
.cc-level { right: 10px; color: var(--accent2); }
.cc-body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px 16px; }
.cc-ava { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; margin-top: -32px; border-radius: 16px; object-fit: cover; border: 3px solid var(--card); font-size: 24px; }
.cc-name { margin-top: 8px; font-weight: 700; font-size: 17px; }
.cc-slogan { margin-top: 2px; }
.cc-stats { display: flex; gap: 14px; margin-top: 10px; color: var(--muted); }
.cc-stats i { color: var(--accent2); }
.clan-tag { color: var(--accent2); }
.clan-hero { padding: 0; overflow: hidden; }
.ch-banner { height: 170px; background: linear-gradient(135deg, #2b2463, #160f33) center/cover; }
.ch-row { display: flex; align-items: flex-end; gap: 16px; padding: 0 20px 18px; }
.ch-ava { position: relative; z-index: 1; display: grid; place-items: center; width: 100px; height: 100px; margin-top: -50px; border-radius: 22px; object-fit: cover; border: 4px solid var(--card); font-size: 38px; flex: 0 0 auto; }
.ch-main { flex: 1; min-width: 0; }
.ch-main h1 { margin: 0; }
.clan-rank { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--card2); color: var(--muted); }
.clan-rank.r1 { color: #93c5fd; background: rgba(59,130,246,.14); }
.clan-rank.r2 { color: var(--accent2); background: rgba(155,109,255,.16); }
.clan-rank.r3 { color: #fbbf24; background: rgba(251,191,36,.15); }
@media (max-width: 760px) {
  .clan-totals { grid-template-columns: repeat(2, 1fr); }
  .ch-row { flex-wrap: wrap; align-items: center; }
  .ch-banner { height: 110px; }
}

/* ---------- роли, состав, вакансии ---------- */
.role-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--rc); background: color-mix(in srgb, var(--rc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent); white-space: nowrap; }
.fp-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.fp-roles:empty { display: none; }
.team-rank { margin: 14px 0 6px; font-weight: 700; color: var(--accent2); }
.team-rank:first-of-type { margin-top: 0; }
.points-pick { display: inline-flex; gap: 2px; }
.points-pick button { min-width: 34px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 7px; background: none; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.points-pick button.active { background: rgba(34,197,94,.16); border-color: var(--green); color: var(--green2); }
.vac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.vac-grid .card + .card { margin-top: 0; }
.vac-card { display: flex; flex-direction: column; }
.vac-card h3 { margin-top: 0; }
.vac-text p { margin: 0 0 8px; color: var(--muted); }
.vac-req { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(155,109,255,.07); }
.vac-req p { margin: 4px 0 0; color: var(--muted); }
.vac-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; }
.vac-info { padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: rgba(155,109,255,.08); }
.vac-info div { color: var(--muted); margin-top: 4px; }
.vac-app + .vac-app { margin-top: 12px; }
.vf-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.vf-row { display: grid; gap: 6px; padding: 10px; border: 1px dashed var(--line2); border-radius: 12px; }
.vf-row .btn { justify-self: end; }

/* ============ PROFILE (как на старом сайте) ============ */
.pp-wrap {
  --pp-accent: #9b6dff;
  --pp-accent-2: #b794ff;
  --pp-green: #2ecc71;
  --pp-red: #ff6b7a;
  --pp-card: rgba(18, 16, 38, 0.66);
  --pp-card-2: rgba(10, 10, 26, 0.5);
  --pp-bd: rgba(155, 109, 255, 0.14);
  --pp-bd-2: rgba(155, 109, 255, 0.28);
  --pp-txt: #ececf5;
  --pp-txt-dim: #7d7f96;
  --pp-txt-soft: #b8bad0;
  --pp-tile: rgba(155, 109, 255, 0.05);
  color: var(--pp-txt);
}



/* ---------- сетка ---------- */
.pp-grid { display: flex; gap: 12px; align-items: flex-start; }
.pp-side { width: 270px; flex: 0 0 270px; }
.pp-main { flex: 1 1 auto; min-width: 0; }

/* ---------- большой баннер-обложка (над всем профилем) ---------- */
.pp-cover {
  height: 210px;
  border-radius: 16px;
  margin-bottom: 14px;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(155, 109, 255, 0.4), transparent 60%),
    linear-gradient(135deg, #201840, #13122a);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--pp-bd);
  position: relative;
  overflow: hidden;
}
.pp-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10, 10, 26, 0.5));
  pointer-events: none;
}
@media (max-width: 991px) { .pp-cover { height: 160px; } }
@media (max-width: 560px) { .pp-cover { height: 110px; border-radius: 12px; margin-bottom: 10px; } }

/* соц-иконки в правом нижнем углу баннера (видны если поле заполнено) */
.pp-socials {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.pp-social {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 10, 26, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff !important;
  font-size: 15px;
  text-decoration: none !important;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: 0.18s;
  padding: 0;
}
.pp-social:hover { background: var(--pp-accent); border-color: var(--pp-accent); transform: translateY(-2px); color: #fff !important; }
.pp-social.is-copied { background: var(--pp-green); border-color: var(--pp-green); }
@media (max-width: 560px) {
  .pp-socials { right: 10px; bottom: 8px; gap: 6px; }
  .pp-social { width: 30px; height: 30px; font-size: 13px; }
}

/* ---------- карточка ---------- */
.pp-card {
  background: var(--pp-card);
  border: 1px solid var(--pp-bd);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.pp-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pp-txt);
  border-bottom: 1px solid var(--pp-bd);
}
.pp-card__head::before {
  content: '';
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--pp-accent);
  flex: 0 0 auto;
}
.pp-card__head a { color: var(--pp-txt) !important; text-decoration: none !important; }

/* ============================================================
   ЛЕВАЯ КАРТОЧКА ПОЛЬЗОВАТЕЛЯ
   ============================================================ */
.pp-usercard { position: relative; }

.pp-usercard__top {
  position: relative;
  padding: 16px 14px 12px;
  text-align: center;
}
.pp-uava {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--pp-accent);
  box-shadow: 0 0 0 3px rgba(18, 16, 38, 0.95);
  background: #13122a;
}
.pp-nick {
  margin-top: 7px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  word-break: break-word;
  line-height: 1.2;
}
.pp-group { font-size: 11px; font-weight: 600; opacity: 0.85; margin-top: 1px; }
.pp-status {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 9px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 600;
  color: var(--pp-txt-dim);
  background: var(--pp-card-2);
  border: 1px solid var(--pp-bd);
}
.pp-status--online {
  color: #fff;
  background: rgba(46, 204, 113, 0.15);
  border-color: rgba(46, 204, 113, 0.4);
  color: #5fe0a0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* шестерёнка настроек */
.pp-gear {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  color: #fff !important;
  background: rgba(10, 10, 26, 0.55);
  border: 1px solid var(--pp-bd-2);
  transition: 0.2s;
  z-index: 3;
}
.pp-gear:hover { background: var(--pp-accent); }

/* баланс / скидка */
.pp-money {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 14px 10px;
  background: var(--pp-card-2);
  border: 1px solid var(--pp-bd);
  border-radius: 9px;
  overflow: hidden;
}
.pp-money__item { padding: 8px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.pp-money__item + .pp-money__item { border-left: 1px solid var(--pp-bd); }
.pp-money__label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pp-txt-dim);
}
.pp-money__val { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }
.pp-money__val i { margin-right: 3px; font-size: 11px; }
.pp-money__val--bal i { color: #ffcc00; }
.pp-money__val--proc i { color: var(--pp-green); }

/* кнопки действий */
.pp-actions { display: flex; flex-direction: column; gap: 4px; padding: 0 14px 14px; }
.pp-act {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--pp-tile);
  border: 1px solid rgba(155, 109, 255, 0.1);
  color: var(--pp-txt-soft) !important;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  transition: 0.15s;
}
.pp-act:hover { background: rgba(155, 109, 255, 0.13); border-color: var(--pp-bd-2); color: #fff !important; }
.pp-act > .m-icon, .pp-act > i { width: 15px; min-width: 15px; text-align: center; color: var(--pp-accent-2); font-size: 11px; }
.pp-act--danger { color: var(--pp-red) !important; }
.pp-act--danger > .m-icon, .pp-act--danger > i { color: var(--pp-red); }
.pp-act--admin { background: rgba(155, 109, 255, 0.1); border-color: rgba(155, 109, 255, 0.18); color: #fff !important; }

/* блок статистики */
.pp-stats__grid { padding: 10px 14px; display: flex; flex-direction: column; gap: 7px; }
.pp-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 11px;
  background: var(--pp-card-2);
  border: 1px solid var(--pp-bd);
  border-radius: 8px;
}
.pp-stat__label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--pp-txt-dim); }
.pp-stat__label i { color: var(--pp-accent-2); font-size: 12px; }
.pp-stat__val { font-size: 13px; font-weight: 700; }

/* бейджи значений */
.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 12px;
}
.pp-badge--w0 { background: rgba(46, 204, 113, 0.13); color: #6ee7b7; border: 1px solid rgba(110, 231, 183, 0.28); }
.pp-badge--w1 { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.28); }
.pp-badge--w2 { background: rgba(251, 146, 60, 0.12); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.28); }
.pp-badge--w3 { background: rgba(252, 165, 165, 0.12); color: #fca5a5; border: 1px solid rgba(252, 165, 165, 0.28); }
.pp-badge--p0 { background: rgba(120, 120, 140, 0.12); color: #8a8aa0; border: 1px solid rgba(120, 120, 140, 0.22); }
.pp-badge--p1 { background: rgba(74, 222, 128, 0.12); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.28); }
.pp-badge--p2 { background: rgba(96, 165, 250, 0.12); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.28); }
.pp-badge--p3 { background: rgba(232, 121, 249, 0.12); color: #e879f9; border: 1px solid rgba(232, 121, 249, 0.28); }
.pp-badge--time { background: rgba(52, 211, 153, 0.11); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.28); }
.pp-badge--muted { opacity: 0.55; }
.pp-loading { font-size: 11px; color: var(--pp-txt-dim); animation: ppPulse 1.4s ease-in-out infinite; }
@keyframes ppPulse { 0%,100%{opacity:1} 50%{opacity:0.45} }

/* друзья (родной {friends}: <a.small-friend><img></a>) — компактно */
.pp-friends__body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 11px 14px;
  max-height: 120px;
  overflow-y: auto;
}
.pp-friends__body .small-friend { display: inline-flex; }
.pp-friends__body .small-friend img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--pp-bd-2);
  transition: 0.15s;
}
.pp-friends__body .small-friend:hover img { border-color: var(--pp-accent); transform: translateY(-1px); }
.pp-friends__body .empty-element { font-size: 11px; color: var(--pp-txt-dim); }

/* ============================================================
   ПРАВАЯ КОЛОНКА — табы + секции
   ============================================================ */
.pp-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  padding: 4px;
  background: var(--pp-card);
  border: 1px solid var(--pp-bd);
  border-radius: 11px;
}
.pp-tab {
  flex: 1 1 auto;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--pp-txt-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: 0.15s;
}
.pp-tab:hover { color: #fff; background: var(--pp-tile); }
.pp-tab.active { color: #fff; background: var(--pp-accent); }

.pp-tabpane { display: none; }
.pp-tabpane.is-active { display: block; animation: ppFade 0.2s ease; }
@keyframes ppFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* секции внутри инфо-карточки */
.pp-sections { padding: 14px; display: flex; flex-direction: column; gap: 18px; }
.pp-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--pp-accent-2);
  margin-bottom: 9px;
}
.pp-section__title::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--pp-accent); }

/* строки данных — плитками */
.pp-rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pp-row {
  background: var(--pp-tile);
  border: 1px solid rgba(155, 109, 255, 0.09);
  border-radius: 9px;
  padding: 8px 12px;
  min-width: 0;
}
.pp-row--full { grid-column: 1 / -1; }
.pp-row__k {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pp-txt-dim);
  margin-bottom: 4px;
}
.pp-row__v {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  word-break: break-word;
  display: flex;
  align-items: center;
  gap: 7px;
}
.pp-row__v a { color: var(--pp-accent-2) !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; }
.pp-row__v a:hover { color: #fff !important; }
.pp-row__v img { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--pp-bd-2); }

/* кнопка копирования SteamID */
.pp-copy {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(155, 109, 255, 0.1);
  border: 1px solid var(--pp-bd);
  color: var(--pp-accent-2);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
}
.pp-copy:hover { background: var(--pp-accent); color: #fff; }
.pp-copy.is-done { background: var(--pp-green); color: #fff; border-color: transparent; }

/* старые css-tabs (история покупок / привилегии) */
.pp-main .tabs { margin-top: 2px; }
.pp-main .table { background: transparent !important; }
.pp-main .table td { color: var(--pp-txt-soft) !important; border-color: rgba(155, 109, 255, 0.08) !important; font-size: 12px; }

/* ---------- адаптив ---------- */
@media (max-width: 991px) {
  .pp-grid { flex-direction: column; }
  .pp-side { width: 100%; flex: 1 1 auto; }
}
@media (max-width: 560px) {
  .pp-rows { grid-template-columns: 1fr; }
  .pp-tab { font-size: 11px; padding: 8px 9px; }
}

/* скроллбар внутри профиля */
.pp-wrap ::-webkit-scrollbar { width: 5px; height: 5px; }
.pp-wrap ::-webkit-scrollbar-thumb { background: rgba(155, 109, 255, 0.35); border-radius: 3px; }
.pp-wrap ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }

/* PROFILE: дополнения для нового сайта */
.pp-wrap .pp-uava { display: inline-grid; place-items: center; font-size: 28px; font-weight: 700; color: var(--pp-accent-2); }
.pp-tab { text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pp-tab .count { font-size: 10px; opacity: .75; }
.pp-streak { position: absolute; top: 10px; left: 12px; z-index: 3; font-size: 11px; }
.pp-medals { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 8px; }
.pp-actions .inline-form { display: block; margin: 0; }
.pp-actions .btn.pp-act { height: auto; min-height: 0; justify-content: flex-start; box-shadow: none; font-weight: 500; }
a.pp-stat { color: inherit; text-decoration: none; }
a.pp-stat:hover { border-color: var(--pp-bd-2); }
.pp-friends__body .pp-fava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--pp-bd-2); display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--pp-accent-2); background: #13122a; transition: .15s; }
.pp-friends__body .small-friend:hover .pp-fava { border-color: var(--pp-accent); transform: translateY(-1px); }
.pp-about { font-size: 13px; color: var(--pp-txt-soft); line-height: 1.55; }
.pp-pad { padding: 14px; }
.pp-main .card { background: var(--pp-card); border-color: var(--pp-bd); }
.side-events .event { grid-template-columns: 18px 1fr; font-size: 12.5px; align-items: start; line-height: 1.4; }
.side-events .event i { margin-top: 3px; }

/* ============ Колокольчик и меню профиля, как на старом сайте ============ */
.notif-panel { width: 345px; max-width: 94vw; padding: 0; overflow: hidden; background: #15152e; border: 1px solid rgba(155,109,255,.22); border-radius: 14px; }
.np-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.np-title { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: #fff; }
.np-title i { color: #9498b8; font-size: 13px; }
.np-actions { display: flex; gap: 5px; margin: 0; }
.np-actions button { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12); color: #c0c0e0; font: inherit; font-size: 11px; font-weight: 600; padding: 6px 9px; border-radius: 8px; cursor: pointer; }
.np-actions button:hover { background: rgba(255,255,255,.08); color: #fff; }
.np-actions .np-close { width: 30px; padding: 6px 0; }
.np-list { max-height: 62vh; overflow-y: auto; padding: 6px; display: grid; gap: 6px; }
.np-item { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 12px 30px 12px 12px; border-radius: 11px; background: #1b1b38; border: 1px solid rgba(155,109,255,.14); }
.np-item:hover { border-color: rgba(155,109,255,.34); }
.np-item:not(.read)::before { content: ""; position: absolute; left: 3px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.np-item.read .np-body { opacity: .6; }
.np-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(155,109,255,.14); color: var(--accent2); font-size: 14px; }
.dd-menu a.np-body { display: grid; gap: 3px; min-width: 0; padding: 0; background: none; white-space: normal; border-radius: 0; }
.dd-menu a.np-body:hover { background: none; }
.np-cat { font-size: 11px; font-weight: 700; color: #8b8da8; }
.np-text { font-size: 12.5px; font-weight: 600; color: #e4e5f2; line-height: 1.4; }
.np-date { font-size: 10.5px; color: #6c7290; margin-top: 3px; }
.np-del { position: absolute; top: 9px; right: 8px; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: #6c7290; font-size: 12px; cursor: pointer; border-radius: 5px; }
.np-del:hover { color: #ff6b7a; background: rgba(255,107,122,.12); }
.np-empty { text-align: center; padding: 34px 16px; color: #888aa0; font-size: 13px; display: grid; gap: 10px; }
.np-empty i { font-size: 30px; opacity: .35; }
.dd-menu a.np-all { justify-content: center; color: var(--accent2); border-top: 1px solid rgba(255,255,255,.06); border-radius: 0; font-size: 12px; }

.dd-right > .dd-menu { width: 215px; padding: 6px; display: none; background: #15152e; border: 1px solid rgba(155,109,255,.22); border-radius: 14px; }
.dd-right.open > .dd-menu { display: grid; gap: 4px; }
.dd-right > .dd-menu a { padding: 9px 11px; border-radius: 9px; background: #1b1b38; border: 1px solid rgba(155,109,255,.12); font-size: 12.5px; font-weight: 600; color: #c8c9e0; }
.dd-right > .dd-menu a:hover { background: #24234a; border-color: rgba(155,109,255,.34); }
.dd-right > .dd-menu .dd-strong { color: #fff; text-transform: uppercase; font-weight: 800; background: #24234a; border-color: rgba(155,109,255,.34); }
.dd-right > .dd-menu .dd-money { color: #2ecc71; }
.dd-right > .dd-menu .dd-wheel, .dd-right > .dd-menu .dd-wheel i { color: #f5c542; }
.dd-right > .dd-menu .dd-promo { color: #b794ff; }
.dd-right > .dd-menu .dd-exit, .dd-right > .dd-menu .dd-exit i { color: #ff6b7a; }
.dd-right > .dd-menu .dd-sep { margin: 2px 4px; }
.verified-ico { color: #38bdf8; font-size: .85em; margin-left: 3px; vertical-align: 1px; }
.seg a { flex: 1; text-align: center; color: var(--muted); font-size: 12px; font-weight: 600; padding: 6px 8px; border-radius: 8px; }
.seg a.active { background: #fff; color: #12153a; }
.side-more { display: block; text-align: center; margin-top: 10px; font-size: 12.5px; font-weight: 600; }
/* Наши услуги (cardstore со старого сайта) */
.cs-head { text-align: center; margin: 6px 0 22px; }
.cs-head h1 { margin: 0 0 6px; font-size: 30px; background: linear-gradient(135deg, #8b9cff, #9b6dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-head p { margin: 0; color: #b8b8d4; }
.cs-grid { display: grid; gap: 16px; }
.cs-card { position: relative; display: flex; align-items: center; gap: 26px; padding: 22px 26px; border-radius: 15px; overflow: hidden;
  background: linear-gradient(135deg, rgba(26,26,46,.95), rgba(20,20,35,.95)); border: 2px solid rgba(102,126,234,.3); box-shadow: 0 8px 30px rgba(0,0,0,.4); color: inherit; transition: .3s; }
.cs-card:hover { transform: translateY(-4px); border-color: rgba(102,126,234,.6); box-shadow: 0 15px 45px rgba(102,126,234,.3); }
.cs-img { flex: 0 0 150px; height: 170px; border-radius: 12px; background: center / cover no-repeat #1d1b3a; }
.cs-info h2 { margin: 0 0 8px; font-size: 22px; color: #fff; }
.cs-info p { margin: 0 0 16px; color: #b8b8d4; line-height: 1.5; }
.cs-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font-weight: 700; }
.cs-badge { position: absolute; top: 14px; right: 14px; padding: 6px 16px; border-radius: 25px; background: linear-gradient(135deg, #f39c12, #e74c3c); color: #fff; font-weight: 700; font-size: 13px; animation: csPulse 2s infinite; }
@keyframes csPulse { 50% { transform: scale(1.05); } }
@media (max-width: 600px) { .cs-card { flex-direction: column; text-align: center; padding: 18px; } .cs-img { flex-basis: auto; width: 100%; height: 160px; } }

/* переключатель оформления в админке */
.theme-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }

/* ---------- всплывающие уведомления (hlToast) ---------- */
.hl-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.hl-toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #1a1d3d; border: 1px solid var(--line); color: var(--text); font-size: 14px; line-height: 1.4; box-shadow: 0 12px 30px rgba(0,0,0,.45); transform: translateY(12px); opacity: 0; transition: transform .25s, opacity .25s; pointer-events: auto; }
.hl-toast.show { transform: none; opacity: 1; }
.hl-toast i { margin-top: 2px; color: var(--accent2); }
.hl-toast.ok i { color: #4ade80; }
.hl-toast.err { border-color: rgba(248,113,113,.45); }
.hl-toast.err i { color: #f87171; }
/* ---------- BB-коды в описаниях ---------- */
.bb-img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 6px 0; }
.bb-code { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,.3); font: 13px/1.5 Consolas, monospace; white-space: pre-wrap; overflow-x: auto; }
.bb-spoiler { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.bb-spoiler summary { cursor: pointer; color: var(--accent2); font-weight: 600; }
.bb-list { margin: 6px 0; padding-left: 20px; }

/* shop.css */
/* Магазин привилегий: обе темы. Классика — перенос store-cards.css старого сайта (тёмно-синие карточки, акцент #9b6dff),
   неон — переопределения под .neon ниже. Классы .sc-* (витрина, корзина, «Мои привилегии», прайс-лист) и .sa-*, .sl-* (админка). */

/* ================= витрина ================= */
.sc-shop { display: flex; gap: 20px; align-items: flex-start; }

/* сайдбар слева */
.sc-side {
  flex: 0 0 230px; position: sticky; top: 90px; max-height: calc(100vh - 106px); overflow-y: auto;
  background: #131530; border: 1px solid rgba(155,109,255,.12); border-radius: 14px; padding: 14px;
  scrollbar-width: thin;
}
.sc-side-h { color: #6f7398; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; margin: 4px 0 9px; }
.sc-servers + .sc-side-h { margin-top: 18px; }
.sc-servers { display: flex; flex-direction: column; gap: 6px; }
.sc-srv {
  display: block; text-align: left; background: transparent; border: 1px solid transparent; color: #a7abcf;
  border-radius: 9px; padding: 9px 12px; font-size: 14px; font-weight: 500; line-height: 1.35;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sc-srv i { color: var(--accent); font-size: 12px; margin-right: 2px; }
.sc-srv:hover { background: rgba(155,109,255,.07); color: #fff; }
.sc-srv.active { background: rgba(155,109,255,.14); color: #fff; border-color: rgba(155,109,255,.35); font-weight: 600; }
.sc-sort { display: flex; flex-direction: column; gap: 4px; }
.sc-sort-b { display: block; color: #7a7f99; border-radius: 7px; padding: 7px 10px; font-size: 13px; transition: background .15s, color .15s; }
.sc-sort-b:hover { color: #fff; }
.sc-sort-b.active { background: rgba(155,109,255,.1); color: #b794ff; }
.sc-cart-btn {
  width: 100%; margin-top: 16px; background: #9b6dff; border: none; color: #fff; font: inherit;
  border-radius: 10px; padding: 11px; font-weight: 600; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s ease, transform .15s ease;
}
.sc-cart-btn:hover { background: #8a58f5; }
.sc-cart-btn.bump, .sc-cart-fab.bump { animation: scBump .45s ease; }
@keyframes scBump { 30% { transform: scale(1.05); } 60% { transform: scale(.98); } }
.sc-badge { background: rgba(255,255,255,.22); color: #fff; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 20px; min-width: 20px; text-align: center; }
.sc-wallet { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(155,109,255,.12); }
.sc-wallet .sc-side-h { margin-top: 0; }
.sc-wallet-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sc-wallet-row b { color: var(--green2, #4ade80); font-size: 16px; font-weight: 700; white-space: nowrap; }
.sc-topup {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
  background: rgba(155,109,255,.14); border: 1px solid rgba(155,109,255,.35); color: #fff; white-space: nowrap;
}
.sc-topup:hover { background: rgba(155,109,255,.26); color: #fff; }
.sc-login { display: flex; justify-content: center; padding: 10px; font-size: 13px; }
.sc-mydisc { margin-top: 8px; font-size: 12px; color: var(--accent2); }
.sc-links { display: grid; gap: 2px; margin-top: 12px; }
.sc-links a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: #a7abcf; font-size: 13px; font-weight: 500; }
.sc-links a i { width: 16px; text-align: center; color: var(--accent); }
.sc-links a:hover { background: rgba(155,109,255,.08); color: #fff; }

/* основная часть */
.sc-cards { flex: 1 1 auto; min-width: 0; }
.sc-title { margin: 2px 0 14px; font-size: 20px; color: #fff; }
.sc-promo {
  display: flex; align-items: center; gap: 13px; margin-bottom: 16px; padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(155,109,255,.24), rgba(155,109,255,.05)); border: 1px solid rgba(155,109,255,.32);
}
.sc-promo > i { font-size: 22px; color: #ffb86b; filter: drop-shadow(0 0 8px rgba(255,140,60,.5)); }
.sc-promo b { display: block; color: #fff; font-size: 14.5px; }
.sc-promo span { color: #a7abcf; font-size: 12.5px; }
.sc-promo a { color: #fff; text-decoration: underline; }
.sc-pane-note { margin: 0 0 12px; color: #8f93b4; font-size: 13px; }
.sc-pane-note i { color: var(--accent); margin-right: 4px; }
.sc-empty { color: #6f7398; text-align: center; padding: 36px 16px; font-size: 14px; border: 1px dashed rgba(155,109,255,.18); border-radius: 12px; }
.sc-empty-big { display: grid; gap: 10px; justify-items: center; padding: 60px 16px; }
.sc-empty-big i { font-size: 30px; color: var(--accent); }
.sc-foot-note { margin: 18px 0 0; color: #6f7398; font-size: 12.5px; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sc-zone { margin-bottom: 24px; min-width: 0; }
.sc-zone-title {
  color: #c0c0e0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; line-height: 1.3;
  margin: 0 0 12px; padding-left: 11px; border-left: 3px solid #9b6dff;
}
.sc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* карточка */
.sc-card {
  background: #171a35; border: 1px solid rgba(155,109,255,.13); border-radius: 12px;
  display: flex; flex-direction: column; min-width: 0;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.sc-card:hover { border-color: rgba(155,109,255,.34); transform: translateY(-2px); }
.sc-card.added { border-color: rgba(155,109,255,.6); box-shadow: 0 0 0 3px rgba(155,109,255,.16); }
.sc-card-head { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; padding: 14px 15px 10px; margin: 0; overflow-wrap: anywhere; }
.sc-card-body { padding: 0 15px 15px; display: flex; flex-direction: column; gap: 13px; flex: 1 1 auto; }
.sc-card-desc {
  color: #9296b2; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere;
  max-height: 78px; overflow: hidden; position: relative;
}
.sc-card-desc.has-more:not(.expanded) { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.sc-card-desc.expanded { max-height: none; }
.sc-card-desc ul, .sc-card-desc ol { margin: 2px 0; padding-left: 18px; }
.sc-card-desc p { margin: 0 0 4px; }
.sc-card-desc .bb-img { margin: 6px 0; }
.sc-desc-more { align-self: flex-start; background: none; border: none; color: #b794ff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 0; margin-top: -6px; }
.sc-desc-more:hover { color: #9b6dff; text-decoration: underline; }
.sc-card-img { display: block; border-radius: 9px; overflow: hidden; border: 1px solid rgba(155,109,255,.14); cursor: zoom-in; background: #0f1128; }
.sc-card-img img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.sc-card-img:hover img { transform: scale(1.02); }

/* тарифы */
.sc-tars { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-tar {
  background: transparent; border: 1px solid rgba(155,109,255,.22); color: #a7abcf; font: inherit;
  border-radius: 8px; padding: 6px 11px; font-size: 12.5px; cursor: pointer; transition: all .13s ease;
}
.sc-tar:hover { border-color: rgba(155,109,255,.5); color: #fff; }
.sc-tar.active { background: rgba(155,109,255,.16); border-color: #9b6dff; color: #fff; font-weight: 600; }
.sc-tar:focus-visible, .sc-buy:focus-visible, .sc-srv:focus-visible, .sc-sort-b:focus-visible { outline: 2px solid #b794ff; outline-offset: 2px; }

/* низ карточки */
.sc-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; line-height: 1; min-width: 0; }
.sc-price b { color: #fff; font-size: 20px; font-weight: 700; white-space: nowrap; }
.sc-cur { color: #7a7f99; font-size: 13px; }
.sc-old { color: #5f6486; font-size: 12px; margin-left: 3px; }
.sc-pct { align-self: center; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; color: #ff8fa3; background: rgba(255,77,106,.13); }
.sc-buy {
  background: transparent; border: 1px solid #9b6dff; color: #b794ff; font: inherit;
  border-radius: 9px; padding: 8px 16px; font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background .15s ease, color .15s ease; white-space: nowrap;
}
.sc-buy:hover { background: #9b6dff; color: #fff; }

/* кнопка корзины на телефоне */
.sc-cart-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 900; display: none; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: 14px; border: 0; background: #9b6dff; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 0 12px 30px -8px rgba(155,109,255,.7);
}

/* ================= корзина ================= */
.sc-cart-overlay {
  position: fixed; inset: 0; background: rgba(5,5,15,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  z-index: 10000; opacity: 0; transition: opacity .22s ease;
}
.sc-cart-overlay.open { opacity: 1; }
.sc-cart {
  position: fixed; top: 0; right: 0; height: 100%; width: 380px; max-width: 92vw; z-index: 10001;
  background: #0f1128; border-left: 1px solid rgba(155,109,255,.2); box-shadow: -20px 0 50px -20px rgba(0,0,0,.8);
  transform: translateX(105%); visibility: hidden; transition: transform .26s cubic-bezier(.4,0,.2,1), visibility 0s .26s;
  display: flex; flex-direction: column; outline: none;
}
.sc-cart.open { transform: translateX(0); visibility: visible; transition: transform .26s cubic-bezier(.4,0,.2,1), visibility 0s; }
body.sc-lock { overflow: hidden; }
.sc-cart-head {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  color: #fff; font-size: 16px; font-weight: 600; border-bottom: 1px solid rgba(155,109,255,.14);
}
.sc-cart-head span i { color: var(--accent); margin-right: 4px; }
.sc-cart-close { background: rgba(255,255,255,.08); border: none; color: #fff; width: 32px; height: 32px; border-radius: 8px; font-size: 16px; cursor: pointer; }
.sc-cart-close:hover { background: rgba(255,255,255,.16); }
.sc-cart-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px; }
.sc-cart-empty { display: grid; justify-items: center; gap: 10px; color: #6f7398; text-align: center; padding: 50px 0; font-size: 14px; }
.sc-cart-empty i { font-size: 34px; color: rgba(155,109,255,.45); }
.sc-ci { background: #171a35; border: 1px solid rgba(155,109,255,.13); border-radius: 10px; padding: 11px 13px; margin-bottom: 9px; }
.sc-ci-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.sc-ci-name { color: #fff; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.sc-ci-x { flex: none; background: transparent; border: none; color: #ff6b7a; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.sc-ci-x:hover { background: rgba(255,107,122,.14); }
.sc-ci-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #83879f; padding: 2px 0; }
.sc-ci-row .v { color: #c0c0e0; text-align: right; overflow-wrap: anywhere; }
.sc-ci-price { color: #b794ff; font-weight: 600; white-space: nowrap; }
.sc-ci-price s { color: #5f6486; font-weight: 400; margin-right: 5px; }
.sc-cart-foot { border-top: 1px solid rgba(155,109,255,.14); padding: 14px 18px 16px; max-height: 72vh; overflow-y: auto; }
.sc-cart-foot:empty { display: none; }
.sc-total-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 0; color: #a7abcf; font-size: 14px; }
.sc-total-row.final .sc-total-v { color: #fff; font-weight: 700; font-size: 18px; }
.sc-total-row s { color: #5f6486; font-size: 13px; margin-right: 6px; font-weight: 400; }
.sc-total-row.small { font-size: 12.5px; }
.sc-total-row .ok { color: var(--green2, #4ade80); font-weight: 600; }
.sc-total-row .bad { color: #ff6b7a; font-weight: 600; }

/* оформление */
.sc-checkout { margin-top: 12px; }
.sc-buy-type { display: flex; gap: 8px; margin-bottom: 12px; }
.sc-bt-opt {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: transparent; font: inherit;
  border: 1px solid rgba(155,109,255,.22); border-radius: 9px; padding: 9px; cursor: pointer; color: #a7abcf; font-size: 13px; font-weight: 500; transition: all .14s ease;
}
.sc-bt-opt.active { background: rgba(155,109,255,.16); color: #fff; border-color: #9b6dff; }
.sc-field { margin-bottom: 9px; }
.sc-field > label, .sc-field > span { display: block; color: #7a7f99; font-size: 12px; margin-bottom: 4px; }
.sc-field select, .sc-field input[type=text], .sc-field input[type=password] {
  width: 100%; background: #171a35; color: #eef0ff; border: 1px solid rgba(155,109,255,.22);
  border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 14px; box-shadow: none;
}
.sc-field select:focus, .sc-field input:focus { outline: none; border-color: #9b6dff; }
.sc-field.err input, .sc-field.err select { border-color: #ff6b7a; }
.sc-hint { display: block; margin-top: 4px; color: #6f7398; font-size: 11.5px; line-height: 1.4; }
.sc-field-err { display: block; margin-top: 4px; color: #ff8a96; font-size: 12px; }
.sc-rules { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; color: #a7abcf; font-size: 12.5px; cursor: pointer; }
.sc-rules input { flex: none; width: 17px; height: 17px; accent-color: #9b6dff; margin: 1px 0 0; }
.sc-rules a { color: #b794ff; }
.sc-rules.err { color: #ff8a96; }
.sc-checkout-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: #9b6dff; border: none; color: #fff; font: inherit;
  border-radius: 10px; padding: 12px; font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 4px; transition: background .15s ease, opacity .15s;
}
.sc-checkout-btn:hover { background: #8a58f5; color: #fff; }
.sc-checkout-btn:disabled { opacity: .45; cursor: not-allowed; }
.sc-auth-note { display: grid; gap: 10px; text-align: center; color: #ff8a96; font-size: 13px; padding: 10px 0 2px; }
.sc-alert { margin: 8px 0; padding: 9px 11px; border-radius: 9px; font-size: 12.5px; line-height: 1.45; background: rgba(255,107,122,.1); border: 1px solid rgba(255,107,122,.35); color: #ffb3bb; }
.sc-alert a { color: #fff; font-weight: 600; text-decoration: underline; }

/* итог покупки */
.sc-done { display: grid; gap: 14px; }
.sc-done-top { display: grid; justify-items: center; gap: 6px; padding: 10px 0 4px; text-align: center; }
.sc-done-top i { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; color: #fff; background: #2ecc71; box-shadow: 0 0 0 6px rgba(46,204,113,.14); }
.sc-done-top.part i { background: #f59e0b; box-shadow: 0 0 0 6px rgba(245,158,11,.14); }
.sc-done-top b { color: #fff; font-size: 17px; }
.sc-done-top span { color: #a7abcf; font-size: 13px; }
.sc-res { display: grid; gap: 6px; }
.sc-res div { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: #c0c0e0; padding: 8px 10px; border-radius: 9px; background: #171a35; border: 1px solid rgba(155,109,255,.12); }
.sc-res div i { margin-top: 3px; color: #4ade80; }
.sc-res div.no i { color: #ff6b7a; }
.sc-res small { display: block; color: #7a7f99; font-size: 12px; }
.sc-howto { padding: 12px 13px; border-radius: 10px; background: rgba(155,109,255,.08); border: 1px solid rgba(155,109,255,.25); font-size: 13px; color: #c0c0e0; line-height: 1.5; }
.sc-howto b { color: #fff; }
.sc-howto p { margin: 0 0 8px; }
.sc-howto p:last-child { margin: 0; }
.sc-cmd { display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: #0b0d24; border: 1px solid rgba(155,109,255,.2); }
.sc-cmd code { flex: 1; min-width: 0; background: none; padding: 0; color: #ffe08a; font: 600 13px/1.4 Consolas, ui-monospace, monospace; overflow-wrap: anywhere; }
.sc-cmd button { flex: none; background: rgba(155,109,255,.16); border: 1px solid rgba(155,109,255,.35); color: #fff; border-radius: 7px; padding: 4px 8px; font: inherit; font-size: 12px; cursor: pointer; }
.sc-cmd button.copied { background: rgba(46,204,113,.2); border-color: #2ecc71; }
.sc-done-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-btn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: transparent; border: 1px solid rgba(155,109,255,.4); color: #c0c0e0;
}
.sc-btn2:hover { background: rgba(155,109,255,.12); color: #fff; }
.sc-btn2.primary { background: #9b6dff; border-color: #9b6dff; color: #fff; }
.sc-btn2.primary:hover { background: #8a58f5; }

/* ================= окна: подтверждение и увеличение картинки ================= */
.sc-modal {
  position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(5,5,15,.65); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .2s ease;
}
.sc-modal.show { opacity: 1; }
.sc-modal-box {
  background: #171a35; border: 1px solid rgba(155,109,255,.3); border-radius: 14px; padding: 24px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.8);
  max-width: 400px; width: 100%; text-align: center; transform: scale(.94); transition: transform .2s ease;
}
.sc-modal.show .sc-modal-box { transform: scale(1); }
.sc-modal-ico { width: 46px; height: 46px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; font-size: 19px; color: var(--accent2); background: rgba(155,109,255,.14); }
.sc-modal-ico.danger { color: #ff6b7a; background: rgba(255,107,122,.13); }
.sc-modal-msg { color: #eef0ff; font-size: 14px; line-height: 1.6; margin-bottom: 18px; overflow-wrap: anywhere; }
.sc-modal-msg b { color: #fff; }
.sc-modal-msg input { margin-top: 12px; }
.sc-modal-btns { display: flex; gap: 10px; }
.sc-modal-btns button { flex: 1; border: 1px solid transparent; border-radius: 9px; padding: 10px; font: inherit; font-weight: 600; cursor: pointer; font-size: 14px; }
.sc-mb-yes { background: #9b6dff; color: #fff; }
.sc-mb-yes:hover { background: #8a58f5; }
.sc-mb-yes.danger { background: #e5484d; }
.sc-mb-yes.danger:hover { background: #d13a40; }
.sc-mb-no { background: transparent; border-color: rgba(155,109,255,.4) !important; color: #a7abcf; }
.sc-mb-no:hover { color: #fff; }
.sc-zoom { position: fixed; inset: 0; z-index: 10070; display: grid; place-items: center; padding: 20px; background: rgba(3,3,10,.85); cursor: zoom-out; opacity: 0; transition: opacity .2s; }
.sc-zoom.show { opacity: 1; }
.sc-zoom img { max-width: min(960px, 100%); max-height: 90vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.7); }

/* ================= «Мои привилегии» ================= */
.sc-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sc-page-head h1 { margin: 0; font-size: 22px; }
.sc-head-links { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-my { display: grid; gap: 12px; }
.sc-my-card { background: #171a35; border: 1px solid rgba(155,109,255,.14); border-radius: 12px; padding: 16px 18px; border-left: 3px solid var(--pc, #9b6dff); min-width: 0; }
.sc-my-card.paused { border-left-color: #f59e0b; }
.sc-my-card.blocked { border-left-color: #ef4444; }
.sc-my-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sc-my-name { display: grid; gap: 3px; min-width: 0; }
.sc-my-name b { color: var(--pc, #fff); font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.sc-my-name small { color: #8f93b4; font-size: 12.5px; }
.sc-my-name small i { color: var(--accent); margin-right: 4px; }
.sc-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sc-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sc-status.active { color: #4ade80; background: rgba(46,204,113,.12); }
.sc-status.paused { color: #fbbf24; background: rgba(245,158,11,.13); }
.sc-status.blocked { color: #f87171; background: rgba(239,68,68,.13); white-space: normal; }
.sc-my-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 10px 16px; margin: 14px 0 0; }
.sc-my-grid div { min-width: 0; }
.sc-my-grid dt { color: #6f7398; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.sc-my-grid dd { margin: 0; color: #e0e3f0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.sc-my-grid dd small { display: block; color: #7a7f99; font-size: 11.5px; font-weight: 500; }
.sc-left { font-weight: 700; }
.sc-left.ok { color: #4ade80; }
.sc-left.warn { color: #fbbf24; }
.sc-left.bad { color: #f87171; }
.sc-my-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(155,109,255,.1); }
.sc-my-actions form { margin: 0; }
.sc-act {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: transparent; border: 1px solid rgba(155,109,255,.4); color: #b794ff; transition: background .15s, color .15s;
}
.sc-act:hover { background: #9b6dff; color: #fff; }
.sc-act.ghost { border-color: rgba(255,255,255,.14); color: #c0c0e0; }
.sc-act.ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.sc-act.warn { border-color: rgba(245,158,11,.45); color: #fbbf24; }
.sc-act.warn:hover { background: rgba(245,158,11,.16); color: #fff; }
.sc-act.danger { border-color: rgba(239,68,68,.45); color: #f87171; }
.sc-act.danger:hover { background: rgba(239,68,68,.16); color: #fff; }
.sc-act:disabled { opacity: .45; cursor: not-allowed; }
.sc-my-note { margin: 10px 0 0; color: #8f93b4; font-size: 12.5px; }
.sc-my-empty { display: grid; justify-items: center; gap: 12px; padding: 50px 20px; text-align: center; color: #8f93b4; }
.sc-my-empty i { font-size: 36px; color: rgba(155,109,255,.5); }
.sc-my-empty b { color: #fff; font-size: 17px; }

/* окна продления и смены привязки (на базе .modal из app.js) */
.sc-dlg .modal-box { max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto; text-align: left; }
.sc-dlg h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; padding-right: 26px; font-size: 18px; }
.sc-dlg h3 i { color: var(--accent); }
.sc-dlg .sc-dlg-sub { margin: 0 0 14px; color: #8f93b4; font-size: 13px; }
.sc-ext-opts { display: grid; gap: 8px; margin-bottom: 12px; }
.sc-ext-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(155,109,255,.22); cursor: pointer; transition: border-color .15s, background .15s; }
.sc-ext-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sc-ext-opt:hover { border-color: rgba(155,109,255,.5); }
.sc-ext-opt:has(input:checked) { border-color: #9b6dff; background: rgba(155,109,255,.14); }
.sc-ext-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(155,109,255,.3); }
.sc-ext-opt span { color: #fff; font-weight: 600; }
.sc-ext-opt em { font-style: normal; color: #b794ff; font-weight: 700; white-space: nowrap; }
.sc-ext-opt em s { color: #5f6486; font-weight: 400; margin-right: 6px; font-size: 12px; }
.sc-ext-sum { display: grid; gap: 3px; margin: 0 0 14px; font-size: 13px; color: #a7abcf; }
.sc-ext-sum b { color: #fff; }
.sc-dlg .btn { width: 100%; }

/* ================= прайс-лист ================= */
.sc-pl-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.sc-pl-tabs a { padding: 7px 12px; border-radius: 9px; font-size: 13px; color: #a7abcf; background: #131530; border: 1px solid rgba(155,109,255,.14); }
.sc-pl-tabs a:hover { color: #fff; border-color: rgba(155,109,255,.4); }
.sc-pl-server { margin-bottom: 26px; scroll-margin-top: 100px; }
.sc-pl-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; padding: 14px 18px; border-radius: 12px; background: #131530; border: 1px solid rgba(155,109,255,.18); }
.sc-pl-head h2 { margin: 0; font-size: 17px; color: #fff; overflow-wrap: anywhere; }
.sc-pl-head code { color: var(--accent2); }
.sc-pl-head .sc-pl-buy { margin-left: auto; }
.sc-pl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 14px; margin-bottom: 14px; }
.sc-pl-desc, .sc-pl-tars { background: #171a35; border: 1px solid rgba(155,109,255,.13); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.sc-pl-desc h3 { margin: 0 0 10px; font-size: 16px; color: #fff; }
.sc-pl-text { color: #9296b2; font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
.sc-pl-text p { margin: 0 0 6px; }
.sc-pl-img { display: block; max-width: 420px; margin-top: 10px; border-radius: 9px; overflow: hidden; border: 1px solid rgba(155,109,255,.14); cursor: zoom-in; }
.sc-pl-img img { display: block; width: 100%; height: auto; }
.sc-pl-tars h4 { margin: 0 0 8px; color: #6f7398; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; }
.sc-pl-tars table { width: 100%; }
.sc-pl-tars th, .sc-pl-tars td { padding: 9px 4px; border-bottom: 1px solid rgba(155,109,255,.1); font-size: 13.5px; }
.sc-pl-tars tr:last-child td { border-bottom: 0; }
.sc-pl-tars td:last-child, .sc-pl-tars th:last-child { text-align: right; white-space: nowrap; }
.sc-pl-tars td b { color: #fff; }
.sc-pl-tars td s { color: #5f6486; margin-right: 6px; font-size: 12px; }

/* ================= админка ================= */
.sa-tabs a .n { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 700; background: rgba(155,109,255,.18); color: var(--accent2); }
.sa-mode { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sa-mode a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 11px; font-weight: 600; font-size: 14px; color: var(--muted); border: 1px solid transparent; }
.sa-mode a:hover { color: var(--text); background: rgba(155,109,255,.06); }
.sa-mode a.active { color: #fff; background: rgba(155,109,255,.12); border-color: var(--line2); }
.sa-mode a i { color: var(--accent); }
.sa-name { display: flex; align-items: center; gap: 8px; font-weight: 600; flex-wrap: wrap; }
.sa-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pc, #9b6dff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, #9b6dff) 22%, transparent); }
.sa-thumb { width: 38px; height: 28px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); vertical-align: middle; }
.sa-tchips { display: flex; flex-wrap: wrap; gap: 4px; }
.sa-tchips span { padding: 2px 7px; border-radius: 6px; font-size: 12px; background: rgba(155,109,255,.1); color: #c0c0e0; white-space: nowrap; }
.sa-tchips span b { color: #fff; }
.sa-muted { color: var(--muted2); font-size: 12px; }
.sa-trows { display: grid; gap: 6px; }
.sa-trow, .sa-trow-h { display: grid; grid-template-columns: 1fr 1fr 74px 34px; gap: 6px; align-items: center; }
.sa-trow-h { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.sa-trow input { padding: 8px 10px; }
.sa-x { width: 34px; height: 36px; border-radius: 9px; border: 1px solid rgba(239,68,68,.35); background: transparent; color: #f87171; cursor: pointer; }
.sa-x:hover { background: rgba(239,68,68,.14); }
.sa-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.sa-checks label, .form label.sa-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.sa-checks input, .sa-check input { width: auto; }
.sa-bb { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.sa-bb button { min-width: 30px; height: 28px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.sa-bb button:hover { border-color: var(--accent); }
.sa-bb input[type=color] { width: 30px; height: 28px; padding: 0 2px; border-radius: 7px; border: 1px solid var(--line2); background: transparent; cursor: pointer; }
.sa-img-cur { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sa-img-cur img { width: 90px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.sa-settings h3 { display: flex; align-items: center; gap: 8px; }
.sa-settings h3 i { color: var(--accent); }
.sa-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sa-holder-user { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 600; }
.sa-holder-user .sa-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; font-size: 12px; flex: none; }
.sa-chip { display: inline-flex; align-items: center; gap: 5px; margin: 0 4px 4px 0; padding: 3px 8px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--pc, #c0c0e0); background: color-mix(in srgb, var(--pc, #9b6dff) 14%, transparent); }
.sa-chip.paused { outline: 1px dashed #fbbf24; }
.sa-chip.blocked { text-decoration: line-through; }
.sa-modal .modal-box { max-width: 720px; max-height: calc(100vh - 32px); overflow-y: auto; text-align: left; }
.sa-modal h4 { margin: 18px 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.sa-svc { display: grid; gap: 10px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 8px; }
.sa-svc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sa-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-btns form { margin: 0; }
.sa-hint { color: var(--muted); font-size: 12.5px; }
.sa-hint a { color: var(--accent2); }
.sa-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sa-card-head h3 { margin: 0; }
.sa-aside { display: grid; gap: 20px; min-width: 0; }
.sa-layout > * { min-width: 0; }
.sa-table td { vertical-align: middle; }
.sa-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.sa-badges .badge { white-space: nowrap; }
.sa-badges code { font-size: 11.5px; padding: 1px 6px; border-radius: 6px; background: rgba(155,109,255,.1); color: var(--muted); }
.sa-label { font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.sa-checks-col { flex-direction: column; gap: 6px; }
.sa-zones { display: grid; gap: 8px; padding-left: 12px; border-left: 2px solid var(--line2); }
.sa-zones label { font-size: 13px; }
.sa-field { display: grid; gap: 6px; }
.sa-field > label { font-weight: 500; font-size: 14px; }
.sa-field .sa-hint { margin: 0; }
.sa-flags summary { cursor: pointer; color: var(--accent2); font-size: 13px; }
.sa-flags p { margin: 6px 0 0; }
.sa-search { display: flex; gap: 6px; }
.sa-search input { width: 220px; padding: 7px 11px; }
.sa-nowrap { white-space: nowrap; }
.sa-acc-btns { margin: 14px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.sa-svc { position: relative; }
.sa-svc-form { gap: 10px; }
.sa-svc-del { position: absolute; right: 12px; bottom: 12px; margin: 0; }
.sa-until { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sa-until input[type=date], .sa-search input[type=search] {
  flex: 1; min-width: 140px; background: rgba(11, 13, 36, .8); color: var(--text); color-scheme: dark;
  border: 1px solid var(--line2); border-radius: 11px; padding: 10px 12px; font: inherit;
}
.sa-search input[type=search] { padding: 7px 11px; }
/* окна магазина выше липкой шапки неона */
.modal.sa-modal, .modal.sc-dlg { z-index: 1300; }
.sa-modal .modal-box > h3 { display: flex; align-items: center; gap: 8px; padding-right: 30px; }
.sa-modal .modal-box > h3 i { color: var(--accent); }
.sa-modal .form { gap: 12px; }
.sa-trow-h small { font-weight: 400; color: var(--muted2); }
.sa-add { justify-self: start; margin-top: 8px; }
.sa-user-priv span:first-child { display: grid; gap: 2px; }

/* редактор раскладки */
.sl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.sl-status { font-size: 13px; color: var(--muted); }
.sl-status.ok { color: var(--green2, #4ade80); }
.sl-status.err { color: #f87171; }
.sl-zones { display: grid; gap: 16px; }
.sl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sl-col { min-width: 0; }
.sl-label { margin-bottom: 8px; font-weight: 600; }
input.sl-label { width: 100%; }
.sl-card .sa-dot { width: 8px; height: 8px; }
.sl-tools button:disabled { opacity: .35; cursor: default; }
.sa-table .btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.sl-body { min-height: 70px; display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 12px; border: 1px dashed rgba(155,109,255,.3); background: rgba(10,12,32,.4); transition: border-color .15s, background .15s; }
.sl-body.over { border-color: var(--accent); background: rgba(155,109,255,.08); }
.sl-body:empty::before { content: "Перетащите сюда карточку"; color: var(--muted2); font-size: 12.5px; text-align: center; padding: 14px 0; }
.sl-card { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: #171a35; border: 1px solid rgba(155,109,255,.18); cursor: grab; user-select: none; }
.sl-card:active { cursor: grabbing; }
.sl-card.dragging { opacity: .45; border-style: dashed; }
.sl-card .grip { color: var(--muted2); }
.sl-card b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sl-card small { color: var(--muted2); }
.sl-tools { display: flex; gap: 4px; }
.sl-tools button, .sl-tools select { height: 28px; border-radius: 7px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; padding: 0 7px; width: auto; }
.sl-tools button:hover { border-color: var(--accent); }

/* ================= адаптив ================= */
@media (max-width: 1200px) {
  .sc-my-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991px) {
  .sc-shop { flex-direction: column; align-items: stretch; }
  .sc-side { flex: none; width: 100%; position: static; max-height: none; overflow: visible; }
  .sc-servers { flex-direction: row; flex-wrap: wrap; }
  .sc-srv { flex: 1 1 auto; text-align: center; padding: 8px 12px; font-size: 13px; }
  .sc-sort { flex-direction: row; flex-wrap: wrap; }
  .sc-sort-b { flex: 1 1 auto; text-align: center; background: rgba(155,109,255,.05); }
  .sc-wallet { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .sc-wallet .sc-side-h { display: none; }
  .sc-wallet-row { flex: 1; }
  .sc-mydisc { margin: 0; }
  .sc-links { grid-template-columns: 1fr 1fr; }
  .sc-links a { justify-content: center; background: rgba(155,109,255,.05); }
  .sc-cart-fab.has { display: inline-flex; }
  .sc-pl-row { grid-template-columns: 1fr; gap: 0; }
  .sc-pl-desc, body.neon .sc-pl-desc { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 8px; }
  .sc-pl-tars, body.neon .sc-pl-tars { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 4px; }
}
@media (max-width: 900px) {
  .sc-split, .sl-split { grid-template-columns: 1fr; }
  .sa-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sc-grid { grid-template-columns: 1fr; }
  .sa-search { width: 100%; }
  .sa-search input { flex: 1; width: auto; }
  .sa-svc-del { position: static; }
  .sa-table { min-width: 640px; }
  .sc-my-card { padding: 14px; }
  .sc-act { flex: 1 1 auto; justify-content: center; }
  .sc-done-btns { grid-template-columns: 1fr; }
  .sa-trow, .sa-trow-h { grid-template-columns: 1fr 1fr 60px 34px; }
  .sl-card { flex-wrap: wrap; }
}

/* ================= неон ================= */
.neon .sc-side {
  top: 96px; max-height: calc(100vh - 112px); background: var(--tile), var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.neon .sc-side-h { color: var(--muted2); font-weight: 800; letter-spacing: 1.2px; font-size: 10.5px; }
.neon .sc-srv { color: #b6bbcc; border-radius: 12px; font-weight: 600; }
.neon .sc-srv i { color: var(--cyan); }
.neon .sc-srv:hover { background: rgba(255,255,255,.05); color: #fff; }
.neon .sc-srv.active { color: #fff; background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(168,85,247,.16)); border-color: rgba(168,85,247,.45); box-shadow: 0 8px 24px -16px rgba(168,85,247,.9); }
.neon .sc-sort-b { color: var(--muted); border-radius: 10px; font-weight: 600; }
.neon .sc-sort-b:hover { color: #fff; }
.neon .sc-sort-b.active { color: #fff; background: rgba(255,255,255,.07); box-shadow: inset 2px 0 0 var(--cyan); }
.neon .sc-cart-btn { background: var(--grad); color: #05060b; border-radius: 13px; font-weight: 800; box-shadow: 0 10px 30px -12px rgba(34,211,238,.7); }
.neon .sc-cart-btn:hover { background: var(--grad); filter: brightness(1.1); }
.neon .sc-badge { background: #05060b; color: #fff; }
.neon .sc-wallet { border-top-color: var(--line); }
.neon .sc-wallet-row b { color: var(--green); font-family: var(--head-font); font-size: 15px; font-weight: 600; }
.neon .sc-topup { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.3); color: var(--green); border-radius: 10px; }
.neon .sc-topup:hover { background: rgba(52,211,153,.2); color: #fff; }
.neon .sc-login { background: rgba(255,255,255,.05); border-color: var(--line2); color: #fff; }
.neon .sc-mydisc { color: var(--pink); }
.neon .sc-links a { color: #c9cdd9; border-radius: 11px; }
.neon .sc-links a i { color: var(--cyan); }
.neon .sc-links a:hover { background: rgba(255,255,255,.05); color: #fff; }
.neon .sc-title { font-size: 22px; }
.neon .sc-promo {
  position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(168,85,247,.4);
  background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(168,85,247,.18) 60%, rgba(244,114,182,.12));
}
.neon .sc-promo > i { color: var(--pink); filter: drop-shadow(0 0 10px rgba(244,114,182,.8)); }
.neon .sc-promo b { font-family: var(--head-font); font-weight: 600; font-size: 14px; }
.neon .sc-promo span { color: #b3b8ca; }
.neon .sc-pane-note { color: var(--muted); }
.neon .sc-pane-note i { color: var(--cyan); }
.neon .sc-empty { color: var(--muted); border-color: var(--line2); border-radius: 16px; }
.neon .sc-empty-big i { color: var(--cyan); }
.neon .sc-foot-note { color: var(--muted2); }
.neon .sc-grid { gap: 16px; }
.neon .sc-zone-title { position: relative; color: #e6e8f0; font: 600 13px var(--head-font); letter-spacing: .8px; border-left: 0; padding-left: 14px; }
.neon .sc-zone-title::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 3px; border-radius: 3px; background: var(--grad); box-shadow: 0 0 10px rgba(34,211,238,.6); }
.neon .sc-card { background: var(--tile), var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.neon .sc-card:hover { transform: translateY(-3px); border-color: rgba(168,85,247,.45); box-shadow: 0 0 0 1px rgba(168,85,247,.12), 0 18px 40px -20px rgba(168,85,247,.55); }
.neon .sc-card.added { border-color: rgba(34,211,238,.6); box-shadow: 0 0 0 3px rgba(34,211,238,.14); }
.neon .sc-card-head { font: 600 15px var(--head-font); padding: 16px 16px 10px; }
.neon .sc-card-body { padding: 0 16px 16px; }
.neon .sc-card-desc { color: #9aa0b4; }
.neon .sc-desc-more { color: var(--accent2); }
.neon .sc-desc-more:hover { color: #fff; }
.neon .sc-card-img { border-color: var(--line); border-radius: 12px; background: #1b1530; }
.neon .sc-tar { border-color: var(--line2); color: #b6bbcc; border-radius: 10px; font-weight: 600; }
.neon .sc-tar:hover { border-color: rgba(168,85,247,.5); color: #fff; }
.neon .sc-tar.active { color: #fff; border-color: rgba(168,85,247,.6); background: linear-gradient(90deg, rgba(34,211,238,.16), rgba(168,85,247,.22)); box-shadow: 0 0 14px -4px rgba(168,85,247,.6); }
.neon .sc-tar:focus-visible, .neon .sc-buy:focus-visible, .neon .sc-srv:focus-visible, .neon .sc-sort-b:focus-visible { outline-color: var(--cyan); }
.neon .sc-price b { font: 700 21px var(--head-font); letter-spacing: -.3px; }
.neon .sc-cur { color: var(--muted); }
.neon .sc-old { color: var(--muted2); }
.neon .sc-pct { color: #fff; background: linear-gradient(90deg, #f472b6, #a855f7); box-shadow: 0 0 10px -2px rgba(244,114,182,.7); }
.neon .sc-buy { border-color: rgba(34,211,238,.45); color: var(--accent2); border-radius: 12px; font-weight: 700; }
.neon .sc-buy:hover { background: var(--grad); border-color: transparent; color: #05060b; box-shadow: 0 8px 24px -10px rgba(34,211,238,.8); }
.neon .sc-cart-fab { background: var(--grad); color: #05060b; box-shadow: 0 12px 30px -8px rgba(34,211,238,.7); }

/* корзина */
.neon .sc-cart-overlay { background: rgba(3,4,8,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.neon .sc-cart { background: rgba(33, 26, 56,.97); border-left: 1px solid var(--line2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.neon .sc-cart::before { content: ""; position: absolute; left: -1px; top: 18%; bottom: 18%; width: 1px; background: var(--grad); opacity: .7; }
.neon .sc-cart-head { border-bottom-color: var(--line); font: 600 15px var(--head-font); }
.neon .sc-cart-head span i { color: var(--cyan); }
.neon .sc-cart-close { border-radius: 11px; background: rgba(255,255,255,.06); }
.neon .sc-cart-empty i { color: rgba(34,211,238,.4); }
.neon .sc-ci { background: rgba(255,255,255,.035); border-color: var(--line); border-radius: 14px; }
.neon .sc-ci-price { color: var(--accent2); }
.neon .sc-cart-foot { border-top-color: var(--line); }
.neon .sc-total-row.final .sc-total-v { font-family: var(--head-font); font-weight: 600; }
.neon .sc-total-row .ok { color: var(--green); }
.neon .sc-bt-opt { border-color: var(--line2); border-radius: 11px; color: #b6bbcc; }
.neon .sc-bt-opt.active { color: #fff; border-color: rgba(168,85,247,.6); background: linear-gradient(90deg, rgba(34,211,238,.14), rgba(168,85,247,.2)); }
.neon .sc-field > label, .neon .sc-field > span { color: var(--muted); }
.neon .sc-field select, .neon .sc-field input[type=text], .neon .sc-field input[type=password] { background: rgba(0,0,0,.35); border-color: var(--line2); border-radius: 11px; }
.neon .sc-field select:focus, .neon .sc-field input:focus { border-color: rgba(34,211,238,.6); box-shadow: 0 0 0 3px rgba(34,211,238,.12); }
.neon .sc-hint { color: var(--muted2); }
.neon .sc-rules { color: #b6bbcc; }
.neon .sc-rules input { accent-color: #a855f7; }
.neon .sc-rules a { color: var(--accent2); }
.neon .sc-checkout-btn { background: var(--grad); color: #05060b; font-weight: 800; border-radius: 13px; box-shadow: 0 10px 30px -12px rgba(34,211,238,.7); }
.neon .sc-checkout-btn:hover { background: var(--grad); color: #05060b; filter: brightness(1.1); }
.neon .sc-checkout-btn:disabled { box-shadow: none; filter: grayscale(.4); }
.neon .sc-alert { border-radius: 12px; }
.neon .sc-done-top i { background: linear-gradient(135deg, #34d399, #22d3ee); color: #05060b; box-shadow: 0 0 0 6px rgba(52,211,153,.12), 0 0 30px rgba(52,211,153,.4); }
.neon .sc-done-top b { font: 600 17px var(--head-font); }
.neon .sc-res div { background: rgba(255,255,255,.035); border-color: var(--line); border-radius: 12px; }
.neon .sc-res div i { color: var(--green); }
.neon .sc-howto { background: rgba(34,211,238,.06); border-color: rgba(34,211,238,.25); border-radius: 14px; }
.neon .sc-cmd { background: rgba(0,0,0,.45); border-color: var(--line2); border-radius: 10px; }
.neon .sc-cmd code { color: #a5f3fc; }
.neon .sc-cmd button { background: rgba(255,255,255,.06); border-color: var(--line2); }
.neon .sc-btn2 { border-color: var(--line2); border-radius: 12px; color: #d5d8e3; }
.neon .sc-btn2:hover { background: rgba(255,255,255,.07); color: #fff; }
.neon .sc-btn2.primary { background: var(--grad); border-color: transparent; color: #05060b !important; }

/* окна */
.neon .sc-modal { background: rgba(3,4,8,.7); }
.neon .sc-modal-box { background: rgba(33, 26, 56,.97); border-color: var(--line2); border-radius: 20px; }
.neon .sc-modal-ico { color: var(--cyan); background: rgba(34,211,238,.1); }
.neon .sc-modal-ico.danger { color: #fb7185; background: rgba(244,63,94,.12); }
.neon .sc-mb-yes { background: var(--grad); color: #05060b; border-radius: 12px; }
.neon .sc-mb-yes:hover { background: var(--grad); filter: brightness(1.1); }
.neon .sc-mb-yes.danger { background: linear-gradient(90deg, #f43f5e, #e11d48); color: #fff; }
.neon .sc-mb-no { border-color: var(--line2) !important; border-radius: 12px; color: #c9cdd9; }

/* «Мои привилегии» */
.neon .sc-page-head h1 { font-size: 24px; }
.neon .sc-my-card { background: var(--tile), var(--surface); border: 1px solid var(--line); border-radius: 18px; position: relative; overflow: hidden; }
.neon .sc-my-card::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pc, var(--accent)); box-shadow: 0 0 12px var(--pc, var(--accent)); }
.neon .sc-my-card.paused::before { background: #fbbf24; box-shadow: 0 0 12px #fbbf24; }
.neon .sc-my-card.blocked::before { background: #f43f5e; box-shadow: 0 0 12px #f43f5e; }
.neon .sc-my-name b { font: 600 16px var(--head-font); }
.neon .sc-my-name small { color: var(--muted); }
.neon .sc-my-name small i { color: var(--cyan); }
.neon .sc-status.active { color: var(--green); background: rgba(52,211,153,.1); }
.neon .sc-my-grid dt { color: var(--muted2); font-weight: 800; letter-spacing: 1px; }
.neon .sc-my-grid dd small { color: var(--muted); }
.neon .sc-left.ok { color: var(--green); }
.neon .sc-my-actions { border-top-color: var(--line); }
.neon .sc-act { border-color: rgba(34,211,238,.45); color: var(--accent2); border-radius: 11px; }
.neon .sc-act:hover { background: var(--grad); border-color: transparent; color: #05060b; }
.neon .sc-act.ghost { border-color: var(--line2); color: #d5d8e3; }
.neon .sc-act.ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.neon .sc-act.warn { border-color: rgba(245,158,11,.45); color: #fbbf24; }
.neon .sc-act.warn:hover { background: rgba(245,158,11,.18); color: #fff; }
.neon .sc-act.danger { border-color: rgba(244,63,94,.45); color: #fb7185; }
.neon .sc-act.danger:hover { background: rgba(244,63,94,.18); color: #fff; }
.neon .sc-my-empty i { color: var(--cyan); }
.neon .sc-my-empty b { font-family: var(--head-font); font-weight: 600; }
.neon .sc-dlg .modal-box { background: rgba(33, 26, 56,.98); border-color: var(--line2); border-radius: 20px; }
.neon .sc-dlg h3 i { color: var(--cyan); }
.neon .sc-ext-opt { border-color: var(--line2); border-radius: 12px; }
.neon .sc-ext-opt:has(input:checked) { border-color: rgba(168,85,247,.6); background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(168,85,247,.18)); }
.neon .sc-ext-opt em { color: var(--accent2); font-family: var(--head-font); font-weight: 600; }

/* прайс-лист */
.neon .sc-pl-tabs a { background: rgba(255,255,255,.04); border-color: var(--line); border-radius: 11px; color: #c9cdd9; }
.neon .sc-pl-tabs a:hover { border-color: rgba(168,85,247,.45); color: #fff; }
.neon .sc-pl-head { background: var(--tile), var(--surface); border-color: var(--line); border-radius: 18px; position: relative; overflow: hidden; }
.neon .sc-pl-head::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: var(--grad); opacity: .8; }
.neon .sc-pl-head h2 { font: 600 16px var(--head-font); }
.neon .sc-pl-desc, .neon .sc-pl-tars { background: var(--tile), var(--surface); border-color: var(--line); border-radius: 18px; }
.neon .sc-pl-desc h3 { font: 600 15px var(--head-font); }
.neon .sc-pl-text { color: #9aa0b4; }
.neon .sc-pl-img { border-color: var(--line); border-radius: 12px; }
.neon .sc-pl-tars h4 { color: var(--muted2); font-weight: 800; letter-spacing: 1.2px; }
.neon .sc-pl-tars th, .neon .sc-pl-tars td { border-bottom-color: var(--line); }
.neon .sc-pl-tars td b { font-family: var(--head-font); font-weight: 600; }

/* админка */
.neon .sa-tabs a .n { background: rgba(34,211,238,.12); color: var(--accent2); }
.neon .sa-mode a { border-radius: 12px; }
.neon .sa-mode a:hover { background: rgba(255,255,255,.04); }
.neon .sa-mode a.active { background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(168,85,247,.16)); border-color: rgba(168,85,247,.45); }
.neon .sa-mode a i { color: var(--cyan); }
.neon .sa-tchips span { background: rgba(255,255,255,.06); }
.neon .sa-bb button { border-radius: 9px; }
.neon .sa-svc { border-radius: 14px; background: rgba(255,255,255,.02); }
.neon .sa-until input[type=date], .neon .sa-search input[type=search] { background: rgba(0,0,0,.35); border-color: var(--line2); border-radius: 13px; }
.neon .sa-badges code { background: rgba(255,255,255,.06); }
.neon .sa-modal .modal-box > h3 { font-family: var(--head-font); }
.neon .sa-modal .modal-box > h3 i, .neon .sa-settings h3 i { color: var(--cyan); }
.neon .sa-zones { border-left-color: rgba(168,85,247,.45); }
.neon .sl-body { border-color: var(--line2); background: rgba(0,0,0,.25); border-radius: 16px; }
.neon .sl-body.over { border-color: rgba(34,211,238,.6); background: rgba(34,211,238,.06); }
.neon .sl-card { background: rgba(255,255,255,.04); border-color: var(--line2); border-radius: 12px; }
.neon .sl-card:hover { border-color: rgba(168,85,247,.45); }
.neon .sl-card .grip { color: var(--cyan); }
@media (max-width: 991px) {
  .neon .sc-side { position: static; max-height: none; }
  .neon .sc-sort-b { background: rgba(255,255,255,.03); }
  .neon .sc-sort-b.active { box-shadow: inset 0 -2px 0 var(--cyan); }
  .neon .sc-links a { background: rgba(255,255,255,.03); }
}

/* v4: витрина — шапка с преимуществами, цветные карточки, возможности, цена в день, «как это работает» */
.sc-hero { display: grid; gap: 14px; margin-bottom: 18px; }
.sc-hero .sc-title { margin: 0; }
.sc-hero-t p { margin: 6px 0 0; color: #9296b2; font-size: 13.5px; }
.sc-perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sc-perks li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(155,109,255,.13); min-width: 0; }
.sc-perks i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #b794ff; background: rgba(155,109,255,.14); }
.sc-perks span { display: grid; font-size: 12px; color: #8a8fae; line-height: 1.3; min-width: 0; }
.sc-perks b { color: #fff; font-size: 13px; }

.sc-card { position: relative; overflow: hidden; }
.sc-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--pc, #9b6dff); opacity: .9; }
.sc-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 110px; pointer-events: none;
  background: radial-gradient(120% 100% at 0 0, color-mix(in srgb, var(--pc, #9b6dff) 16%, transparent), transparent 70%); }
.sc-card > * { position: relative; z-index: 1; }
.sc-card.is-hit { border-color: color-mix(in srgb, var(--pc, #9b6dff) 55%, transparent); }
.sc-ribbon { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #1a0f05; background: linear-gradient(90deg, #ffb547, #ff7a59); box-shadow: 0 6px 18px -8px #ff7a59; }
.sc-card-top { display: flex; align-items: center; gap: 12px; padding: 16px 15px 12px; }
.sc-card-top .sc-card-head { padding: 0; font-size: 17px; }
.sc-card.is-hit .sc-card-tt { padding-right: 96px; }
.sc-card-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; font-size: 19px;
  color: var(--pc, #b794ff); background: color-mix(in srgb, var(--pc, #9b6dff) 18%, transparent); border: 1px solid color-mix(in srgb, var(--pc, #9b6dff) 35%, transparent); }
.sc-card-ic img { width: 26px; height: 26px; object-fit: contain; }
.sc-card-tt { min-width: 0; display: grid; gap: 3px; }
.sc-card-tt small { color: #7f84a5; font-size: 12px; }
.sc-card-tt small i { margin-right: 4px; color: var(--pc, #b794ff); }
.sc-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sc-feats li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: #c9cce0; line-height: 1.35; }
.sc-feats li i { flex: none; width: 18px; height: 18px; margin-top: 0; display: grid; place-items: center; border-radius: 6px; font-size: 10px;
  color: var(--pc, #b794ff); background: color-mix(in srgb, var(--pc, #9b6dff) 16%, transparent); }
.sc-feats .sc-feat-x { display: none; }
.sc-feats.open .sc-feat-x { display: flex; }
.sc-feats-more button { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--pc, #b794ff); cursor: pointer; }
.sc-feats-more button:hover span { text-decoration: underline; }
.sc-feats-more button i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; font-size: 10px; background: color-mix(in srgb, var(--pc, #9b6dff) 16%, transparent); transition: transform .2s; }
.sc-feats.open .sc-feats-more button i { transform: rotate(180deg); }
.sc-mine { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.4;
  color: #8ff0c0; background: rgba(46,204,113,.09); border: 1px solid rgba(46,204,113,.22); }
.sc-mine i { margin-top: 2px; }
.sc-card .sc-tars { margin-top: auto; }
.sc-card-foot { margin-top: 0; padding-top: 12px; border-top: 1px solid rgba(155,109,255,.1); }
.sc-price { display: grid; gap: 5px; }
.sc-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
.sc-pd { color: #7f84a5; font-size: 11.5px; }
.sc-buy i { margin-right: 4px; }
.sc-card.is-hit .sc-buy, .sc-card .sc-buy:hover { background: var(--pc, #9b6dff); border-color: var(--pc, #9b6dff); color: #0b0b14; }

.sc-how { margin-top: 26px; padding: 18px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid rgba(155,109,255,.13); }
.sc-how h2 { margin: 0 0 14px; font-size: 16px; color: #fff; }
.sc-how h2 i { color: #b794ff; margin-right: 6px; }
.sc-how ol { list-style: none; counter-reset: how; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sc-how li { counter-increment: how; display: grid; gap: 4px; padding-left: 42px; position: relative; font-size: 12.5px; color: #8a8fae; line-height: 1.45; }
.sc-how li::before { content: counter(how); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px;
  font-weight: 700; color: #fff; background: linear-gradient(135deg, #22d3ee, #a855f7); }
.sc-how li b { color: #fff; font-size: 13.5px; }
.sc-how .sc-foot-note { margin-top: 14px; }
.sc-how .sc-foot-note a, .sc-mine a { color: #b794ff; }
.sc-badge-q .sc-buy-type { margin: 6px 0 4px; flex-direction: column; gap: 6px; }
.sc-badge-q .sc-bt-opt { justify-content: flex-start; text-align: left; overflow-wrap: anywhere; }

.neon .sc-perks li, .neon .sc-how { background: var(--tile), var(--surface); border-color: var(--line); border-radius: 16px; }
.neon .sc-perks i { color: var(--accent2); background: rgba(34,211,238,.12); }
.neon .sc-perks b, .neon .sc-how h2 { font-family: var(--head-font); }
.neon .sc-card-top .sc-card-head { padding: 0; font-size: 17px; }
.neon .sc-card-foot { border-top-color: var(--line); }
.neon .sc-card.is-hit .sc-buy, .neon .sc-card .sc-buy:hover { background: var(--pc); border-color: var(--pc); color: #05060b; box-shadow: 0 8px 24px -12px var(--pc); }

@media (max-width: 1100px) { .sc-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .sc-how ol { grid-template-columns: 1fr; }
  .sc-perks li { padding: 9px; gap: 8px; }
  .sc-perks i { width: 30px; height: 30px; }
}

/* cases.css */
/* Кейсы: обе темы. Сначала классика — перенос вида старого модуля (тёмно-синий + фиолетовый),
   внизу .neon — стеклянные плитки, бирюзово-фиолетовое свечение, заголовки Unbounded.
   Цвета редкостей одинаковые в обеих темах: они задаются из PHP в --rc (цвет) и --rg (свечение). */

.cs-page, .cs-modal, .cs-pop {
  --cs-kcard: #15183a;
  --cs-solid: #15183a;
  --cs-elev: #1a1640;
  --cs-deep: linear-gradient(135deg, #0d1117, #1a1f2e);
  --cs-line: rgba(155,109,255,.12);
  --cs-line2: rgba(155,109,255,.3);
  --cs-acc: #9b6dff;
  --cs-acc2: #b794ff;
  --cs-grad: linear-gradient(135deg, #9b6dff, #b794ff);
  --cs-btn: linear-gradient(135deg, #9b6dff, #7b4fe0);
  --cs-btn-text: #fff;
  --cs-glow: rgba(155,109,255,.4);
  --cs-price: #9b6dff;
  --cs-green: #22c55e;
  --cs-red: #ff6b7a;
  --cs-gold: #ffd60a;
  --cs-amber: #f59e0b;
  --cs-indigo: #818cf8;
  --cs-text: #e8eaf0;
  --cs-muted: #888aa0;
  --cs-r: 16px;
  --cs-head: inherit;
  --cs-stage: #1a1640;
}

/* ---------- герой и вкладки ---------- */
.cs-page { position: relative; color: var(--cs-text); }
.cs-hero { text-align: center; margin: 6px 0 30px; }
.cs-page .cs-h {
  margin: 0 0 8px; font-family: var(--cs-head); font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 1;
  letter-spacing: 4px; text-transform: uppercase;
  background: var(--cs-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-sub { margin: 0; color: var(--cs-muted); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; }

.cs-tabs { display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 28px; padding: 5px; background: var(--cs-kcard); border: 1px solid var(--cs-line); border-radius: 12px; }
.cs-page .cs-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 26px; border: 1px solid transparent; border-radius: 9px;
  color: var(--cs-muted); font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; transition: color .2s, background .2s;
}
.cs-page .cs-tab:hover { color: var(--cs-text); }
.cs-page .cs-tab.active { background: linear-gradient(135deg, rgba(155,109,255,.15), rgba(183,148,255,.15)); border-color: rgba(155,109,255,.2); color: var(--cs-acc); }
.cs-tab i { font-size: 13px; }
.cs-tab-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--cs-acc); color: #fff; font-size: 11px; line-height: 20px; text-align: center; letter-spacing: 0; }

.cs-guest { display: flex; align-items: center; gap: 12px; margin: -10px 0 24px; padding: 12px 16px; border-radius: 12px; background: rgba(155,109,255,.08); border: 1px solid var(--cs-line2); color: var(--cs-muted); font-size: 13px; }
.cs-guest > i { color: var(--cs-acc2); font-size: 18px; }
.cs-guest span { flex: 1; }

/* ---------- фильтры ---------- */
.cs-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.cs-search { position: relative; flex: 1; min-width: 180px; max-width: 280px; margin: 0; }
.cs-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--cs-muted); font-size: 12px; pointer-events: none; }
.cs-search input { width: 100%; padding: 9px 14px 9px 34px; border-radius: 10px; border: 1px solid var(--cs-line); background: var(--cs-kcard); color: var(--cs-text); font: inherit; font-size: 13px; }
.cs-search input::placeholder { color: var(--cs-muted); }
.cs-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--cs-line); background: var(--cs-kcard); color: var(--cs-muted); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .5px; line-height: 1; transition: .2s; }
.cs-chip:hover { border-color: rgba(155,109,255,.5); color: var(--cs-text); }
.cs-chip.on { background: rgba(155,109,255,.16); border-color: var(--cs-acc); color: #fff; }
.cs-sort { position: relative; margin-left: auto; }
.cs-sortbtn { color: var(--cs-text); }
.cs-sortbtn i { color: var(--cs-muted); }
.cs-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: none; min-width: 200px; padding: 5px; background: #141733; border: 1px solid rgba(155,109,255,.3); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.cs-sort.open .cs-menu { display: block; }
.cs-menu button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 7px; background: none; color: var(--cs-text); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; }
.cs-menu button:hover { background: rgba(155,109,255,.16); }
.cs-menu button.sel { color: var(--cs-acc); }

/* ---------- лента последних дропов ---------- */
.cs-feed { margin-bottom: 24px; padding: 12px 14px; background: var(--cs-kcard); border: 1px solid var(--cs-line); border-radius: 14px; overflow: hidden; }
.cs-feed-lbl { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--cs-acc); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.cs-feed-lbl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: csBlink 1.4s infinite; }
@keyframes csBlink { 50% { opacity: .35; } }
.cs-feed-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: rgba(155,109,255,.3) transparent; }
.cs-feed-row::-webkit-scrollbar { height: 6px; }
.cs-feed-row::-webkit-scrollbar-thumb { background: rgba(155,109,255,.3); border-radius: 3px; }
.cs-page .cs-drop { position: relative; flex: 0 0 118px; display: block; padding: 9px; border-radius: 10px; background: var(--cs-elev); border: 1px solid var(--cs-line); color: var(--cs-text); overflow: hidden; transition: border-color .2s, transform .2s; }
.cs-page .cs-drop:hover { border-color: var(--rc); transform: translateY(-2px); color: var(--cs-text); }
.cs-drop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rc); }
.cs-drop-ic { height: 44px; display: flex; align-items: center; justify-content: center; color: var(--rc); font-size: 24px; }
.cs-drop-ic img { width: 40px; height: 40px; object-fit: contain; }
.cs-drop b, .cs-drop small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-drop b { margin-top: 4px; font-size: 11px; font-weight: 700; }
.cs-drop small { font-size: 10px; color: var(--cs-muted); }
.cs-feed-empty { padding: 4px 0; color: var(--cs-muted); font-size: 12px; }

/* ---------- сетка кейсов ---------- */
.cs-kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.cs-page .cs-kcard {
  position: relative; display: flex; flex-direction: column; background: var(--cs-kcard); border: 1px solid var(--cs-line); border-radius: var(--cs-r);
  color: var(--cs-text); overflow: hidden; cursor: pointer; transition: transform .3s, border-color .3s, box-shadow .3s;
  animation: csCardIn .5s ease both; animation-delay: calc(var(--i, 0) * .07s);
}
@keyframes csCardIn { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
.cs-kcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(155,109,255,.05), rgba(183,148,255,.05)); opacity: 0; transition: opacity .3s; pointer-events: none; }
.cs-page .cs-kcard:hover { transform: translateY(-6px); border-color: rgba(155,109,255,.3); box-shadow: 0 20px 60px rgba(155,109,255,.1), 0 0 0 1px rgba(155,109,255,.1); color: var(--cs-text); }
.cs-kcard:hover::before { opacity: 1; }
.cs-kcard.cf-hidden { display: none; }
.cs-art { position: relative; height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--cs-deep); }
.cs-art.tint-rare { background: linear-gradient(135deg, #0d1117, #101d35); }
.cs-art.tint-epic { background: linear-gradient(135deg, #0d1117, #1a0d2e); }
.cs-art.tint-gold { background: linear-gradient(135deg, #0d1117, #2a1f00); }
.cs-art-img { position: relative; z-index: 1; width: 130px; height: 130px; object-fit: contain; filter: drop-shadow(0 0 30px var(--cs-glow)); transition: transform .4s, filter .4s; }
.cs-kcard:hover .cs-art-img { transform: scale(1.08) translateY(-4px); filter: drop-shadow(0 0 45px var(--cs-glow)); }
.cs-art-ph { position: relative; z-index: 1; font-size: 72px; color: var(--cs-acc2); filter: drop-shadow(0 0 30px var(--cs-glow)); transition: transform .4s; }
.cs-kcard:hover .cs-art-ph { transform: scale(1.1) translateY(-4px); }
.cs-glow-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cs-acc), transparent); opacity: 0; transition: opacity .3s; }
.cs-kcard:hover .cs-glow-line { opacity: 1; }
.cs-free { position: absolute; top: 12px; left: 12px; z-index: 4; padding: 4px 10px; border-radius: 20px; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.cs-kinfo { position: relative; display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.cs-title { margin-bottom: 5px; font-family: var(--cs-head); font-size: 20px; font-weight: 800; letter-spacing: 1px; line-height: 1.2; text-transform: uppercase; }
.cs-desc { margin-bottom: 10px; color: var(--cs-muted); font-size: 12px; line-height: 1.5; }
.cs-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 16px; color: var(--cs-muted); font-size: 11.5px; }
.cs-meta i { color: var(--cs-acc2); font-size: 11px; margin-right: 2px; }
.cs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.cs-price { font-family: var(--cs-head); font-size: 22px; font-weight: 800; color: var(--cs-price); white-space: nowrap; }
.cs-price.free { color: var(--cs-green); }
.cs-open { padding: 10px 22px; border-radius: 8px; background: var(--cs-grad); color: var(--cs-btn-text); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; transition: transform .25s, box-shadow .25s; }
.cs-kcard:hover .cs-open { transform: scale(1.05); box-shadow: 0 8px 25px rgba(155,109,255,.35); }
.cs-lock { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: inherit; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: pointer; }
.cs-lock > i { font-size: 28px; color: #fff; opacity: .9; }
.cs-lock time { margin-top: 4px; color: var(--cs-acc); font: 700 15px/1 ui-monospace, Consolas, monospace; }
.cs-lock small { color: var(--cs-muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.cs-page .cs-kcard.is-locked:hover { transform: none; border-color: rgba(255,255,255,.06); box-shadow: none; }
.cs-kcard.is-locked:hover .cs-art-img { transform: none; }

/* ---------- пустые состояния ---------- */
.cs-empty { display: grid; justify-items: center; gap: 8px; padding: 70px 20px; text-align: center; color: var(--cs-muted); }
.cs-empty > i { font-size: 52px; opacity: .4; margin-bottom: 8px; }
.cs-empty b { font-size: 19px; color: var(--cs-text); }
.cs-empty span { font-size: 14px; }
.cs-empty .btn { margin-top: 10px; }
.cs-empty.flat { padding: 50px 20px; }

/* ---------- инвентарь: «Часто открываемые» и «Мой лучший дроп» ---------- */
.cs-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 22px; }
.cs-panel { min-width: 0; padding: 16px 20px; background: var(--cs-kcard); border: 1px solid var(--cs-line); border-radius: 14px; }
.cs-panel-lbl { margin-bottom: 12px; color: var(--cs-acc); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.cs-panel-lbl.gold { color: var(--cs-gold); }
.cs-poplist { display: grid; gap: 8px; }
.cs-page .cs-pop-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.03); color: var(--cs-text); transition: background .2s; }
.cs-page .cs-pop-row:hover { background: rgba(155,109,255,.08); color: var(--cs-text); }
.cs-pop-img { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--cs-elev); color: var(--cs-acc2); overflow: hidden; }
.cs-pop-img img { width: 100%; height: 100%; object-fit: contain; }
.cs-pop-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-pop-cnt { flex: none; color: var(--cs-muted); font-size: 11px; }
.cs-pop-btn { flex: none; padding: 5px 12px; border-radius: 6px; background: var(--cs-grad); color: var(--cs-btn-text); font-size: 11px; font-weight: 700; }
.cs-best { display: flex; align-items: center; gap: 16px; }
.cs-best-img { width: 80px; height: 80px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--cs-elev); border: 1px solid rgba(255,214,10,.2); color: var(--rc); font-size: 34px; overflow: hidden; }
.cs-best-img img { width: 100%; height: 100%; object-fit: contain; }
.cs-best-info { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.cs-rbadge { display: inline-block; padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, var(--rc) 15%, transparent); color: var(--rc); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.cs-best-name { font-family: var(--cs-head); font-size: 19px; font-weight: 800; line-height: 1.2; }
.cs-best-from { color: var(--cs-muted); font-size: 11px; }
.cs-best-val { margin-top: 3px; padding: 3px 12px; border-radius: 20px; background: rgba(255,214,10,.12); border: 1px solid rgba(255,214,10,.25); color: var(--cs-gold); font-size: 13px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- инвентарь: сетка ---------- */
.cs-inv-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cs-inv-title { color: var(--cs-acc); font-family: var(--cs-head); font-size: 20px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.cs-inv-title i { font-size: 17px; margin-right: 4px; }
.cs-sellall { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 0; border-radius: 8px; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: filter .2s, transform .2s; }
.cs-sellall:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cs-sellall:disabled { opacity: .5; cursor: wait; }
.cs-inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }
.cs-inv { position: relative; background: var(--cs-kcard); border: 1px solid var(--cs-line); border-radius: 12px; transition: border-color .2s, transform .2s, opacity .3s, box-shadow .2s; }
.cs-inv:hover { border-color: rgba(255,255,255,.15); transform: translateY(-2px); }
.cs-inv.gone { opacity: 0; transform: scale(.8); pointer-events: none; }
.cs-inv-rbar { display: block; height: 3px; border-radius: 12px 12px 0 0; background: var(--rc); }
.cs-inv-img { height: 105px; display: flex; align-items: center; justify-content: center; padding: 10px; background: var(--cs-elev); color: var(--rc); font-size: 40px; }
.cs-inv-img img { width: 75px; height: 75px; object-fit: contain; }
.cs-inv-body { padding: 9px 10px 11px; }
.cs-inv-name { margin-bottom: 2px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-inv-rar { margin-bottom: 5px; color: var(--rc); font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.cs-inv-val { margin-bottom: 8px; color: var(--cs-green); font-size: 11px; font-weight: 700; }
.cs-tbadge { display: block; max-width: 100%; margin-bottom: 8px; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-tbadge.is-priv { background: rgba(99,102,241,.15); color: var(--cs-indigo); }
.cs-tbadge.tkt { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.25); color: #fbbf24; }
.cs-tbadge.extra { background: rgba(155,109,255,.14); color: var(--cs-acc2); }
.cs-inv.type-privilege { border-color: rgba(99,102,241,.35); }
.cs-inv.type-privilege:hover { border-color: rgba(129,140,248,.6); box-shadow: 0 0 20px rgba(99,102,241,.18); }
.cs-inv.type-ticket { border-color: rgba(251,191,36,.35); background: linear-gradient(135deg, rgba(251,191,36,.05), rgba(245,158,11,.02)), var(--cs-kcard); }
.cs-inv.type-ticket:hover { border-color: rgba(251,191,36,.6); box-shadow: 0 0 24px rgba(251,191,36,.15); }
.cs-inv-acts { display: flex; gap: 6px; }
.cs-inv-acts form { display: flex; flex: 1; margin: 0; }
.cs-page .cs-ib {
  position: relative; flex: 1; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px;
  color: #fff; font-size: 15px; cursor: pointer; transition: filter .2s, transform .2s;
}
.cs-ib.claim { background: linear-gradient(135deg, #9b6dff, #0099bb); }
.cs-ib.sell { background: linear-gradient(135deg, #22c55e, #16a34a); }
.cs-ib.is-priv { background: linear-gradient(135deg, #6366f1, #818cf8); }
.cs-ib.tkt { background: linear-gradient(135deg, #f59e0b, #d97706); }
.cs-page .cs-ib:hover { filter: brightness(1.2); transform: scale(1.07); color: #fff; }
.cs-ib:disabled { opacity: .45; cursor: wait; filter: none; transform: none; }
/* подсказки над кнопками */
.cs-ib::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 20; transform: translateX(-50%) translateY(4px);
  padding: 5px 10px; border-radius: 7px; background: #1a1f2e; border: 1px solid rgba(255,255,255,.13); color: #e8eaf0;
  font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; box-shadow: 0 4px 20px rgba(0,0,0,.6);
}
.cs-ib::before { content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; z-index: 20; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a1f2e; pointer-events: none; opacity: 0; transition: opacity .15s; }
.cs-ib:hover::after, .cs-ib:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.cs-ib:hover::before, .cs-ib:focus-visible::before { opacity: 1; }
.cs-inv-acts form:first-child:not(:last-child) .cs-ib::after, .cs-inv-acts > a:first-child:not(:last-child)::after { left: 0; transform: translateY(4px); }
.cs-inv-acts form:first-child:not(:last-child) .cs-ib:hover::after, .cs-inv-acts > a:first-child:not(:last-child):hover::after { transform: none; }
.cs-inv-acts form:last-child:not(:first-child) .cs-ib::after { left: auto; right: 0; transform: translateY(4px); }
.cs-inv-acts form:last-child:not(:first-child) .cs-ib:hover::after { transform: none; }

/* ---------- история ---------- */
.cs-list { background: var(--cs-kcard); border: 1px solid var(--cs-line); border-radius: var(--cs-r); overflow: hidden; }
.cs-list-head { padding: 18px 24px; border-bottom: 1px solid var(--cs-line); color: var(--cs-acc); font-family: var(--cs-head); font-size: 17px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.cs-list-head i { margin-right: 6px; font-size: 15px; }
.cs-row { display: flex; align-items: center; gap: 14px; padding: 12px 24px; border-bottom: 1px solid var(--cs-line); transition: background .2s; }
.cs-row:last-child { border-bottom: 0; }
.cs-row:hover { background: rgba(255,255,255,.02); }
.cs-row-bar { width: 4px; height: 40px; flex: none; border-radius: 2px; background: var(--rc); box-shadow: 0 0 10px var(--rg); }
.cs-row-img { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--cs-elev); color: var(--rc); font-size: 18px; overflow: hidden; }
.cs-row-img img { width: 34px; height: 34px; object-fit: contain; }
.cs-row-info { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cs-row-info b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-row-info b i { margin: 0 4px; color: var(--cs-muted); font-size: 11px; }
.cs-row-info small { color: var(--cs-muted); font-size: 12px; }
.cs-row-rar { color: var(--rc); font-weight: 600; }
.cs-row-st { flex: none; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.cs-row-st.st-new { background: rgba(155,109,255,.14); color: var(--cs-acc2); }
.cs-row-st.st-claimed { background: rgba(34,197,94,.12); color: #4ade80; }
.cs-row-st.st-sold { background: rgba(245,158,11,.12); color: #fbbf24; }
.cs-row-date { flex: none; min-width: 110px; color: var(--cs-muted); font-size: 12px; text-align: right; }

/* ---------- страница кейса ---------- */
.cs-page .cs-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 9px 16px; border-radius: 10px; background: var(--cs-kcard); border: 1px solid var(--cs-line); color: var(--cs-muted); font-size: 12.5px; font-weight: 600; }
.cs-page .cs-back:hover { color: #fff; border-color: rgba(155,109,255,.5); }
.cs-chero { display: grid; grid-template-columns: 300px 1fr; gap: 26px; margin-bottom: 22px; padding: 26px; background: linear-gradient(180deg, #181b42, #0e1030); border: 1px solid var(--cs-line); border-radius: 20px; }
.cs-box { position: relative; height: 280px; display: flex; align-items: center; justify-content: center; border-radius: 16px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(155,109,255,.22), transparent 70%), linear-gradient(135deg, #0d1117, #1a1f2e); }
.cs-box.tint-rare { background: radial-gradient(circle at 50% 40%, rgba(59,130,246,.22), transparent 70%), linear-gradient(135deg, #0d1117, #101d35); }
.cs-box.tint-epic { background: radial-gradient(circle at 50% 40%, rgba(168,85,247,.25), transparent 70%), linear-gradient(135deg, #0d1117, #1a0d2e); }
.cs-box.tint-gold { background: radial-gradient(circle at 50% 40%, rgba(255,214,10,.2), transparent 70%), linear-gradient(135deg, #0d1117, #2a1f00); }
.cs-box img { width: 200px; height: 200px; object-fit: contain; filter: drop-shadow(0 0 40px rgba(155,109,255,.5)); animation: csFloat 4s ease-in-out infinite; }
.cs-box-ph { font-size: 110px; color: var(--cs-acc2); filter: drop-shadow(0 0 40px rgba(155,109,255,.55)); }
@keyframes csFloat { 50% { transform: translateY(-8px); } }
.cs-cmeta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; }
.cs-page .cs-ctitle { margin: 0; font-family: var(--cs-head); font-size: 32px; font-weight: 800; letter-spacing: 1px; line-height: 1.05; text-transform: uppercase; }
.cs-csub { max-width: 52ch; margin: 8px 0 0; color: var(--cs-muted); font-size: 13px; line-height: 1.6; }
.cs-cinfo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cs-cinfo span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--cs-line); color: var(--cs-muted); font-size: 12px; }
.cs-cinfo i { color: var(--cs-acc2); }
.cs-status { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 10px 16px; border-radius: 11px; font-size: 13px; font-weight: 700; }
.cs-status .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.cs-status.ready { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); color: #4ade80; }
.cs-status.ready .dot { animation: csBlink 1.4s infinite; }
.cs-status.locked { background: rgba(155,109,255,.1); border: 1px solid rgba(155,109,255,.35); color: var(--cs-acc2); }
.cs-status.locked time { font-family: ui-monospace, Consolas, monospace; }
.cs-status.ticket { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.35); color: #fbbf24; }
.cs-status.guest { background: rgba(255,255,255,.04); border: 1px solid var(--cs-line2); color: var(--cs-muted); }
.cs-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.cs-cta form { margin: 0; }
.cs-bigprice { font-family: var(--cs-head); font-size: 26px; font-weight: 800; color: var(--cs-price); white-space: nowrap; }
.cs-bigprice.free { color: var(--cs-green); }
.cs-bigprice s { color: var(--cs-muted); font-size: 18px; font-weight: 600; }
.cs-page .cs-bigopen {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 34px; border: 0; border-radius: 12px; background: var(--cs-btn); color: var(--cs-btn-text);
  font: inherit; font-size: 15px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 8px 24px rgba(155,109,255,.4); transition: filter .2s, transform .2s, box-shadow .2s;
}
.cs-page .cs-bigopen:hover { filter: brightness(1.1); transform: translateY(-2px); color: var(--cs-btn-text); }
.cs-page .cs-bigopen:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; filter: grayscale(.4); transform: none; }
.cs-page .cs-bigopen.ticket { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 8px 24px rgba(245,158,11,.35); }
.cs-bigopen.busy i { animation: csSpin .8s linear infinite; }
@keyframes csSpin { to { transform: rotate(360deg); } }
.cs-short { color: var(--cs-red); font-size: 12.5px; font-weight: 700; }
.cs-page .cs-short a { color: var(--cs-acc2); text-decoration: underline; }
.cs-ms { width: 100%; max-width: 420px; margin-top: 18px; }
.cs-ms-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: var(--cs-muted); font-size: 12.5px; }
.cs-ms-top > i { color: #fbbf24; }
.cs-ms-top span { flex: 1; }
.cs-ms-top b { color: #fbbf24; }
.cs-ms-top small { color: var(--cs-muted); font-family: ui-monospace, Consolas, monospace; }
.cs-ms-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.cs-ms-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f59e0b, #fbbf24); box-shadow: 0 0 10px rgba(251,191,36,.5); transition: width .6s; }

/* ---------- рулетка ---------- */
.cs-roll { margin-bottom: 28px; }
.cs-stage { position: relative; height: 165px; background: var(--cs-stage); border: 1px solid var(--cs-line); border-radius: 12px; overflow: hidden; }
.cs-stage::before, .cs-stage::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 5; width: 120px; pointer-events: none; }
.cs-stage::before { left: 0; background: linear-gradient(to right, var(--cs-stage), transparent); }
.cs-stage::after { right: 0; background: linear-gradient(to left, var(--cs-stage), transparent); }
.cs-pointer { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 10; width: 2px; transform: translateX(-50%); background: linear-gradient(to bottom, var(--cs-acc), rgba(155,109,255,.3)); pointer-events: none; }
.cs-pointer::before, .cs-pointer::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; }
.cs-pointer::before { top: 0; border-top: 10px solid var(--cs-acc); }
.cs-pointer::after { bottom: 0; border-bottom: 10px solid var(--cs-acc); }
.cs-track { position: absolute; top: 10px; left: 0; display: flex; gap: 8px; padding: 0 4px; will-change: transform; }
.cs-ritem {
  position: relative; flex: 0 0 120px; height: 145px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px;
  border-radius: 10px; background: radial-gradient(90% 55% at 50% 100%, color-mix(in srgb, var(--rc) 16%, transparent), transparent 70%), var(--cs-solid);
  border: 1px solid var(--cs-line); border-bottom: 2px solid var(--rc); overflow: hidden; transition: transform .3s, box-shadow .3s;
}
.cs-ritem.r-legendary { background: radial-gradient(90% 55% at 50% 100%, rgba(255,214,10,.16), transparent 70%), linear-gradient(rgba(255,214,10,.04), rgba(255,214,10,.04)), var(--cs-solid); }
.cs-ritem-img { height: 64px; display: flex; align-items: center; justify-content: center; color: var(--rc); font-size: 36px; }
.cs-ritem-img img { width: 64px; height: 64px; object-fit: contain; }
.cs-ritem-name { width: 100%; font-size: 11px; font-weight: 600; text-align: center; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-ritem.win { transform: scale(1.05); border-color: var(--rc); box-shadow: 0 0 26px var(--rg), inset 0 0 18px color-mix(in srgb, var(--rc) 22%, transparent); z-index: 2; }
.cs-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.cs-quick { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: var(--cs-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; user-select: none; }
.cs-quick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-toggle { position: relative; width: 34px; height: 20px; flex: none; border-radius: 20px; background: rgba(255,255,255,.1); border: 1px solid var(--cs-line2); transition: background .2s; }
.cs-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.cs-quick input:checked + .cs-toggle { background: var(--cs-acc); border-color: var(--cs-acc); }
.cs-quick input:checked + .cs-toggle::after { transform: translateX(14px); }
.cs-quick input:focus-visible + .cs-toggle { box-shadow: 0 0 0 3px rgba(155,109,255,.3); }
.cs-sound { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 1px solid var(--cs-line); background: var(--cs-kcard); color: var(--cs-muted); font-size: 14px; cursor: pointer; transition: .2s; }
.cs-sound:hover { color: #fff; border-color: var(--cs-line2); }
.cs-sound.off { color: var(--cs-red); }

/* ---------- «Что внутри» ---------- */
.cs-items-lbl { margin: 0 0 14px; color: var(--cs-muted); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.cs-ci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cs-ci { background: var(--cs-kcard); border: 1px solid var(--cs-line); border-radius: 12px; overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; }
.cs-ci:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--rc) 55%, transparent); box-shadow: 0 10px 26px -12px var(--rg); }
.cs-ci.reward { border-style: dashed; }
.cs-ci-bar { display: block; height: 3px; background: var(--rc); }
.cs-ci-img { height: 96px; display: flex; align-items: center; justify-content: center; background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--rc) 14%, transparent), transparent 70%), var(--cs-elev); color: var(--rc); font-size: 36px; }
.cs-ci-img img { width: 70px; height: 70px; object-fit: contain; }
.cs-ci-b { padding: 10px 11px 12px; }
.cs-ci-nm { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-ci-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.cs-ci-val { min-width: 0; color: var(--cs-green); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-ci-val.type-privilege { color: var(--cs-indigo); }
.cs-ci-val.type-ticket { color: #fbbf24; }
.cs-ci-val.type-wheel, .cs-ci-val.type-plus { color: var(--cs-acc2); }
.cs-ci-ch { flex: none; color: var(--cs-muted); font-size: 11px; font-weight: 700; }
.cs-ci-ch b { color: var(--cs-acc2); }
.cs-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; color: var(--cs-muted); font-size: 12px; }
.cs-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cs-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--rc); box-shadow: 0 0 8px var(--rg); }

/* ---------- окна ---------- */
.modal.cs-modal { z-index: 1500; background: rgba(0,0,0,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow-y: auto; }
.cs-mbox {
  position: relative; width: 100%; max-width: 560px; margin: auto; background: var(--cs-solid); border: 1px solid rgba(155,109,255,.2); border-radius: 20px; overflow: hidden;
  color: var(--cs-text); box-shadow: 0 0 100px rgba(155,109,255,.08), 0 40px 80px rgba(0,0,0,.5); animation: csModalIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes csModalIn { from { transform: scale(.85) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.cs-mline { display: block; height: 2px; background: linear-gradient(90deg, transparent, var(--cs-acc), var(--cs-acc2), transparent); }
.cs-mhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 26px 16px; }
.cs-mtitle { color: var(--cs-acc); font-family: var(--cs-head); font-size: 19px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.cs-mtitle i { margin-right: 6px; }
.cs-modal .cs-mclose { width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--cs-line); color: var(--cs-muted); font-size: 16px; cursor: pointer; transition: .2s; }
.cs-modal .cs-mclose:hover { background: rgba(255,59,59,.15); border-color: rgba(255,59,59,.3); color: var(--cs-red); }
.cs-mbody { padding: 0 26px 26px; }

/* результат */
.cs-res { position: relative; margin-bottom: 20px; padding: 28px 24px; border-radius: 14px; text-align: center; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc, #9b6dff) 16%, transparent), transparent 70%), linear-gradient(135deg, rgba(155,109,255,.1), rgba(183,148,255,.06));
  border: 1px solid rgba(155,109,255,.2); }
.cs-res-ribbon { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cs-acc), transparent); }
.cs-res-img { width: 120px; height: 120px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; color: var(--rc); font-size: 56px; animation: csPop .5s cubic-bezier(.34,1.56,.64,1); }
.cs-res-img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 24px var(--rg)); }
@keyframes csPop { from { transform: scale(.4); opacity: 0; } }
.cs-res-name { margin-bottom: 8px; font-family: var(--cs-head); font-size: 28px; font-weight: 800; letter-spacing: 1px; line-height: 1.15; overflow-wrap: anywhere; }
.cs-res-rar { display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 20px; background: rgba(255,255,255,.08); color: var(--rc); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.cs-res-val { color: var(--cs-muted); font-size: 14px; }
.cs-res.legendary { background: radial-gradient(circle at 50% 30%, rgba(255,214,10,.2), transparent 70%), linear-gradient(135deg, rgba(255,214,10,.12), rgba(255,150,0,.08)); border-color: rgba(255,214,10,.35); }
.cs-res.legendary .cs-res-ribbon { background: linear-gradient(90deg, transparent, var(--cs-gold), transparent); }
.cs-res.legendary .cs-res-name { color: var(--cs-gold); text-shadow: 0 0 24px rgba(255,214,10,.35); }
.cs-res-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cs-modal .cs-take, .cs-modal .cs-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; border: 0; border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: transform .25s, filter .25s;
}
.cs-modal .cs-take { background: var(--cs-btn); color: var(--cs-btn-text); animation: csTakePulse 2s infinite; }
.cs-modal .cs-take:hover { transform: scale(1.05); color: var(--cs-btn-text); }
.cs-modal .cs-take.tkt { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; animation: none; }
.cs-modal .cs-take.is-priv { background: linear-gradient(135deg, #6366f1, #818cf8); color: #fff; animation: none; }
.cs-modal .cs-take:disabled { opacity: .7; cursor: wait; animation: none; transform: none; }
.cs-modal .cs-ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--cs-text); }
.cs-modal .cs-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.cs-modal .cs-ghost.again { border-color: var(--cs-line2); color: var(--cs-acc2); }
@keyframes csTakePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(155,109,255,.4); } 50% { box-shadow: 0 0 0 12px rgba(155,109,255,0); } }

/* активация привилегии */
.cs-mbox.is-priv { max-width: 440px; }
.cs-mbox.is-priv .cs-mline { background: linear-gradient(90deg, transparent, #6366f1, #818cf8, transparent); }
.cs-mbox.is-priv .cs-mtitle { color: var(--cs-indigo); }
.cs-priv-card { margin-bottom: 20px; padding: 16px 20px; border-radius: 12px; background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.2); text-align: center; }
.cs-priv-ic { display: block; margin-bottom: 8px; color: var(--cs-indigo); font-size: 30px; filter: drop-shadow(0 0 12px rgba(129,140,248,.5)); }
.cs-priv-name { margin-bottom: 8px; color: var(--cs-indigo); font-family: var(--cs-head); font-size: 22px; font-weight: 800; }
.cs-priv-days { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 20px; background: rgba(99,102,241,.15); color: #a5b4fc; font-size: 12px; font-weight: 700; }
.cs-priv-srv { margin-top: 8px; color: var(--cs-muted); font-size: 12px; }
.cs-priv-srv b { color: var(--cs-text); }
.cs-lbl { display: grid; gap: 6px; margin: 0 0 14px; color: #6b7280; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.cs-modal .cs-lbl input { width: 100%; padding: 11px 14px; border-radius: 9px; background: #0d1117; border: 1px solid rgba(99,102,241,.25); color: #e2e8f0; font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; }
.cs-modal .cs-lbl input:focus { border-color: rgba(99,102,241,.7); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.cs-modal .cs-lbl input.bad { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.15); }
.cs-select { position: relative; display: block; }
.cs-select::after { content: "\f078"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--cs-indigo); font: 900 11px "Font Awesome 6 Free"; pointer-events: none; }
.cs-modal .cs-select select { width: 100%; padding: 12px 40px 12px 14px; border-radius: 10px; background: #0d1117; border: 1px solid rgba(99,102,241,.3); color: #e2e8f0; font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; cursor: pointer; appearance: none; -webkit-appearance: none; }
.cs-hint { display: flex; gap: 10px; margin: -4px 0 14px; padding: 11px 14px; border-radius: 9px; background: rgba(99,102,241,.07); border: 1px solid rgba(99,102,241,.15); color: #6b7280; font-size: 12px; line-height: 1.7; }
.cs-hint > i { margin-top: 3px; color: #fbbf24; font-size: 15px; }
.cs-hint b { color: #a5b4fc; }
.cs-hint span { color: #4b5563; }
.cs-modal kbd { padding: 2px 8px; border-radius: 5px; background: rgba(99,102,241,.2); color: #c7d2fe; font: 12px ui-monospace, Consolas, monospace; }
.cs-modal kbd.k { padding: 1px 7px; background: rgba(255,255,255,.07); color: #9ca3af; }
.cs-pw-hint { display: block; margin: -6px 0 14px; color: #6b7280; font-size: 11.5px; }
.cs-msg { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; }
.cs-msg.err { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.22); color: #f87171; }
.cs-msg.ok { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.22); color: #4ade80; }
.cs-priv-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #818cf8); color: #fff; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 20px rgba(99,102,241,.25); transition: filter .2s, transform .2s; }
.cs-priv-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.cs-priv-btn:disabled { opacity: .7; cursor: wait; transform: none; }
.cs-warn { display: flex; gap: 10px; margin-top: 14px; padding: 11px 14px; border-radius: 9px; background: rgba(245,158,11,.05); border: 1px solid rgba(245,158,11,.15); color: #6b7280; font-size: 12px; line-height: 1.7; }
.cs-warn > i { margin-top: 3px; color: #f59e0b; font-size: 15px; }
.cs-warn .amber { color: #fbbf24; }
.cs-warn .indigo { color: var(--cs-indigo); }

/* билет */
.cs-mbox.tkt { max-width: 400px; background: #0d1117; border-color: rgba(251,191,36,.4); box-shadow: 0 0 80px rgba(251,191,36,.12), 0 30px 70px rgba(0,0,0,.8); }
.cs-mbox.tkt .cs-mline { height: 3px; background: linear-gradient(90deg, transparent, #f59e0b 30%, #fbbf24, #d97706 70%, transparent); }
.cs-mbox.tkt .cs-mtitle { color: #f59e0b; font-size: 15px; letter-spacing: 3px; }
.cs-tkt-card { position: relative; margin: 0 22px 16px; padding: 22px 20px; border-radius: 16px; background: linear-gradient(135deg, rgba(251,191,36,.08), rgba(245,158,11,.05)); border: 1px solid rgba(251,191,36,.18); text-align: center; overflow: hidden; }
.cs-tkt-card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(251,191,36,.03) 8px, rgba(251,191,36,.03) 16px); }
.cs-tkt-card > * { position: relative; }
.cs-tkt-ic { display: block; margin-bottom: 10px; color: #fbbf24; font-size: 40px; filter: drop-shadow(0 0 12px rgba(251,191,36,.5)); transform: rotate(-12deg); }
.cs-tkt-name { margin-bottom: 8px; color: #fbbf24; font-family: var(--cs-head); font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.cs-tkt-sub { color: #a8a29e; font-size: 12px; }
.cs-tkt-free { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 16px; border-radius: 20px; background: rgba(251,191,36,.15); border: 1px solid rgba(251,191,36,.3); color: #fbbf24; font-size: 12px; font-weight: 700; }
.cs-mbox.tkt .cs-mbody { padding: 0 22px 22px; }
.cs-modal .cs-tkt-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 11px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; box-shadow: 0 4px 20px rgba(245,158,11,.35); transition: filter .2s, transform .2s, box-shadow .2s; }
.cs-modal .cs-tkt-btn:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(245,158,11,.45); color: #fff; }
.cs-tkt-note { margin-top: 11px; color: #6b7280; font-size: 11px; line-height: 1.8; text-align: center; }

/* конфетти и всплывашка достижения */
.cs-confetti { position: fixed; top: -12px; z-index: 2000; border-radius: 2px; pointer-events: none; animation: csConfetti 2.5s ease-in forwards; }
@keyframes csConfetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: 0; } }
.cs-pop {
  position: fixed; top: 24px; left: 50%; z-index: 2100; display: flex; align-items: center; gap: 14px; width: max-content; min-width: 320px; max-width: min(460px, calc(100vw - 24px));
  padding: 18px 24px; border-radius: 16px; background: linear-gradient(135deg, #1a1a2e, #16213e); border: 1px solid rgba(251,191,36,.5); color: var(--cs-text);
  box-shadow: 0 0 60px rgba(251,191,36,.2), 0 20px 50px rgba(0,0,0,.7); transform: translateX(-50%) translateY(-160px); transition: transform .5s cubic-bezier(.34,1.4,.64,1); overflow: hidden;
}
.cs-pop.show { transform: translateX(-50%) translateY(0); }
.cs-pop > i { flex: none; color: #fbbf24; font-size: 32px; filter: drop-shadow(0 0 12px rgba(251,191,36,.6)); }
.cs-pop b { display: block; margin-bottom: 3px; color: #fbbf24; font-family: var(--cs-head); font-size: 15px; letter-spacing: .5px; }
.cs-pop span { display: block; color: #9ca3af; font-size: 12.5px; line-height: 1.5; }
.cs-pop-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.cs-pop.show .cs-pop-bar { animation: csBar 4s linear forwards; }
@keyframes csBar { to { width: 0; } }

/* ---------- адаптив (как в старом модуле: 1024 / 640 / 380) ---------- */
@media (max-width: 1024px) {
  .cs-kgrid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
  .cs-art { height: 180px; }
}
@media (max-width: 760px) {
  .cs-chero { grid-template-columns: 1fr; padding: 18px; gap: 18px; }
  .cs-box { height: 220px; }
  .cs-box img { width: 160px; height: 160px; }
  .cs-row { flex-wrap: wrap; padding: 12px 16px; gap: 6px 12px; }
  .cs-row-info { flex-basis: calc(100% - 80px); }
  .cs-row-st { margin-left: 58px; }
  .cs-row-date { min-width: 0; margin-left: auto; }
}
@media (max-width: 640px) {
  .cs-hero { margin-bottom: 22px; }
  .cs-sub { font-size: 11px; letter-spacing: 2px; }
  .cs-tabs { width: 100%; gap: 3px; margin-bottom: 22px; }
  .cs-page .cs-tab { flex: 1; padding: 10px 4px; font-size: 12px; letter-spacing: .3px; gap: 6px; }
  .cs-search { max-width: none; flex-basis: 100%; }
  .cs-kgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .cs-art { height: 140px; }
  .cs-art-img { width: 95px; height: 95px; }
  .cs-kinfo { padding: 14px 14px 16px; }
  .cs-title { font-size: 16px; }
  .cs-desc { font-size: 11px; }
  .cs-meta { margin-bottom: 12px; }
  .cs-price { font-size: 18px; }
  .cs-open { padding: 9px 14px; font-size: 12px; }
  .cs-foot { gap: 8px; }
  .cs-panels { grid-template-columns: minmax(0, 1fr); }
  .cs-inv-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .cs-inv-img { height: 90px; }
  .cs-inv-img img { width: 64px; height: 64px; }
  .cs-stage::before, .cs-stage::after { width: 50px; }
  .cs-stage { height: 145px; }
  .cs-track { top: 9px; gap: 6px; }
  .cs-ritem { flex-basis: 100px; height: 125px; gap: 6px; }
  .cs-ritem-img, .cs-ritem-img img { height: 52px; width: 52px; }
  .cs-page .cs-ctitle { font-size: 26px; }
  .cs-page .cs-bigopen { padding: 13px 24px; }
  .cs-mhead { padding: 16px 18px 12px; }
  .cs-mbody { padding: 0 18px 20px; }
  .cs-res { padding: 20px 16px; }
  .cs-res-img { width: 96px; height: 96px; }
  .cs-res-name { font-size: 22px; }
  .cs-modal .cs-take, .cs-modal .cs-ghost { flex: 1 1 100%; }
  .cs-best { gap: 12px; }
  .cs-best-img { width: 64px; height: 64px; }
  .cs-best-name { font-size: 16px; }
  .cs-pop { min-width: 0; padding: 14px 16px; gap: 10px; }
}
@media (max-width: 380px) {
  .cs-kgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cs-page .cs-tab { font-size: 11px; padding: 9px 2px; }
  .cs-page .cs-tab i { display: none; }
  .cs-title { font-size: 14px; }
  .cs-price { font-size: 16px; }
  .cs-open { padding: 8px 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-page .cs-kcard { animation: none; }
  .cs-box img, .cs-feed-lbl::before, .cs-status .dot, .cs-modal .cs-take { animation: none; }
}

/* ======================= неон ======================= */
.neon .cs-page, .neon .cs-modal, .neon .cs-pop {
  --cs-kcard: var(--tile);
  --cs-solid: #211a38;
  --cs-elev: rgba(0,0,0,.32);
  --cs-deep: radial-gradient(circle at 50% 45%, rgba(168,85,247,.22), transparent 68%), #1f1834;
  --cs-line: var(--line);
  --cs-line2: rgba(168,85,247,.45);
  --cs-acc: #22d3ee;
  --cs-acc2: #67e8f9;
  --cs-grad: var(--grad);
  --cs-btn: var(--grad);
  --cs-btn-text: #05060b;
  --cs-glow: rgba(34,211,238,.35);
  --cs-price: #67e8f9;
  --cs-green: #34d399;
  --cs-text: var(--text);
  --cs-muted: var(--muted);
  --cs-r: 20px;
  --cs-head: var(--head-font);
  --cs-stage: #07080e;
}
.neon .cs-page .cs-h { font-weight: 700; letter-spacing: 1px; text-shadow: none; filter: drop-shadow(0 0 30px rgba(168,85,247,.25)); }
.neon .cs-sub { letter-spacing: 4px; font-size: 12.5px; font-weight: 600; }
.neon .cs-tabs { background: rgba(255,255,255,.04); border-color: var(--line); border-radius: 16px; }
.neon .cs-page .cs-tab { border-radius: 12px; font-family: var(--head-font); font-size: 12.5px; font-weight: 600; letter-spacing: .5px; text-transform: none; }
.neon .cs-page .cs-tab.active { background: linear-gradient(90deg, rgba(34,211,238,.14), rgba(168,85,247,.16)); border-color: rgba(168,85,247,.4); color: #fff; box-shadow: 0 8px 24px -14px rgba(34,211,238,.6); }
.neon .cs-page .cs-tab.active i { color: var(--cyan); }
.neon .cs-tab-n { background: var(--pink); }
.neon .cs-guest { background: rgba(34,211,238,.06); border-color: rgba(34,211,238,.25); border-radius: 16px; }
.neon .cs-page .cs-search input { background: rgba(0,0,0,.35); border-color: var(--line2); border-radius: 12px; padding-left: 34px; }
.neon .cs-chip { background: rgba(255,255,255,.04); border-color: var(--line); border-radius: 12px; }
.neon .cs-chip:hover { border-color: var(--line2); }
.neon .cs-chip.on { background: linear-gradient(90deg, rgba(34,211,238,.14), rgba(168,85,247,.16)); border-color: rgba(168,85,247,.45); }
.neon .cs-menu { background: #231b3b; border-color: var(--line2); border-radius: 14px; }
.neon .cs-menu button:hover { background: rgba(255,255,255,.06); }
.neon .cs-feed, .neon .cs-panel { border-radius: 20px; }
.neon .cs-feed-lbl, .neon .cs-panel-lbl:not(.gold) { color: var(--cyan); }
.neon .cs-feed-lbl::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
.neon .cs-page .cs-drop { background: rgba(0,0,0,.3); border-radius: 12px; }
.neon .cs-page .cs-drop:hover { box-shadow: 0 8px 20px -10px var(--rg); }
.neon .cs-page .cs-kcard:hover { border-color: rgba(168,85,247,.45); box-shadow: 0 20px 60px -20px rgba(34,211,238,.35), 0 0 0 1px rgba(168,85,247,.12); }
.neon .cs-kcard::before { background: linear-gradient(160deg, rgba(34,211,238,.06), rgba(168,85,247,.08)); }
.neon .cs-art { border-bottom: 1px solid var(--line); }
.neon .cs-art.tint-rare { background: radial-gradient(circle at 50% 45%, rgba(59,130,246,.28), transparent 68%), #1f1834; }
.neon .cs-art.tint-epic { background: radial-gradient(circle at 50% 45%, rgba(217,70,239,.26), transparent 68%), #1f1834; }
.neon .cs-art.tint-gold { background: radial-gradient(circle at 50% 45%, rgba(251,191,36,.24), transparent 68%), #1f1834; }
.neon .cs-glow-line { background: var(--grad); height: 2px; }
.neon .cs-title { font-size: 16px; font-weight: 600; letter-spacing: .2px; text-transform: none; }
.neon .cs-price { font-size: 19px; font-weight: 700; }
.neon .cs-open { border-radius: 11px; font-weight: 800; letter-spacing: .3px; text-transform: none; font-size: 13px; }
.neon .cs-kcard:hover .cs-open { box-shadow: 0 10px 30px -10px rgba(34,211,238,.6); }
.neon .cs-lock time { color: var(--cyan); }
.neon .cs-inv-title, .neon .cs-list-head { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: .3px; text-transform: none; }
.neon .cs-inv-title i, .neon .cs-list-head i { color: var(--cyan); }
.neon .cs-inv { border-radius: 16px; }
.neon .cs-inv-rbar { border-radius: 16px 16px 0 0; box-shadow: 0 0 12px var(--rg); }
.neon .cs-inv-img { background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--rc) 14%, transparent), transparent 70%), rgba(0,0,0,.3); }
.neon .cs-ib { border-radius: 10px; }
.neon .cs-ib.claim { background: var(--grad); color: #05060b; }
.neon .cs-page .cs-ib.claim:hover { color: #05060b; }
.neon .cs-ib.sell, .neon .cs-sellall { background: linear-gradient(135deg, #34d399, #059669); }
.neon .cs-ib::after { background: #231b3b; border-color: var(--line2); }
.neon .cs-ib::before { border-top-color: #231b3b; }
.neon .cs-sellall { border-radius: 12px; }
.neon .cs-pop-row { border-radius: 12px; }
.neon .cs-pop-btn { border-radius: 9px; }
.neon .cs-best-name { font-size: 16px; font-weight: 600; }
.neon .cs-row-st.st-new { background: rgba(34,211,238,.1); color: var(--accent2); }
.neon .cs-page .cs-back { background: rgba(255,255,255,.04); border-radius: 12px; }
.neon .cs-page .cs-back:hover { border-color: var(--line2); }
.neon .cs-chero { background: radial-gradient(500px 260px at 15% 0, rgba(168,85,247,.16), transparent 70%), radial-gradient(500px 260px at 100% 100%, rgba(34,211,238,.1), transparent 70%), var(--tile); border-color: var(--line); border-radius: 24px; }
.neon .cs-box { border-radius: 18px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 42%, rgba(168,85,247,.3), transparent 62%), radial-gradient(circle at 50% 80%, rgba(34,211,238,.12), transparent 60%), #1b1530; }
.neon .cs-box.tint-rare { background: radial-gradient(circle at 50% 42%, rgba(59,130,246,.32), transparent 62%), radial-gradient(circle at 50% 80%, rgba(34,211,238,.14), transparent 60%), #1b1530; }
.neon .cs-box.tint-gold { background: radial-gradient(circle at 50% 42%, rgba(251,191,36,.26), transparent 62%), radial-gradient(circle at 50% 80%, rgba(244,114,182,.1), transparent 60%), #1b1530; }
.neon .cs-box img { filter: drop-shadow(0 0 40px rgba(34,211,238,.35)) drop-shadow(0 0 70px rgba(168,85,247,.3)); }
.neon .cs-page .cs-ctitle { font-size: 30px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.neon .cs-cinfo span { border-radius: 10px; }
.neon .cs-status { border-radius: 13px; }
.neon .cs-status.ready { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.35); color: var(--green); }
.neon .cs-status.locked { background: rgba(168,85,247,.1); border-color: rgba(168,85,247,.4); color: #d8b4fe; }
.neon .cs-bigprice { font-size: 26px; font-weight: 700; }
.neon .cs-page .cs-bigopen { border-radius: 14px; letter-spacing: .3px; text-transform: none; font-size: 15px; box-shadow: 0 12px 34px -10px rgba(34,211,238,.6); }
.neon .cs-page .cs-bigopen.ticket { box-shadow: 0 12px 34px -10px rgba(245,158,11,.6); }
.neon .cs-stage { border-radius: 18px; border-color: var(--line); box-shadow: inset 0 0 60px rgba(168,85,247,.08), 0 20px 60px -30px rgba(34,211,238,.4); }
.neon .cs-pointer { width: 3px; background: linear-gradient(180deg, #22d3ee, #a855f7); box-shadow: 0 0 12px rgba(34,211,238,.8), 0 0 24px rgba(168,85,247,.5); }
.neon .cs-pointer::before { border-top-color: #22d3ee; filter: drop-shadow(0 0 6px rgba(34,211,238,.9)); }
.neon .cs-pointer::after { border-bottom-color: #a855f7; filter: drop-shadow(0 0 6px rgba(168,85,247,.9)); }
.neon .cs-ritem { border-radius: 14px; border-color: rgba(255,255,255,.06); }
.neon .cs-ritem.r-epic, .neon .cs-ritem.r-legendary { box-shadow: 0 0 18px -4px var(--rg); }
.neon .cs-ritem.win { box-shadow: 0 0 30px var(--rg), inset 0 0 18px color-mix(in srgb, var(--rc) 22%, transparent); }
.neon .cs-toggle { background: rgba(255,255,255,.08); border-color: var(--line2); }
.neon .cs-quick input:checked + .cs-toggle { background: var(--grad); border-color: transparent; }
.neon .cs-sound { background: rgba(255,255,255,.04); border-radius: 12px; }
.neon .cs-items-lbl { color: var(--muted); font-family: var(--head-font); font-weight: 600; letter-spacing: 1.5px; }
.neon .cs-ci { border-radius: 16px; }
.neon .cs-ci-img { background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--rc) 16%, transparent), transparent 70%), rgba(0,0,0,.3); }
.neon .cs-ci-ch b { color: #fff; }
.neon .cs-mbox { background: #231b3b; border-color: var(--line2); border-radius: 24px; box-shadow: 0 0 100px rgba(168,85,247,.12), 0 40px 80px rgba(0,0,0,.6); }
.neon .cs-mline { background: var(--grad); }
.neon .cs-mtitle { color: #fff; font-size: 17px; font-weight: 600; letter-spacing: .3px; text-transform: none; }
.neon .cs-mtitle i { color: var(--cyan); }
.neon .cs-modal .cs-mclose { border-radius: 12px; }
.neon .cs-res { border-radius: 18px; border-color: var(--line2); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc, #a855f7) 20%, transparent), transparent 70%), rgba(255,255,255,.03); }
.neon .cs-res-ribbon { background: var(--grad); }
.neon .cs-res-name { font-weight: 700; letter-spacing: 0; }
.neon .cs-res.legendary { background: radial-gradient(circle at 50% 30%, rgba(255,214,10,.22), transparent 70%), linear-gradient(135deg, rgba(255,214,10,.1), rgba(244,114,182,.06)); border-color: rgba(255,214,10,.4); }
.neon .cs-modal .cs-take, .neon .cs-modal .cs-ghost { border-radius: 13px; letter-spacing: .3px; text-transform: none; font-weight: 800; }
.neon .cs-modal .cs-take { animation-name: csPulseNeon; }
@keyframes csPulseNeon { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,.45); } 50% { box-shadow: 0 0 0 12px rgba(34,211,238,0); } }
.neon .cs-modal .cs-ghost.again { border-color: rgba(34,211,238,.4); color: var(--accent2); }
.neon .cs-mbox.is-priv .cs-mtitle i { color: var(--cs-indigo); }
.neon .cs-mbox.tkt { background: #231b3b; border-color: rgba(251,191,36,.4); }
.neon .cs-mbox.tkt .cs-mtitle { color: #fbbf24; letter-spacing: .5px; }
.neon .cs-mbox.tkt .cs-mtitle i { color: #fbbf24; }
.neon .cs-mbox.tkt .cs-mline { background: linear-gradient(90deg, transparent, #f59e0b 30%, #fbbf24, #d97706 70%, transparent); }
.neon .cs-modal .cs-lbl input, .neon .cs-modal .cs-select select { background: rgba(0,0,0,.4); border-radius: 12px; }
.neon .cs-priv-btn, .neon .cs-modal .cs-tkt-btn { border-radius: 13px; letter-spacing: .3px; text-transform: none; font-weight: 800; }
.neon .cs-pop { background: rgba(13,14,23,.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 18px; }

/* ---------- админка кейсов (/admin/cases) — общие токены сайта, работают в обеих темах ---------- */
.ca-page { --ca-acc: var(--accent, #9b6dff); --ca-gold: #fbbf24; --ca-indigo: #818cf8; }
.ca-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ca-stat { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; border-radius: var(--radius, 14px); background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.ca-stat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c); opacity: .7; }
.ca-stat > i { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: 17px; }
.ca-stat div { min-width: 0; }
.ca-stat b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--text); }
.ca-stat small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.ca-layout { grid-template-columns: minmax(0, 1fr) 360px; }
.ca-main { min-width: 0; }
.ca-main > .card + .card { margin-top: 16px; }
.ca-side { display: grid; gap: 16px; min-width: 0; }
.ca-side > .card + .card { margin-top: 0; }
.ca-side h3 i, .ca-items-head h3 i { color: var(--ca-acc); }
.ca-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ca-table th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted2, var(--muted)); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ca-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ca-table tbody tr:last-child td { border-bottom: 0; }
.ca-table tbody tr:hover td { background: rgba(255,255,255,.02); }
.ca-table td.actions { white-space: nowrap; text-align: right; }
.ca-table td.actions > * { margin-left: 4px; vertical-align: middle; }
.ca-table td.actions form { display: inline-block; }
.ca-page .ca-case { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; }
.ca-page a.ca-case:hover b { color: var(--ca-acc); }
.ca-case b { display: block; font-weight: 700; white-space: nowrap; }
.ca-case small { display: block; color: var(--muted); font-size: 12px; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-thumb { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; overflow: hidden; color: var(--rc, var(--ca-acc)); font-size: 18px;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc, #9b6dff) 28%, transparent), transparent 70%), rgba(0,0,0,.28); border: 1px solid color-mix(in srgb, var(--rc, #9b6dff) 35%, transparent); }
.ca-thumb img { width: 86%; height: 86%; object-fit: contain; }
.ca-thumb.tint-common { --rc: #9b6dff; }
.ca-thumb.tint-rare { --rc: #3b82f6; }
.ca-thumb.tint-epic { --rc: #d946ef; }
.ca-thumb.tint-gold { --rc: #fbbf24; }
.ca-price { font-weight: 800; color: var(--accent2); white-space: nowrap; }
.ca-free { display: inline-block; padding: 3px 9px; border-radius: 8px; background: rgba(34,197,94,.14); color: #4ade80; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ca-onoff { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(239,68,68,.12); color: #f87171; font-size: 12px; font-weight: 700; }
.ca-onoff::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ca-onoff.on { background: rgba(34,197,94,.13); color: #4ade80; }
.ca-onoff.on::before { box-shadow: 0 0 8px currentColor; }
.ca-items-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.ca-items-head h3 { margin: 0; flex: 1 1 auto; }
.ca-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ca-tag.tkt { background: rgba(251,191,36,.12); color: var(--ca-gold); }
.ca-tag.is-priv { background: rgba(129,140,248,.14); color: #a5b4fc; }
.ca-tag.src-open { background: rgba(155,109,255,.14); color: var(--accent2); }
.ca-tag.src-ticket { background: rgba(251,191,36,.12); color: var(--ca-gold); }
.ca-tag.src-milestone { background: rgba(34,197,94,.13); color: #4ade80; }
.ca-pill { display: inline-block; min-width: 38px; padding: 3px 10px; border-radius: 999px; background: rgba(251,191,36,.14); color: var(--ca-gold); font-weight: 800; text-align: center; }
/* формы */
.ca-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.ca-block { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: rgba(0,0,0,.18); border: 1px solid var(--line); }
.ca-block.is-priv { border-color: rgba(129,140,248,.35); background: rgba(129,140,248,.06); }
.ca-block.tkt { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.05); }
.ca-block[hidden] { display: none !important; }
.ca-block-t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); }
.ca-block-t i { color: var(--ca-acc); }
.ca-block.is-priv .ca-block-t i { color: var(--ca-indigo); }
.ca-block.tkt .ca-block-t i { color: var(--ca-gold); }
.ca-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ca-page .ca-pre { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: .15s; }
.ca-page .ca-pre:hover { color: var(--text); border-color: var(--ca-acc); }
.ca-page .ca-pre.on { background: color-mix(in srgb, var(--ca-acc) 22%, transparent); border-color: var(--ca-acc); color: #fff; }
.ca-field { display: grid; gap: 8px; }
.ca-lbl { font-weight: 500; font-size: 14px; }
.ca-tints { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.form label.ca-tint { display: grid; justify-items: center; gap: 6px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); transition: .15s; }
.ca-tint input { position: absolute; opacity: 0; pointer-events: none; }
.ca-tint span { width: 100%; height: 30px; border-radius: 7px; }
.ca-tint span.tint-common { background: radial-gradient(circle, rgba(155,109,255,.45), transparent 75%), #0d1117; }
.ca-tint span.tint-rare { background: radial-gradient(circle, rgba(59,130,246,.55), transparent 75%), #0d1117; }
.ca-tint span.tint-epic { background: radial-gradient(circle, rgba(217,70,239,.5), transparent 75%), #0d1117; }
.ca-tint span.tint-gold { background: radial-gradient(circle, rgba(251,191,36,.5), transparent 75%), #0d1117; }
.form label.ca-tint:has(input:checked) { border-color: var(--ca-acc); color: var(--text); box-shadow: 0 0 0 1px var(--ca-acc) inset; }
.form label.ca-tint:has(input:focus-visible) { outline: 2px solid var(--ca-acc); outline-offset: 2px; }
.ca-img { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; }
.ca-img > div { display: grid; gap: 8px; min-width: 0; }
.ca-img-prev { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 12px; border: 1px solid var(--line2); background: radial-gradient(circle, rgba(155,109,255,.2), transparent 70%), rgba(0,0,0,.3); overflow: hidden; }
.ca-img-prev img { width: 84%; height: 84%; object-fit: contain; }
.form label.ca-file { position: relative; display: block; cursor: pointer; }
.ca-file input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.ca-file span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--line2); color: var(--muted); font-size: 13px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: .15s; }
.ca-file:hover span, .ca-file input:focus-visible + span { border-color: var(--ca-acc); color: var(--text); }
.ca-file.has span { border-style: solid; border-color: rgba(34,197,94,.5); color: #4ade80; }
.form label.ca-check { align-self: center; padding-top: 22px; }
.ca-chance { padding: 10px 14px; border-radius: 10px; background: rgba(155,109,255,.08); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ca-chance b { color: var(--text); font-size: 15px; }
.ca-chance.zero b { color: var(--ca-gold); }
.ca-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ca-filter input { flex: 1 1 220px; min-width: 0; }
.ca-filter select { flex: 0 1 220px; min-width: 0; }
.ca-ms-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; gap: 12px; align-items: end; margin-bottom: 10px; }
.ca-ms-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; min-width: 0; }
.ca-page .ca-user { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ca-page .ca-user:hover { color: var(--ca-acc); }
.ca-ava { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; font-size: 12px; }
@media (max-width: 1200px) {
  .ca-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ca-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 1024px) {
  .ca-layout { grid-template-columns: 1fr; }
  .ca-ms-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ca-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ca-stat { padding: 10px 12px; gap: 10px; }
  .ca-stat > i { width: 34px; height: 34px; font-size: 15px; }
  .ca-stat b { font-size: 18px; }
  .ca-row, .ca-ms-form { grid-template-columns: 1fr; }
  .form label.ca-check { padding-top: 0; }
  .ca-tints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-case small { max-width: 160px; }
}
/* неон: стекло, бирюзовые акценты */
.neon .ca-page { --ca-acc: #22d3ee; }
.neon .ca-stat { background: var(--tile); border-radius: 18px; }
.neon .ca-stat b { font-family: var(--head-font); font-weight: 700; font-size: 20px; }
.neon .ca-page .ca-table th { color: var(--muted2); }
.neon .ca-block { background: rgba(0,0,0,.25); }
.neon .ca-block.is-priv { background: rgba(129,140,248,.06); }
.neon .ca-block.tkt { background: rgba(251,191,36,.05); }
.neon .ca-page .ca-pre.on { background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(168,85,247,.2)); border-color: rgba(34,211,238,.55); }
.neon .ca-chance { background: rgba(34,211,238,.06); border-color: rgba(34,211,238,.2); }
.neon .ca-price { color: var(--accent2); }
.neon .ca-tag.src-open { background: rgba(34,211,238,.1); color: var(--accent2); }
.neon .ca-page .ca-case b { color: #fff; }
.neon .ca-page a.ca-case:hover b { color: var(--accent2); }
.neon .ca-img-prev { background: radial-gradient(circle, rgba(168,85,247,.22), transparent 70%), rgba(0,0,0,.35); }
.ca-img-prev i { font-size: 30px; color: var(--muted); opacity: .6; }
.form label.ca-noimg { font-size: 13px; color: var(--muted); }
.ca-table th, .ca-table td { padding-left: 7px; padding-right: 7px; }
.ca-main .ca-case small { max-width: 180px; }

/* chat.css */
/* Чат на главной: обе темы. Без класса — классика (как старый headlinecs: розово-фиолетовая шапка с золотой линией,
   сообщения карточками с синей полосой и текстом в «пузыре»). .neon — стеклянная плитка неоновой темы.
   Файл подключается до neon.css, поэтому неоновые правила написаны как «.neon .chat ...» (специфичнее правил neon.css). */

/* ---------- общая раскладка ---------- */
.card.chat {
  --ch-fs: 14px;
  position: relative; display: flex; flex-direction: column; padding: 0; overflow: visible;
  background: rgba(15, 15, 30, .92); border: 1px solid rgba(255, 51, 102, .28); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.chat.ch-fs-sm { --ch-fs: 12.5px; }
.chat.ch-fs-lg { --ch-fs: 16px; }
.chat .ch-head {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px 13px 20px;
  background: linear-gradient(135deg, #ff3366 0%, #8b00ff 100%); border-bottom: 2px solid #ffcc00; border-radius: 9px 9px 0 0; color: #fff;
}
.chat .ch-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat .ch-title-ico { color: #ffcc00; font-size: 1.25em; line-height: 1; }
.chat .ch-title h3 { margin: 0; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.2; }
.chat .ch-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.chat .ch-tool, .chat .ch-rules-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; min-width: 32px; padding: 0 9px;
  border-radius: 5px; border: 1px solid #ffcc00; background: #3366ff; color: #fff; font: inherit; font-size: 12.5px; font-weight: 700;
  line-height: 1; white-space: nowrap; cursor: pointer; transition: filter .15s, background .15s, border-color .15s, color .15s;
}
.chat .ch-tool:hover { filter: brightness(1.15); }
.chat .ch-rules-btn { padding: 0 15px; border-radius: 15px; background: transparent; color: #ffcc00; }
.chat .ch-rules-btn:hover { background: rgba(255, 204, 0, .12); }
.chat .ch-filter { background: rgba(155, 109, 255, .22); border-color: rgba(255, 255, 255, .35); color: #fff; }
.chat .ch-filter b { font-weight: 800; }
.chat .ch-filter.on { background: rgba(46, 204, 113, .25); border-color: rgba(46, 204, 113, .8); color: #b9ffd4; }
.chat .ch-filter.on i { color: #2ecc71; }

/* всплывашки внутри чата (настройки, пикер эмодзи, подсказка ников) */
.chat .ch-pop-wrap { position: relative; }
.chat .ch-pop, .chat .ch-ac {
  position: absolute; z-index: 40; color: #e0e3f0; text-align: left;
  background: #15152e; border: 1px solid rgba(155, 109, 255, .32); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  animation: chPopIn .14s ease-out;
}
@keyframes chPopIn { from { opacity: 0; transform: translateY(4px); } }
.chat .ch-settings { top: calc(100% + 10px); right: -2px; width: 264px; padding: 14px; display: grid; gap: 14px; }
.chat .ch-set-row { display: grid; gap: 7px; }
.chat .ch-set-row > span { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #a8aec5; }
.chat .ch-seg { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(155, 109, 255, .14); }
.chat .ch-seg button { flex: 1; padding: 7px 6px; border: 0; border-radius: 8px; background: none; color: #a8aec5; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.chat .ch-seg button:hover { color: #fff; }
.chat .ch-seg button.on { background: linear-gradient(135deg, #ff3366, #8b00ff); color: #fff; }

/* лента */
.chat .ch-feed { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 14px 15px 15px; }
.chat .ch-box { position: relative; height: 430px; flex: none; background: rgba(10, 10, 20, .7); border: 1px solid rgba(255, 51, 102, .3); border-radius: 6px; }
.chat .ch-list {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding: 10px;
  scrollbar-width: thin; scrollbar-color: #ff3366 transparent;
}
.chat .ch-list::before { content: ""; flex: 1 0 0; }
.chat .ch-list::-webkit-scrollbar { width: 6px; }
.chat .ch-list::-webkit-scrollbar-thumb { background: #ff3366; border-radius: 3px; }
.chat .ch-loader, .chat .ch-start { flex: none; text-align: center; padding: 6px 0 8px; font-size: 12px; font-weight: 600; color: #8f92b0; }
.chat .ch-start i { margin-right: 5px; opacity: .7; }
.chat .ch-empty { margin: auto; display: grid; justify-items: center; gap: 10px; padding: 30px 10px; color: #8f92b0; text-align: center; font-size: 13.5px; }
.chat .ch-empty i { font-size: 34px; opacity: .35; }

/* сообщение */
.chat .ch-msg {
  position: relative; display: flex; gap: 12px; flex: none; padding: 11px 13px; border-radius: 10px;
  background: #0f1330; border: 1px solid rgba(155, 109, 255, .08); border-left: 3px solid #3b6fd8; transition: background .15s;
}
.chat .ch-msg:hover { background: #121739; }
.chat .ch-uava-link { flex: none; align-self: flex-start; }
.chat .ch-uava { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; font-size: 17px; }
.chat .ch-body { flex: 1; min-width: 0; }
.chat .ch-mhead { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 22px; line-height: 1.25; }
.chat .ch-nick { font-weight: 800; font-size: 13.5px; text-shadow: 0 0 10px color-mix(in srgb, currentColor 45%, transparent); }
.chat .ch-role {
  display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; line-height: 1.35;
  color: var(--rc); border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); background: color-mix(in srgb, var(--rc) 12%, transparent);
}
.chat .ch-time { margin-left: auto; font-size: 12px; font-weight: 500; color: #c8cbe0; white-space: nowrap; }
.chat .ch-msg.is-pinned .ch-time::before { content: "\f08d"; font: 900 10px "Font Awesome 6 Free"; color: #ffcc00; margin-right: 6px; }
/* кнопки «реакция» и «⋯» висят в правом верхнем углу и видны при наведении; место под них оставлено в шапке */
.chat .ch-mhead:has(.ch-actions) { padding-right: 62px; }
.chat .ch-actions {
  position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; gap: 1px; padding: 2px; border-radius: 9px;
  background: #15183a; border: 1px solid rgba(155, 109, 255, .3); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .15s;
}
.chat .ch-msg:hover .ch-actions, .chat .ch-actions:focus-within, .chat .ch-actions:has(.on) { opacity: 1; }
.chat .ch-act {
  width: 26px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: none;
  color: #9aa0c0; font-size: 13px; cursor: pointer;
}
.chat .ch-act:hover, .chat .ch-act.on { background: rgba(155, 109, 255, .18); color: #fff; }
.chat .ch-text {
  display: inline-block; max-width: 100%; margin-top: 8px; padding: 6px 11px; border-radius: 8px;
  background: #191c40; border: 1px solid rgba(155, 109, 255, .22); color: #e0e0ff;
  font-size: var(--ch-fs); line-height: 1.5; overflow-wrap: anywhere; word-break: break-word;
}
.chat .ch-edited { font-size: .78em; font-style: italic; color: #8f92b0; white-space: nowrap; }
.chat .ch-emoji { display: inline-block; width: 32px; height: 32px; object-fit: contain; vertical-align: -9px; margin: 0 1px; }
.chat .ch-uemo { font-size: 1.45em; line-height: 1; vertical-align: -.12em; }
.chat .ch-jumbo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 0; }
.chat .ch-jumbo .ch-emoji { width: 56px; height: 56px; vertical-align: middle; }
.chat .ch-jumbo .ch-uemo { font-size: 42px; }
.chat .mention { color: #b794ff; font-weight: 600; background: rgba(155, 109, 255, .14); padding: 0 4px; border-radius: 5px; }
.chat .mention:hover { color: #fff; }
.chat .mention.me { color: #fff; background: rgba(255, 51, 102, .35); }
.chat .ch-msg.is-mention { background: linear-gradient(90deg, rgba(255, 51, 102, .14), #0f1330 70%); border-color: rgba(255, 51, 102, .35); border-left-color: #ff3366; }
/* подсветка состава, как флаги f / j / s на старом сайте */
.chat .ch-msg.ch-hl-admin { border-left-color: rgb(255, 99, 99); background: linear-gradient(90deg, rgba(255, 99, 99, .09), #0f1330 60%); }
.chat .ch-msg.ch-hl-mod { border-left-color: rgb(74, 158, 255); background: linear-gradient(90deg, rgba(74, 158, 255, .09), #0f1330 60%); }
.chat .ch-msg.ch-hl-staff { border-left-color: rgb(243, 156, 18); background: linear-gradient(90deg, rgba(243, 156, 18, .09), #0f1330 60%); }
.chat .ch-msg.flash { animation: chFlash 1.6s ease-out; }
@keyframes chFlash { 0%, 30% { box-shadow: 0 0 0 2px #ffcc00, 0 0 24px rgba(255, 204, 0, .35); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* /roll */
.chat .ch-roll { display: inline-flex; align-items: center; gap: 8px; }
.chat .ch-roll-dice { font-size: 1.35em; line-height: 1; filter: drop-shadow(0 0 6px rgba(255, 204, 0, .4)); }
.chat .ch-roll-n { font-size: 1.15em; color: #ffcc00; font-weight: 800; }
.chat .ch-roll-max { color: #8f92b0; font-size: .85em; white-space: nowrap; }
.chat .ch-msg.is-roll .ch-text { background: linear-gradient(135deg, rgba(255, 51, 102, .16), rgba(139, 0, 255, .16)); border-color: rgba(255, 204, 0, .35); }
/* правка модератором */
.chat .ch-msg.is-editing .ch-actions { display: none; }
.chat .ch-edit { display: grid; gap: 7px; margin-top: 8px; }
.chat .ch-edit textarea { min-height: 64px; resize: vertical; font-size: var(--ch-fs); padding: 9px 11px; border-radius: 8px; }
.chat .ch-edit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chat .ch-edit-bar small { margin-right: auto; color: #8f92b0; font-size: 11.5px; }
.chat .ch-edit-bar button { padding: 6px 13px; border-radius: 8px; border: 1px solid rgba(155, 109, 255, .3); background: rgba(255, 255, 255, .05); color: #e0e3f0; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.chat .ch-edit-bar .ch-edit-ok { border-color: transparent; background: linear-gradient(135deg, #ff3366, #8b00ff); color: #fff; }

/* реакции */
.chat .ch-reacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
/* без реакций строку прячем: «+» тогда есть в кнопках сообщения */
.chat .ch-reacts:empty, .chat .ch-reacts:not(:has(.ch-chip)) { display: none; }
.chat .ch-chip {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 12px; overflow: hidden;
  background: rgba(155, 109, 255, .10); border: 1px solid rgba(155, 109, 255, .22); color: #c0c0e0; font: inherit; font-size: 12px; line-height: 1;
  cursor: default; user-select: none; transition: background .15s, border-color .15s, transform .15s;
}
button.ch-chip { cursor: pointer; }
.chat button.ch-chip:hover { background: rgba(155, 109, 255, .20); border-color: rgba(155, 109, 255, .45); }
.chat .ch-chip .ch-em { font-size: 14px; line-height: 1; }
.chat .ch-chip b { font-size: 11px; font-weight: 800; }
.chat .ch-chip.mine { background: rgba(155, 109, 255, .28); border-color: #9b6dff; color: #fff; }
.chat .ch-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px; width: 30px; height: 24px; padding: 0; border-radius: 12px;
  background: transparent; border: 1px dashed rgba(155, 109, 255, .35); color: #888aa0; font-size: 12px; cursor: pointer; transition: .15s;
}
.chat .ch-add .fa-plus { font-size: 7px; margin-top: -8px; }
.chat .ch-add:hover { background: rgba(155, 109, 255, .12); color: #b794ff; border-color: rgba(155, 109, 255, .55); }
/* супер-реакция: отдельный золотой чип со свечением и бегущим бликом */
.chat .ch-chip.super {
  background: linear-gradient(135deg, rgba(255, 196, 0, .16), rgba(255, 140, 0, .08)); border-color: rgba(255, 196, 0, .55); color: #ffd977;
  box-shadow: 0 0 10px rgba(255, 180, 0, .30), inset 0 0 6px rgba(255, 200, 60, .12); animation: chSuperGlow 2.4s ease-in-out infinite;
}
.chat button.ch-chip.super:hover { background: linear-gradient(135deg, rgba(255, 196, 0, .26), rgba(255, 140, 0, .14)); border-color: rgba(255, 210, 60, .85); animation: none; box-shadow: 0 0 14px rgba(255, 190, 0, .45); }
.chat .ch-chip.super.mine { border-color: #ffc400; background: linear-gradient(135deg, rgba(255, 196, 0, .30), rgba(255, 140, 0, .16)); color: #ffe6a3; box-shadow: 0 0 14px rgba(255, 190, 0, .5), inset 0 0 8px rgba(255, 210, 80, .2); animation: none; }
.chat .ch-chip.super b { color: #ffd977; }
.chat .ch-chip.super::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%; pointer-events: none;
  background: linear-gradient(115deg, transparent, rgba(255, 240, 180, .35), transparent); animation: chSuperShimmer 2.8s ease-in-out infinite;
}
.chat .ch-bolt { font-size: 10px; line-height: 1; filter: drop-shadow(0 0 3px rgba(255, 190, 0, .8)); }
.chat .ch-chip.pop { animation: chSuperPop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes chSuperGlow { 0%, 100% { box-shadow: 0 0 8px rgba(255, 180, 0, .25), inset 0 0 6px rgba(255, 200, 60, .10); } 50% { box-shadow: 0 0 15px rgba(255, 190, 0, .55), inset 0 0 8px rgba(255, 210, 80, .20); } }
@keyframes chSuperShimmer { 0% { left: -80%; } 55%, 100% { left: 120%; } }
@keyframes chSuperPop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* кнопка «вниз» с числом новых */
.chat .ch-down {
  position: absolute; right: 14px; bottom: 12px; z-index: 5; width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #ffcc00; background: linear-gradient(135deg, #ff3366, #8b00ff); color: #fff; font-size: 14px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45); animation: chPopIn .18s ease-out;
}
.chat .ch-down b {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #ffcc00; color: #1a1030; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
}

/* закреплённое сообщение */
.chat .ch-pinned {
  display: flex; align-items: center; gap: 11px; margin: 0 0 10px; padding: 8px 10px 8px 13px; border-radius: 8px; cursor: pointer;
  background: rgba(255, 204, 0, .07); border: 1px solid rgba(255, 204, 0, .25); border-left: 3px solid #ffcc00; transition: background .15s;
}
.chat .ch-pinned:hover { background: rgba(255, 204, 0, .11); }
.chat .ch-pin-ico { color: #ffcc00; transform: rotate(35deg); flex: none; }
.chat .ch-pin-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.chat .ch-pin-main small { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #ffcc00; }
.chat .ch-pin-main small b { text-transform: none; letter-spacing: 0; font-size: 12px; }
.chat .ch-pin-text { color: #e0e0ff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat .ch-pinned.is-open .ch-pin-text { white-space: normal; overflow-wrap: anywhere; }
.chat .ch-pin-x { flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: none; color: #a8aec5; cursor: pointer; }
.chat .ch-pin-x:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* поле ввода */
.chat .ch-form { position: relative; display: flex; align-items: stretch; gap: 10px; margin-top: 14px; }
.chat .ch-input-wrap {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 0 5px 0 0; border-radius: 6px;
  background: rgba(20, 20, 40, .9); border: 1px solid #3366ff; transition: border-color .15s, box-shadow .15s;
}
.chat .ch-input-wrap:focus-within { border-color: #8b5cff; box-shadow: 0 0 0 3px rgba(139, 92, 255, .2); }
.chat .ch-input-wrap .ch-input {
  flex: 1; min-width: 0; width: auto; height: 42px; padding: 0 6px 0 15px; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: #fff; font-size: 14px;
}
.chat .ch-input-wrap .ch-input:focus { box-shadow: none; }
.chat .ch-input::placeholder { color: #8085a8; }
.chat .ch-emoji-btn { flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: #9aa0c0; font-size: 17px; cursor: pointer; }
.chat .ch-emoji-btn:hover { color: #ffcc00; background: rgba(255, 255, 255, .05); }
.chat .ch-send {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border: 0; border-radius: 6px;
  background: linear-gradient(135deg, #ff3366 0%, #8b00ff 100%); color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: filter .15s;
}
.chat .ch-send:hover { filter: brightness(1.12); }
.chat .ch-send:disabled { opacity: .6; cursor: progress; }
.chat .ch-guest { margin: 14px 0 0; text-align: center; font-size: 13px; color: #a8aec5; }
/* пикер эмодзи */
.chat .ch-picker { right: 0; bottom: calc(100% + 10px); width: 380px; max-width: 100%; max-height: 380px; overflow-y: auto; padding: 10px 8px 4px; }
.chat .ch-pk-title { display: flex; align-items: center; justify-content: space-between; margin: 0 6px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #a8aec5; }
.chat .ch-pk-title a { color: inherit; font-size: 12px; }
.chat .ch-pk-title a:hover { color: #fff; }
.chat .ch-pk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 8px; }
.chat .ch-pk-grid button { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; font-size: 27px; line-height: 1; cursor: pointer; transition: transform .1s, background .1s; }
.chat .ch-pk-grid button:hover { background: rgba(155, 109, 255, .2); transform: scale(1.12); }
.chat .ch-pk-grid img { width: 38px; height: 38px; object-fit: contain; }
.chat .ch-pk-empty { grid-column: 1 / -1; padding: 8px 6px; font-size: 12.5px; }
/* подсказка ников */
.chat .ch-ac { left: 0; bottom: calc(100% + 10px); width: 250px; max-width: 100%; padding: 6px; display: grid; gap: 2px; }
.chat .ch-ac[hidden] { display: none; }
.chat .ch-ac-title { padding: 2px 8px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #8f92b0; }
.chat .ch-ac-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: #e0e3f0; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.chat .ch-ac-item.on, .chat .ch-ac-item:hover { background: rgba(155, 109, 255, .2); color: #fff; }
.chat .ch-ac-ava { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; font-size: 11px; }

/* свёрнут / пассивный режим */
.chat.is-collapsed .ch-feed, .chat.is-collapsed .ch-passive { display: none; }
.chat.is-collapsed .ch-head { border-radius: 9px; }
.chat.is-passive .ch-feed { display: none; }
.chat .ch-passive { flex: 1; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 46px 20px; text-align: center; color: #c8cbe0; }
.chat .ch-passive[hidden] { display: none; }
.chat .ch-passive p { margin: 0; }
.chat .ch-passive p:first-of-type { font-weight: 700; color: #fff; font-size: 15px; }
.chat .ch-zzz { font-size: 50px; line-height: 1; margin-bottom: 10px; animation: chFloat 3s ease-in-out infinite; }
@keyframes chFloat { 50% { transform: translateY(-6px); } }
.chat .ch-wake { margin-top: 14px; padding: 9px 20px; border: 1px solid #ffcc00; border-radius: 6px; background: linear-gradient(135deg, #3366ff, #8b00ff); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* ---------- всплывашки в body: выбор реакции, меню сообщения, подсказка Plus, «взрыв» ---------- */
.ch-rpop {
  position: absolute; z-index: 1250; display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: linear-gradient(135deg, #15183a, #0a0a1a); border: 1px solid rgba(155, 109, 255, .4); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55); animation: chPopIn .14s ease-out;
}
.ch-rpop-emo { display: flex; gap: 2px; }
.ch-rpop [data-pick] { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: none; font-size: 21px; line-height: 1; cursor: pointer; transition: transform .12s, background .12s; }
.ch-rpop [data-pick]:hover { background: rgba(155, 109, 255, .25); transform: scale(1.18); }
.ch-rpop.super-mode [data-pick]:hover { background: rgba(255, 196, 0, .22); filter: drop-shadow(0 0 4px rgba(255, 190, 0, .7)); }
.ch-super-tg {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border-radius: 9px; white-space: nowrap; cursor: pointer;
  border: 1px solid rgba(255, 196, 0, .3); background: rgba(255, 196, 0, .06); color: #b9a77a; font: inherit; font-size: 11.5px; font-weight: 700; transition: .15s;
}
.ch-super-tg:hover { border-color: rgba(255, 196, 0, .55); color: #ffd977; }
.ch-super-tg.on { border-color: #ffc400; background: linear-gradient(135deg, rgba(255, 196, 0, .22), rgba(255, 140, 0, .10)); color: #ffe6a3; box-shadow: 0 0 10px rgba(255, 180, 0, .35); }
.ch-super-tg.locked { opacity: .65; }
.ch-super-tg.locked i { font-size: 10px; }
.ch-tg-dot { position: relative; width: 22px; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .12); flex: none; transition: .15s; }
.ch-tg-dot::after { content: ""; position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; border-radius: 50%; background: #888aa0; transition: .15s; }
.ch-super-tg.on .ch-tg-dot { background: rgba(255, 196, 0, .45); }
.ch-super-tg.on .ch-tg-dot::after { left: 11px; background: #ffd977; box-shadow: 0 0 6px rgba(255, 190, 0, .9); }
.ch-mpop {
  position: absolute; z-index: 1250; min-width: 176px; padding: 6px; display: grid; gap: 2px;
  background: #15152e; border: 1px solid rgba(155, 109, 255, .3); border-radius: 12px; box-shadow: 0 16px 36px rgba(0, 0, 0, .55); animation: chPopIn .14s ease-out;
}
.ch-mpop button { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 0; border-radius: 8px; background: none; color: #d5d8e8; font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.ch-mpop button i { width: 16px; text-align: center; color: #b794ff; }
.ch-mpop button:hover { background: rgba(155, 109, 255, .16); color: #fff; }
.ch-mpop button.danger, .ch-mpop button.danger i { color: #ff6b7a; }
.ch-mpop button.danger:hover { background: rgba(255, 107, 122, .12); }
.ch-plus-hint {
  position: fixed; z-index: 1260; padding: 7px 11px; border-radius: 9px; white-space: nowrap; font-size: 12px; font-weight: 700; color: #ffd977;
  background: linear-gradient(135deg, #15183a, #0a0a1a); border: 1px solid rgba(255, 196, 0, .5); box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 10px rgba(255, 180, 0, .25);
  opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s;
}
.ch-plus-hint.show { opacity: 1; transform: none; }
.ch-plus-hint a { color: #ffe6a3; text-decoration: underline; }
.ch-burst { position: fixed; z-index: 1270; width: 0; height: 0; pointer-events: none; }
.ch-burst span { position: absolute; left: 0; top: 0; line-height: 1; opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 190, 0, .65)); animation: chBurstFly 1s cubic-bezier(.15, .85, .35, 1) forwards; }
.ch-burst-ring { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid rgba(255, 196, 0, .8); box-shadow: 0 0 12px rgba(255, 190, 0, .6); opacity: 0; animation: chBurstRing .7s ease-out forwards; }
@keyframes chBurstFly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.85) rotate(var(--rot)); }
}
@keyframes chBurstRing { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(7); } }

/* ---------- окно «Правила чата» ---------- */
.ch-modal.modal { z-index: 1600; background: rgba(5, 6, 20, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ch-modal .ch-rules {
  max-width: 500px; padding: 0; overflow: hidden; color: #fff; background: #0f0f1f; border: 2px solid #ff3366; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(255, 51, 102, .2); animation: chModalIn .2s ease-out;
}
@keyframes chModalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.ch-rules-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; background: linear-gradient(135deg, #ff3366, #8b00ff); border-bottom: 2px solid #ffcc00; }
.ch-rules-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; font-size: 17px; font-weight: 600; }
.ch-rules-head h3 i { color: #ffcc00; }
.ch-rules-x { width: 32px; height: 32px; padding: 0; border: 0; background: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: transform .2s, color .2s; }
.ch-rules-x:hover { color: #ffcc00; transform: scale(1.1); }
.ch-rules-body { padding: 20px; background: rgba(20, 20, 40, .8); }
.ch-rules-lead { margin: 0 0 12px; color: #c9c9e8; font-size: 13px; font-weight: 600; }
.ch-rules-body ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ch-rules-body li { position: relative; padding: 12px 15px 12px 38px; border-radius: 8px; background: rgba(255, 51, 102, .1); border-left: 3px solid #ff3366; color: #e0e0ff; font-size: 14px; line-height: 1.4; }
.ch-rules-body li::before { content: "\2717"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #ff3366; font-weight: 800; font-size: 1.1em; }
.ch-rules-warn { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 14px 15px; border-radius: 8px; background: rgba(255, 204, 0, .1); border-left: 3px solid #ffcc00; color: #ffcc00; font-weight: 600; }
.ch-rules-foot { display: flex; justify-content: flex-end; padding: 15px 20px; background: rgba(20, 20, 40, .8); border-top: 1px solid rgba(255, 51, 102, .3); }
.ch-rules-ok { padding: 8px 22px; border: 1px solid #ffcc00; border-radius: 5px; background: linear-gradient(135deg, #3366ff, #8b00ff); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.ch-rules-ok:hover { filter: brightness(1.12); }

/* ---------- неоновая тема ---------- */
.neon .card.chat {
  background: var(--tile), var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 0;
  box-shadow: 0 30px 80px -50px rgba(168, 85, 247, .55);
}
.neon .card.chat::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: var(--grad); opacity: .85; z-index: 1; }
.neon .chat .ch-head { padding: 16px 16px 14px 20px; background: none; border-bottom: 1px solid var(--line); border-radius: 22px 22px 0 0; }
.neon .chat .ch-title { gap: 12px; }
.neon .chat .ch-title-ico {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--grad); color: #05060b; font-size: 15px;
  box-shadow: 0 10px 24px -8px rgba(34, 211, 238, .6);
}
.neon .chat .ch-title h3 { font: 600 16px var(--head-font); letter-spacing: -.2px; color: #fff; }
.neon .chat .ch-tool, .neon .chat .ch-rules-btn {
  height: 36px; min-width: 36px; padding: 0 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  color: var(--muted); font-family: "Manrope", sans-serif; font-size: 12.5px;
}
.neon .chat .ch-tool:hover, .neon .chat .ch-rules-btn:hover { filter: none; color: #fff; background: rgba(255, 255, 255, .08); border-color: var(--line2); }
.neon .chat .ch-rules-btn { padding: 0 14px; color: #fff; background: linear-gradient(90deg, rgba(34, 211, 238, .12), rgba(168, 85, 247, .14)); border-color: rgba(168, 85, 247, .38); }
.neon .chat .ch-rules-btn i { color: var(--cyan); }
.neon .chat .ch-filter b { color: #fff; }
.neon .chat .ch-filter.on { color: var(--green); background: rgba(52, 211, 153, .08); border-color: rgba(52, 211, 153, .4); }
.neon .chat .ch-filter.on b, .neon .chat .ch-filter.on i { color: var(--green); }
.neon .chat .ch-pop, .neon .chat .ch-ac {
  background: rgba(14, 15, 24, .97); border-color: var(--line2); border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.neon .chat .ch-set-row > span, .neon .chat .ch-pk-title, .neon .chat .ch-ac-title { color: var(--muted); font-family: "Manrope", sans-serif; }
.neon .chat .ch-seg { background: rgba(0, 0, 0, .35); border-color: var(--line); border-radius: 12px; }
.neon .chat .ch-seg button { color: var(--muted); border-radius: 9px; }
.neon .chat .ch-seg button.on { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .45); }
.neon .chat .ch-feed { padding: 0 10px 14px; }
.neon .chat .ch-box { background: none; border: 0; border-radius: 0; }
.neon .chat .ch-list { gap: 2px; padding: 10px 4px 8px; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
.neon .chat .ch-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }
.neon .chat .ch-loader, .neon .chat .ch-start, .neon .chat .ch-empty { color: var(--muted2); }
.neon .chat .ch-msg { gap: 12px; padding: 9px 12px; border: 0; border-radius: 14px; background: none; }
.neon .chat .ch-msg:hover { background: rgba(255, 255, 255, .035); }
.neon .chat .ch-uava { width: 38px; height: 38px; border-radius: 50%; font-size: 15px; }
.neon .chat .ch-mhead { gap: 3px 7px; }
.neon .chat .ch-nick { font-size: 13.5px; text-shadow: none; }
.neon .chat .ch-role { padding: 1px 7px; border: 0; border-radius: 6px; font-size: 10px; background: color-mix(in srgb, var(--rc) 15%, transparent); }
.neon .chat .ch-time { margin-left: 2px; font-size: 11.5px; font-weight: 600; color: var(--muted2); }
.neon .chat .ch-msg.is-pinned .ch-time::before { color: var(--cyan); }
.neon .chat .ch-actions {
  top: 6px; right: 8px; border-radius: 10px;
  background: rgba(14, 15, 24, .92); border: 1px solid var(--line2); box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .8);
}
.neon .chat .ch-act { color: var(--muted); border-radius: 8px; }
.neon .chat .ch-act:hover, .neon .chat .ch-act.on { background: rgba(255, 255, 255, .08); color: #fff; }
.neon .chat .ch-text { display: block; margin-top: 2px; padding: 0; background: none; border: 0; border-radius: 0; color: #c9cdd9; }
.neon .chat .ch-edited { color: var(--muted2); }
.neon .chat .mention { color: var(--accent2); background: rgba(34, 211, 238, .1); }
.neon .chat .mention:hover { color: #fff; }
.neon .chat .mention.me { color: #fff; background: linear-gradient(90deg, rgba(34, 211, 238, .3), rgba(168, 85, 247, .38)); }
/* подсветка состава и упоминаний: тонкая светящаяся полоска слева + лёгкий градиент */
.neon .chat .ch-msg.ch-hl-admin { --hl: 255, 99, 99; }
.neon .chat .ch-msg.ch-hl-mod { --hl: 74, 158, 255; }
.neon .chat .ch-msg.ch-hl-staff { --hl: 243, 156, 18; }
.neon .chat .ch-msg.is-mention { --hl: 168, 85, 247; }
.neon .chat .ch-msg[class*="ch-hl-"], .neon .chat .ch-msg.is-mention { background: linear-gradient(90deg, rgba(var(--hl), .09), transparent 70%); }
.neon .chat .ch-msg.is-mention { background: linear-gradient(90deg, rgba(168, 85, 247, .17), rgba(34, 211, 238, .04) 75%); }
.neon .chat .ch-msg[class*="ch-hl-"]::before, .neon .chat .ch-msg.is-mention::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
  background: rgb(var(--hl)); box-shadow: 0 0 10px rgba(var(--hl), .7);
}
.neon .chat .ch-msg.is-mention::before { background: linear-gradient(180deg, var(--cyan), var(--accent)); }
.neon .chat .ch-msg.flash { animation: chFlashNeon 1.6s ease-out; }
@keyframes chFlashNeon { 0%, 30% { box-shadow: 0 0 0 1px rgba(34, 211, 238, .8), 0 0 26px rgba(34, 211, 238, .25); } 100% { box-shadow: 0 0 0 0 transparent; } }
.neon .chat .ch-msg.is-roll .ch-text {
  display: inline-block; margin-top: 5px; padding: 6px 13px 6px 9px; border-radius: 12px; color: #d5d8e3;
  background: linear-gradient(90deg, rgba(34, 211, 238, .08), rgba(168, 85, 247, .12)); border: 1px solid rgba(168, 85, 247, .32);
}
.neon .chat .ch-roll-n { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--head-font); font-weight: 700; }
.neon .chat .ch-roll-dice { filter: drop-shadow(0 0 8px rgba(168, 85, 247, .55)); }
.neon .chat .ch-roll-max { color: var(--muted); }
.neon .chat .ch-edit textarea { border-radius: 12px; }
.neon .chat .ch-edit-bar small { color: var(--muted2); }
.neon .chat .ch-edit-bar button { border-color: var(--line2); border-radius: 10px; }
.neon .chat .ch-edit-bar .ch-edit-ok { background: var(--grad); color: #05060b; }
/* реакции: маленькие «пилюли» */
.neon .chat .ch-reacts { gap: 5px; margin-top: 6px; }
.neon .chat .ch-chip { height: 26px; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .04); border-color: var(--line2); color: #d5d8e3; }
.neon .chat button.ch-chip:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); }
.neon .chat .ch-chip.mine { background: linear-gradient(90deg, rgba(34, 211, 238, .16), rgba(168, 85, 247, .18)); border-color: rgba(34, 211, 238, .5); color: #fff; }
.neon .chat .ch-chip.mine b { color: var(--accent2); }
.neon .chat .ch-chip.super { background: linear-gradient(135deg, rgba(255, 196, 0, .16), rgba(255, 140, 0, .08)); border-color: rgba(255, 196, 0, .55); color: #ffd977; }
.neon .chat .ch-chip.super.mine { border-color: #ffc400; background: linear-gradient(135deg, rgba(255, 196, 0, .30), rgba(255, 140, 0, .16)); color: #ffe6a3; }
.neon .chat .ch-chip.super.mine b { color: #ffd977; }
.neon .chat .ch-add { height: 26px; border-radius: 999px; border-color: rgba(255, 255, 255, .18); color: var(--muted2); }
.neon .chat .ch-add:hover { background: rgba(34, 211, 238, .08); border-color: rgba(34, 211, 238, .5); color: var(--accent2); }
.neon .chat .ch-down { border: 1px solid var(--line2); background: rgba(33, 26, 56, .92); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .9); }
.neon .chat .ch-down:hover { border-color: rgba(34, 211, 238, .55); }
.neon .chat .ch-down b { background: var(--pink); color: #fff; box-shadow: 0 0 10px rgba(244, 114, 182, .7); }
.neon .chat .ch-pinned {
  margin: 12px 4px 2px; padding: 9px 10px 9px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(90deg, rgba(34, 211, 238, .08), rgba(168, 85, 247, .07)); box-shadow: inset 3px 0 0 var(--cyan);
}
.neon .chat .ch-pinned:hover { background: linear-gradient(90deg, rgba(34, 211, 238, .12), rgba(168, 85, 247, .1)); }
.neon .chat .ch-pin-ico, .neon .chat .ch-pin-main small { color: var(--cyan); }
.neon .chat .ch-pin-text { color: #d5d8e3; }
.neon .chat .ch-form { gap: 10px; margin: 8px 4px 0; }
.neon .chat .ch-input-wrap { padding-right: 6px; border-radius: 16px; background: rgba(0, 0, 0, .35); border-color: var(--line2); }
.neon .chat .ch-input-wrap:focus-within { border-color: rgba(34, 211, 238, .6); box-shadow: 0 0 0 3px rgba(34, 211, 238, .14); }
.neon .chat .ch-input-wrap .ch-input { height: 48px; padding-left: 18px; background: none; border: 0; }
.neon .chat .ch-input::placeholder { color: var(--muted2); }
.neon .chat .ch-emoji-btn { width: 38px; height: 38px; border-radius: 12px; color: var(--muted); }
.neon .chat .ch-emoji-btn:hover { color: #fde047; background: rgba(255, 255, 255, .06); }
.neon .chat .ch-send { width: 50px; padding: 0; border-radius: 16px; background: var(--grad); color: #05060b; font-size: 16px; box-shadow: 0 10px 30px -10px rgba(34, 211, 238, .6); }
.neon .chat .ch-send span { display: none; }
.neon .chat .ch-guest { color: var(--muted); }
.neon .chat .ch-pk-grid button:hover { background: rgba(255, 255, 255, .08); }
.neon .chat .ch-ac-item.on, .neon .chat .ch-ac-item:hover { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .4); }
.neon .chat.is-collapsed .ch-head { border-bottom-color: transparent; }
.neon .chat .ch-passive { color: var(--muted); }
.neon .chat .ch-zzz { filter: drop-shadow(0 0 18px rgba(168, 85, 247, .55)); }
.neon .chat .ch-wake { border: 0; border-radius: 13px; padding: 11px 22px; background: var(--grad); color: #05060b; font-weight: 800; box-shadow: 0 10px 30px -10px rgba(34, 211, 238, .55); }
/* на главной плитка чата тянется по высоте соседней колонки */
.neon .nx-chat .card.chat { height: 100%; }
.neon .nx-chat .chat .ch-box { flex: 1 1 auto; height: auto; min-height: 400px; }
.neon .nx-chat .chat.is-collapsed { height: auto; }
/* всплывашки в body */
.neon .ch-rpop, .neon .ch-mpop { background: rgba(33, 26, 56, .97); border-color: var(--line2); border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.neon .ch-rpop [data-pick]:hover { background: rgba(255, 255, 255, .08); }
.neon .ch-mpop button { color: #d5d8e3; font-family: "Manrope", sans-serif; }
.neon .ch-mpop button i { color: var(--cyan); }
.neon .ch-mpop button:hover { background: rgba(255, 255, 255, .06); }
.neon .ch-mpop button.danger, .neon .ch-mpop button.danger i { color: #fb7185; }
.neon .ch-plus-hint { background: rgba(33, 26, 56, .97); border-radius: 12px; font-family: "Manrope", sans-serif; }
/* правила */
.neon .ch-modal.modal { background: rgba(3, 4, 9, .72); }
.neon .ch-modal .ch-rules { position: relative; background: rgba(33, 26, 56, .98); border: 1px solid var(--line2); border-radius: 22px; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .95), 0 0 60px -20px rgba(168, 85, 247, .35); }
.neon .ch-modal .ch-rules::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 1px; background: var(--grad); }
.neon .ch-rules-head { padding: 20px 18px 16px 22px; background: none; border-bottom: 1px solid var(--line); }
.neon .ch-rules-head h3 { font: 600 17px var(--head-font); gap: 12px; }
.neon .ch-rules-head h3 i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(244, 114, 182, .12); color: var(--pink); font-size: 14px; }
.neon .ch-rules-x { border-radius: 10px; color: var(--muted); font-size: 24px; }
.neon .ch-rules-x:hover { color: #fff; background: rgba(255, 255, 255, .06); transform: none; }
.neon .ch-rules-body { padding: 18px 22px 20px; background: none; }
.neon .ch-rules-lead { color: var(--muted); }
.neon .ch-rules-body ul { gap: 8px; }
.neon .ch-rules-body li { padding: 12px 14px 12px 50px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .03); color: #d5d8e3; }
.neon .ch-rules-body li::before { content: "\2715"; left: 13px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: rgba(244, 63, 94, .14); color: #fb7185; font-size: 11px; }
.neon .ch-rules-warn { margin-top: 16px; border: 1px solid rgba(251, 191, 36, .3); border-radius: 13px; background: rgba(251, 191, 36, .07); color: #fbbf24; }
.neon .ch-rules-foot { padding: 14px 22px 18px; background: none; border-top: 1px solid var(--line); }
.neon .ch-rules-ok { padding: 11px 28px; border: 0; border-radius: 13px; background: var(--grad); color: #05060b; font-weight: 800; box-shadow: 0 10px 30px -10px rgba(34, 211, 238, .55); }

/* ---------- сенсорные экраны: кнопки действий видны всегда ---------- */
@media (hover: none) {
  .chat .ch-actions { opacity: .75; }
  .chat .ch-actions, .neon .chat .ch-actions { background: none; border-color: transparent; box-shadow: none; top: 5px; right: 4px; }
}

/* ---------- плотность и телефоны ---------- */
.chat.ch-compact .ch-list { gap: 3px; }
.chat.ch-compact .ch-msg { gap: 10px; padding: 6px 10px; }
.chat.ch-compact .ch-uava { width: 30px; height: 30px; font-size: 12px; }
.chat.ch-compact .ch-text { margin-top: 4px; padding: 3px 9px; }
.chat.ch-compact .ch-reacts { margin-top: 4px; }
.neon .chat.ch-compact .ch-msg { padding: 4px 10px; }
.neon .chat.ch-compact .ch-list { gap: 0; }
.neon .chat.ch-compact .ch-uava { width: 28px; height: 28px; }
.neon .chat.ch-compact .ch-text { margin-top: 0; padding: 0; }
.neon .chat.ch-compact .ch-msg.is-roll .ch-text { padding: 3px 10px 3px 7px; }

@media (max-width: 640px) {
  .chat .ch-head { padding: 11px 10px 11px 14px; gap: 8px; }
  .chat .ch-title h3 { font-size: 16px; }
  .chat .ch-tools { gap: 6px; }
  .chat .ch-filter-txt { display: none; }
  .chat .ch-rules-btn { padding: 0 11px; }
  .chat .ch-feed { padding: 10px 10px 12px; }
  .chat .ch-box { height: 400px; }
  .chat .ch-list { padding: 8px 6px; }
  .chat .ch-msg { gap: 10px; padding: 9px 10px; }
  .chat .ch-uava { width: 38px; height: 38px; }
  /* шапка сообщения в одну строку: ник, плашка и время помещаются рядом с кнопками */
  .chat .ch-mhead { gap: 3px 6px; }
  .chat .ch-mhead:has(.ch-actions) { padding-right: 54px; }
  .chat .ch-role { padding: 1px 6px; font-size: 10px; }
  .chat .ch-time { font-size: 11px; }
  .chat .ch-actions { top: 6px; right: 5px; }
  .chat .ch-send { padding: 0 14px; }
  .chat .ch-send span { display: none; }
  .chat .ch-picker { width: auto; left: 0; right: 0; }
  .chat .ch-pk-grid button { font-size: 20px; }
  .chat .ch-settings { right: -40px; width: 248px; }
  .neon .chat .ch-head { padding: 13px 10px 12px 14px; }
  .neon .chat .ch-title-ico { width: 34px; height: 34px; border-radius: 11px; }
  .neon .chat .ch-tool, .neon .chat .ch-rules-btn { height: 34px; min-width: 34px; }
  .neon .chat .ch-rules-btn { padding: 0 11px; }
  .neon .chat .ch-feed { padding: 0 6px 10px; }
  .neon .chat .ch-msg { gap: 10px; padding: 8px 8px; }
  .neon .chat .ch-uava { width: 34px; height: 34px; }
  .neon .chat .ch-form { margin: 6px 2px 0; gap: 8px; }
  .neon .chat .ch-input-wrap .ch-input { height: 46px; padding-left: 14px; }
  .neon .chat .ch-send { width: 46px; }
  .neon .nx-chat .chat .ch-box { min-height: 420px; }
  .ch-modal .ch-rules-body li { font-size: 13.5px; }
}
@media (max-width: 380px) {
  .chat .ch-rules-btn span { display: none; }
}

/* ---------- Админка → Эмодзи чата ---------- */
.ce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ce-item { display: grid; justify-items: center; gap: 8px; padding: 14px 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); text-align: center; }
.ce-item.on { border-color: var(--accent); }
.ce-img { width: 56px; height: 56px; display: grid; place-items: center; }
.ce-img img { max-width: 56px; max-height: 56px; object-fit: contain; }
.ce-code { font: 700 13px/1.2 ui-monospace, Consolas, monospace; color: var(--accent2); word-break: break-all; }
.ce-item .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ce-preview { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px dashed var(--line2); font-size: 13px; }
.ce-preview img { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; }
/* раздачи */
.chat .ch-msg.is-giveaway .ch-text { background: none; border: 0; padding: 0; }
.chat .gw-card { margin-top: 6px; max-width: 380px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(250, 204, 21, .35);
  background: linear-gradient(135deg, rgba(250, 204, 21, .12), rgba(168, 85, 247, .14)); display: grid; gap: 10px; }
.chat .gw-card.is-live { box-shadow: 0 0 22px rgba(250, 204, 21, .12); }
.chat .gw-card:not(.is-live) { border-color: rgba(148, 163, 184, .25); background: rgba(148, 163, 184, .07); }
.chat .gw-top { display: flex; gap: 11px; align-items: center; }
.chat .gw-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 18px; color: #facc15; background: rgba(250, 204, 21, .14); }
.chat .gw-card:not(.is-live) .gw-ic { color: #94a3b8; background: rgba(148, 163, 184, .12); }
.chat .gw-main { display: grid; gap: 1px; min-width: 0; }
.chat .gw-main small { color: #a3a6c2; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.chat .gw-main small + b + small { text-transform: none; letter-spacing: 0; }
.chat .gw-main b { color: #fff; font-size: 15px; line-height: 1.3; }
.chat .gw-note { margin: 0; color: #c9cbe0; font-size: .92em; }
.chat .gw-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: #a3a6c2; }
.chat .gw-left { font-variant-numeric: tabular-nums; }
.chat .gw-left.soon { color: #fb7185; }
.chat .gw-join { margin-left: auto; }
.chat .gw-in { margin-left: auto; color: #34d399; font-weight: 600; }
.chat .gw-no { margin-left: auto; color: #8f92b0; font-style: italic; }
.chat .gw-win { color: #facc15; font-weight: 600; }
.chat .gw-win a { color: #fde68a; }
.neon .chat .gw-card { border-radius: 16px; }
.neon .chat .gw-main b { font-family: var(--head-font); font-weight: 600; }

/* moderation.css */
/* Правила, банлист, админские инструменты наказаний, журнал, меню админки: обе темы.
   Базовые стили на токенах style.css (классика), неон переопределяется через .neon …, потому что neon.css грузится позже. */
:root {
  --md-sticky: 92px;
  --md-red: #f87171;
  --md-amber: #fb923c;
  --md-purple: #c084fc;
  --md-gray: #9ca3af;
  --md-panel: rgba(10, 12, 32, .55);
  --md-head: linear-gradient(135deg, #181b42, #0e1029);
}
.neon { --md-panel: rgba(255, 255, 255, .025); --md-head: linear-gradient(135deg, rgba(34,211,238,.06), rgba(168,85,247,.08)); }

/* ================= ЦЕНТР ПРАВИЛ ================= */
.rc { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; align-items: start; }
.rc-side { position: sticky; top: var(--md-sticky); }
.rc-side-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.rc-side-head { display: flex; align-items: center; gap: 10px; padding: 15px 16px; background: var(--md-head); border-bottom: 1px solid var(--line); }
.rc-side-ttl { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.rc-side-ttl i { color: var(--accent2); }
.rc-edit { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; font-size: 12px; font-weight: 700; color: #fff !important; background: linear-gradient(135deg, var(--accent), #6d3fcc); box-shadow: 0 3px 12px rgba(155,109,255,.3); }
.rc-edit:hover { filter: brightness(1.12); }
.rc-search { position: relative; padding: 12px 12px 6px; }
.rc-search i { position: absolute; left: 25px; top: 50%; margin-top: 3px; transform: translateY(-50%); color: var(--muted2); font-size: 13px; pointer-events: none; }
.rc-search input { width: 100%; padding: 10px 12px 10px 36px; border-radius: 11px; font-size: 13.5px; }
.rc-nav-toggle { display: none; }
.rc-nav { padding: 6px 8px 10px; max-height: calc(100vh - var(--md-sticky) - 150px); overflow-y: auto; }
.rc-cat + .rc-cat { margin-top: 2px; }
.rc-cat > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 11px; color: var(--text); font-size: 13.5px; font-weight: 700; cursor: pointer; user-select: none; transition: background .15s; }
.rc-cat > summary::-webkit-details-marker { display: none; }
.rc-cat > summary:hover { background: rgba(155,109,255,.08); }
.rc-cat-ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgba(155,109,255,.14); color: var(--accent2); font-size: 13px; }
.rc-cat-t { flex: 1; min-width: 0; }
.rc-cat-arrow { font-size: 10px; color: var(--muted2); transition: transform .2s; }
.rc-cat[open] .rc-cat-arrow { transform: rotate(180deg); }
.rc-lock-ic { font-size: 10px; color: var(--amber); opacity: .85; }
.rc-pages { padding: 2px 0 6px; }
.rc-link { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 48px; margin: 1px 0; border-radius: 10px; color: var(--muted) !important; font-size: 13.5px; line-height: 1.35; border-left: 2px solid transparent; transition: .15s; }
.rc-link span { flex: 1; min-width: 0; }
.rc-link::before { content: ""; position: absolute; left: 32px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--muted2); transition: .15s; }
.rc-link:hover { color: var(--text) !important; background: rgba(155,109,255,.05); }
.rc-link:hover::before { background: var(--text); }
.rc-link.active { color: var(--accent2) !important; background: rgba(155,109,255,.12); border-left-color: var(--accent); font-weight: 700; }
.rc-link.active::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.rc-link.is-hidden, .rc-cat.is-hidden { display: none; }
.rc-nav-empty { margin: 10px 8px; color: var(--muted2); font-size: 12.5px; text-align: center; }

.rc-main { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.3); min-height: 420px; }
.rc-main.is-loading .rc-body, .rc-main.is-loading .rc-head { opacity: .45; transition: opacity .2s; }
.rc-head { position: relative; padding: 26px 34px 22px; border-bottom: 1px solid var(--line); background: var(--md-head); }
.rc-head::after { content: ""; position: absolute; left: 34px; bottom: -1px; width: 90px; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); }
.rc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.rc-crumbs > i { color: var(--accent2); }
.rc-staff { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3); color: #fcd34d; font-size: 11.5px; }
.rc-title { margin: 0 0 10px; font-size: 28px; font-weight: 800; line-height: 1.2; color: var(--text); }
.rc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--muted); font-size: 12.5px; }
.rc-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.rc-act { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 9px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); color: var(--muted) !important; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rc-act:hover, .rc-act.copied { color: var(--text) !important; border-color: var(--accent); }
.rc-found b { color: var(--accent2); }

/* текст правил */
.rc-body { padding: 28px 34px 30px; font-size: 15px; line-height: 1.75; color: #c9cbe3; animation: rc-in .22s ease; }
@keyframes rc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.rc-body > :first-child { margin-top: 0 !important; }
.rc-body > :last-child { margin-bottom: 0 !important; }
.rc-body p { margin: 0 0 12px; }
.rc-body strong { color: var(--text); }
.rc-body em { color: var(--accent2); font-style: normal; }
.rc-body mark { background: rgba(245,158,11,.18); color: #fde68a; padding: 0 4px; border-radius: 4px; }
.rc-body code { font-size: .9em; }
.rc-body small { color: var(--muted); }
.rc-body a { color: var(--accent2); text-decoration: underline; text-decoration-color: rgba(183,148,255,.35); text-underline-offset: 3px; }
.rc-body a:hover { text-decoration-color: currentColor; }
.rc-h2 { margin: 30px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 19px; font-weight: 700; color: var(--text); }
.rc-h3 { margin: 22px 0 10px; font-size: 16px; font-weight: 700; color: var(--accent2); }
.rc-sec { display: flex; align-items: center; gap: 12px; margin: 30px 0 12px; font-size: 19px; font-weight: 700; color: var(--text); scroll-margin-top: calc(var(--md-sticky) + 10px); }
.rc-sec-n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #6d3fcc); color: #fff !important; font-size: 15px; text-decoration: none !important; box-shadow: 0 4px 14px rgba(155,109,255,.3); }
.rc-item { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px 14px 9px 10px; margin-bottom: 5px; border-radius: 10px; background: rgba(255,255,255,.02); border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.65; transition: background .15s, border-color .15s; scroll-margin-top: calc(var(--md-sticky) + 10px); }
.rc-item:hover { background: rgba(155,109,255,.06); border-left-color: rgba(155,109,255,.4); color: var(--text); }
.rc-item:target { background: rgba(245,158,11,.1); border-left-color: var(--amber); }
.rc-num { justify-self: start; padding: 1px 8px; border-radius: 7px; background: rgba(155,109,255,.16); color: var(--accent2) !important; font-weight: 800; font-size: 12.5px; text-decoration: none !important; font-variant-numeric: tabular-nums; margin-top: 2px; }
.rc-ol, .rc-ul { list-style: none; margin: 0 0 14px; padding: 0; }
.rc-ol { counter-reset: rc; }
.rc-ol > li, .rc-ul > li { position: relative; padding: 8px 14px 8px 46px; margin-bottom: 5px; border-radius: 10px; background: rgba(255,255,255,.02); font-size: 14.5px; line-height: 1.65; border-left: 2px solid transparent; transition: .15s; }
.rc-ul > li { padding-left: 34px; }
.rc-ol > li:hover, .rc-ul > li:hover { background: rgba(155,109,255,.06); border-left-color: rgba(155,109,255,.35); color: var(--text); }
.rc-ol > li { counter-increment: rc; }
.rc-ol > li::before { content: counter(rc); position: absolute; left: 12px; top: 9px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: rgba(155,109,255,.18); color: var(--accent2); font-size: 11.5px; font-weight: 800; line-height: 1; }
.rc-ul > li::before { content: "\25B8"; position: absolute; left: 14px; top: 8px; color: var(--accent); }
.rc-ol li > p, .rc-ul li > p { margin: 0; }
.rc-ol .rc-ol, .rc-ol .rc-ul, .rc-ul .rc-ol, .rc-ul .rc-ul { margin: 8px 0 2px; }
.rc-callout { position: relative; display: flex; gap: 12px; margin: 16px 0; padding: 14px 18px; border-radius: 12px; border: 1px solid; border-left-width: 4px; font-size: 14.5px; line-height: 1.65; }
.rc-callout > i { flex: none; margin-top: 3px; font-size: 17px; }
.rc-callout-b { min-width: 0; flex: 1; }
.rc-callout-b > p:last-child { margin-bottom: 0; }
.rc-callout-t { display: block; margin-bottom: 3px; color: inherit; font-size: 14.5px; }
.rc-callout[data-type="info"] { background: rgba(74,158,255,.09); border-color: rgba(74,158,255,.3); border-left-color: #4a9eff; color: #cfe3ff; }
.rc-callout[data-type="info"] > i { color: #4a9eff; }
.rc-callout[data-type="warn"] { background: rgba(245,166,35,.09); border-color: rgba(245,166,35,.3); border-left-color: #f5a623; color: #ffe6bf; }
.rc-callout[data-type="warn"] > i { color: #f5a623; }
.rc-callout[data-type="danger"] { background: rgba(255,107,122,.09); border-color: rgba(255,107,122,.3); border-left-color: #ff6b7a; color: #ffd0d5; }
.rc-callout[data-type="danger"] > i { color: #ff6b7a; }
.rc-callout[data-type="success"] { background: rgba(46,204,113,.09); border-color: rgba(46,204,113,.3); border-left-color: #2ecc71; color: #c9f5da; }
.rc-callout[data-type="success"] > i { color: #2ecc71; }
.rc-callout strong { color: #fff; }
.rc-quote { margin: 16px 0; padding: 12px 18px; border-left: 3px solid var(--accent); background: rgba(155,109,255,.08); border-radius: 0 10px 10px 0; font-size: 14.5px; }
.rc-quote > p:last-child { margin: 0; }
.rc-spoiler { margin: 14px 0; border: 1px solid var(--line2); border-radius: 12px; background: rgba(255,255,255,.02); }
.rc-spoiler > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 16px; color: var(--text); font-size: 14.5px; font-weight: 700; }
.rc-spoiler > summary::-webkit-details-marker { display: none; }
.rc-spoiler > summary::before { content: "\f054"; font: 900 11px "Font Awesome 6 Free"; color: var(--accent2); transition: transform .2s; }
.rc-spoiler[open] > summary::before { transform: rotate(90deg); }
.rc-spoiler-b { padding: 0 16px 12px; }
.rc-center { text-align: center; }
.rc-hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.rc-img { margin: 16px 0; }
.rc-img img { max-width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.rc-table { margin: 16px 0; overflow-x: auto; border-radius: 12px; border: 1px solid var(--line2); }
.rc-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rc-table th, .rc-table td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; text-transform: none; letter-spacing: 0; line-height: 1.55; }
.rc-table tr > :first-child { border-left: 0; }
.rc-table tr > :last-child { border-right: 0; }
.rc-table thead tr:first-child > *, .rc-table table > tbody:first-child > tr:first-child > * { border-top: 0; }
.rc-table tbody tr:last-child > * { border-bottom: 0; }
.rc-table th { background: rgba(155,109,255,.12); color: var(--text); font-weight: 700; font-size: 13.5px; }
.rc-table td { color: #c9cbe3; }
.rc-table tbody tr:hover td:not([style*="background"]) { background: rgba(155,109,255,.05); }

.rc-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 34px 30px; }
.rc-pn-a { display: grid; gap: 3px; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--md-panel); transition: .15s; }
.rc-pn-a small { color: var(--muted); font-size: 12px; font-weight: 600; }
.rc-pn-a b { color: var(--text); font-size: 14px; }
.rc-pn-a:hover { border-color: var(--accent); transform: translateY(-1px); }
.rc-pn-next { text-align: right; grid-column: 2; }

.rc-results { display: grid; gap: 10px; }
.rc-hit { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--md-panel); text-decoration: none !important; transition: .15s; }
.rc-hit:hover { border-color: var(--accent); }
.rc-hit-cat { color: var(--muted); font-size: 12px; font-weight: 600; }
.rc-hit-cat i { color: var(--accent2); }
.rc-hit-t { color: var(--text); font-size: 15.5px; }
.rc-hit-s { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.rc-hit mark, .rc-hit-t mark { background: rgba(245,158,11,.22); color: #fde68a; border-radius: 4px; padding: 0 2px; }
.rc-empty { padding: 60px 20px; text-align: center; color: var(--muted); }
.rc-empty > i { font-size: 46px; opacity: .35; margin-bottom: 14px; display: block; }
.rc-empty h3 { color: var(--text); margin-bottom: 6px; }
.rc-empty-big { padding: 100px 20px; }
.rc-doc { max-width: 980px; margin: 0 auto; }

/* неон */
.neon .rc-side-card, .neon .rc-main { background: var(--tile), var(--surface); box-shadow: none; }
.neon .rc-side-ttl { font-family: var(--head-font); font-weight: 600; letter-spacing: 1.5px; font-size: 12px; }
.neon .rc-side-ttl i { color: var(--cyan); }
.neon .rc-edit { background: var(--grad); color: #05060b !important; box-shadow: 0 6px 20px -8px rgba(34,211,238,.6); }
.neon .rc-cat > summary:hover, .neon .rc-link:hover { background: rgba(255,255,255,.04); }
.neon .rc-cat-ic { background: linear-gradient(135deg, rgba(34,211,238,.14), rgba(168,85,247,.16)); color: var(--cyan); }
.neon .rc-link.active { color: #fff !important; background: linear-gradient(90deg, rgba(34,211,238,.1), rgba(168,85,247,.12)); border-left-color: var(--cyan); }
.neon .rc-link.active::before { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.neon .rc-head::after { background: var(--grad); }
.neon .rc-title { font-family: var(--head-font); font-weight: 600; font-size: 27px; letter-spacing: -.3px; }
.neon .rc-crumbs > i { color: var(--cyan); }
.neon .rc-body { color: #c4c8d6; }
.neon .rc-h2, .neon .rc-sec { font-family: var(--head-font); font-weight: 600; font-size: 18px; }
.neon .rc-h3 { color: var(--cyan); }
.neon .rc-body em { color: var(--accent2); }
.neon .rc-sec-n { background: var(--grad); color: #05060b !important; box-shadow: 0 6px 20px -8px rgba(34,211,238,.6); }
.neon .rc-num { background: rgba(34,211,238,.1); color: var(--cyan) !important; }
.neon .rc-item:hover, .neon .rc-ol > li:hover, .neon .rc-ul > li:hover { background: rgba(255,255,255,.04); border-left-color: rgba(34,211,238,.45); }
.neon .rc-ol > li::before { background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(168,85,247,.25)); color: #e9d5ff; }
.neon .rc-ul > li::before { color: var(--cyan); }
.neon .rc-table th { background: rgba(168,85,247,.12); }
.neon .rc-table tbody tr:hover td:not([style*="background"]) { background: rgba(255,255,255,.03); }
.neon .rc-act:hover, .neon .rc-act.copied, .neon .rc-pn-a:hover, .neon .rc-hit:hover { border-color: rgba(34,211,238,.5); }
.neon .rc-found b { color: var(--cyan); }

@media (max-width: 960px) {
  .rc { grid-template-columns: 1fr; gap: 14px; }
  .rc-side { position: static; }
  .rc-nav { max-height: none; }
  .md-js .rc-nav-toggle { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 4px 12px 12px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
  .md-js .rc-nav-toggle > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .md-js .rc-nav-toggle > span i { color: var(--accent2); margin-right: 4px; }
  .md-js .rc-nav-toggle small { color: var(--muted); font-size: 12px; }
  .md-js .rc-nav-toggle > i { font-size: 11px; color: var(--muted); transition: transform .2s; }
  .md-js .rc-side.open .rc-nav-toggle > i { transform: rotate(180deg); }
  .md-js .rc-side:not(.open):not(.searching) .rc-nav { display: none; }
  .rc-head { padding: 20px 18px 18px; }
  .rc-head::after { left: 18px; }
  .rc-title, .neon .rc-title { font-size: 22px; }
  .rc-body { padding: 20px 18px 22px; font-size: 14.5px; }
  .rc-item { grid-template-columns: 1fr; gap: 4px; padding: 10px 12px; }
  .rc-pn { padding: 0 18px 20px; grid-template-columns: 1fr; }
  .rc-pn-next { grid-column: auto; }
  .rc-callout { padding: 12px 14px; }
}

/* ================= РЕДАКТОР ПРАВИЛ (админка) ================= */
.tabs .ra-open { margin-left: auto; }
.ra { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; }
.ra-tree { position: sticky; top: var(--md-sticky); padding: 16px; max-height: calc(100vh - var(--md-sticky) - 16px); overflow-y: auto; }
.ra-tree-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ra-cats, .ra-pages { list-style: none; margin: 0; padding: 0; }
.ra-cat { border: 1px solid var(--line); border-radius: 13px; background: var(--md-panel); margin-bottom: 8px; }
.ra-cat.is-cur { border-color: var(--accent); }
.ra-cat-row { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 6px; }
.ra-grip { flex: none; width: 20px; text-align: center; color: var(--muted2); cursor: grab; font-size: 12px; }
.ra-grip:active { cursor: grabbing; }
.ra-cat-ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgba(155,109,255,.14); color: var(--accent2); font-size: 12px; }
.ra-cat-t { flex: 1; min-width: 0; color: var(--text) !important; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-lock { color: var(--amber); font-size: 11px; }
.ra-off { padding: 1px 7px; border-radius: 999px; background: rgba(148,163,184,.14); color: var(--muted); font-size: 11px; }
.ra-btns { display: inline-flex; gap: 2px; flex: none; }
.ra-btns form { display: inline; }
.ra-btns button, .ra-btns a { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border-radius: 8px; border: 0; background: transparent; color: var(--muted) !important; font-size: 11px; cursor: pointer; }
.ra-btns button:hover, .ra-btns a:hover { background: rgba(155,109,255,.14); color: var(--text) !important; }
.ra-btns button:disabled { opacity: .25; cursor: default; background: transparent; }
.ra-pages { padding: 0 6px 6px; min-height: 8px; }
.ra-page { display: flex; align-items: center; gap: 6px; padding: 5px 4px 5px 6px; margin-top: 2px; border-radius: 10px; border: 1px solid transparent; }
.ra-page:hover { background: rgba(255,255,255,.03); }
.ra-page.is-cur { background: rgba(155,109,255,.14); border-color: rgba(155,109,255,.35); }
.ra-page-t { flex: 1; min-width: 0; color: var(--muted) !important; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-page.is-cur .ra-page-t, .ra-page-t:hover { color: var(--text) !important; }
.ra-page.is-off .ra-page-t, .ra-cat.is-off .ra-cat-t { opacity: .5; text-decoration: line-through; }
.ra-none { padding: 6px 10px 4px 32px; color: var(--muted2); font-size: 12.5px; }
.dragging { opacity: .35; }
.ra-tip { margin: 12px 2px 0; }
.ra-card { padding: 22px; }
.ra-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ra-card-h h3 { margin: 0; }
.ra-lbl { font-weight: 500; font-size: 14px; margin-bottom: 8px; }
.ra-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.ra-f-title { grid-column: 1 / -1; }
.ra-switch { padding-bottom: 12px; white-space: nowrap; }
.form label.ra-switch { display: inline-flex; font-weight: 500; }
.ra-slug { display: flex; align-items: stretch; }
.ra-slug > span { display: flex; align-items: center; padding: 0 9px; border: 1px solid var(--line2); border-right: 0; border-radius: 10px 0 0 10px; background: rgba(255,255,255,.04); color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.ra-slug input { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; min-width: 0; }
.ra-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.ra-icons label { display: block; cursor: pointer; }
.ra-icons input { position: absolute; opacity: 0; pointer-events: none; }
.ra-icons span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--line2); color: var(--muted); font-size: 15px; transition: .15s; }
.ra-icons span:hover { color: var(--text); border-color: var(--accent); }
.ra-icons input:checked + span { background: rgba(155,109,255,.2); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 3px rgba(155,109,255,.18); }
.ra-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ra-del { margin-top: 12px; text-align: right; }

.ra-editor { border: 1px solid var(--line2); border-radius: 14px; overflow: clip; background: rgba(0,0,0,.18); }
.ra-tb { position: sticky; top: var(--md-sticky); z-index: 5; border-radius: 14px 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line); background: var(--card2); }
.ra-tb-g { display: flex; flex-wrap: wrap; gap: 3px; padding-right: 6px; border-right: 1px solid var(--line); }
.ra-tb-g:last-child, .ra-tb-end { border-right: 0; }
.ra-tb-end { margin-left: auto; }
.ra-tb button, .ra-ttools button, .ra-color { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid transparent; background: rgba(255,255,255,.04); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ra-tb button:hover, .ra-ttools button:hover, .ra-color:hover, .ra-dd.open > button { color: var(--text); border-color: var(--accent); background: rgba(155,109,255,.12); }
.ra-tb button b { color: var(--accent2); }
.ra-caret { font-size: 9px; }
.ra-color { position: relative; overflow: hidden; }
.ra-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; border: 0; }
.ra-dd { position: relative; }
.ra-dd-menu { left: 0; right: auto; min-width: 170px; padding: 6px; display: none; }
.ra-dd.open .ra-dd-menu { display: grid; gap: 2px; }
.ra-dd-menu .ra-co { width: 100%; justify-content: flex-start; background: transparent; }
.ra-co[data-type="info"] i { color: #4a9eff; }
.ra-co[data-type="warn"] i { color: #f5a623; }
.ra-co[data-type="danger"] i { color: #ff6b7a; }
.ra-co[data-type="success"] i { color: #2ecc71; }
.ra-help { display: grid; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: rgba(155,109,255,.06); font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.ra-help[hidden] { display: none; }
.ra-help-static .ra-help { display: grid !important; margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; }
.ra-panes { display: grid; grid-template-columns: 1fr 1fr; }
.ra-pane { min-width: 0; display: flex; flex-direction: column; }
.ra-pane + .ra-pane { border-left: 1px solid var(--line); }
.ra-pane-h { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ra-pane-h i { color: var(--accent2); }
.ra-state { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted2); }
.ra-pane textarea { flex: 1; min-height: 560px; margin: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 16px; font: 13.5px/1.7 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--text); resize: vertical; tab-size: 2; }
.ra-preview.rc-body { padding: 18px 20px; max-height: 720px; overflow-y: auto; font-size: 14px; animation: none; }
.ra-welcome { text-align: center; padding: 40px 30px; }
.ra-welcome-ic { width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(135deg, var(--accent), #6d3fcc); color: #fff; font-size: 26px; box-shadow: 0 12px 30px -10px rgba(155,109,255,.6); }
.ra-welcome .ra-actions { justify-content: center; margin: 18px 0 4px; }
.ra-welcome .ra-help { text-align: left; }

.ra-tbox { max-width: 900px; max-height: calc(100vh - 32px); overflow-y: auto; }
.ra-ttools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 8px; }
.ra-tcol { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.ra-tcol input { width: 30px; height: 28px; padding: 0; border: 1px solid var(--line2); border-radius: 7px; background: none; cursor: pointer; }
.ra-thead { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ra-tgrid { overflow-x: auto; margin: 6px 0 16px; border-radius: 12px; border: 1px solid var(--line2); }
.ra-tgrid table { width: 100%; border-collapse: collapse; }
.ra-tgrid th, .ra-tgrid td { min-width: 90px; padding: 9px 11px; border: 1px solid var(--line); outline: none; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); cursor: text; vertical-align: top; }
.ra-tgrid th { background: rgba(155,109,255,.12); font-weight: 700; }
.ra-tgrid .sel { box-shadow: inset 0 0 0 2px var(--accent); }

.neon .ra-cat, .neon .ra-editor { background: rgba(255,255,255,.02); }
.neon .ra-cat.is-cur { border-color: rgba(34,211,238,.5); }
.neon .ra-cat-ic { background: linear-gradient(135deg, rgba(34,211,238,.14), rgba(168,85,247,.16)); color: var(--cyan); }
.neon .ra-page.is-cur { background: linear-gradient(90deg, rgba(34,211,238,.1), rgba(168,85,247,.12)); border-color: rgba(168,85,247,.35); }
.neon .ra-btns button:hover, .neon .ra-btns a:hover { background: rgba(255,255,255,.07); }
.neon .ra-tb { background: rgba(33, 26, 56,.96); }
.neon .ra-tb button:hover, .neon .ra-ttools button:hover, .neon .ra-color:hover, .neon .ra-dd.open > button { border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.08); }
.neon .ra-tb button b, .neon .ra-pane-h i { color: var(--cyan); }
.neon .ra-icons input:checked + span { background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(168,85,247,.22)); border-color: rgba(34,211,238,.55); box-shadow: none; }
.neon .ra-welcome-ic { background: var(--grad); color: #05060b; }
.neon .ra-tgrid .sel { box-shadow: inset 0 0 0 2px var(--cyan); }
.neon .ra-help { background: rgba(34,211,238,.04); }

@media (max-width: 1100px) {
  .ra { grid-template-columns: 1fr; }
  .ra-tree { position: static; max-height: none; }
  .ra-panes { grid-template-columns: 1fr; }
  .ra-pane + .ra-pane { border-left: 0; border-top: 1px solid var(--line); }
  .ra-pane textarea { min-height: 380px; }
  .ra-preview.rc-body { max-height: 480px; }
}
@media (max-width: 640px) {
  .ra-fields { grid-template-columns: 1fr; }
  .ra-card { padding: 16px; }
  .ra-tb { position: static; }
  .ra-tb-g { border-right: 0; padding-right: 0; }
  .ra-tb-end { margin-left: 0; }
  .tabs .ra-open { margin-left: 0; }
}

/* ================= СПИСОК НАКАЗАНИЙ (/bans) и общие ячейки таблиц наказаний ================= */
.pun-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.pun-hero-ic { flex: none; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; font-size: 22px; color: #fff; background: linear-gradient(135deg, #ef4444, #9b6dff); box-shadow: 0 6px 22px rgba(239,68,68,.28); }
.pun-hero h1 { margin: 0; font-size: 26px; }
.pun-hero p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.pun { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; align-items: start; }
.pun-side { position: sticky; top: var(--md-sticky); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pun-side-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px; background: var(--md-head); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.pun-side-head i { color: var(--accent2); }
.pun-sec { padding: 14px 14px; }
.pun-sec + .pun-sec { border-top: 1px solid var(--line); }
.pun-lbl { margin: 0 2px 9px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted2); }
.pun-types { display: flex; flex-direction: column; gap: 3px; }
.pun-type { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; color: var(--muted) !important; font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: .15s; }
.pun-type i { width: 18px; text-align: center; color: var(--muted2); }
.pun-type span { flex: 1; }
.pun-type b { min-width: 28px; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--muted); font-size: 12px; text-align: center; }
.pun-type:hover { background: rgba(155,109,255,.08); color: var(--text) !important; }
.pun-type.active { background: rgba(155,109,255,.14); border-color: rgba(155,109,255,.35); color: var(--text) !important; }
.pun-type.active i { color: var(--accent2); }
.pun-type.active b { background: var(--accent); color: #fff; }
.pun-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pun-pill { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line2); color: var(--muted) !important; font-size: 13px; font-weight: 600; transition: .15s; }
.pun-pill:hover { color: var(--text) !important; border-color: var(--muted2); }
.pun-pill.active { color: #fff !important; background: var(--accent); border-color: var(--accent); }
.pun-pill-active.active { background: #dc2626; border-color: #dc2626; }
.pun-pill-expired.active { background: #4b5563; border-color: #4b5563; }
.pun-pill-perm.active { background: #9333ea; border-color: #9333ea; }
.pun-search { display: flex; gap: 6px; }
.pun-input { position: relative; flex: 1; min-width: 0; }
.pun-input i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted2); font-size: 12px; pointer-events: none; }
.pun-input input { width: 100%; padding: 8px 10px 8px 31px; border-radius: 10px; font-size: 13.5px; }
.pun-reset { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--muted) !important; }
.pun-reset:hover { color: var(--md-red) !important; }
.pun-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pun-stats > div { padding: 10px 11px; border-radius: 11px; background: var(--md-panel); border: 1px solid var(--line); }
.pun-stats span { display: block; font-size: 11.5px; color: var(--muted2); }
.pun-stats b { display: block; margin-top: 2px; font-size: 20px; font-weight: 800; line-height: 1.2; }
.pun-v { color: var(--text); }
.pun-v-red { color: var(--md-red); }
.pun-v-purple { color: var(--md-purple); }
.pun-v-amber { color: var(--md-amber); }

.pun-main { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pun-main-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 15px 18px; background: var(--md-head); border-bottom: 1px solid var(--line); }
.pun-main-t { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; }
.pun-main-t i { color: var(--accent2); margin-right: 4px; }
.pun-echo { font-size: 13px; font-weight: 500; color: var(--muted); }
.pun-found { padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pun-found b { color: var(--text); }
.pun-wrap { overflow-x: auto; }
.pun-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pun-table th { padding: 11px 12px; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--muted2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.pun-table td { padding: 10px 11px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pun-table tbody tr:last-child td { border-bottom: 0; }
.pun-table tbody tr:hover td { background: rgba(155,109,255,.04); }
.pun-table tr.is-expired td { opacity: .58; }
.pun-table tr.is-expired:hover td { opacity: .9; }
.pun-player { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.pun-ava { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.pun-ava img, .pun-ava .pun-ava-i { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.pun-ava-none { background: rgba(155,109,255,.16); color: var(--accent2); font-weight: 800; font-size: 14px; }
.pun-who { min-width: 0; }
.pun-nick { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text); }
.pun-sid { display: flex; align-items: center; gap: 5px; font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--muted2); }
.pun-copy { padding: 2px 4px; border: 0; background: none; color: var(--muted2); font-size: 11px; cursor: pointer; border-radius: 5px; line-height: 1; }
.pun-copy:hover, .pun-copy.copied { color: var(--accent2); background: rgba(155,109,255,.12); }
.pun-ip { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--muted2); }
.pun-site { font-size: 11.5px; color: var(--muted); }
.pun-site i { font-size: 9px; color: var(--green); }
.pun-reason { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pun-code { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(251,146,60,.14); color: var(--md-amber); font-family: ui-monospace, Consolas, monospace; font-size: 11px; font-weight: 800; }
.pun-time { display: inline-block; padding: 3px 9px; border-radius: 8px; background: rgba(251,146,60,.12); color: var(--md-amber); font-size: 12px; font-weight: 700; white-space: nowrap; }
.pun-time.perm { background: rgba(192,132,252,.14); color: var(--md-purple); }
.pun-date { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pun-left { font-size: 11.5px; color: var(--md-amber); white-space: nowrap; }
.pun-never { font-size: 12.5px; color: var(--md-purple); font-weight: 700; }
.pun-st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pun-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pun-st-active { background: rgba(248,113,113,.14); color: var(--md-red); }
.pun-st-active::before { box-shadow: 0 0 0 3px rgba(248,113,113,.2); animation: pun-pulse 1.8s infinite; }
.pun-st-expired { background: rgba(156,163,175,.13); color: var(--md-gray); }
.pun-st-perm { background: rgba(192,132,252,.15); color: var(--md-purple); }
@keyframes pun-pulse { 50% { box-shadow: 0 0 0 5px rgba(248,113,113,0); } }
.pun-given { display: flex; flex-direction: column; gap: 2px; }
.pun-admin { font-size: 12px; color: var(--muted2); white-space: nowrap; }
.pun-admin i { font-size: 10px; margin-right: 2px; }
.pun-empty { padding: 50px 20px; text-align: center; color: var(--muted); }
.pun-empty i { font-size: 34px; color: var(--muted2); margin-bottom: 10px; }
.pun-empty p { margin: 0 0 12px; }
.pun-main .pager { padding: 12px 16px; margin: 0; border-top: 1px solid var(--line); }
.pun-note { margin: 0; padding: 13px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pun-note i { color: var(--accent2); margin-right: 4px; }

.neon .pun-hero-ic { background: var(--grad); color: #05060b; box-shadow: 0 6px 22px rgba(34,211,238,.25); }
.neon .pun-hero h1 { font-family: var(--head-font, inherit); }
.neon .pun-side, .neon .pun-main { background: var(--tile, var(--card)); }
.neon .pun-side-head i, .neon .pun-main-t i, .neon .pun-type.active i, .neon .pun-note i { color: var(--cyan); }
.neon .pun-type:hover { background: rgba(34,211,238,.06); }
.neon .pun-type.active { background: linear-gradient(90deg, rgba(34,211,238,.1), rgba(168,85,247,.12)); border-color: rgba(168,85,247,.35); }
.neon .pun-type.active b, .neon .pun-pill-all.active { background: var(--grad); color: #05060b; border-color: transparent; }
.neon .pun-table tbody tr:hover td { background: rgba(34,211,238,.03); }
.neon .pun-ava-none { background: rgba(34,211,238,.12); color: var(--cyan); }
.neon .pun-copy:hover, .neon .pun-copy.copied { color: var(--cyan); background: rgba(34,211,238,.1); }

@media (max-width: 960px) {
  .pun { grid-template-columns: 1fr; }
  .pun-side { position: static; }
  .pun-side-head { display: none; }
  .pun-types { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .pun-types::-webkit-scrollbar { display: none; }
  .pun-type { flex: none; }
  .pun-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .pun-hero h1 { font-size: 21px; }
  .pun-hero-ic { width: 44px; height: 44px; font-size: 18px; border-radius: 13px; }
  .pun-sec { padding: 12px; }
  .pun-stats { grid-template-columns: repeat(2, 1fr); }
  .pun-stats b { font-size: 17px; }
  .pun-main-head { padding: 13px 14px; }
  .pun-table thead { display: none; }
  .pun-table, .pun-table tbody, .pun-table tr, .pun-table td { display: block; width: 100%; }
  .pun-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .pun-table tbody tr:last-child { border-bottom: 0; }
  .pun-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
  .pun-table td::before { content: attr(data-label); flex: none; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted2); text-align: left; }
  .pun-table td[data-label="Игрок"] { padding-bottom: 8px; text-align: left; }
  .pun-table td[data-label="Игрок"]::before { display: none; }
  .pun-table td:empty::after, .pun-table td.pun-td-empty::after { content: "—"; }
  .pun-player { min-width: 0; width: 100%; }
  .pun-nick { max-width: 100%; }
  .pun-reason { max-width: 62vw; white-space: normal; }
  .pun-given, .pun-until { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  .pun-table td:last-child { padding-top: 6px; }
  .pun-table tbody tr:hover td { background: none; }
}

/* ================= АДМИНКА: БАНЫ, МУТЫ, КТ-БЛОКИ ================= */
.pa-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.pa-stat { --c: #60a5fa; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); color: var(--muted) !important; transition: .15s; }
.pa-stat:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); transform: translateY(-1px); }
.pa-stat.active { border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset, 0 6px 20px color-mix(in srgb, var(--c) 18%, transparent); }
.pa-stat-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: 17px; }
.pa-stat-t { min-width: 0; font-size: 12.5px; line-height: 1.3; }
.pa-stat-t b { display: block; font-size: 22px; font-weight: 800; color: var(--text); }
.pa-c-blue { --c: #60a5fa; } .pa-c-red { --c: #f87171; } .pa-c-purple { --c: #c084fc; } .pa-c-gray { --c: #9ca3af; } .pa-c-amber { --c: #fb923c; } .pa-c-green { --c: #4ade80; }
.pa-sub { display: flex; gap: 6px; margin: -4px 0 14px; padding: 4px; border-radius: 12px; background: var(--md-panel); border: 1px solid var(--line); width: max-content; max-width: 100%; }
.pa-sub a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 9px; color: var(--muted) !important; font-size: 13.5px; font-weight: 600; }
.pa-sub a.active { background: var(--accent); color: #fff !important; }
.pa-sub-n, .tabs .pa-sub-n { font-size: 12px; font-weight: 500; opacity: .75; }
.pa { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.pa-main { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pa-main .pager { padding: 12px 16px; margin: 0; border-top: 1px solid var(--line); }
.pa-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; background: var(--md-head); border-bottom: 1px solid var(--line); }
.pa-bar .pun-input { flex: 1 1 220px; }
.pa-sel { width: auto; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; }
.pa-found { margin-left: auto; font-size: 13px; color: var(--muted); }
.pa-found b { color: var(--text); }
.pa-term { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pa-term .pun-never { display: none; }
.pa-table .pun-reason { max-width: 200px; }
.pa-srv { margin-top: 2px; font-size: 11.5px; color: var(--muted2); }
.pa-srv i { font-size: 10px; }
.pa-table td.pa-acts { white-space: nowrap; text-align: right; }
.pa-acts form { display: inline-block; margin: 0; }
.pa-ib { width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; border-radius: 9px; border: 1px solid var(--line2); background: transparent; color: var(--muted); cursor: pointer; transition: .15s; }
.pa-ib-ok:hover { color: #4ade80; border-color: rgba(74,222,128,.5); background: rgba(74,222,128,.08); }
.pa-ib-del:hover { color: var(--md-red); border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.08); }
.pa-table tr.is-expired td.pa-acts { opacity: 1; }
.pa-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: var(--md-sticky); }
.pa-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.pa-card h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 16px; }
.pa-card h3 i { color: var(--accent2); }
.pa-form { display: flex; flex-direction: column; gap: 11px; }
.pa-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.pa-form .hint { font-size: 11.5px; color: var(--muted2); }
.pa-form textarea { font-size: 13px; resize: vertical; }
.pa-lbl { margin-bottom: -4px; font-size: 13px; color: var(--muted); }
.pa-hint { margin: 12px 0 0; }
.pa-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pa-type input { position: absolute; opacity: 0; pointer-events: none; }
.pa-type span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--line2); text-align: center; cursor: pointer; transition: .15s; }
.pa-type i { font-size: 17px; color: var(--muted2); }
.pa-type b { font-size: 13.5px; color: var(--text); }
.pa-type small { font-size: 10.5px; color: var(--muted2); line-height: 1.2; }
.pa-type input:checked + span { border-color: var(--accent); background: rgba(155,109,255,.14); }
.pa-type input:checked + span i { color: var(--accent2); }
.pa-type input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pa-presets { padding: 0; }
.pa-presets > summary { list-style: none; display: flex; align-items: center; gap: 9px; padding: 14px 18px; font-weight: 700; cursor: pointer; color: var(--text); background: none; border: 0; margin: 0; }
.pa-presets > summary::-webkit-details-marker { display: none; }
.pa-presets > summary i:first-child { color: var(--accent2); }
.pa-arrow { margin-left: auto; font-size: 11px; color: var(--muted2); transition: transform .2s; }
.pa-presets[open] .pa-arrow { transform: rotate(180deg); }
.pa-presets .pa-form { padding: 0 18px 18px; }

/* выбор пресета */
.pp { display: flex; flex-direction: column; gap: 8px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip { position: relative; display: inline-flex !important; }
.pp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pp-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; border: 1px solid var(--line2); background: var(--md-panel); color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .12s; white-space: nowrap; }
.pp-chip span:hover { color: var(--text); border-color: var(--muted2); }
.pp-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.pp-perm input:checked + span { background: #9333ea; border-color: #9333ea; }
.pp-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pp-own span { border-style: dashed; }
.pp-custom { display: flex; align-items: center; gap: 8px; }
.pp-custom input { flex: 1; min-width: 0; }
.pp-human { flex: none; font-size: 12px; color: var(--muted2); }
.md-js .pp-custom { display: none; }
.md-js .pp.own .pp-custom { display: flex; }

.neon .pa-stat, .neon .pa-main, .neon .pa-card { background: var(--tile, var(--card)); }
.neon .pa-card h3 i, .neon .pa-presets > summary i:first-child { color: var(--cyan); }
.neon .pa-sub a.active, .neon .pp-chip input:checked + span { background: var(--grad); border-color: transparent; color: #05060b; }
.neon .pp-perm input:checked + span { background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; }
.neon .pa-type input:checked + span { border-color: rgba(34,211,238,.55); background: linear-gradient(135deg, rgba(34,211,238,.1), rgba(168,85,247,.14)); }
.neon .pa-type input:checked + span i { color: var(--cyan); }

@media (max-width: 1180px) {
  .pa { grid-template-columns: 1fr; }
  .pa-side { position: static; order: -1; }
}
@media (max-width: 860px) {
  .pa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pa-stat { padding: 11px 12px; gap: 10px; }
  .pa-stat-ic { width: 36px; height: 36px; font-size: 15px; }
  .pa-stat-t b { font-size: 19px; }
}
@media (max-width: 720px) {
  .pa-table td.pa-acts { justify-content: flex-end; gap: 6px; padding-top: 8px; }
  .pa-table td.pa-acts::before { margin-right: auto; }
  .pa-found { margin-left: 0; width: 100%; }
  .pa-term { align-items: flex-end; }
  .pa-card { padding: 15px; }
}

/* ================= МЕНЮ АДМИНКИ ================= */
.an { margin: 0 0 20px; }
.an-groups { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.an-g { --g: #9b6dff; position: relative; }
.an-g-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 11px; color: var(--muted) !important; font-size: 14px; font-weight: 600; white-space: nowrap; transition: .15s; }
.an-g-btn > i:first-child { color: var(--g); font-size: 14px; }
.an-g-btn:hover { background: color-mix(in srgb, var(--g) 10%, transparent); color: var(--text) !important; }
.an-g.active .an-g-btn { background: color-mix(in srgb, var(--g) 16%, transparent); color: var(--text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 45%, transparent); }
.an-arr { font-size: 9px; opacity: .55; }
.an-n { min-width: 19px; padding: 1px 6px; border-radius: 99px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; text-align: center; line-height: 1.5; }
.an-dd { display: none; position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 220px; padding: 6px; border-radius: 13px; background: var(--card2, var(--card)); border: 1px solid var(--line2); box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.an-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.an-dd a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--muted) !important; font-size: 13.5px; }
.an-dd a i { width: 16px; text-align: center; color: var(--g); }
.an-dd a span { flex: 1; }
.an-dd a:hover, .an-dd a.active { background: color-mix(in srgb, var(--g) 13%, transparent); color: var(--text) !important; }
@media (hover: hover) and (min-width: 861px) {
  .an-g:hover .an-dd, .an-g:focus-within .an-dd { display: block; }
}
.an-items { --g: #9b6dff; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.an-items a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--md-panel); color: var(--muted) !important; font-size: 13.5px; white-space: nowrap; }
.an-items a i { color: var(--g); font-size: 12.5px; }
.an-items a:hover { color: var(--text) !important; border-color: color-mix(in srgb, var(--g) 45%, transparent); }
.an-items a.active { color: var(--text) !important; border-color: var(--g); background: color-mix(in srgb, var(--g) 14%, transparent); font-weight: 600; }
.apt { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.apt-tab { --tab-accent: #9b6dff; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--muted) !important; transition: .15s; min-width: 0; }
.apt-tab:hover { border-color: color-mix(in srgb, var(--tab-accent) 45%, transparent); transform: translateY(-1px); }
.apt-tab.active { border-color: var(--tab-accent); background: color-mix(in srgb, var(--tab-accent) 11%, var(--card)); box-shadow: 0 6px 22px color-mix(in srgb, var(--tab-accent) 18%, transparent); }
.apt-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--tab-accent) 16%, transparent); color: var(--tab-accent); font-size: 16px; }
.apt-tab.active .apt-ic { background: var(--tab-accent); color: #1b1530; }
.apt-t { min-width: 0; line-height: 1.25; }
.apt-t b { display: block; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apt-t small { display: block; font-size: 11.5px; color: var(--muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.neon .an-groups { background: rgba(255,255,255,.025); }
.neon .apt-tab { background: var(--tile, var(--card)); }
.neon .apt-tab.active { background: color-mix(in srgb, var(--tab-accent) 10%, transparent); }
@media (max-width: 1180px) { .apt { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .an-groups, .an-items, .apt { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .an-groups::-webkit-scrollbar, .an-items::-webkit-scrollbar, .apt::-webkit-scrollbar { display: none; }
  .an-g, .an-items a, .apt-tab { flex: none; }
  .an-g-btn { padding: 8px 12px; font-size: 13.5px; }
  .an-arr { display: none; }
  .apt-tab { padding: 8px 11px; }
  .apt-ic { width: 32px; height: 32px; font-size: 14px; }
  .apt-t small { display: none; }
}

/* ================= ЖУРНАЛ ДЕЙСТВИЙ ================= */
.lg-mods { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.lg-mod { --m: #9b6dff; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--muted) !important; font-size: 13px; white-space: nowrap; }
.lg-mod i { color: var(--m); font-size: 12px; }
.lg-mod b { padding: 0 6px; border-radius: 99px; background: rgba(255,255,255,.06); font-size: 11px; font-weight: 700; }
.lg-mod:hover { color: var(--text) !important; border-color: color-mix(in srgb, var(--m) 45%, transparent); }
.lg-mod.active { color: var(--text) !important; border-color: var(--m); background: color-mix(in srgb, var(--m) 14%, var(--card)); }
.lg-badge { --m: #9b6dff; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; background: color-mix(in srgb, var(--m) 14%, transparent); color: var(--m) !important; font-size: 12px; font-weight: 700; white-space: nowrap; }
.lg-badge i { font-size: 11px; }
.lg-who { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.lg-ip { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--muted2); }
.lg-act { font-weight: 600; color: var(--text); }
.lg-target { color: var(--text); }
.lg-det { display: block; max-width: 360px; font-size: 12.5px; color: var(--muted); }
.neon .lg-mod { background: var(--tile, var(--card)); }
@media (max-width: 860px) {
  .lg-mods { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lg-mods::-webkit-scrollbar { display: none; }
}
@media (max-width: 720px) {
  .lg-who { align-items: flex-end; }
  .lg-det { max-width: 62vw; }
}

/* ================= ОБЗОР: «ТРЕБУЕТ ВНИМАНИЯ» ================= */
.att { margin-bottom: 18px; padding: 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.att-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 15px; font-weight: 800; }
.att-head > i { color: var(--amber); }
.att-ok { font-size: 12.5px; font-weight: 600; color: var(--green); }
.att-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.att-card { --c: #9b6dff; position: relative; display: flex; align-items: center; gap: 11px; padding: 13px; border-radius: 13px; border: 1px solid var(--line); background: var(--md-panel); color: var(--muted) !important; transition: .15s; min-width: 0; }
.att-card:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); transform: translateY(-1px); }
.att-card.hot { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
.att-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: 16px; }
.att-t { min-width: 0; font-size: 12.5px; line-height: 1.3; }
.att-t b { display: block; font-size: 22px; font-weight: 800; color: var(--text); }
.att-card:not(.hot) .att-t b { color: var(--muted2); }
.att-t small { display: block; font-size: 11px; color: var(--muted2); }
.att-go { margin-left: auto; font-size: 11px; color: var(--muted2); }
.neon .att { background: var(--tile, var(--card)); }
@media (max-width: 1180px) { .att-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .att-grid { grid-template-columns: 1fr 1fr; } .att-go { display: none; } .att { padding: 12px; } }
@media (max-width: 400px) { .att-card { padding: 10px; gap: 8px; } .att-ic { width: 34px; height: 34px; font-size: 14px; } .att-t b { font-size: 19px; } }

/* ================= СОСТАВ ================= */
.st-rank { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: var(--rb); color: var(--rf); font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--rf) 25%, transparent); }
.st-rank i { font-size: 10.5px; }
.st-ranks-tile { flex-wrap: wrap; gap: 6px; }
.st-rank-n { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; background: var(--rb); color: var(--rf); font-size: 13px; font-weight: 800; }
.st-rank-n i { font-size: 11px; }
.st-stats { grid-template-columns: 1fr 1fr 2fr; }
.st-note { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted2); }
.st-game { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 230px; }
.st-game .pun-sid { width: 100%; }
.st-nick { padding: 1px 7px; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.st-tg { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; }
.st-tg i { color: #29a9eb; }
.st-srv { padding: 2px 8px; border-radius: 6px; background: rgba(155,109,255,.12); color: var(--accent2); font-size: 12px; font-weight: 700; }
.st-points { display: inline-flex; gap: 4px; margin: 0; }
.st-points button, .st-points-form span { min-width: 34px; padding: 4px 7px; border-radius: 8px; border: 1px solid var(--line2); background: transparent; color: var(--muted2); font-size: 12px; font-weight: 800; cursor: pointer; text-align: center; }
.st-points-form label { display: inline-flex; }
.st-points-form input { position: absolute; opacity: 0; pointer-events: none; }
.st-points .st-p0.active, .st-points-form input:checked + .st-p0 { background: #2a2a2a; color: #d4d4d4; border-color: #3f3f46; }
.st-points .st-p1.active, .st-points-form input:checked + .st-p1 { background: #1a4d2e; color: #4ade80; border-color: #22c55e; }
.st-points .st-p2.active, .st-points-form input:checked + .st-p2 { background: #1e3a8a; color: #60a5fa; border-color: #3b82f6; }
.st-points .st-p3.active, .st-points-form input:checked + .st-p3 { background: #7e22ce; color: #e879f9; border-color: #a855f7; }
.st-points button:not(.active):hover { color: var(--text); border-color: var(--muted2); }
.st-warns { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 7px; border-radius: 8px; font-size: 12.5px; font-weight: 800; }
.st-w0 { background: rgba(74,222,128,.14); color: #4ade80; }
.st-w1 { background: rgba(250,204,21,.14); color: #facc15; }
.st-w2 { background: rgba(251,146,60,.16); color: #fb923c; }
.st-w3 { background: rgba(248,113,113,.18); color: #f87171; }
.st-table .pun-player { min-width: 150px; }
@media (max-width: 860px) { .st-stats { grid-template-columns: 1fr 1fr; } .st-ranks-tile { grid-column: 1 / -1; } }
@media (max-width: 720px) { .st-game { justify-content: flex-end; max-width: 62vw; } .st-game .pun-sid { justify-content: flex-end; } }

/* ================= ОНЛАЙН СОСТАВА ================= */
.ct-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; padding: 10px 12px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.ct-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip-a { padding: 6px 12px; border-radius: 9px; border: 1px solid var(--line2); background: var(--md-panel); color: var(--muted) !important; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pp-chip-a:hover { color: var(--text) !important; border-color: var(--muted2); }
.pp-chip-a.active { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.ct-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ct-range label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ct-range input { width: auto; padding: 6px 9px; border-radius: 9px; font-size: 13px; }
.ct-main { min-width: 0; }
.ct-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ct-period { font-size: 16px; font-weight: 800; }
.ct-period i { color: var(--accent2); margin-right: 3px; }
.ct-counters { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-cnt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.ct-cnt b { color: var(--text); }
.ct-cnt-on i { color: #4ade80; } .ct-cnt-off i { color: var(--md-gray); }
.ct-tabs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ct-tabs-row .pa-sub { margin: 0; }
.ct-search { flex: 0 1 300px; }
.ct-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.ct-card { padding: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); animation: ct-up .4s ease both; animation-delay: var(--d, 0ms); }
.ct-card.idle { opacity: .7; }
@keyframes ct-up { from { opacity: 0; transform: translateY(10px); } }
.ct-card-top { display: flex; align-items: center; gap: 10px; }
.ct-place { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.06); color: var(--muted); font-size: 12px; font-weight: 800; }
.ct-ava { position: relative; flex: none; width: 42px; height: 42px; }
.ct-ava .pun-ava-i, .ct-ava img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.ct-state { position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: #16a34a; color: #fff; font-size: 9px; border: 2px solid var(--card); }
.ct-card.idle .ct-state { background: #4b5563; }
.ct-who { min-width: 0; }
.ct-login { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 3px; }
.ct-sub .st-rank { padding: 2px 8px; font-size: 11px; }
.ct-ids { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 10px 0; min-height: 20px; }
.ct-warn { font-size: 12px; color: var(--md-amber); }
.ct-time { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ct-time > div { padding: 9px 10px; border-radius: 11px; background: var(--md-panel); border: 1px solid var(--line); }
.ct-time span { display: block; font-size: 11px; color: var(--muted2); }
.ct-time b { display: block; margin-top: 2px; font-size: 17px; font-weight: 800; }
.ct-low { color: var(--md-red); } .ct-ok { color: #4ade80; }
.ct-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.ct-idle { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: rgba(156,163,175,.13); color: var(--md-gray); font-weight: 600; }
.ct-kd.good { color: #4ade80; } .ct-kd.ok { color: #facc15; } .ct-kd.bad { color: var(--md-red); }
.ct-num { display: inline-grid; place-items: center; min-width: 26px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.05); font-weight: 800; font-size: 12px; color: var(--muted); }
.ct-num.top1 { background: rgba(250,204,21,.18); color: #facc15; } .ct-num.top2 { background: rgba(203,213,225,.16); color: #cbd5e1; } .ct-num.top3 { background: rgba(251,146,60,.18); color: #fb923c; }
.ct-table th[data-sort] { cursor: pointer; user-select: none; }
.ct-table th[data-sort]::after { content: "\2195"; margin-left: 4px; opacity: .35; }
.ct-table th.sorted.asc::after { content: "\2191"; opacity: 1; } .ct-table th.sorted.desc::after { content: "\2193"; opacity: 1; }
.ct-table tfoot td { padding: 11px 12px; border-top: 1px solid var(--line); font-weight: 700; color: var(--muted); }
.ct-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ct-cal-head .disabled { opacity: .3; pointer-events: none; }
.ct-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ct-wd { padding: 3px 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted2); }
.ct-wd.we { color: #f87171; }
.ct-day { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 9px; font-size: 13px; color: var(--muted) !important; border: 1px solid transparent; }
.ct-day:hover { border-color: var(--line2); color: var(--text) !important; }
.ct-day.we { color: #fca5a5 !important; background: rgba(248,113,113,.05); }
.ct-day.has { color: var(--text) !important; font-weight: 700; }
.ct-day i { position: absolute; bottom: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #4ade80; }
.ct-day.in { background: rgba(155,109,255,.16); border-radius: 0; }
.ct-day.start { border-radius: 9px 0 0 9px; background: var(--accent); color: #fff !important; }
.ct-day.end { border-radius: 0 9px 9px 0; background: var(--accent); color: #fff !important; }
.ct-day.start.end { border-radius: 9px; }
.ct-day.today { box-shadow: inset 0 0 0 1.5px var(--accent2); }
.ct-day.future { opacity: .3; }
.ct-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; font-size: 11.5px; color: var(--muted2); }
.ct-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ct-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }
.ct-lg-dot { background: #4ade80; border-radius: 50% !important; } .ct-lg-range { background: rgba(155,109,255,.4); } .ct-lg-we { background: rgba(248,113,113,.3); }
.neon .ct-bar, .neon .ct-card { background: var(--tile, var(--card)); }
.neon .pp-chip-a.active { background: var(--grad); border-color: transparent; color: #05060b !important; }
.neon .ct-day.start, .neon .ct-day.end { background: var(--grad); color: #05060b !important; }
.neon .ct-day.in:not(.start):not(.end) { background: rgba(34,211,238,.12); }
.neon .ct-period i { color: var(--cyan); }
@media (max-width: 860px) {
  .ct-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .ct-presets::-webkit-scrollbar { display: none; }
  .ct-search { flex: 1 1 100%; }
  .ct-cards { grid-template-columns: 1fr; }
  .ct .pa-side { order: 0; }
}
[data-st-row][hidden], [data-ct-row][hidden] { display: none !important; }
.st-pos { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.st-ranks-l { width: 100%; font-size: 12.5px; color: var(--muted); }
.pa-form textarea.st-nicks-in { min-height: 60px; height: 60px; }
.st-table td.pa-acts { width: 1%; }
@media (max-width: 720px) { .st-pos { justify-content: flex-end; } }

/* ================= ВАКАНСИИ ================= */
.vac-hero { position: relative; overflow: hidden; margin-bottom: 22px; padding: 38px 34px; border-radius: calc(var(--radius) + 4px); background: var(--card); border: 1px solid var(--line); text-align: center; }
.vac-hero::before, .vac-hero::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(70px); opacity: .32; pointer-events: none; }
.vac-hero::before { left: -120px; top: -220px; background: #00e5a0; }
.vac-hero::after { right: -140px; bottom: -260px; background: #4a9eff; }
.vac-hero > * { position: relative; z-index: 1; }
.vac-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 99px; background: rgba(0,229,160,.12); border: 1px solid rgba(0,229,160,.3); color: #00e5a0; font-size: 12.5px; font-weight: 700; letter-spacing: .4px; }
.vac-hero h1 { margin: 14px 0 8px; font-size: 40px; line-height: 1.1; }
.vac-hero h1 span { background: linear-gradient(90deg, #00e5a0, #4a9eff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vac-hero p { margin: 0 auto 18px; max-width: 520px; color: var(--muted); font-size: 15.5px; }
.vac-hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vac-hero-stat { margin-top: 16px; font-size: 13px; color: var(--muted2); }
.vac-hero-stat b { color: #00e5a0; font-size: 15px; }
.vac-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.vac-card { position: relative; padding: 22px 20px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; }
.vac-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #00e5a0, #4a9eff); }
.vac-card:hover { transform: translateY(-3px); border-color: rgba(74,158,255,.4); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.vac-card h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 19px; }
.vac-card h3 i { color: #00e5a0; font-size: 16px; }
.vac-req b { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted2); }
.vac-req-list { margin: 0; padding: 0; list-style: none; }
.vac-req-list li { position: relative; padding: 3px 0 3px 16px; color: var(--text); font-size: 14px; }
.vac-req-list li::before { content: "›"; position: absolute; left: 2px; top: 1px; color: #00e5a0; font-weight: 800; }
.vac-apps { font-size: 13px; color: var(--muted); }
.vac-apps b { color: var(--text); }
.vac-done { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px; background: rgba(0,229,160,.12); color: #00e5a0; font-size: 13px; font-weight: 700; }
.vac-none { text-align: center; padding: 40px; color: var(--muted); }
.vac-none i { font-size: 30px; color: var(--muted2); }
.vac-sec { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 15px; }
.vac-sec i { color: #00e5a0; }
.va-list { display: flex; flex-direction: column; gap: 10px; }
.va-app { border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line2); overflow: hidden; }
.va-app.va-pending { border-left-color: #facc15; } .va-app.va-approved { border-left-color: #4ade80; } .va-app.va-rejected { border-left-color: #f87171; }
.va-app > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; background: none; margin: 0; border: 0; }
.va-app > summary::-webkit-details-marker { display: none; }
.va-ava .pun-ava-i, .va-ava img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.va-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 140px; }
.va-who small { color: var(--muted2); font-size: 12px; }
.va-vac { flex: 1 1 160px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-vac i { color: #00e5a0; }
.va-date { font-size: 12px; color: var(--muted2); white-space: nowrap; }
.va-arr { font-size: 11px; color: var(--muted2); transition: transform .2s; }
.va-app[open] .va-arr { transform: rotate(180deg); }
.va-body { position: relative; padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.va-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.va-grid > div, .va-text { padding: 9px 11px; border-radius: 10px; background: var(--md-panel); border: 1px solid var(--line); min-width: 0; }
.va-grid span:first-child, .va-text > span { display: block; margin-bottom: 2px; font-size: 11px; color: var(--muted2); text-transform: uppercase; letter-spacing: .5px; }
.va-text { margin-bottom: 8px; }
.va-text p { margin: 0; white-space: normal; overflow-wrap: anywhere; }
.va-by { margin: 6px 0 10px; font-size: 13px; color: var(--muted); }
.va-decide textarea { width: 100%; margin-bottom: 8px; font-size: 13.5px; }
.va-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.va-ok { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
.va-del { position: absolute; right: 16px; bottom: 16px; margin: 0; }
.va-h { font-size: 15px; } .va-h i { color: #00e5a0; }
.va-open { background: rgba(74,222,128,.14); color: #4ade80; }
.va-pa { grid-template-columns: minmax(0, 1fr) 420px; }
.va-side { position: static; }
.va-builder { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--md-panel); }
.va-builder-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.va-builder-h i { color: var(--accent2); }
.va-builder .vf-row { grid-template-columns: 22px minmax(0, 1fr) 150px; align-items: start; background: var(--card); }
.va-builder .vf-row > textarea, .va-builder .vf-row > input[name="f_hint[]"] { grid-column: 2 / -1; }
.va-builder .vf-row > .check { grid-column: 2; font-size: 12.5px; }
.va-builder .vf-row > [data-vf-del] { grid-column: 3; justify-self: end; }
.vf-grip { grid-row: 1 / span 4; align-self: stretch; display: grid; place-items: center; border-radius: 7px; color: var(--muted2); cursor: grab; }
.vf-grip:hover { background: rgba(255,255,255,.05); color: var(--text); }
.vf-row.dragging { opacity: .45; border-color: var(--accent); }
.va-builder-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.va-preview { margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--card); border: 1px dashed var(--accent); display: flex; flex-direction: column; gap: 10px; }
.va-preview label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.va-preview .vac-info { font-size: 13px; }
.neon .vac-hero, .neon .vac-card, .neon .va-app { background: var(--tile, var(--card)); }
.neon .vac-hero h1 { font-family: var(--head-font, inherit); }
@media (max-width: 1180px) { .va-pa { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .vac-hero { padding: 26px 16px; }
  .vac-hero h1 { font-size: 29px; }
  .va-app > summary { flex-wrap: wrap; gap: 8px 10px; padding: 11px 12px; }
  .va-vac { order: 5; flex-basis: 100%; }
  .va-date { display: none; }
  .va-grid { grid-template-columns: 1fr 1fr; }
  .va-body { padding: 4px 12px 14px; }
  .va-del { position: static; margin-top: 8px; }
  .va-builder .vf-row { grid-template-columns: 22px minmax(0, 1fr); }
  .va-builder .vf-row > select, .va-builder .vf-row > [data-vf-del] { grid-column: 2; }
}
.pa-form label.check { flex-direction: row; align-items: center; gap: 7px; }
.va-builder .vf-row textarea { min-height: 0; height: auto; }
.va-builder .vf-row > select { padding-right: 26px; }
.md-js .va-builder .vf-row:not(.is-select) > textarea { display: none; }
.va-builder .vf-row.is-info .check { visibility: hidden; }

/* ================= РОЛИ ================= */
.rl-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rl-perms { display: flex; flex-wrap: wrap; gap: 4px; max-width: 360px; }
.rl-perm { padding: 2px 8px; border-radius: 7px; background: rgba(155,109,255,.12); color: var(--accent2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.rl-cnt { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line2); font-weight: 700; font-size: 13px; }
.rl-assign-f { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-assign-f .pun-input { flex: 1 1 220px; }
.rl-assign-f select { flex: 0 1 200px; width: auto; }
.rl-holders h3 .btn { margin-left: auto; }
.rl-group + .rl-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.rl-group-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rl-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.rl-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--md-panel); border: 1px solid var(--line); min-width: 0; }
.rl-person .pun-ava-i, .rl-person img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
.rl-pw { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rl-pw small { font-size: 11px; color: var(--muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-person form { margin: 0; }
.rl-checks { display: flex; flex-direction: column; gap: 5px; }
.rl-checks .check { font-size: 13px; color: var(--text); }

/* ================= СОБЫТИЯ ================= */
.ev { padding: 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.ev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ev-head h1 { margin: 0; font-size: 22px; }
.ev-head h1 i { color: var(--amber); }
.ev-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ev-list { display: flex; flex-direction: column; }
.ev-item { --m: #9b6dff; display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.ev-item:last-child { border-bottom: 0; }
.ev-ava { position: relative; flex: none; width: 40px; height: 40px; }
.ev-ava .pun-ava-i, .ev-ava img, .ev-ava .pun-ava-none { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.ev-kind { position: absolute; right: -4px; bottom: -4px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: var(--m); color: #1b1530; font-size: 9px; border: 2px solid var(--card); }
.ev-body { min-width: 0; flex: 1; }
.ev-text { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.ev-text b { color: var(--text); }
.ev-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--muted2); }
.ev-chip { padding: 0 7px; border-radius: 6px; background: color-mix(in srgb, var(--m) 14%, transparent); color: var(--m); font-weight: 700; font-size: 11px; }
.ev .pager { margin-top: 14px; }
.ev, .ev-kinds { min-width: 0; max-width: 100%; }
.content:has(> .ev) { min-width: 0; }
.neon .ev { background: var(--tile, var(--card)); }
.neon .ev-kind { border-color: #1b1530; }
@media (max-width: 720px) {
  .ev { padding: 14px 12px; }
  .ev-head h1 { font-size: 19px; }
  .ev-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ev-kinds::-webkit-scrollbar { display: none; }
}
.person .st-rank { margin: 3px 0 1px; padding: 2px 8px; font-size: 10.5px; }

/* ============ СТАТИСТИКА ИГРОКА ============ */
.stats-hero .sh-main { flex: 1; min-width: 0; }
.sp-ids { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sp-id { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: 10px; background: rgba(155,109,255,.08); border: 1px solid var(--border); max-width: 100%; }
.sp-id small { color: var(--muted); font-size: 11px; }
.sp-id code { font-size: 12.5px; overflow-wrap: anywhere; }
.sp-id .pun-copy { flex: none; }
.sp-site { margin-top: 8px; font-size: 13px; color: var(--muted); }
.sp-hero-side { display: flex; gap: 10px; flex: none; }
.sp-time b { font-size: 20px; }
.sp-group { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font-size: 15px; }
.sp-group i { color: var(--accent2); }
.sp-grid { margin-top: 10px; }
.sp-table { margin-top: 10px; padding: 0; overflow-x: auto; }
.sp-table table { width: 100%; border-collapse: collapse; }
.sp-table th, .sp-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sp-table th { font-size: 12px; color: var(--muted); font-weight: 600; }
.sp-table tr:last-child td { border-bottom: 0; }
.neon .sp-id { background: rgba(255,255,255,.04); }
.neon .sp-table th { text-transform: uppercase; letter-spacing: .5px; font-size: 11px; }
@media (max-width: 720px) {
  .sp-hero-side { width: 100%; }
  .sp-hero-side .sh-place { flex: 1; }
  .sp-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sp-grid .stat-tile { padding: 12px; }
  .sp-grid .stat-tile b { font-size: 18px; }
  .sp-table th, .sp-table td { padding: 8px 10px; font-size: 12.5px; }
}

/* Резервные копии (/admin/backups) */
.bk-main { display: grid; gap: 16px; min-width: 0; }
.bk-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.bk-state { display: flex; gap: 12px; align-items: center; min-width: 0; }
.bk-state > div { display: grid; gap: 3px; min-width: 0; }
.bk-state small { color: var(--muted); font-size: 12.5px; }
.bk-err { color: #fb7185 !important; }
.bk-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 13px; font-size: 19px; color: #94a3b8; background: rgba(148,163,184,.12); }
.bk-ic.on { color: #34d399; background: rgba(52,211,153,.14); }
.bk-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.bk-table td { vertical-align: middle; }
.bk-name { display: block; color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.bk-kind { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(148,163,184,.14); color: #cbd5e1; white-space: nowrap; }
.bk-auto { background: rgba(52,211,153,.14); color: #6ee7b7; }
.bk-manual { background: rgba(96,165,250,.15); color: #93c5fd; }
.bk-restore, .bk-import { background: rgba(251,191,36,.14); color: #fcd34d; }
.bk-row-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.bk-row-acts form { margin: 0; }
.bk-import { display: grid; gap: 12px; max-width: 560px; }
.bk-import label { display: grid; gap: 6px; }
.bk-import .check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.bk-help .steps { padding-left: 20px; display: grid; gap: 8px; font-size: 13px; line-height: 1.5; }
.bk-help code { font-size: 12px; }
/* Статистика доходов */
.rv { display: grid; gap: 16px; }
.rv-periods { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rv-kpi { display: grid; gap: 4px; align-content: start; padding: 14px 16px; }
.rv-kpi small { color: var(--muted); font-size: 12.5px; }
.rv-kpi b { font-size: 20px; color: var(--text); font-variant-numeric: tabular-nums; }
.rv-kpi-main { grid-column: span 2; }
.rv-kpi-main b { font-size: 28px; }
.rv-delta { font-size: 12.5px; color: var(--muted); }
.rv-delta.up { color: #34d399; }
.rv-delta.down { color: #fb7185; }
.rv .card { margin: 0; }
.rv-chart { position: relative; display: grid; grid-template-columns: 46px 1fr; }
.rv-chart svg { display: block; width: 100%; overflow: visible; }
.rv-y { position: relative; }
.rv-y span { position: absolute; right: 10px; transform: translateY(-50%); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-grid { stroke: var(--line); stroke-width: 1; opacity: .6; }
.rv-base { stroke: var(--line2, var(--line)); stroke-width: 1; }
.rv-ax { fill: var(--muted); font-size: 11px; }
.rv-hit { fill: transparent; }
.rv-mark { fill: var(--accent); transition: filter .12s; }
.rv-bar.on .rv-mark { filter: brightness(1.2); }
.rv-bar.on .rv-hit { fill: rgba(148,163,184,.08); }
.rv-tip { position: absolute; pointer-events: none; display: grid; gap: 2px; padding: 7px 10px; border-radius: 9px; background: var(--card2, #111827); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.3); white-space: nowrap; z-index: 2; }
.rv-tip small { color: var(--muted); font-size: 11.5px; }
.rv-tip b { color: var(--text); font-size: 14px; }
.rv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.rv-cats { display: grid; gap: 12px; }
.rv-cat-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 5px; }
.rv-track { height: 8px; border-radius: 99px; background: rgba(148,163,184,.12); overflow: hidden; }
.rv-track i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.rv-table td:nth-child(n+2), .rv-table th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.rv-top { display: grid; gap: 4px; }
.rv-payer { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: var(--text); text-decoration: none; }
.rv-payer:hover { background: rgba(148,163,184,.08); }
.rv-place { width: 20px; text-align: center; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.rv-ava { width: 30px; height: 30px; border-radius: 50%; flex: none; object-fit: cover; }
.rv-payer-n { flex: 1; min-width: 0; display: grid; overflow: hidden; text-overflow: ellipsis; }
.rv-payer-n small { font-size: 11.5px; }
.rv-payer b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-note { font-size: 12.5px; margin: 0; }
@media (max-width: 560px) { .rv-kpi-main { grid-column: 1 / -1; } .rv-chart { grid-template-columns: 38px 1fr; } }
.gwa-main { display: grid; gap: 16px; min-width: 0; }
.gwa-live { background: rgba(250,204,21,.15); color: #fde047; }
.gwa-done { background: rgba(52,211,153,.14); color: #6ee7b7; }
.gwa-off { background: rgba(148,163,184,.14); color: #94a3b8; }
.bk-cmd { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.3); font-size: 12px; overflow-wrap: anywhere; user-select: all; }

/* support.css */
/* Заявки (живой чат и вложения), варны, змейка. Обе темы: база на токенах, неон — правила .neon … ниже. */

/* скрытые атрибутом hidden элементы не показываем, даже если у класса свой display */
.svc-page [hidden], .tk-page [hidden], .sn-page [hidden], .atk-grid [hidden] { display: none !important; }

/* ---------- общие кусочки ---------- */
.svc-ico {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px;
  background: rgba(155,109,255,.14); border: 1px solid var(--line); color: var(--accent2); font-size: 16px;
}
.svc-ico.lg { width: 52px; height: 52px; border-radius: 15px; font-size: 21px; }
.svc-ico.sm { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.svc-badge, .svc-new {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 7px;
  border-radius: 999px; background: #ec4899; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; font-style: normal; white-space: nowrap;
  box-shadow: 0 0 0 3px rgba(236,72,153,.18);
}
.svc-new { height: 22px; padding: 0 9px; }
.svc-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 34px 16px; }
.svc-empty > i { font-size: 34px; color: var(--accent); opacity: .75; margin-bottom: 4px; }
.svc-empty b { font-size: 16px; }
.svc-empty span { color: var(--muted); max-width: 440px; }
.svc-empty .btn { margin-top: 6px; }
.svc-empty-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.svc-empty-btns .btn { margin: 0; }

/* ---------- /services: меню, форма, мои заявки ---------- */
.svc-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.svc-hero h1 { margin: 0; }
.svc-hero p { margin: 3px 0 0; color: var(--muted); }
.svc-grid {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "menu main" "info main";
  gap: 16px; align-items: start;
}
.svc-grid > .card + .card { margin-top: 0; }
.svc-menu { grid-area: menu; padding: 10px; display: grid; gap: 3px; }
.svc-cap { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted2); padding: 4px 10px 6px; }
.svc-cap i { margin-right: 4px; }
.svc-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
  color: var(--text); border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.svc-link:hover { background: rgba(155,109,255,.08); color: var(--text); }
.svc-link.active { background: rgba(155,109,255,.16); border-color: var(--line2); }
.svc-link .svc-ico { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.svc-txt { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.svc-txt b { font-size: 14px; font-weight: 600; }
.svc-txt small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-link .svc-badge { margin-left: auto; }
.svc-sep { height: 1px; background: var(--line); margin: 6px 4px; }

.svc-card { grid-area: main; min-width: 0; }
.svc-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.svc-card-head h2 { margin: 0; font-size: 18px; }
.svc-card-head small { color: var(--muted); }
.svc-info { grid-area: info; padding: 16px 18px; }
.svc-info .svc-cap { padding: 0 0 8px; }
.svc-info-body { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.svc-info-body p { margin: 0 0 10px; }
.svc-info-body p:last-child { margin: 0; }
.svc-info-body b, .svc-info-body strong { color: var(--text); }
.svc-info-body ul { margin: 0 0 10px; padding-left: 18px; }
.svc-note { padding: 9px 12px; border-radius: 10px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25); color: #fcd34d; }

.svc-list { display: grid; gap: 8px; }
.svc-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--text); transition: border-color .15s, background .15s;
}
.svc-row:hover { border-color: var(--line2); background: rgba(155,109,255,.06); color: var(--text); }
.svc-row.has-new { border-color: rgba(236,72,153,.45); background: rgba(236,72,153,.06); box-shadow: inset 3px 0 0 #ec4899; }
.svc-row-main { display: grid; min-width: 0; flex: 1; line-height: 1.35; }
.svc-row-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-row-main small { color: var(--muted); font-size: 12px; }
.svc-row-side { display: flex; align-items: center; gap: 8px; flex: none; }

.svc-recent { margin-bottom: 18px; padding: 12px; border: 1px dashed var(--line2); border-radius: 12px; display: grid; gap: 4px; }
.svc-recent .svc-sec { margin: 0 0 4px; }
.svc-mini { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; color: var(--text); font-size: 13.5px; }
.svc-mini:hover { background: rgba(155,109,255,.08); color: var(--text); }
.svc-mini > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.svc-mini small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.svc-mini.has-new > span { color: #f9a8d4; }

.svc-form { gap: 14px; }
.svc-sec { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--accent2); margin-top: 4px; }
.svc-sec i { margin-right: 4px; }
.svc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.svc-fields > .full { grid-column: 1 / -1; }
.svc-fields label > span { font-size: 13.5px; }
.svc-fields textarea { min-height: 120px; }
.svc-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-radios > span { width: 100%; font-weight: 500; font-size: 13.5px; }
.form .svc-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line2); background: rgba(255,255,255,.03); font-size: 13.5px; font-weight: 500;
}
.form .svc-pill:has(input:checked) { background: rgba(155,109,255,.2); border-color: var(--accent); color: #fff; }
.svc-pill input { accent-color: var(--accent); margin: 0; }
.svc-submit { margin-top: 4px; padding-top: 13px; padding-bottom: 13px; }

/* ---------- вложения: зона выбора, превью, сетка миниатюр, просмотр ---------- */
.form .tf-drop, .tf-drop {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; cursor: pointer;
  border: 2px dashed var(--line2); background: rgba(155,109,255,.04); transition: border-color .15s, background .15s;
}
.tf-drop:hover, .tf-drop.is-over { border-color: var(--accent); background: rgba(155,109,255,.1); }
.tf-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tf-drop-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(155,109,255,.16); color: var(--accent2); font-size: 20px; }
.tf-drop-txt { display: grid; gap: 2px; min-width: 0; }
.tf-drop-txt b { font-weight: 600; font-size: 14px; }
.tf-drop-txt small { color: var(--muted); font-size: 12.5px; font-weight: 400; }

.tf-preview { display: none; }
.tf-preview.has { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-count { width: 100%; font-size: 12px; color: var(--muted); }
.tf-chip {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 5px; border-radius: 11px; max-width: 250px; min-width: 0;
  border: 1px solid var(--line2); background: var(--card2);
}
.tf-chip img, .tf-chip-ico { width: 36px; height: 36px; flex: none; border-radius: 8px; object-fit: cover; }
.tf-chip-ico { display: grid; place-items: center; background: rgba(155,109,255,.16); color: var(--accent2); }
.tf-chip-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tf-chip small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.tf-chip button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 7px; font-size: 13px; }
.tf-chip button:hover { color: #fff; background: rgba(239,68,68,.25); }

.tf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-top: 8px; max-width: 380px; }
.tf-item { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.tf-item img, .tf-item video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.tf-item:hover img, .tf-item:hover video { transform: scale(1.05); }
.tf-item.is-video > i {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; padding-left: 2px; pointer-events: none;
}

.hl-lightbox {
  position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 60px 16px;
  background: rgba(3,4,12,.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: hlFade .18s ease;
}
.hl-lightbox img, .hl-lightbox video { max-width: 100%; max-height: calc(100vh - 130px); border-radius: 12px; box-shadow: 0 30px 80px -20px #000; }
.hl-lb-x {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: #fff; font-size: 18px; cursor: pointer;
}
.hl-lb-x:hover { background: rgba(255,255,255,.18); }
.hl-lb-open { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.1); white-space: nowrap; }
.hl-lb-open:hover { color: #fff; background: rgba(255,255,255,.2); }
@keyframes hlFade { from { opacity: 0; } }

/* ---------- страница заявки: живой чат ---------- */
.tk-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.tk-title { flex: 1; min-width: 0; }
.tk-title h1 { margin: 0 0 3px; font-size: 20px; overflow-wrap: anywhere; }
.tk-sub { color: var(--muted); font-size: 13px; }
.tk-head-side { display: flex; align-items: center; gap: 10px; flex: none; }
.tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; align-items: start; }
.tk-grid > .card + .card { margin-top: 0; }

.tk-chat { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; min-width: 0; }
.tk-chat-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px 13px 18px; border-bottom: 1px solid var(--line); }
.tk-chat-head h3 { margin: 0; flex: 1; font-size: 16px; }
.tk-chat-head h3 i { color: var(--accent2); margin-right: 4px; }
.tk-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.tk-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green2); box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: tkPulse 2s infinite; }
@keyframes tkPulse { 70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.tk-mute { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); color: var(--accent2); cursor: pointer; font-size: 14px; }
.tk-mute:hover { background: rgba(155,109,255,.14); }
.tk-mute.is-off { color: var(--muted2); }

.tc-thread {
  display: flex; flex-direction: column; gap: 12px; padding: 18px; overflow-y: auto; overscroll-behavior: contain;
  height: clamp(360px, 62vh, 660px); background: rgba(5,6,20,.25);
}
.tc-msg { display: flex; align-items: flex-end; gap: 9px; max-width: 82%; }
.tc-msg.is-player { align-self: flex-start; }
.tc-msg.is-staff { align-self: flex-end; flex-direction: row-reverse; }
.tc-msg.tc-request { max-width: 94%; }
.tc-ava { flex: none; display: block; }
.tc-ava-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: grid; font-size: 14px; }
.tc-bubble {
  min-width: 0; padding: 9px 13px 10px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--card2); box-shadow: 0 6px 20px -14px rgba(0,0,0,.8);
}
.tc-msg.is-player .tc-bubble { border-bottom-left-radius: 5px; }
.tc-msg.is-staff .tc-bubble {
  border-bottom-right-radius: 5px; border-color: rgba(155,109,255,.4);
  background: linear-gradient(135deg, rgba(155,109,255,.3), rgba(109,63,204,.22));
}
.tc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font-size: 13px; margin-bottom: 3px; }
.tc-meta .ulink { font-weight: 700; }
.tc-meta time { color: var(--muted2); font-size: 11.5px; margin-left: auto; padding-left: 6px; }
.tc-msg.is-staff .tc-meta time { color: rgba(224,227,240,.55); }
.tc-meta .role-badge, .tc-role, .tc-tag { font-size: 11px; padding: 1px 8px; }
.tc-role, .tc-tag { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.tc-role { color: #fcd34d; background: rgba(245,158,11,.16); border: 1px solid rgba(245,158,11,.4); }
.tc-tag { color: var(--accent2); background: rgba(155,109,255,.14); border: 1px solid var(--line2); }
.tc-text { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.tc-text a { text-decoration: underline; text-underline-offset: 2px; }
.tc-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 14px; margin: 8px 0 0; font-size: 13.5px; }
.tc-fields dt { color: var(--muted); }
.tc-fields dd { margin: 0; overflow-wrap: anywhere; }
.tc-day { align-self: center; text-align: center; }
.tc-day span { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.tc-sys { align-self: center; text-align: center; max-width: 92%; }
.tc-sys span { display: inline-block; font-size: 12.5px; color: var(--muted); padding: 5px 13px; border-radius: 12px; background: rgba(155,109,255,.08); border: 1px dashed var(--line2); }
.tc-sys i { color: var(--accent2); margin-right: 3px; }
.tc-sys b { color: var(--text); }
.tc-sys time { color: var(--muted2); }
.tc-hello { align-self: center; text-align: center; color: var(--muted); font-size: 13px; padding: 14px 18px; border: 1px dashed var(--line2); border-radius: 14px; max-width: 420px; margin-top: 6px; }
.tc-hello i { color: var(--accent2); margin-right: 4px; }
.is-fresh { animation: tcIn .35s ease-out; }
@keyframes tcIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }

.tc-jump {
  align-self: center; position: relative; z-index: 2; margin: -48px 0 12px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line2); background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; font-family: inherit; line-height: 1;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.9);
}
.tc-typing { min-height: 26px; padding: 4px 18px 0; font-size: 12.5px; color: var(--muted); font-style: italic; display: flex; align-items: center; gap: 6px; }
.tc-dots { display: inline-flex; gap: 3px; }
.tc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent2); animation: tcDot 1.2s infinite ease-in-out; }
.tc-dots i:nth-child(2) { animation-delay: .15s; }
.tc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tcDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

.tc-form { padding: 8px 14px 14px; }
.tc-form.is-sending { opacity: .65; pointer-events: none; }
.tc-form .tf-preview.has { margin-bottom: 8px; }
.tc-compose {
  display: flex; align-items: flex-end; gap: 6px; padding: 5px; border-radius: 15px;
  border: 1px solid var(--line2); background: rgba(11,13,36,.8); transition: border-color .15s, box-shadow .15s;
}
.tc-compose:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(155,109,255,.15); }
.tc-attach {
  position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; cursor: pointer;
  color: var(--muted); font-size: 17px; transition: color .15s, background .15s;
}
.tc-attach:hover { color: var(--accent2); background: rgba(155,109,255,.12); }
.tc-attach input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tc-compose textarea, .neon .tc-compose textarea {
  flex: 1; min-width: 0; min-height: 40px; max-height: 180px; height: 40px; resize: none; padding: 9px 6px; line-height: 1.45;
  border: 0; background: transparent; box-shadow: none; color: var(--text); border-radius: 0;
}
.tc-compose textarea:focus, .neon .tc-compose textarea:focus { box-shadow: none; border: 0; }
.tc-compose textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-send { flex: none; height: 40px; padding: 0 16px; border-radius: 11px; gap: 8px; }
.tc-hint { margin-top: 6px; font-size: 11.5px; color: var(--muted2); padding-left: 4px; }
.tc-closed { padding: 14px 18px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 13.5px; }
.tc-closed i { margin-right: 4px; }

.tk-side { min-width: 0; }
.tk-info h3 { font-size: 16px; }
.tk-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px 12px; margin: 0; font-size: 13.5px; }
.tk-kv dt { color: var(--muted); }
.tk-kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.tk-status { display: flex; gap: 8px; margin: 16px 0 12px; }
.tk-status select { flex: 1; min-width: 0; padding: 7px 10px; }
.tk-link { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; }
.tk-del-btn, .neon .tk-del-btn { color: #f87171; }
.tk-del-btn:hover, .neon .tk-del-btn:hover { color: #fff; background: rgba(239,68,68,.25); }
.tk-info .tk-close-btn { margin-top: 14px; }
.tk-note { margin: 14px 0 0; padding: 10px 12px; border-radius: 11px; font-size: 12.5px; color: #fcd34d; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25); }
.tk-note i { margin-right: 4px; }

/* ---------- админка заявок ---------- */
.atk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.atk-main { min-width: 0; }
.atk-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.atk-status { margin: 0; flex-wrap: wrap; }
.atk-status a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.atk-status .svc-badge { height: 17px; min-width: 17px; font-size: 10px; padding: 0 5px; box-shadow: none; }
.atk-search, .aw-search { position: relative; display: flex; gap: 8px; align-items: center; flex: 1 1 260px; max-width: 440px; }
.atk-search > i, .aw-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted2); font-size: 13px; pointer-events: none; }
.atk-search input, .aw-search input {
  flex: 1; min-width: 0; width: 100%; padding: 9px 12px 9px 34px; border-radius: 11px; font: inherit;
  border: 1px solid var(--line2); background: rgba(11,13,36,.8); color: var(--text);
}
.atk-search input:focus, .aw-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(155,109,255,.15); }
.atk-x { position: absolute; right: 86px; top: 50%; transform: translateY(-50%); color: var(--muted); padding: 4px 6px; }
.atk-chip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; margin-bottom: 12px; border-radius: 12px; background: rgba(155,109,255,.1); border: 1px solid var(--line2); font-size: 13.5px; }
.atk-chip > span { flex: 1; min-width: 0; }
.atk-chip small { color: var(--muted); }
.atk-chip > a { font-size: 13px; white-space: nowrap; }
.atk-chip-ava { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; font-size: 12px; }
.atk-found { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.atk-list { display: grid; gap: 8px; }
.atk-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 190px) 92px auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); transition: border-color .15s, background .15s;
}
.atk-row:hover { border-color: var(--line2); background: rgba(155,109,255,.05); }
.atk-row.is-new { border-color: rgba(236,72,153,.45); background: rgba(236,72,153,.06); box-shadow: inset 3px 0 0 #ec4899; }
.atk-row-main { display: grid; min-width: 0; color: var(--text); line-height: 1.35; }
.atk-row-main:hover { color: var(--text); }
.atk-row-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atk-row-main small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atk-user { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; }
.atk-user > span { display: grid; min-width: 0; line-height: 1.3; }
.atk-user .ulink { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atk-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; font-size: 13px; }
.atk-all { font-size: 11.5px; color: var(--muted); }
.atk-meta { display: grid; font-size: 13px; color: var(--muted); line-height: 1.3; }
.atk-meta small { color: var(--muted2); font-size: 11.5px; }
.atk-state { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.atk-side .card h3 { font-size: 15px; }
.atk-side .row input { min-width: 0; }

.atk-archive { display: grid; gap: 8px; }
.atk-arch { border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.atk-arch[open] { border-color: var(--line2); }
.atk-arch summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; }
.atk-arch summary::-webkit-details-marker { display: none; }
.atk-arch-main { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.atk-arch-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atk-arch-main small, .atk-arch-side small { color: var(--muted); font-size: 12px; }
.atk-arch-side { display: grid; text-align: right; font-size: 12.5px; flex: none; }
.atk-arch-body { padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.atk-arch-log { display: grid; gap: 8px; margin-top: 12px; }
.atk-arch-msg { padding: 8px 12px; border-radius: 10px; background: var(--card2); border-left: 3px solid var(--muted2); font-size: 13.5px; }
.atk-arch-msg.is-staff { border-left-color: var(--accent); background: rgba(155,109,255,.1); }
.atk-arch-msg.is-sys { font-style: italic; color: var(--muted); background: transparent; }
.atk-arch-msg small { color: var(--muted2); }
.atk-arch-msg > div { overflow-wrap: anywhere; }

/* ---------- варны игрока ---------- */
:is(.wn-hero, .wn-status, .aw-pill).lvl-safe { --lv: #4ade80; }
:is(.wn-hero, .wn-status, .aw-pill).lvl-warning { --lv: #fbbf24; }
:is(.wn-hero, .wn-status, .aw-pill).lvl-danger { --lv: #f87171; }
.aw-pill.lvl-none { --lv: #94a3b8; }
.wn-card.state-active, .aw-warn.state-active { --st: #fbbf24; }
.wn-card.state-expired, .aw-warn.state-expired { --st: #64748b; }
.wn-card.state-removed, .aw-warn.state-removed { --st: #60a5fa; }

.wn-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 16px; }
.wn-head h1 { margin: 0; }
.wn-head h1 i { color: #fbbf24; }
.wn-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: center;
  border-color: color-mix(in srgb, var(--lv) 35%, transparent);
}
.wn-hero::before { content: ""; position: absolute; width: 360px; height: 360px; left: -120px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--lv) 22%, transparent), transparent); pointer-events: none; }
.wn-counter {
  position: relative; text-align: center; padding: 20px 14px 18px; border-radius: 18px;
  background: color-mix(in srgb, var(--lv) 9%, transparent); border: 1px solid color-mix(in srgb, var(--lv) 35%, transparent);
}
.wn-num { line-height: 1; }
.wn-num b { font-size: 68px; font-weight: 800; color: var(--lv); text-shadow: 0 0 30px color-mix(in srgb, var(--lv) 45%, transparent); }
.wn-num span { font-size: 30px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.wn-label { color: var(--muted); font-size: 13px; margin-top: 6px; }
.wn-pips { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.wn-pips i { width: 28px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); }
.wn-pips i.on { background: var(--lv); box-shadow: 0 0 12px color-mix(in srgb, var(--lv) 70%, transparent); }
.wn-right { position: relative; display: grid; gap: 14px; min-width: 0; }
.wn-status {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--lv) 10%, transparent); border: 1px solid color-mix(in srgb, var(--lv) 30%, transparent); border-left: 4px solid var(--lv);
}
.wn-status i { font-size: 24px; color: var(--lv); flex: none; }
.wn-status span { font-size: 15px; font-weight: 600; }
.wn-remind { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.wn-remind h3 { font-size: 15px; margin: 0 0 6px; }
.wn-remind h3 i { color: var(--accent2); margin-right: 4px; }
.wn-remind p { color: var(--muted); font-size: 13.5px; margin: 0 0 8px; }
.wn-remind a { font-weight: 600; font-size: 13.5px; }
.wn-title { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.wn-title i { color: var(--accent2); }
.wn-list { display: grid; gap: 10px; }
.wn-card { border: 1px solid var(--line); border-left: 4px solid var(--st); border-radius: 14px; background: rgba(255,255,255,.02); transition: border-color .15s, background .15s; }
.wn-card:hover { background: rgba(255,255,255,.035); }
.wn-card.state-expired, .wn-card.state-removed { opacity: .78; }
.wn-card summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 13px 16px;
  cursor: pointer; list-style: none;
}
.wn-card summary::-webkit-details-marker { display: none; }
.wn-card-n { font-weight: 700; }
.wn-card-side { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; justify-content: flex-end; }
.wn-caret { transition: transform .2s; color: var(--muted2); }
.wn-card[open] .wn-caret { transform: rotate(180deg); }
.wn-preview { grid-column: 1 / -1; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wn-card[open] .wn-preview { display: none; }
.wn-details { padding: 2px 16px 10px; border-top: 1px dashed var(--line2); }
.wn-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.wn-row:last-child { border-bottom: 0; }
.wn-row > span { color: var(--muted); }
.wn-row > div { overflow-wrap: anywhere; }
.wn-in { color: var(--muted); font-style: normal; }
.wn-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.wn-badge.is-active { color: #fcd34d; background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.35); }
.wn-badge.is-soon { color: #fca5a5; background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.35); }
.wn-badge.is-expired { color: #cbd5e1; background: rgba(148,163,184,.12); border: 1px solid rgba(148,163,184,.25); }
.wn-badge.is-removed { color: #93c5fd; background: rgba(59,130,246,.13); border: 1px solid rgba(59,130,246,.3); }

/* ---------- админка варнов ---------- */
.aw-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.aw-side, .aw-main { min-width: 0; }
.aw-side h3, .aw-main h3 { font-size: 15px; }
.aw-search { max-width: none; }
.aw-cap { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin: 12px 0 8px; }
.aw-cap a { white-space: nowrap; }
.aw-list { display: grid; gap: 3px; max-height: 520px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.aw-user, .aw-recent { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; color: var(--text); border: 1px solid transparent; }
.aw-user:hover, .aw-recent:hover { background: rgba(155,109,255,.08); color: var(--text); }
.aw-user.active { background: rgba(155,109,255,.16); border-color: var(--line2); }
.aw-ava { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; font-size: 13px; }
.aw-user-main { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.aw-user-main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-user-main small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-pill {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; flex: none;
  color: var(--lv); background: color-mix(in srgb, var(--lv) 15%, transparent); border: 1px solid color-mix(in srgb, var(--lv) 38%, transparent);
}
.aw-none { color: var(--muted); font-size: 13px; text-align: center; padding: 14px 0; margin: 0; }
.aw-max { flex: 1; display: grid; gap: 6px; font-size: 13.5px; }
.aw-player-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.aw-player-head > div { flex: 1; min-width: 0; }
.aw-player-head h2 { margin: 0 0 2px; font-size: 19px; overflow-wrap: anywhere; }
.aw-big-ava { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; font-size: 24px; border: 2px solid var(--line2); }
.aw-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.aw-info > div { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); min-width: 0; }
.aw-info > div > span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.aw-info b { font-size: 14.5px; overflow-wrap: anywhere; }
.aw-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: flex-start; }
.aw-toggle > summary { list-style: none; }
.aw-toggle > summary::-webkit-details-marker { display: none; }
.aw-toggle[open] { flex-basis: 100%; }
.aw-toggle[open] > summary { opacity: .75; }
.aw-toggle > form { margin-top: 10px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.aw-toggle textarea, .aw-mini textarea { min-height: 80px; }
.aw-warn { padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--st); background: rgba(255,255,255,.02); }
.aw-warn + .aw-warn { margin-top: 10px; }
.aw-warn.state-expired, .aw-warn.state-removed { opacity: .78; }
.aw-warn-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.aw-warn-head > span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.aw-reason { margin: 8px 0; font-size: 14px; overflow-wrap: anywhere; }
.aw-warn-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.aw-warn-meta b { color: var(--text); font-weight: 600; }
.aw-warn-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.aw-mini > summary {
  list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent2); padding: 4px 10px; border-radius: 8px;
  background: rgba(155,109,255,.1); border: 1px solid var(--line);
}
.aw-mini > summary::-webkit-details-marker { display: none; }
.aw-mini > summary.is-del { color: #f87171; background: rgba(239,68,68,.1); }
.aw-mini > summary:hover { filter: brightness(1.2); }
.aw-mini > form { margin-top: 8px; width: min(320px, 78vw); gap: 8px; }
.aw-pick { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 34px 16px; }
.aw-pick > i { font-size: 34px; color: var(--accent); opacity: .8; }
.aw-pick b { font-size: 16px; }
.aw-pick span { color: var(--muted); }
.aw-recent + .aw-recent { border-top-color: var(--line); }
.aw-recent-side { display: grid; justify-items: end; gap: 4px; flex: none; }
.aw-recent-side small { color: var(--muted); font-size: 11.5px; }

/* ---------- змейка ---------- */
.sn-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 16px; }
.sn-head h1 { margin: 0; }
.sn-head h1 i { color: var(--green2); }
.sn-page { max-width: 1000px; margin: 0 auto; }
.sn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.sn-grid > .card + .card { margin-top: 0; }
.sn-game { padding: 16px; min-width: 0; }
.sn-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sn-score {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 15px; border-radius: 12px; font-size: 22px; font-weight: 800;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); transition: background .2s, border-color .2s;
}
.sn-score i { color: #f87171; font-size: 18px; }
.sn-score.is-record { background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.5); color: #fde68a; animation: snGlow 1.4s ease-in-out infinite; }
.sn-score.is-record i { color: #fbbf24; }
@keyframes snGlow { 50% { box-shadow: 0 0 22px -4px rgba(251,191,36,.7); } }
.sn-best { color: var(--muted); font-size: 13px; }
.sn-best i { color: #fbbf24; margin-right: 3px; }
.sn-best b { color: var(--text); }
.sn-ctrls { margin-left: auto; display: flex; gap: 6px; }
.sn-btn {
  width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line2); background: rgba(255,255,255,.04);
  color: var(--text); cursor: pointer; font-size: 15px; transition: background .15s, color .15s;
}
.sn-btn:hover { background: rgba(155,109,255,.16); }
.sn-btn.is-off { color: var(--muted2); }
.sn-stage { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line2); line-height: 0; }
.sn-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 510 / 450; touch-action: none; }
.sn-overlay {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center; line-height: 1.45;
  background: rgba(8,9,26,.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: hlFade .2s ease;
}
.sn-o-ico {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #fff; margin-bottom: 4px;
  background: linear-gradient(135deg, var(--accent2), var(--accent)); box-shadow: 0 12px 34px -10px var(--accent);
}
.sn-overlay.is-over .sn-o-ico { background: linear-gradient(135deg, #f87171, #b91c1c); box-shadow: 0 12px 34px -10px #ef4444; }
.sn-overlay.is-record .sn-o-ico { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #4a2d00; box-shadow: 0 12px 34px -8px #f59e0b; }
.sn-overlay.is-pause .sn-o-ico { background: linear-gradient(135deg, #67e8f9, #0891b2); }
.sn-o-title { font-size: 24px; font-weight: 800; }
.sn-o-record { font-size: 16px; font-weight: 800; color: #fbbf24; animation: snPop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes snPop { from { transform: scale(.4); opacity: 0; } }
.sn-o-text { color: var(--muted); max-width: 360px; font-size: 14px; }
.sn-o-btn { margin-top: 6px; }
.sn-o-hint { font-size: 12px; color: var(--muted2); min-height: 1em; }
.sn-hint { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.sn-hint i { margin-right: 3px; }
.sn-pad {
  display: none; grid-template-columns: repeat(3, 64px); grid-template-areas: ". up ." "left pause right" ". down .";
  gap: 8px; justify-content: center; margin-top: 12px;
}
.sn-pad button {
  height: 54px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card2); color: var(--text);
  font-size: 18px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .08s, background .12s;
}
.sn-pad button:active { transform: scale(.93); background: rgba(155,109,255,.25); }
.sn-pad [data-dir="up"] { grid-area: up; }
.sn-pad [data-dir="left"] { grid-area: left; }
.sn-pad [data-dir="pause"] { grid-area: pause; color: var(--muted); font-size: 15px; }
.sn-pad [data-dir="right"] { grid-area: right; }
.sn-pad [data-dir="down"] { grid-area: down; }
@media (hover: none), (max-width: 760px) { .sn-pad { display: grid; } }

.sn-side { min-width: 0; }
.sn-card h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 12px; }
.sn-card h3 i { color: var(--accent2); }
.sn-rows { display: grid; gap: 6px; margin-bottom: 12px; }
.sn-rows > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: 13.5px; }
.sn-rows span { color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.sn-rows b { text-align: right; }
.sn-gold { color: #fbbf24; }
.sn-apple { color: #f87171; }
.sn-small { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.sn-meter { height: 8px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.sn-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .5s; }
.sn-top { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.sn-top + .sn-top { border-top: 1px solid var(--line); }
.sn-place { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--card2); color: var(--muted); }
.sn-place.p1 { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #4a2d00; }
.sn-place.p2 { background: linear-gradient(135deg, #f1f5f9, #94a3b8); color: #1e293b; }
.sn-place.p3 { background: linear-gradient(135deg, #fdba74, #c2410c); color: #3b1302; }
.sn-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; font-size: 13px; }
.sn-top-main { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.sn-top-main .ulink { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sn-top-main small { color: var(--muted); font-size: 11.5px; }
.sn-top-best { font-style: normal; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.sn-top-best i { color: #f87171; }
.sn-ex .form { gap: 10px; }
.sn-result { font-size: 13.5px; padding: 8px 12px; border-radius: 10px; background: rgba(46,204,113,.08); border: 1px solid rgba(46,204,113,.2); }
.sn-result b { color: var(--green2); }
.sn-result small { color: var(--muted); }
.sn-bad { color: #f87171; }

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .atk-grid, .aw-grid { grid-template-columns: minmax(0, 1fr); }
  .atk-row { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 170px) auto; }
  .atk-meta { display: none; }
  .aw-list { max-height: 300px; }
}
@media (max-width: 1000px) {
  .sn-page { max-width: 660px; }
  .sn-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "menu" "main" "info"; }
  .svc-menu { display: flex; gap: 6px; overflow-x: auto; padding: 8px; scrollbar-width: none; }
  .svc-menu::-webkit-scrollbar { display: none; }
  .svc-menu .svc-cap, .svc-menu .svc-sep, .svc-txt small { display: none; }
  .svc-link { flex: none; padding: 6px 12px 6px 6px; }
  .svc-link .svc-ico { width: 30px; height: 30px; font-size: 13px; }
  .svc-txt b { font-size: 13px; white-space: nowrap; }
  .svc-link .svc-badge { margin-left: 2px; }
  .tk-grid { grid-template-columns: minmax(0, 1fr); }
  .wn-hero { grid-template-columns: minmax(0, 1fr); }
  .aw-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .svc-hero { gap: 12px; }
  .svc-hero .svc-ico.lg { width: 44px; height: 44px; font-size: 18px; }
  .svc-hero p { font-size: 13px; }
  .svc-fields { grid-template-columns: minmax(0, 1fr); }
  .svc-row { flex-wrap: wrap; }
  .svc-row-side { width: 100%; justify-content: flex-end; }
  .svc-row .svc-ico.sm { display: none; }
  .tf-drop { padding: 14px; }
  .tk-head { flex-wrap: wrap; padding: 16px; }
  .tk-head > .svc-ico.lg { width: 42px; height: 42px; font-size: 17px; }
  .tk-title { flex-basis: calc(100% - 60px); }
  .tk-title h1 { font-size: 17px; }
  .tk-head-side { width: 100%; justify-content: space-between; }
  .tk-chat-head { padding: 11px 12px 11px 14px; }
  .tk-live { display: none; }
  .tc-thread { padding: 14px 10px; gap: 10px; height: clamp(340px, 64vh, 560px); }
  .tc-msg { max-width: 92%; gap: 7px; }
  .tc-ava-img { width: 28px; height: 28px; font-size: 12px; }
  .tc-msg.tc-request { max-width: 100%; }
  .tc-fields { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .tc-fields dd + dt { margin-top: 7px; }
  .tc-form { padding: 6px 8px 10px; }
  .tc-send { padding: 0 13px; }
  .tc-send span, .tc-hint { display: none; }
  .tf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .atk-tools { flex-direction: column; align-items: stretch; }
  .atk-search { max-width: none; flex-basis: auto; }
  .atk-row { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "ico main main" "user user state"; row-gap: 8px; }
  .atk-row > .svc-ico { grid-area: ico; }
  .atk-row-main { grid-area: main; }
  .atk-user { grid-area: user; }
  .atk-state { grid-area: state; }
  .atk-arch summary { flex-wrap: wrap; }
  .atk-arch-side { width: 100%; text-align: left; display: block; }
  .atk-arch-side small { margin-left: 6px; }
  .wn-num b { font-size: 56px; }
  .wn-card summary { grid-template-columns: minmax(0, 1fr); }
  .wn-card-side { justify-content: flex-start; }
  .wn-caret { margin-left: auto; }
  .wn-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .aw-player-head { flex-wrap: wrap; }
  .aw-big-ava { width: 48px; height: 48px; font-size: 19px; }
  .aw-recent { flex-wrap: wrap; }
  .aw-recent-side { width: 100%; justify-items: start; grid-auto-flow: column; justify-content: space-between; align-items: center; padding-left: 42px; }
  .sn-game { padding: 12px; }
  .sn-score { font-size: 19px; padding: 5px 12px; }
  .sn-o-title { font-size: 20px; }
  .sn-o-text { font-size: 13px; }
  .sn-o-ico { width: 52px; height: 52px; font-size: 21px; }
}

/* ================= неон ================= */
.neon .svc-ico { background: linear-gradient(135deg, rgba(34,211,238,.14), rgba(168,85,247,.2)); border-color: rgba(255,255,255,.08); color: #a5f3fc; }
.neon .svc-cap { color: var(--muted2); letter-spacing: 1.2px; font-size: 10.5px; font-weight: 800; }
.neon .svc-link { color: #b6bbcc; }
.neon .svc-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.neon .svc-link.active { color: #fff; background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(168,85,247,.16)); border-color: rgba(168,85,247,.45); box-shadow: 0 8px 24px -16px rgba(168,85,247,.9); }
.neon .svc-badge, .neon .svc-new { background: var(--pink); box-shadow: 0 0 14px -2px rgba(244,114,182,.75); }
.neon .svc-card-head h2, .neon .wn-title, .neon .tk-title h1, .neon .aw-player-head h2 { font-family: var(--head-font); }
.neon .svc-sec { color: var(--cyan); font-weight: 800; letter-spacing: 1px; font-size: 11px; }
.neon .svc-row, .neon .atk-row, .neon .atk-arch, .neon .wn-card, .neon .aw-warn { background: rgba(255,255,255,.025); }
.neon .svc-row:hover, .neon .atk-row:hover { background: rgba(255,255,255,.05); border-color: rgba(168,85,247,.4); }
.neon .svc-row.has-new, .neon .atk-row.is-new { border-color: rgba(244,114,182,.45); background: rgba(244,114,182,.06); box-shadow: inset 3px 0 0 var(--pink); }
.neon .svc-mini:hover, .neon .aw-user:hover, .neon .aw-recent:hover { background: rgba(255,255,255,.05); }
.neon .form .svc-pill { border-color: var(--line2); background: rgba(255,255,255,.03); }
.neon .form .svc-pill:has(input:checked) { background: linear-gradient(90deg, rgba(34,211,238,.16), rgba(168,85,247,.22)); border-color: rgba(168,85,247,.6); }
.neon .svc-pill input { accent-color: var(--cyan); }
.neon .tf-drop { border-color: rgba(34,211,238,.3); background: rgba(34,211,238,.03); border-radius: 16px; }
.neon .tf-drop:hover, .neon .tf-drop.is-over { border-color: var(--cyan); background: rgba(34,211,238,.08); }
.neon .tf-drop-ico, .neon .tf-chip-ico { background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(168,85,247,.24)); color: #a5f3fc; }
.neon .tf-chip { background: rgba(255,255,255,.05); }

.neon .tk-chat-head h3 i, .neon .tc-hello i, .neon .tc-sys i, .neon .wn-title i, .neon .wn-remind h3 i, .neon .sn-card h3 i { color: var(--cyan); }
.neon .tk-live i { background: var(--cyan); animation-name: tkPulseN; }
@keyframes tkPulseN { 70% { box-shadow: 0 0 0 7px rgba(34,211,238,0); } 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); } }
.neon .tk-mute, .neon .sn-btn { background: rgba(255,255,255,.04); border-color: var(--line2); color: var(--cyan); }
.neon .tk-mute:hover, .neon .sn-btn:hover { background: rgba(34,211,238,.12); }
.neon .tk-mute.is-off, .neon .sn-btn.is-off { color: var(--muted2); }
.neon .tc-thread { background: rgba(0,0,0,.22); }
.neon .tc-bubble { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.08); }
.neon .tc-msg.is-staff .tc-bubble { background: linear-gradient(135deg, rgba(168,85,247,.26), rgba(34,211,238,.13)); border-color: rgba(168,85,247,.4); box-shadow: 0 10px 30px -18px rgba(168,85,247,.9); }
.neon .tc-msg.is-staff .tc-meta time { color: rgba(238,240,246,.5); }
.neon .tc-tag { color: #a5f3fc; background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.3); }
.neon .tc-day span { background: rgba(255,255,255,.04); }
.neon .tc-sys span { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); }
.neon .tc-dots i { background: var(--cyan); }
.neon .tc-jump { background: var(--grad); color: #05060b; border: 0; font-weight: 800; }
.neon .tc-compose { background: rgba(255,255,255,.04); border-color: var(--line2); border-radius: 16px; }
.neon .tc-compose:focus-within { border-color: rgba(34,211,238,.6); box-shadow: 0 0 0 3px rgba(34,211,238,.14); }
.neon .tc-attach:hover { color: var(--cyan); background: rgba(34,211,238,.1); }

.neon .atk-search input, .neon .aw-search input { background: rgba(255,255,255,.04); border-color: var(--line2); }
.neon .atk-search input:focus, .neon .aw-search input:focus { border-color: rgba(34,211,238,.6); box-shadow: 0 0 0 3px rgba(34,211,238,.14); }
.neon .atk-chip { background: linear-gradient(90deg, rgba(34,211,238,.08), rgba(168,85,247,.12)); border-color: rgba(168,85,247,.35); }
.neon .atk-arch-msg { background: rgba(255,255,255,.04); }
.neon .atk-arch-msg.is-staff { border-left-color: var(--accent); background: rgba(168,85,247,.1); }

.neon .wn-hero { background: var(--tile), var(--surface); border-color: color-mix(in srgb, var(--lv) 35%, transparent); }
.neon .wn-num b { font-family: var(--head-font); font-weight: 700; }
.neon .wn-num span { font-family: var(--head-font); font-weight: 500; }
.neon .wn-card:hover { background: rgba(255,255,255,.045); }
.neon .wn-card-n, .neon .aw-warn-head > b { font-family: var(--head-font); font-weight: 600; font-size: 13.5px; }

.neon .aw-user.active { background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(168,85,247,.16)); border-color: rgba(168,85,247,.45); }
.neon .aw-mini > summary { color: #a5f3fc; background: rgba(34,211,238,.08); border-color: rgba(34,211,238,.2); }
.neon .aw-mini > summary.is-del { color: #fda4af; background: rgba(244,63,94,.1); border-color: rgba(244,63,94,.25); }
.neon .aw-pick > i, .neon .svc-empty > i { color: var(--cyan); }

.neon .sn-head h1 i { color: var(--cyan); }
.neon .sn-score { font-family: var(--head-font); font-weight: 700; background: rgba(244,114,182,.08); border-color: rgba(244,114,182,.25); }
.neon .sn-score i { color: var(--pink); }
.neon .sn-score.is-record { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.5); }
.neon .sn-score.is-record i { color: #fbbf24; }
.neon .sn-stage { border-color: rgba(34,211,238,.25); box-shadow: 0 0 0 1px rgba(168,85,247,.12), 0 24px 60px -30px rgba(168,85,247,.7); border-radius: 16px; }
.neon .sn-overlay { background: rgba(24, 18, 42,.74); }
.neon .sn-o-ico { background: var(--grad); color: #05060b; box-shadow: 0 12px 34px -10px rgba(34,211,238,.8); }
.neon .sn-overlay.is-over .sn-o-ico { background: linear-gradient(135deg, #fb7185, #be123c); color: #fff; }
.neon .sn-overlay.is-record .sn-o-ico { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #4a2d00; }
.neon .sn-o-title { font-family: var(--head-font); font-weight: 600; }
.neon .sn-pad button { background: rgba(255,255,255,.05); border-color: var(--line2); }
.neon .sn-pad button:active { background: rgba(34,211,238,.18); }
.neon .sn-meter i { background: var(--grad); }
.neon .sn-place { background: rgba(255,255,255,.07); }
.neon .sn-place.p1 { background: linear-gradient(135deg, #fde68a, #f59e0b); }
.neon .sn-place.p2 { background: linear-gradient(135deg, #f1f5f9, #94a3b8); }
.neon .sn-place.p3 { background: linear-gradient(135deg, #fdba74, #c2410c); }
.neon .sn-result { background: rgba(52,211,153,.07); border-color: rgba(52,211,153,.22); }
.neon .sn-result b { color: var(--green); }
.neon .sn-top-best i, .neon .sn-apple { color: var(--pink); }

/* plus.css */
/* Profile Plus, профиль, стрик, достижения, стена, настройки, /plus и админка рамок.
   База — палитра старого сайта (классическая тема), под .neon — только токены и свечения. */
:root {
  --px-v: #9b6dff; --px-v2: #6d3fcc; --px-hi: #c9a9ff; --px-hi2: #b794ff;
  --px-txt: #e8e8f4; --px-mut: #8b8da6; --px-line: rgba(155,109,255,.16); --px-line2: rgba(155,109,255,.32);
  --px-card: linear-gradient(180deg, #181b42, #0e1029); --px-panel: linear-gradient(180deg, #171a3d, #0e1030);
  --px-tile: rgba(155,109,255,.05); --px-tile2: rgba(155,109,255,.12); --px-in: rgba(10,10,26,.55);
  --px-cta: linear-gradient(135deg, #a97dff, #7b4fe0); --px-cta-sh: 0 4px 16px rgba(155,109,255,.45);
  --px-ok: #2ecc71; --px-bad: #ff6b7a; --px-r: 14px; --px-gold: #ffd977;
}
.neon {
  --px-v: #a855f7; --px-v2: #7c3aed; --px-hi: #d8b4fe; --px-hi2: #67e8f9;
  --px-txt: #eef0f6; --px-mut: #8b90a3; --px-line: rgba(255,255,255,.08); --px-line2: rgba(255,255,255,.16);
  --px-card: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); --px-panel: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  --px-tile: rgba(255,255,255,.035); --px-tile2: rgba(168,85,247,.14); --px-in: rgba(255,255,255,.04);
  --px-cta: linear-gradient(90deg, #22d3ee, #a855f7); --px-cta-sh: 0 10px 30px -12px rgba(168,85,247,.7);
  --px-ok: #34d399; --px-bad: #fb7185; --px-r: 18px;
}

/* ---------- значок Plus, ник, подсказка ---------- */
.plus-seal { display: inline-flex; width: 16px; height: 16px; margin-left: 4px; vertical-align: -2px; color: var(--px-v); cursor: pointer; flex: 0 0 auto; -webkit-text-fill-color: currentColor; transition: color .15s, transform .15s; }
.plus-seal svg { width: 100%; height: 100%; display: block; }
.plus-seal:hover { color: var(--px-hi2); transform: scale(1.12); }
.neon .plus-seal { color: #c084fc; filter: drop-shadow(0 0 4px rgba(168,85,247,.55)); }
.neon .plus-seal:hover { color: #67e8f9; }
.nick { display: inline-flex; align-items: center; max-width: 100%; }
.nick > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.plus-nick.nick-grad, .nick .nick-grad { -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
.plus-tip { position: fixed; z-index: 10050; width: 262px; max-width: calc(100vw - 16px); padding: 10px 13px; border-radius: 12px; background: #15183a; border: 1px solid rgba(155,109,255,.35); box-shadow: 0 12px 30px rgba(0,0,0,.5); color: #d9dbea; font-size: 12.5px; line-height: 1.45; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; display: grid; gap: 3px; left: -999px; top: -999px; }
.plus-tip.is-on { opacity: 1; transform: none; }
.plus-tip__t { color: var(--px-hi); font-size: 12px; letter-spacing: .03em; }
.plus-tip__f { color: var(--px-mut); font-variant-numeric: tabular-nums; }
.neon .plus-tip { background: rgba(33, 26, 56,.97); border-color: rgba(255,255,255,.12); backdrop-filter: blur(12px); font-family: inherit; }

/* медаль в профиле: круг 34px */
.plus-medal { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; padding: 0; color: #fff !important; background: radial-gradient(circle at 30% 25%, #c9a9ff, #9b6dff 45%, #5b2fc0); box-shadow: 0 0 0 2px rgba(201,169,255,.35), 0 4px 14px rgba(155,109,255,.45); transition: transform .15s; }
.plus-medal svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.plus-medal:hover { transform: translateY(-2px) scale(1.05); }
.neon .plus-medal { background: radial-gradient(circle at 30% 25%, #67e8f9, #a855f7 50%, #6d28d9); box-shadow: 0 0 0 2px rgba(103,232,249,.3), 0 0 18px rgba(168,85,247,.55); }
.pp-medals { align-items: center; }

/* рамка аватара: оверлей поверх картинки, позицию ставит plus.js */
.hl-frame-ov { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 6; background-repeat: no-repeat; }
.profile-pill { overflow: visible !important; }

/* ---------- профиль: доп. блоки ---------- */
.pp-uava-wrap { position: relative; display: inline-block; line-height: 0; }
.pp-wrap .pp-nick .nick { justify-content: center; }
.pp-bgfull .pp-grid { margin-top: 4px; }
.pp-bgfull .pp-card, .pp-bgfull .pp-tabs { background: rgba(14,14,34,.82); backdrop-filter: blur(10px); }
.neon .pp-bgfull .pp-card, .neon .pp-bgfull .pp-tabs { background: rgba(30, 23, 50,.8); }
.pp-socials.pp-socials--card { position: static; display: flex; justify-content: center; gap: 8px; margin: 10px 0 2px; }
.pp-visitors { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; }
.pp-visitors a { position: relative; display: inline-block; line-height: 0; }
.pp-vava { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--px-line2); display: inline-grid; place-items: center; font-size: 15px; font-weight: 700; line-height: 1; color: var(--px-hi2); background: #1b1840; }
.pp-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--pp-bd, var(--px-line)); }
.pp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--px-mut); padding: 8px 12px; background: var(--px-tile); white-space: nowrap; }
.pp-table td { padding: 8px 12px; border-top: 1px solid var(--pp-bd, var(--px-line)); vertical-align: top; }
.pp-table .pp-neg { color: var(--px-bad); font-weight: 700; white-space: nowrap; }
.pp-table .pp-pos { color: var(--px-ok); font-weight: 700; white-space: nowrap; }
.pp-actions button.pp-act, .neon .pp-actions button.pp-act { background: var(--pp-tile); color: var(--pp-txt-soft, #c9cdd9); border: 1px solid var(--pp-bd); border-radius: 8px; padding: 8px 11px; font-size: 12px; display: flex; align-items: center; gap: 8px; font-weight: 500; width: 100%; text-align: left; filter: none; box-shadow: none; font-family: inherit; cursor: pointer; }
.pp-actions button.pp-act:hover, .neon .pp-actions button.pp-act:hover { background: rgba(155,109,255,.13); color: #fff; }
.pp-actions button.pp-act--danger, .neon .pp-actions button.pp-act--danger { color: var(--pp-red, #ff6b7a); }
.pp-copy.copied { color: var(--px-ok); border-color: var(--px-ok); }
.ach-count { margin-left: auto; color: var(--px-mut); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12px; font-variant-numeric: tabular-nums; }

.pp-section__more { margin-left: auto; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.plus-nick-w { display: inline-flex; align-items: center; max-width: 100%; vertical-align: bottom; }
.plus-nick-w .plus-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neon .profile-pill .pp-ava.has-frame { outline-color: transparent; }

/* ---------- стрик ---------- */
.sk-badge { --lvl: #7a7f99; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--lvl); background: color-mix(in srgb, var(--lvl) 14%, rgba(10,10,26,.6)); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.sk-badge i { color: var(--lvl); }
.sk-badge .sk-lvl { color: var(--lvl); font-weight: 800; font-size: 11px; }
.sk-badge:hover { box-shadow: 0 0 14px color-mix(in srgb, var(--lvl) 45%, transparent); }
.sk-badge.is-pop { animation: sk-pop .5s ease; }
@keyframes sk-pop { 40% { transform: scale(1.18); } }
.sk-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 11px; border-radius: 999px; border: 1px dashed rgba(255,180,84,.55); background: rgba(255,180,84,.08); color: #ffb454; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; animation: sk-glow 2s ease-in-out infinite; }
@keyframes sk-glow { 50% { box-shadow: 0 0 12px rgba(255,180,84,.35); } }
.modal-box.sk-modal { --lvl: #7a7f99; max-width: 460px; background: linear-gradient(180deg, #15183a, #0a0a1a); border: 1px solid rgba(155,109,255,.3); border-radius: 16px; color: #d9dbea; }
.neon .modal-box.sk-modal { background: linear-gradient(180deg, #12131f, #07080d); border-color: rgba(255,255,255,.1); border-radius: 22px; }
.sk-title { font-weight: 800; font-size: 17px; color: #fff; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.neon .sk-title { font-family: var(--head-font); font-weight: 600; font-size: 16px; }
.sk-title i { color: var(--lvl); }
.sk-hero { text-align: center; padding: 16px; border-radius: 14px; background: color-mix(in srgb, var(--lvl) 12%, transparent); border: 1px solid color-mix(in srgb, var(--lvl) 40%, transparent); margin-bottom: 14px; }
.sk-hero__n { font-size: 22px; font-weight: 800; color: #fff; }
.sk-hero__n b { color: var(--lvl); font-size: 30px; }
.sk-hero__sub { color: var(--px-mut); font-size: 13px; margin-top: 2px; }
.sk-modal p { margin: 0 0 6px; font-size: 13.5px; color: #c4c6da; }
.sk-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--px-mut); margin: 14px 0 8px; }
.sk-ladder { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sk-step { display: grid; grid-template-columns: 10px auto 1fr; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid transparent; font-size: 12.5px; }
.sk-step i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.sk-step b { color: var(--c); }
.sk-step span { color: var(--px-mut); font-size: 11.5px; }
.sk-step.is-cur { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.sk-foot { margin: 12px 0; font-size: 12.5px; color: var(--px-mut); }
.sk-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sk-btns form { flex: 1 1 auto; margin: 0; }
.sk-confirm, .sk-ok { width: 100%; border: 0; border-radius: 10px; padding: 11px 18px; font: inherit; font-weight: 700; cursor: pointer; }
.sk-confirm { background: var(--px-cta); color: #fff; box-shadow: var(--px-cta-sh); }
.neon .sk-confirm { color: #05060b; }
.sk-confirm:disabled { opacity: .55; cursor: default; box-shadow: none; }
.sk-ok { flex: 0 0 auto; width: auto; background: rgba(255,255,255,.06); color: #d9dbea; border: 1px solid var(--px-line2); }

/* ---------- достижения ---------- */
.ach-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.ach-card { --rar: #6c7290; position: relative; display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: linear-gradient(180deg, #181b42, #0e1029); border: 1px solid rgba(155,109,255,.12); border-left: 3px solid var(--rar); opacity: .62; outline: none; transition: opacity .15s, transform .15s; }
.neon .ach-card { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border-color: rgba(255,255,255,.07); border-left-color: var(--rar); }
.ach-card:hover, .ach-card:focus-visible { opacity: .9; transform: translateY(-1px); }
.ach-card.is-done { opacity: 1; border-color: rgba(155,109,255,.45); border-left-color: var(--rar); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.neon .ach-card.is-done { border-color: rgba(168,85,247,.35); border-left-color: var(--rar); }
.ach-card[data-rarity="rare"] { --rar: #4aa3ff; }
.ach-card[data-rarity="epic"] { --rar: #b06dff; }
.ach-card[data-rarity="legendary"] { --rar: #ffb454; }
.ach-card[data-rarity="secret"] { --rar: #8b8da6; border-style: dashed; border-left-style: solid; }
.ach-card[data-rarity="plus"] { --rar: rgb(255,196,0); }
.ach-card[data-rarity="plus"].is-done { border-color: rgba(255,196,0,.45); box-shadow: 0 0 18px rgba(255,196,0,.18); }
.ach-card[data-rarity="plus"].is-done .ach-title { color: var(--px-gold); }
.ach-ico { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(155,109,255,.1); color: var(--rar); font-size: 19px; }
.ach-card.is-done .ach-ico { background: linear-gradient(135deg, #9b6dff, #6d3fcc); color: #fff; box-shadow: 0 4px 14px rgba(155,109,255,.4); }
.neon .ach-card.is-done .ach-ico { background: linear-gradient(135deg, #22d3ee, #a855f7); color: #05060b; }
.ach-card[data-rarity="plus"].is-done .ach-ico { background: linear-gradient(135deg, #ffd977, #e0a400); color: #3a2a00; }
.ach-body { min-width: 0; flex: 1; display: grid; gap: 2px; align-content: start; }
.ach-title { color: #fff; font-size: 14px; }
.ach-desc { color: var(--px-mut); font-size: 12px; line-height: 1.35; }
.ach-ok { color: var(--px-ok); font-size: 12px; font-weight: 700; margin-top: 3px; }
.ach-secret { color: var(--px-mut); font-size: 12px; font-style: italic; margin-top: 3px; }
.ach-card .ach-bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 6px; }
.ach-card .ach-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--px-v2), var(--px-v)); border-radius: 5px; }
.neon .ach-card .ach-bar span { background: var(--grad); }
.ach-prog { color: var(--px-mut); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* ---------- стена ---------- */
.wl .wl-in { padding: 14px; }
.wl-form { display: grid; gap: 8px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--pp-bd, var(--px-line)); }
.wl-form textarea, .wl-form input[type=text] { width: 100%; min-height: 0; }
.wl-form textarea { min-height: 76px; resize: vertical; }
.wl-replybar { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--px-mut); padding: 6px 10px; border-radius: 8px; background: var(--px-tile); border-left: 3px solid var(--px-v); }
.wl-replybar b { color: #fff; }
.wl-reset { margin-left: auto; border: 0; background: none; color: var(--px-hi2); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 0; }
.wl-preview img { max-width: 220px; max-height: 160px; border-radius: 10px; border: 1px solid var(--px-line2); display: block; }
.wl-foot { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.wl-hint { color: var(--px-mut); font-size: 12.5px; }
.wl-send { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 10px; padding: 9px 18px; font: inherit; font-weight: 700; background: var(--px-cta); color: #fff; cursor: pointer; box-shadow: var(--px-cta-sh); }
.neon .wl-send { color: #05060b; }
.wl-send:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.wl-guest { color: var(--px-mut); margin: 0 0 6px; }
.wl-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--px-mut); margin: 14px 0 4px; display: flex; align-items: center; gap: 8px; }
.wl-sec::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--px-v); }
.wl-empty { text-align: center; color: var(--px-mut); padding: 22px 0 10px; }
.wl-post { display: flex; gap: 11px; padding: 12px 0; }
.wl-in > .wl-post + .wl-post { border-top: 1px solid var(--pp-bd, var(--px-line)); }
.wl-post.is-pinned { background: rgba(155,109,255,.06); border-radius: 12px; padding: 12px; margin: 6px 0; border: 1px solid rgba(155,109,255,.2); }
.wl-ava { position: relative; flex: 0 0 auto; line-height: 0; align-self: flex-start; }
.wl-ava-img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; font-weight: 700; line-height: 1; background: #1b1840; color: var(--px-hi2); }
.wl-reply .wl-ava-img { width: 30px; height: 30px; font-size: 12px; }
.wl-body { flex: 1; min-width: 0; }
.wl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-author { font-weight: 700; }
.wl-pin { color: var(--px-hi2); font-size: 12px; font-weight: 700; }
.wl-date { color: var(--px-mut); font-size: 12px; margin-left: auto; font-variant-numeric: tabular-nums; }
.wl-text { margin: 5px 0 6px; overflow-wrap: anywhere; line-height: 1.5; }
.wl-media img { max-width: min(100%, 420px); max-height: 340px; border-radius: 12px; display: block; margin: 4px 0 8px; border: 1px solid var(--px-line); }
.wl-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.wl-reacts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.wl-f { display: inline; margin: 0; }
.wl-react { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--px-line); background: rgba(10,12,32,.55); color: var(--px-txt); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.neon .wl-react { background: rgba(255,255,255,.04); }
.wl-react span { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wl-react:hover { border-color: var(--px-line2); }
.wl-react.is-mine { background: rgba(155,109,255,.22); border-color: var(--px-v); }
.wl-react--add { color: var(--px-mut); font-size: 11px; width: 26px; justify-content: center; padding: 0; }
.wl-add { position: relative; display: inline-flex; }
.wl-picker { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; display: flex; gap: 2px; padding: 5px; border-radius: 12px; background: #15183a; border: 1px solid rgba(155,109,255,.35); box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.wl-picker[hidden] { display: none; }
.neon .wl-picker { background: rgba(33, 26, 56,.97); border-color: rgba(255,255,255,.12); }
.wl-pick { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; font-size: 18px; cursor: pointer; transition: transform .12s, background .12s; }
.wl-pick:hover { background: rgba(155,109,255,.18); transform: scale(1.15); }
.wl-pick.is-mine { background: rgba(155,109,255,.28); }
.wl-acts { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.wl-act { border: 0; background: none; padding: 2px 0; color: var(--px-mut); font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.wl-act i { font-size: 10.5px; }
.wl-act:hover { color: var(--px-hi2); }
.wl-act--danger:hover { color: var(--px-bad); }
.wl-replies { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--px-line2); }
.wl-reply { padding: 8px 0; }
.wl-reply + .wl-reply { border-top: 1px dashed var(--px-line); }

/* ---------- настройки ---------- */
.ps-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ps-top h1 { margin: 0; }
.ps-profile-link { font-size: 13px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.ps-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ps-col { display: grid; gap: 14px; min-width: 0; }
.ps-card { background: rgba(18,16,38,.66); border: 1px solid rgba(155,109,255,.14); border-radius: 12px; padding: 0 16px 16px; min-width: 0; scroll-margin-top: 90px; }
.neon .ps-card { background: var(--tile), var(--surface); border-color: var(--line); border-radius: 20px; padding: 0 20px 20px; }
.ps-head { display: flex; align-items: center; gap: 8px; margin: 0 -16px 14px; padding: 11px 16px; border-bottom: 1px solid rgba(155,109,255,.14); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #ececf5; }
.ps-head::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--px-v); flex: 0 0 auto; }
.neon .ps-head { margin: 0 -20px 16px; padding: 14px 20px; border-color: var(--line); font-family: var(--head-font); font-weight: 600; font-size: 11px; letter-spacing: .08em; }
.neon .ps-head::before { background: var(--grad); }
.ps-plus { margin-left: auto; font-size: 10px; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: rgba(155,109,255,.18); color: var(--px-hi); text-transform: none; font-family: inherit; }
.ps-hint { display: block; color: var(--px-mut); font-size: 12.5px; line-height: 1.5; margin: 6px 0 0; }
.ps-hint--plus { margin-top: 12px; }
.ps-ok { color: var(--px-ok); margin: 0; }
.ps-ok a { font-weight: 700; }
.ps-form { display: grid; gap: 10px; }
.ps-form input[type=text], .ps-form input[type=password], .ps-url-row input, .ps-form textarea { height: 40px; border-radius: 9px; }
.ps-form textarea { height: auto; min-height: 90px; }
.ps-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ps-btns form { margin: 0; }
.ps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border: 0; border-radius: 9px; background: var(--px-cta); color: #fff !important; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: var(--px-cta-sh); white-space: nowrap; justify-self: start; }
.neon .ps-btn { color: #05060b !important; border-radius: 12px; }
.ps-btn:hover { filter: brightness(1.08); }
.ps-btn--ghost, .neon .ps-btn--ghost { background: var(--px-tile); color: var(--px-txt) !important; border: 1px solid var(--px-line2); box-shadow: none; }
.ps-ava-row { display: flex; align-items: center; gap: 16px; }
.ps-ava { position: relative; line-height: 0; flex: 0 0 auto; }
.ps-ava-img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 2px solid var(--px-v); display: inline-grid; place-items: center; font-size: 28px; font-weight: 700; line-height: 1; background: #1b1840; color: var(--px-hi2); }
.ps-ava-side { min-width: 0; }
.ps-banner { height: 90px; border-radius: 10px; margin-bottom: 10px; background: radial-gradient(circle at 20% 0, rgba(155,109,255,.35), transparent 60%), #13122a center / cover no-repeat; border: 1px solid var(--px-line); display: grid; place-items: center; color: var(--px-mut); font-size: 12.5px; }
.ps-url-row { display: flex; gap: 8px; margin-top: 10px; }
.ps-url-row input { flex: 1; min-width: 0; }
.pp-bm { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--px-line2); }
.pp-bm__title { font-size: 12px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pp-bm__title .ps-plus { margin-left: 0; }
.pp-bm__list { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-bm__btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--px-line2); background: var(--px-tile); color: #c0c0e0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.pp-bm__btn:hover { border-color: var(--px-hi2); }
.pp-bm__btn.is-active { background: rgba(155,109,255,.22); border-color: var(--px-hi2); color: #fff; box-shadow: 0 4px 14px rgba(155,109,255,.25); }
.neon .pp-bm__btn.is-active { background: rgba(168,85,247,.2); border-color: #67e8f9; }
/* замок без подписки */
.pp-lock { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 2px 0; }
.pp-lock__t { color: #9a9cb4; font-size: 13.5px; flex: 1 1 220px; }
.pp-lock__t b { color: var(--px-hi); }
.pp-lock__btn { display: inline-block; background: linear-gradient(135deg, #a97dff, #7b4fe0); color: #fff !important; border-radius: 9px; padding: 9px 20px; font-size: 13.5px; font-weight: 700; box-shadow: 0 4px 16px rgba(155,109,255,.45); white-space: nowrap; }
.neon .pp-lock__btn { background: var(--grad); color: #05060b !important; border-radius: 12px; box-shadow: 0 10px 30px -12px rgba(168,85,247,.7); }
/* превью и палитры */
.pp-pv { display: grid; place-items: center; min-height: 64px; padding: 12px; border-radius: 12px; background: rgba(10,10,26,.6); border: 1px solid var(--px-line); margin-bottom: 12px; text-align: center; }
.neon .pp-pv { background: rgba(0,0,0,.28); }
.pp-pv--nick { display: flex; justify-content: center; align-items: center; gap: 2px; font-size: 21px; font-weight: 800; }
.pp-pv--nick .plus-seal { width: 19px; height: 19px; }
.pp-pv-nick.nick-grad { -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
.pp-pv--role { gap: 8px; }
.pp-pv-cap { font-size: 12px; color: var(--px-mut); }
.pp-pv-line { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.pp-pv-plate { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 5px; border: 1px solid currentColor; line-height: 1.5; }
.pp-pv-plate.nick-grad { -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
.pp-pv--chat { place-items: stretch; text-align: left; padding: 10px; }
.pp-pv-msg { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 8px; transition: background .2s; }
.pp-pv-ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: inline-grid; place-items: center; font-weight: 700; line-height: 1; background: #1b1840; color: var(--px-hi2); }
.pp-pv-msg__n { font-weight: 700; font-size: 13.5px; }
.pp-pv-msg__t { font-size: 13.5px; color: #c0c0e0; }
.pp-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(10,10,26,.6); border: 1px solid var(--px-line); margin-bottom: 10px; }
.neon .pp-seg { background: rgba(255,255,255,.04); }
.pp-seg__b { border: 0; background: none; color: var(--px-mut); font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 16px; border-radius: 8px; cursor: pointer; }
.pp-seg__b.is-on { background: rgba(155,109,255,.25); color: #fff; }
.neon .pp-seg__b.is-on { background: var(--grad); color: #05060b; }
.pp-sw-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-sw-list[hidden] { display: none; }
.pp-sw { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid rgba(155,109,255,.25); background: var(--sw, #555); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; flex: 0 0 auto; }
.pp-sw:hover { transform: scale(1.12); border-color: rgba(155,109,255,.6); }
.pp-sw.is-active { border-color: #fff; box-shadow: 0 0 0 3px var(--px-v); }
.neon .pp-sw.is-active { box-shadow: 0 0 0 3px #67e8f9; }
.pp-sw--def { background: linear-gradient(45deg, transparent 42%, #ff6b7a 44%, #ff6b7a 56%, transparent 58%), rgba(155,109,255,.12); }
.pp-sw--off { border-style: dashed; }
.pp-pick-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.pp-save { height: 36px; padding: 0 18px; border: 1px solid var(--px-hi2); border-radius: 9px; background: rgba(155,109,255,.14); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.pp-save:hover { background: rgba(155,109,255,.26); }
.neon .pp-save { border-radius: 12px; border-color: rgba(103,232,249,.5); background: rgba(103,232,249,.1); }
.pp-save:disabled { opacity: .6; }
.pp-pick-name { color: var(--px-mut); font-size: 12.5px; }
/* рамки: плитки выбора */
.pp-frame-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.pp-frame-tile { position: relative; width: 116px; padding: 18px 8px 14px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; text-align: center; background: rgba(155,109,255,.05); border: 1px solid rgba(155,109,255,.18); transition: transform .12s, border-color .15s, background .15s; outline: none; }
.neon .pp-frame-tile { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
.pp-frame-tile:hover, .pp-frame-tile:focus-visible { transform: translateY(-2px); border-color: rgba(155,109,255,.5); }
.pp-frame-tile.is-sel { background: rgba(155,109,255,.16); border-color: #b794ff; box-shadow: 0 6px 20px rgba(155,109,255,.28); }
.neon .pp-frame-tile.is-sel { background: rgba(168,85,247,.14); border-color: #67e8f9; box-shadow: 0 0 22px -6px rgba(103,232,249,.5); }
.pp-frame-check { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #a97dff, #7b4fe0); color: #fff; font-size: 9px; display: none; place-items: center; }
.pp-frame-tile.is-sel .pp-frame-check { display: grid; }
.pp-frame-demo { position: relative; width: 64px; height: 64px; flex: 0 0 auto; }
.pp-frame-ava { display: block; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(180deg, #5a4aa8, #2a2550); }
.pp-frame-ava--none { display: grid; place-items: center; border: 2px dashed rgba(155,109,255,.45); background: rgba(155,109,255,.04); color: #7d7f99; font-weight: 700; font-size: 18px; }
.pp-frame-name { color: #e0e3f0; font-size: 12px; font-weight: 600; line-height: 1.2; }
/* переключатель */
.pp-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.pp-switch-row b { color: #fff; font-size: 13.5px; }
.pp-switch { position: relative; flex: 0 0 44px; width: 44px; height: 24px; }
.pp-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pp-switch span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid var(--px-line2); transition: background .2s; pointer-events: none; }
.pp-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.pp-switch input:checked + span { background: var(--px-v); }
.pp-switch input:checked + span::after { transform: translateX(20px); }
.pp-switch input:focus-visible + span { outline: 2px solid var(--px-hi); outline-offset: 2px; }

/* ---------- /plus ---------- */
.ppl { max-width: 980px; margin: 0 auto; color: var(--px-txt); }
.ppl :focus-visible { outline: 2px solid var(--px-hi); outline-offset: 3px; border-radius: 6px; }
.ppl-eyebrow { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--px-mut); font-weight: 700; margin: 6px 0 12px; }
.ppl-h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; color: #fff; }
.ppl-h1 span { color: var(--px-hi); }
.neon .ppl-h1 { font-family: var(--head-font); font-weight: 700; }
.neon .ppl-h1 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ppl-lede { color: var(--px-mut); font-size: 1.02rem; line-height: 1.6; max-width: 56ch; margin: 0; }
.ppl-link { color: var(--px-hi) !important; font-weight: 700; }
.ppl-demo { margin: 28px 0 0; background: var(--px-panel); border: 1px solid var(--px-line); border-radius: 18px; overflow: hidden; }
.neon .ppl-demo { border-radius: 22px; }
.ppl-demo__grid { display: grid; grid-template-columns: minmax(0, 272px) minmax(0, 1fr); }
.ppl-demo__left { padding: 30px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; border-right: 1px solid var(--px-line); background: rgba(155,109,255,.04); }
.ppl-ava { position: relative; width: 92px; height: 92px; flex: 0 0 auto; margin: 8px 0; }
.ppl-ava-img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #2a2550; font-size: 34px; font-weight: 700; color: var(--px-hi2); line-height: 1; }
.ppl-nick { font-weight: 800; font-size: 1.12rem; display: flex; align-items: center; gap: 2px; }
.ppl-nick .plus-seal { width: 17px; height: 17px; color: var(--px-hi); }
.ppl-plate { font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 6px; border: 1px solid; }
.ppl-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
.ppl-chip { font: 600 11px/1 inherit; padding: 7px 10px; border-radius: 20px; cursor: pointer; color: #c0c0e0 !important; background: rgba(155,109,255,.08); border: 1px solid var(--px-line); transition: border-color .15s, background .15s; white-space: nowrap; }
.ppl-chip:hover { border-color: rgba(155,109,255,.5); }
.ppl-chip[aria-pressed="true"] { background: rgba(155,109,255,.2); border-color: var(--px-hi); color: #fff !important; }
.ppl-demo__right { padding: 24px 22px; }
.ppl-demo__cap, .ppl-sec__h { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--px-mut); font-weight: 700; margin: 0 0 14px; }
.ppl-msg { display: flex; gap: 11px; padding: 9px 12px; border-radius: 8px; margin-bottom: 8px; align-items: flex-start; }
.ppl-msg__ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #2a2550; display: grid; place-items: center; color: var(--px-hi2); font-weight: 700; line-height: 1; }
.ppl-msg__ava--def { color: #6f7190; font-size: 14px; }
.ppl-msg__n { font-weight: 700; font-size: .86rem; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.ppl-msg__plate { font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 5px; border: 1px solid; line-height: 1.5; }
.ppl-msg__t { font-size: .88rem; color: #c0c0e0; line-height: 1.4; }
.ppl-note { color: var(--px-mut); font-size: .82rem; line-height: 1.5; margin: 14px 0 0; }
.ppl-sec { margin: 40px 0 0; scroll-margin-top: 90px; }
.ppl-status { background: linear-gradient(135deg, rgba(155,109,255,.18), rgba(109,63,204,.1)); border: 1px solid rgba(155,109,255,.4); border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.ppl-status b { color: #fff; }
.ppl-buyform { margin: 0; }
.ppl-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ppl-plan { position: relative; display: grid; gap: 2px; justify-items: start; text-align: left; padding: 18px 18px 16px; border-radius: 14px; cursor: pointer; background: rgba(155,109,255,.05); border: 1px solid var(--px-line); color: var(--px-txt); font: inherit; transition: border-color .15s, background .15s, box-shadow .15s; }
.ppl-plan:hover { border-color: rgba(155,109,255,.5); }
.ppl-plan[aria-pressed="true"] { border-color: var(--px-hi); background: rgba(155,109,255,.14); box-shadow: 0 6px 22px rgba(155,109,255,.22); }
.neon .ppl-plan { border-radius: 18px; background: rgba(255,255,255,.03); }
.neon .ppl-plan[aria-pressed="true"] { border-color: #67e8f9; background: rgba(168,85,247,.12); box-shadow: 0 0 30px -10px rgba(103,232,249,.55); }
.ppl-plan__l { font-size: .9rem; color: var(--px-mut); font-weight: 600; }
.ppl-plan__p { font-size: 1.9rem; font-weight: 800; color: #fff; letter-spacing: -.02em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.neon .ppl-plan__p { font-family: var(--head-font); font-weight: 700; }
.ppl-plan__m { font-size: .78rem; color: var(--px-mut); }
.ppl-plan__save { position: absolute; top: 14px; right: 14px; font-size: .68rem; font-weight: 800; background: linear-gradient(135deg, #a97dff, #7b4fe0); color: #fff; border-radius: 20px; padding: 3px 9px; }
.neon .ppl-plan__save { background: var(--grad); color: #05060b; }
.ppl-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 18px 0 0; }
.ppl-buy { display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer; border-radius: 11px; padding: 13px 28px; font: inherit; font-size: 1rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #a97dff, #7b4fe0); box-shadow: 0 6px 20px rgba(155,109,255,.4); }
.neon .ppl-buy { background: var(--grad); color: #05060b; border-radius: 14px; font-weight: 800; }
.ppl-buy:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.ppl-bal { font-size: .86rem; color: var(--px-mut); }
.ppl-bal b { color: var(--px-ok); font-variant-numeric: tabular-nums; }
.ppl-bal .ppl-need { color: var(--px-bad); }
.ppl-bal a { color: var(--px-hi); font-weight: 700; }
.ppl-msgline { min-height: 20px; margin: 12px 0 0; font-size: .9rem; }
.ppl-msgline.is-ok { color: var(--px-ok); }
.ppl-msgline.is-err { color: var(--px-bad); }
.ppl-gift { margin: 18px 0 0; padding: 18px; border: 1px dashed rgba(155,109,255,.3); border-radius: 14px; background: rgba(155,109,255,.03); }
.neon .ppl-gift { border-color: rgba(255,255,255,.14); border-radius: 18px; }
.ppl-gift__t { font-weight: 700; color: #fff; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
.ppl-gift__t i { color: var(--px-hi); }
.ppl-gift__d { color: var(--px-mut); font-size: .85rem; line-height: 1.5; margin: 0 0 12px; }
.ppl-gift__row { display: flex; gap: 10px; flex-wrap: wrap; }
.ppl-gift__wrap { position: relative; flex: 1 1 220px; min-width: 0; }
.ppl-gift__inp { width: 100%; height: 42px; }
.ppl-ac { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; display: none; background: #141733; border: 1px solid rgba(155,109,255,.35); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.5); max-height: 264px; overflow-y: auto; }
.neon .ppl-ac { background: rgba(33, 26, 56,.98); border-color: rgba(255,255,255,.12); }
.ppl-ac.is-open { display: block; }
.ppl-ac__i { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.ppl-ac__i:hover, .ppl-ac__i.is-cur { background: rgba(155,109,255,.16); }
.ppl-ac__i img, .ppl-ac__l { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #2a2550; flex: 0 0 auto; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--px-hi2); }
.ppl-ac__n { font-weight: 700; font-size: .9rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppl-ac__id { margin-left: auto; font-size: .76rem; color: var(--px-mut); flex: 0 0 auto; }
.ppl-ac__empty { padding: 10px 12px; color: var(--px-mut); font-size: .85rem; }
.ppl-gift__chosen { display: none; margin-top: 9px; font-size: .84rem; color: var(--px-ok); }
.ppl-gift__chosen.is-on { display: block; }
.ppl-gift__btn { border: 1px solid rgba(155,109,255,.45); background: rgba(155,109,255,.12); color: var(--px-hi); border-radius: 10px; padding: 0 22px; height: 42px; font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; }
.ppl-gift__btn:hover { background: rgba(155,109,255,.22); }
.ppl-gift__btn:disabled { opacity: .55; cursor: not-allowed; }
.neon .ppl .ppl-sec__h, .neon .ppl .ppl-demo__cap { font-family: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .2em; margin: 0 0 14px; color: var(--px-mut); }
.neon .ppl .ppl-perk__t { font-family: inherit; font-size: .96rem; font-weight: 800; }
.ppl-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ppl-perk { background: rgba(155,109,255,.05); border: 1px solid var(--px-line); border-radius: 14px; padding: 18px; }
.neon .ppl-perk { background: var(--tile); border-radius: 18px; }
.ppl-perk__i { width: 26px; height: 26px; color: var(--px-v); margin-bottom: 10px; display: block; }
.neon .ppl-perk__i { color: #67e8f9; }
.ppl-perk__t { font-weight: 700; font-size: .96rem; margin: 0 0 5px; color: #fff; }
.ppl-perk__d { font-size: .86rem; color: var(--px-mut); line-height: 1.5; margin: 0; }
.ppl-foot { margin: 30px 0 0; color: var(--px-mut); font-size: .85rem; line-height: 1.6; }
.ppl-foot a { color: var(--px-hi); font-weight: 700; }

/* ---------- админка: рамки ---------- */
.pfa-list { display: grid; gap: 10px; }
.pfa-item { display: flex; gap: 16px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); margin: 0; }
.pfa-demo { position: relative; width: 64px; height: 64px; flex: 0 0 64px; margin: 8px; }
.pfa-ava { display: block; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(180deg, #5a4aa8, #2a2550); }
.pfa-fields { flex: 1; min-width: 0; display: grid; gap: 8px; }
.pfa-row { display: grid; grid-template-columns: 2fr 1fr 1.3fr 1fr; gap: 8px; }
.pfa-row label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); margin: 0; }
.pfa-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- узкие экраны ---------- */
@media (max-width: 991px) {
  .ps-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ppl-demo__grid { grid-template-columns: 1fr; }
  .ppl-demo__left { border-right: 0; border-bottom: 1px solid var(--px-line); }
  .ach-list { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .pfa-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ps-url-row { flex-wrap: wrap; }
  .ps-url-row .ps-btn { width: 100%; }
  .pp-frame-tile { width: calc(50% - 6px); }
  .wl-date { margin-left: 0; width: 100%; }
  .ppl-plan__p { font-size: 1.6rem; }
  .ppl-buy { width: 100%; justify-content: center; }
  .sk-ladder { grid-template-columns: 1fr; }
  .pfa-item { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-hint, .sk-badge.is-pop { animation: none; }
}

/* ---------- друзья, сообщения, пользователи (общий «community»-стиль старого сайта) ---------- */
.cm { display: grid; gap: 14px; min-width: 0; }
.cm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-title { margin: 0; font-size: 22px; color: var(--px-txt); }
.cm-title__n { font-size: 13px; font-weight: 700; color: var(--px-hi2); background: var(--px-tile2); border-radius: 999px; padding: 2px 9px; vertical-align: middle; }
.neon .cm-title { font-family: var(--head-font, inherit); font-size: 20px; }
.cm-lists { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-lists a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--px-tile); border: 1px solid var(--px-line); color: var(--px-mut); font-size: 13px; font-weight: 600; text-decoration: none; }
.cm-lists a:hover { color: var(--px-txt); border-color: var(--px-line2); }
.cm .cm-lists a:not(.is-on), .neon .cm .cm-lists a:not(.is-on) { color: var(--px-mut); }
.cm .cm-lists a:not(.is-on):hover { color: var(--px-txt); }
.cm-lists a.is-on { background: var(--px-tile2); border-color: var(--px-line2); color: #fff; }
.cm-lists a span { font-size: 11px; background: rgba(255,255,255,.08); border-radius: 999px; padding: 1px 7px; }
.cm-lists a span.is-hot { background: var(--px-bad); color: #fff; }
.cm-search { position: relative; display: flex; align-items: center; flex: 1 1 220px; min-width: 0; }
.cm-search i { position: absolute; left: 13px; color: var(--px-mut); font-size: 13px; pointer-events: none; }
.cm-search input { width: 100%; height: 40px; padding: 0 12px 0 36px; border-radius: 9px; border: 1px solid var(--px-line2); background: var(--px-in); color: var(--px-txt); font: inherit; font-size: 13.5px; margin: 0; }
.cm-search input:focus { outline: none; border-color: var(--px-hi2); }
.cm-list { display: grid; gap: 8px; }
.cm-row { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--px-r); background: var(--px-card); border: 1px solid var(--px-line); min-width: 0; }
.cm-ava { position: relative; flex: 0 0 62px; width: 62px; height: 62px; }
.cm-ava__img { width: 62px; height: 62px; border-radius: 12px; object-fit: cover; display: block; border: 2px solid var(--px-line2); }
.cm-ava__img.ava-letter { display: grid; place-items: center; font-size: 24px; }
.cm-info { display: grid; gap: 3px; min-width: 0; flex: 1; }
.cm-name { font-size: 15px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-name a { text-decoration: none; }
.grp-label { font-size: 12.5px; font-weight: 600; }
.cm-acts, .uc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cm-acts .inline-form, .uc-acts .inline-form { display: inline-flex; }
.cm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--px-line2); background: var(--px-tile); color: var(--px-hi2) !important; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; text-decoration: none !important; cursor: pointer; white-space: nowrap; }
.cm-chip:hover { background: var(--px-tile2); color: #fff !important; }
.cm-chip--accent { background: var(--px-cta); border-color: transparent; color: #fff !important; }
.neon .cm-chip--accent { color: #05060b !important; }
.cm-chip--danger { color: var(--px-bad) !important; border-color: rgba(255,107,122,.3); }
.cm-chip--on { color: var(--px-ok) !important; border-color: rgba(46,204,113,.3); cursor: default; }
.cm-chip--muted { color: var(--px-mut) !important; cursor: default; }
.cm-chip--admin { color: #ffb454 !important; border-color: rgba(255,180,84,.3); }
.cm-empty { padding: 26px 16px; text-align: center; color: var(--px-mut); border-radius: var(--px-r); background: var(--px-card); border: 1px dashed var(--px-line2); }
.cm-empty--sm { padding: 12px; font-size: 13px; }
.cm--split { grid-template-columns: minmax(0, 1fr) 250px; align-items: start; }
.cm-main { display: grid; gap: 14px; min-width: 0; }
.cm-side { padding: 14px; border-radius: var(--px-r); background: var(--px-card); border: 1px solid var(--px-line); display: grid; gap: 10px; }
.cm-side__head { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--px-txt); border-left: 3px solid var(--px-v); padding-left: 8px; }
.cm-mate { display: flex; gap: 10px; align-items: center; min-width: 0; }
.cm-mate__ava { position: relative; flex: 0 0 40px; }
.cm-mate__img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; display: block; }
.cm-mate__img.ava-letter { display: grid; place-items: center; }
.cm-mate__info { display: grid; min-width: 0; }
.cm-mate__nick { font-size: 13.5px; font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-mate__write { font-size: 12px; color: var(--px-hi2); text-decoration: none; }
.cm-mate__write:hover { color: #fff; }

/* список диалогов */
.dg-list { display: grid; gap: 8px; }
.dg-row { display: flex; align-items: stretch; border-radius: var(--px-r); background: var(--px-card); border: 1px solid var(--px-line); overflow: hidden; min-width: 0; }
.dg-row.is-unread { border-color: var(--px-line2); box-shadow: inset 3px 0 0 var(--px-v); }
.dg-link { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px; min-width: 0; color: var(--px-txt); text-decoration: none; }
.dg-link:hover { background: var(--px-tile); color: var(--px-txt); }
.dg-ava { position: relative; flex: 0 0 50px; width: 50px; height: 50px; }
.dg-ava__img { width: 50px; height: 50px; border-radius: 11px; object-fit: cover; display: block; }
.dg-ava__img.ava-letter { display: grid; place-items: center; font-size: 20px; }
.dg-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.dg-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.dg-nick { font-weight: 700; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-date { margin-left: auto; color: var(--px-mut); font-size: 12px; white-space: nowrap; }
.dg-text { color: #c4c6da; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-text b { color: var(--px-mut); font-weight: 600; }
.dg-state { font-size: 12px; color: var(--px-mut); }
.dg-state.is-wait { color: #2dd4bf; }
.dg-state.is-new { color: var(--px-hi2); font-weight: 600; }
.dg-count { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--px-v); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.dg-del { display: flex; margin: 0; }
.dg-del button { width: 48px; border: 0; border-left: 1px solid var(--px-line); background: transparent; color: var(--px-mut); cursor: pointer; font-size: 14px; transition: color .15s, background .15s; }
.dg-del button:hover { color: var(--px-bad); background: rgba(255,107,122,.08); }
.dg-back { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--px-tile); border: 1px solid var(--px-line); color: var(--px-txt); text-decoration: none; flex: 0 0 auto; }
.dg-back:hover { color: #fff; border-color: var(--px-line2); }
.dg-ava--head { flex-basis: 44px; width: 44px; height: 44px; }
.dg-ava--head .dg-ava__img { width: 44px; height: 44px; }
.dg-headinfo { min-width: 0; }
.dg-headinfo .dg-nick { text-decoration: none; font-size: 15px; }
.dm-tick { margin-left: 3px; font-size: 10px; opacity: .75; }
.dm-tick.is-read { color: #67e8f9; opacity: 1; }
.dm-deny { margin: 0 14px 12px; padding: 10px 14px; border-radius: 10px; background: rgba(255,107,122,.08); border: 1px solid rgba(255,107,122,.25); color: #ffb3bb; font-size: 13px; }

/* пользователи */
.uc-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.uc-select { position: relative; flex: 0 0 auto; }
.uc-select::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--px-hi2); border-bottom: 2px solid var(--px-hi2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.uc-select select { -webkit-appearance: none; appearance: none; height: 40px; padding: 0 34px 0 12px; border-radius: 9px; border: 1px solid var(--px-line2); background: var(--px-in); color: var(--px-txt); font: inherit; font-size: 13.5px; margin: 0; cursor: pointer; max-width: 220px; }
.uc-select select option { background: #15183a; color: #e8e8f4; }
.uc-online { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--px-line); background: var(--px-tile); color: var(--px-txt); font-size: 13px; cursor: pointer; margin: 0; }
.uc-online input { accent-color: var(--px-v); margin: 0; }
.uc-filters .cm-chip { height: 40px; padding: 0 16px; border-radius: 9px; }
.uc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.uc-card { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 16px 12px 14px; border-radius: var(--px-r); background: var(--px-card); border: 1px solid var(--px-line); text-align: center; min-width: 0; }
.uc-ava { position: relative; display: block; width: 60px; height: 60px; margin-bottom: 4px; }
.uc-ava__img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--px-v); }
.uc-ava__img.ava-letter { display: grid; place-items: center; font-size: 22px; }
.uc-dot { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--px-ok); border: 2px solid #0e1029; }
.uc-nick { max-width: 100%; font-weight: 700; font-size: 14.5px; text-decoration: none; overflow: hidden; }
.uc-card small { font-size: 12px; }
.uc-acts { justify-content: center; margin-top: 8px; }

/* настройки: логин, ЛС, чёрный список */
.ps-inline { display: flex; gap: 8px; align-items: center; }
.ps-inline input { flex: 1; min-width: 0; margin: 0; }
.ps-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.ps-opt__l { font-size: 13.5px; font-weight: 600; color: var(--px-txt); }
.ps-count { margin-left: 6px; font-size: 11px; color: var(--px-hi2); }
.ps-btn--sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.ps-bl__u { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.ps-bl__ava { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.ps-bl__ava.ava-letter { display: grid; place-items: center; font-size: 12px; }

/* профиль: админский блок */
.pp-adminfo { margin-top: 14px; padding: 0; overflow: hidden; }
.pp-adminfo summary { cursor: pointer; padding: 12px 16px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #ff9fae; list-style: none; display: flex; align-items: center; gap: 8px; }
.pp-adminfo summary::-webkit-details-marker { display: none; }
.pp-adminfo summary::after { content: "\25BE"; margin-left: auto; transition: transform .15s; }
.pp-adminfo[open] summary::after { transform: rotate(180deg); }
.pp-adminfo .pp-table-wrap { padding: 0 14px 14px; }

/* админка: жалобы на стены */
.wra-list { display: grid; gap: 10px; }
.wra-item { display: grid; gap: 8px; margin: 0; }
.wra-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.wra-reason { padding: 8px 12px; border-radius: 9px; background: rgba(255,180,84,.08); border: 1px solid rgba(255,180,84,.22); color: #ffd59e; font-size: 13.5px; overflow-wrap: anywhere; }
.wra-post { padding: 10px 12px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); display: grid; gap: 6px; }
.wra-meta { font-size: 13px; }
.wra-text { font-size: 14px; overflow-wrap: anywhere; }
.wra-media img { max-width: 260px; max-height: 180px; border-radius: 8px; display: block; }
.wra-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.wra-acts form { margin: 0; }

@media (max-width: 991px) {
  .cm--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cm-row { align-items: flex-start; gap: 10px; padding: 10px; }
  .cm-ava, .cm-ava__img { flex-basis: 52px; width: 52px; height: 52px; }
  .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .uc-card { padding: 12px 8px; }
  .uc-acts .cm-chip { font-size: 11.5px; padding: 4px 9px; }
  .uc-select, .uc-select select { flex: 1 1 100%; max-width: none; width: 100%; }
  .dg-link { gap: 10px; padding: 10px; }
  .dg-del button { width: 42px; }
  .ps-inline { flex-wrap: wrap; }
  .ps-inline .ps-btn { width: 100%; }
}

/* ===================== Plus v2: CSS-рамки, эффекты ника, стаж, роли, карточка игрока ===================== */

/* ---------- эффекты ника ---------- */
.nfx-glow { filter: drop-shadow(0 0 5px var(--n1, currentColor)); }
.nfx-shimmer, .nfx-rainbow {
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent;
  background-size: 200% 100% !important; animation: nfxMove 3.2s linear infinite;
}
.nfx-shimmer { background-image: linear-gradient(90deg, var(--n1, #fff), var(--n2, #fff), #ffffff, var(--n2, #fff), var(--n1, #fff)) !important; }
.nfx-rainbow { background-image: linear-gradient(90deg, #ff5f6d, #ffc371, #f9f871, #4ade80, #22d3ee, #818cf8, #f472b6, #ff5f6d) !important; animation-duration: 4s; }
@keyframes nfxMove { to { background-position: 200% 0; } }
@keyframes hfTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.nfx-sparkle-w { position: relative; }
.nfx-sparkle-w::before, .nfx-sparkle-w::after {
  content: "✦"; position: absolute; font-size: .62em; line-height: 1; color: #fde68a; -webkit-text-fill-color: #fde68a;
  text-shadow: 0 0 6px #fbbf24; pointer-events: none; animation: hfTwinkle 1.6s ease-in-out infinite;
}
.nfx-sparkle-w::before { left: -.45em; top: -.35em; }
.nfx-sparkle-w::after { right: -.2em; bottom: -.25em; font-size: .5em; animation-delay: .8s; }

/* ---------- значок Plus по стажу ---------- */
.plus-seal--t1 { color: #e2e8f0 !important; filter: drop-shadow(0 0 4px rgba(226,232,240,.6)) !important; }
.plus-seal--t2 { color: #fbbf24 !important; filter: drop-shadow(0 0 5px rgba(251,191,36,.7)) !important; }
.plus-seal--t3 { color: #67e8f9 !important; filter: drop-shadow(0 0 6px rgba(103,232,249,.8)) !important; animation: sealGlow 2.4s ease-in-out infinite; }
@keyframes sealGlow { 50% { color: #f0abfc; filter: drop-shadow(0 0 8px rgba(240,171,252,.9)); } }

/* ---------- значки ролей рядом с ником ---------- */
.role-ico {
  display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 4px; border-radius: 5px; flex: 0 0 auto;
  font-size: 9px; line-height: 1; vertical-align: 1px; cursor: help; color: var(--rc); -webkit-text-fill-color: var(--rc);
  background: color-mix(in srgb, var(--rc) 18%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
}
.role-ico i { font-size: 9px; }
.role-ico img.grp-img { width: 13px; height: 13px; vertical-align: 0; margin: 0; }
.role-ico .grp-emo { font-size: 11px; -webkit-text-fill-color: initial; }
.role-badge img.grp-img { width: 1.2em; height: 1.2em; margin: 0; }
.plus-nick-w, .nick { white-space: nowrap; }

/* ---------- карточка игрока при наведении ---------- */
.hc-pop { position: fixed; z-index: 3000; width: 300px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .14s, transform .14s, visibility .14s; }
.hc-pop.is-on { opacity: 1; visibility: visible; transform: none; }
.hc-card { position: relative; overflow: hidden; border-radius: 16px; background: #17122b; border: 1px solid rgba(167,139,250,.25); box-shadow: 0 20px 50px rgba(0,0,0,.55); color: #e9e7f5; font-size: 13px; }
.hc-card.is-plus { border-color: rgba(192,132,252,.5); box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 30px -10px rgba(168,85,247,.6); }
.hc-card.hc-t2 { border-color: rgba(251,191,36,.55); }
.hc-card.hc-t3 { border-color: rgba(103,232,249,.6); }
.hc-cover { height: 64px; background: linear-gradient(135deg, #2e1f5e, #1b1438 60%, #0f2a3d); background-size: cover; background-position: center; }
.hc-card.is-plus .hc-cover:not([style]) { background: linear-gradient(135deg, #6d28d9, #db2777 55%, #0891b2); }
.hc-head { display: flex; align-items: flex-end; gap: 12px; padding: 0 14px; margin-top: -30px; position: relative; }
.hc-ava { position: relative; width: 62px; height: 62px; flex: 0 0 62px; display: block; }
.hc-ava-img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 3px solid #17122b; display: grid; place-items: center; background: #2a2550; font-size: 24px; font-weight: 700; color: #c4b5fd; box-sizing: border-box; }
.hc-ava .hl-frame-ov { z-index: 2; }
.hc-dot { position: absolute; right: 2px; bottom: 2px; width: 13px; height: 13px; border-radius: 50%; background: #64748b; border: 2px solid #17122b; z-index: 3; }
.hc-dot.is-on { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.hc-id { min-width: 0; padding: 34px 0 2px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hc-name { font-size: 16px; font-weight: 800; color: inherit; text-decoration: none; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.hc-plate { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--rc); border: 1px solid var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); }
.hc-roles { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 14px 0; }
.hc-roles .role-badge { font-size: 11px; padding: 1px 8px; }
.hc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 14px 0; color: #a3a0bf; font-size: 12px; }
.hc-online { color: #4ade80; }
.hc-plus { display: flex; align-items: center; gap: 6px; margin: 10px 14px 0; padding: 6px 10px; border-radius: 10px; font-weight: 700; font-size: 12px; text-decoration: none;
  color: #e9d5ff; background: linear-gradient(90deg, rgba(168,85,247,.22), rgba(34,211,238,.12)); }
.hc-plus svg { width: 15px; height: 15px; color: #c084fc; }
.hc-t1 .hc-plus svg { color: #e2e8f0; } .hc-t2 .hc-plus svg { color: #fbbf24; } .hc-t3 .hc-plus svg { color: #67e8f9; }
.hc-acts { display: flex; gap: 8px; padding: 12px 14px 14px; }
.hc-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
  color: #e9e7f5; text-decoration: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); transition: background .15s; }
.hc-btn:hover { background: rgba(168,85,247,.22); color: #fff; }

/* ---------- настройки: эффект ника и редкие рамки ---------- */
.pp-fx-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pp-fx-b { padding: 8px 14px; border-radius: 10px; font-weight: 800; font-size: 13.5px; cursor: pointer; color: #e9e7f5; background: rgba(155,109,255,.06); border: 1px solid rgba(155,109,255,.2); transition: border-color .15s, background .15s; }
.pp-fx-b:hover { border-color: rgba(155,109,255,.55); }
.pp-fx-b.is-active { border-color: #67e8f9; background: rgba(103,232,249,.1); box-shadow: 0 0 18px -6px rgba(103,232,249,.6); }
.pp-fx-w { display: inline-block; }
.pp-frame-need { font-size: 10.5px; font-weight: 700; color: #fbbf24; }
.pp-frame-tile.is-locked { cursor: not-allowed; opacity: .55; }
.pp-frame-tile.is-locked:hover { transform: none; }
.pp-frame-tile.is-locked .pp-frame-need { color: #a3a0bf; }

/* ---------- /plus: галерея рамок и стаж ---------- */
.ppl-sec__n { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(168,85,247,.2); color: #e9d5ff; letter-spacing: 0; }
.ppl-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ppl-fr { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px 12px; border-radius: 14px; text-align: center; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.ppl-fr.is-rare { border-color: rgba(251,191,36,.35); background: linear-gradient(180deg, rgba(251,191,36,.08), rgba(255,255,255,.02)); }
.ppl-fr.is-locked { opacity: .8; }
.ppl-fr__demo { position: relative; width: 58px; height: 58px; margin-bottom: 8px; }
.ppl-fr__ava { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #2a2550; color: #c4b5fd; font-weight: 700; font-size: 22px; }
.ppl-fr b { font-size: 13px; }
.ppl-fr small { font-size: 11px; color: var(--px-mut, #a3a0bf); }
.ppl-fr.is-rare small { color: #fbbf24; }
.ppl-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.ppl-tier { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 14px; text-align: center; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.ppl-tier .plus-seal { width: 30px; height: 30px; margin: 0 0 4px; cursor: default; }
.ppl-tier b { font-size: 13.5px; }
.ppl-tier small { font-size: 11.5px; color: var(--px-mut, #a3a0bf); }
.ppl-tier.is-mine { border-color: #67e8f9; box-shadow: 0 0 20px -8px rgba(103,232,249,.7); }
@media (max-width: 640px) { .ppl-tiers { grid-template-columns: repeat(2, 1fr); } }

/* Профиль: квадратной рамке нужно место, чтобы не наезжать на ник. */
.pp-uava-wrap:has(.has-frame) { margin: 14px 0 10px; }

/* ---------- ник Plus в шапке и мини-аватар у ников подписчиков ---------- */
.pp-hnick { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.pp-hnick > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.pp-hnick .nick-grad { -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
.pp-hnick .plus-seal svg { width: 13px; height: 13px; }
.plus-mava { position: relative; display: inline-flex; flex: 0 0 auto; width: 20px; height: 20px; margin: 0 7px 0 3px; vertical-align: middle; line-height: 0; }
.plus-mava-img { width: 20px; height: 20px; object-fit: cover; border-radius: 14%; }
.plus-mava .ava-letter { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; line-height: 1; background: var(--grad, linear-gradient(135deg, #a855f7, #ec4899)); color: #fff; }
.plus-mava .hl-frame-ov { z-index: 1; }

/* ---------- группы сайта (Админка → Группы) ---------- */
.grp-ico { font-size: .9em; margin-right: 1px; }
.grp-plate { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--gc) 55%, transparent); background: color-mix(in srgb, var(--gc) 16%, transparent); color: var(--gc); font-weight: 700; font-size: 13px; }
.grp-plate .grp-ico { margin: 0; }
.grp-list { display: grid; gap: 8px; }
.grp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.grp-row.on { border-color: rgba(155,109,255,.5); }
.grp-row .actions { margin-left: auto; display: inline-flex; gap: 6px; }
.grp-label { margin: 4px 0 6px; font-size: 13px; font-weight: 600; }
.grp-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; margin-bottom: 12px; }
.grp-ic { margin: 0 !important; cursor: pointer; }
.grp-ic input { position: absolute; opacity: 0; pointer-events: none; }
.grp-ic span { display: grid; place-items: center; height: 38px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 15px; transition: background .12s, border-color .12s; }
.grp-ic input:checked + span { background: rgba(155,109,255,.22); border-color: #9b6dff; color: #fff; }
.grp-preview { margin-bottom: 12px; }
.grp-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 12px; }
.grp-member { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.03); }
.grp-member .ava { width: 30px; height: 30px; flex: 0 0 30px; font-size: 13px; }
.grp-inline { gap: 8px 10px; }
.grp-inline .grp-plate { min-width: 150px; }
.grp-inline input[type=text] { flex: 1 1 160px; max-width: 220px; margin: 0; }
.grp-inline input[type=color] { width: 44px; height: 36px; padding: 2px; margin: 0; }
.grp-inline select { flex: 0 1 150px; margin: 0; }
.grp-inline .grp-note { flex: 1 1 100%; }
/* значок группы картинкой или эмодзи (как эмодзи роли в Discord) */
img.grp-ico.grp-img { display: inline-block; width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -.3em; margin: 0 1px 0 0; border-radius: 3px !important; }
.grp-ico.grp-emo { display: inline-block; font-size: 1.15em; line-height: 1; vertical-align: -.08em; font-style: normal; }
.pp-group img.grp-img { width: 1.5em; height: 1.5em; }
.grp-picker { position: relative; display: inline-block; }
.grp-pick-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: inherit; cursor: pointer; font-size: 15px; }
.grp-pick-btn > i { font-size: 10px; opacity: .6; }
.grp-pick-btn img.grp-img { width: 22px; height: 22px; vertical-align: middle; }
.grp-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 330px; max-width: calc(100vw - 40px); max-height: 340px; overflow-y: auto; padding: 10px; border-radius: 14px; background: #17132a; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.grp-pop[hidden] { display: none; }
.grp-pop-t { margin: 4px 2px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #a8aec5; }
.grp-pop-g { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin-bottom: 8px; }
.grp-pop-g button { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.grp-pop-g button:hover { background: rgba(155,109,255,.22); }
.grp-pop-g button i { font-size: 15px; }
.grp-pop-g img { width: 26px; height: 26px; object-fit: contain; }
.grp-pop-foot { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.form .grp-picker { margin-bottom: 12px; }
/* Админка → Группы: список слева, настройки справа (как роли в Discord) */
.gr-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.gr-side { position: sticky; top: 90px; padding: 14px; }
.gr-new { width: 100%; justify-content: center; margin-bottom: 12px; }
.gr-items { display: grid; gap: 4px; max-height: 60vh; overflow-y: auto; }
.gr-item { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; border: 1px solid transparent; transition: background .12s; }
.gr-item:hover { background: rgba(255,255,255,.05); }
.gr-item.on { background: color-mix(in srgb, var(--gc) 14%, transparent); border-color: color-mix(in srgb, var(--gc) 45%, transparent); }
.gr-dot { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 8px var(--gc); }
.gr-name { color: var(--gc); font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-meta { font-size: 11.5px; opacity: .6; }
.gr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.grp-plate.gr-big { font-size: 16px; padding: 7px 14px; border-radius: 10px; }
.gr-fields { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; gap: 12px; align-items: end; margin-bottom: 14px; }
.gr-fields label { margin: 0; }
.gr-fields input[type=color] { width: 100%; height: 42px; padding: 3px; }
.gr-ico-f { display: grid; gap: 6px; }
.gr-lbl { font-size: 13px; font-weight: 600; }
.gr-ico-f .grp-pick-btn { height: 42px; }
.gr-del { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); }
.gr-add { display: flex; gap: 10px; margin-bottom: 12px; }
.gr-add input { flex: 1; margin: 0; }
.gr-main .card + .card { margin-top: 20px; }
@media (max-width: 900px) {
  .gr-wrap { grid-template-columns: 1fr; }
  .gr-side { position: static; }
  .gr-fields { grid-template-columns: 1fr 70px; }
}
/* Доступ в админке: галочки по разделам (роли и группы) */
.pm-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 6px 0 12px; font-weight: 700; }
.pm-title > i { color: #fbbf24; }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pm-sec { padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--pc) 7%, rgba(255,255,255,.02)); border: 1px solid color-mix(in srgb, var(--pc) 28%, transparent); }
.pm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pm-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--pc) 22%, transparent); color: var(--pc); font-size: 13px; }
.pm-head b { flex: 1; font-size: 13.5px; }
.pm-cnt { font-size: 11.5px; opacity: .65; }
.pm-all { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: rgba(255,255,255,.06); color: inherit; cursor: pointer; }
.pm-all:hover { background: color-mix(in srgb, var(--pc) 30%, transparent); }
.pm-item { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 6px 4px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.pm-item:hover { background: rgba(255,255,255,.04); }
.pm-item input { position: absolute; opacity: 0; pointer-events: none; }
.pm-sw { position: relative; flex: 0 0 34px; height: 20px; border-radius: 20px; background: rgba(255,255,255,.12); transition: background .15s; }
.pm-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.pm-item input:checked + .pm-sw { background: var(--pc); }
.pm-item input:checked + .pm-sw::after { transform: translateX(14px); }
.pm-item input:focus-visible + .pm-sw { outline: 2px solid var(--pc); outline-offset: 2px; }
.pm-grid.is-ro .pm-item { cursor: default; opacity: .75; }
/* перетаскивание в списках групп и ролей */
.gr-grip { grid-column: 3; grid-row: 1 / span 2; opacity: .35; cursor: grab; font-size: 12px; }
.gr-item[draggable="true"] { grid-template-columns: 12px minmax(0, 1fr) 14px; }
.gr-item[draggable="true"]:hover .gr-grip { opacity: .8; }
.gr-item.is-drag { opacity: .4; }
.gr-item.drop-before { box-shadow: inset 0 2px 0 #9b6dff; }
.gr-item.drop-after { box-shadow: inset 0 -2px 0 #9b6dff; }
.gr-sort { display: grid; gap: 4px; }
.role-badge.gr-big { font-size: 15px; padding: 6px 14px; }
.gr-hw { display: grid; line-height: 1.25; min-width: 0; }
.gr-hw small { font-size: 11px; }
.gr-sort.is-saved .gr-item { transition: box-shadow .3s; box-shadow: 0 0 0 1px rgba(74,222,128,.5); }
/* страница «Нет доступа» (pages/403.php) */
.fb-wrap { display: grid; place-items: center; min-height: 62vh; padding: 30px 0; }
.fb-card { position: relative; width: min(520px, 100%); padding: 40px 30px 32px; text-align: center; border-radius: 24px; background: var(--surface, #1a1530); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; }
.fb-card::before { content: ""; position: absolute; inset: -40% -20% auto; height: 70%; background: radial-gradient(closest-side, rgba(244,63,94,.22), transparent); pointer-events: none; }
.fb-lock { position: relative; display: grid; place-items: center; width: 86px; height: 86px; margin: 0 auto 14px; border-radius: 26px; background: linear-gradient(135deg, #f43f5e, #a855f7); color: #fff; font-size: 34px; box-shadow: 0 14px 36px rgba(244,63,94,.35); animation: fbShake 3.2s ease-in-out infinite; }
.fb-ring { position: absolute; inset: -8px; border-radius: 32px; border: 2px solid rgba(244,63,94,.45); animation: fbRing 2.4s ease-out infinite; }
.fb-ring2 { animation-delay: 1.2s; }
@keyframes fbRing { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
@keyframes fbShake { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-9deg); } 92% { transform: rotate(8deg); } 95% { transform: rotate(-5deg); } }
.fb-code { position: relative; font-family: var(--head-font, inherit); font-size: 15px; font-weight: 800; letter-spacing: 6px; opacity: .45; }
.fb-title { position: relative; margin: 4px 0 10px; font-size: 30px; }
.fb-text { position: relative; margin: 0 0 8px; font-size: 15px; opacity: .9; line-height: 1.6; }
.fb-sec { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 5px 12px; border-radius: 10px; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); color: #fbbf24; font-size: 13px; font-weight: 600; }
.fb-hint { position: relative; margin: 10px 0 22px; font-size: 13px; opacity: .6; }
.fb-acts { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Карточка при наведении: фон Plus «на весь экран» растянут на всю карточку */
.hc-card.hc-full { background: #17122b; }
.hc-card.hc-full::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--hc-bg) center / cover no-repeat; }
.hc-card.hc-full::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(14,10,30,.2) 0%, rgba(14,10,30,.62) 45%, rgba(14,10,30,.9) 100%); }
.hc-card.hc-full > * { position: relative; z-index: 1; }
.hc-card.hc-full .hc-cover, .hc-card.hc-full.is-plus .hc-cover:not([style]) { background: none; }
.hc-card.hc-full .hc-btn { background: rgba(14,10,30,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hc-card.hc-full .hc-btn:hover { background: rgba(168,85,247,.35); }
.hc-card.hc-full .hc-meta, .hc-card.hc-full .hc-name { text-shadow: 0 1px 6px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); }
/* лайк профиля */
.pp-like-form { margin: 0; display: contents; }
.pp-like { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 12px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer;
  color: #f9a8d4; background: rgba(244, 114, 182, .1); border: 1px solid rgba(244, 114, 182, .3); text-decoration: none; transition: background .15s, transform .15s; }
.pp-like:hover { background: rgba(244, 114, 182, .2); color: #fff; }
.pp-like.is-on { color: #fff; background: linear-gradient(135deg, #ec4899, #a855f7); border-color: transparent; }
.pp-like.is-own { cursor: default; }
.pp-like.pop i { animation: ppLikePop .45s ease-out; }
@keyframes ppLikePop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
/* «Игрок дня» */
.potd { display: grid; gap: 10px; position: relative; overflow: hidden; }
.potd::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(250, 204, 21, .18), transparent 70%); pointer-events: none; }
.potd-title { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.potd-title i { color: #facc15; }
.potd-user { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.potd-ava { position: relative; flex: none; }
.potd-ava .potd-img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #facc15, 0 0 18px rgba(250, 204, 21, .35); display: grid; place-items: center; font-size: 20px; }
.potd-ava > i { position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-12deg); color: #facc15; font-size: 14px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.potd-main { display: grid; min-width: 0; }
.potd-main b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.potd-main small { font-size: 12px; }
.potd-foot { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }
.potd-foot i { color: #f472b6; }
.potd-hint { margin: 0; font-size: 12px; color: var(--muted); }

/* fun.css */
/* Колесо Фортуны, ваучер, колокольчик, баланс, платежи в админке, избранные серверы, виджеты главной и боковой панели.
   Базовые правила — классический (старый фиолетовый) вид; переопределения неона начинаются с .neon
   (файл подключается до neon.css, поэтому неоновым правилам нужна большая специфичность). */

html.hl-modal-lock { overflow: hidden; }
@keyframes hlBump { 0% { transform: scale(1); } 40% { transform: scale(1.12); color: #4ade80; } 100% { transform: scale(1); } }
.hl-bump { display: inline-block; animation: hlBump .6s ease; }

/* ---------- Колесо Фортуны ---------- */
.wf-overlay, .hl-promo-overlay {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(5,5,15,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .18s ease;
}
.wf-overlay[hidden], .hl-promo-overlay[hidden] { display: none; }
.wf-overlay.open, .hl-promo-overlay.open { opacity: 1; }
.wf-box {
  position: relative; width: 100%; max-width: 400px; max-height: 92vh; overflow-y: auto; padding: 22px 20px 18px; text-align: center;
  background: linear-gradient(135deg, #15183a, #0a0a1a); border: 1px solid rgba(155,109,255,.4); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  transform: translateY(10px) scale(.98); transition: transform .2s ease;
}
.wf-overlay.open .wf-box, .hl-promo-overlay.open .hl-promo-box { transform: none; }
.wf-close, .hl-promo-close {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #fff; font-size: 18px; cursor: pointer; transition: .2s;
}
.wf-close { position: absolute; top: 14px; right: 14px; z-index: 4; }
.wf-close:hover, .hl-promo-close:hover { background: rgba(255,107,122,.18); border-color: #ff6b7a; }
.wf-title { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.wf-subtitle { font-size: 13px; color: #b794ff; line-height: 1.4; }
.wf-reset-info { font-size: 11px; color: #888aa0; margin-top: 4px; }
.wf { display: grid; justify-items: center; }
.wf > button, .wf > .wf-spin-btn, .wf > .wf-buy-panel, .wf > .wf-history-list { width: 100%; }
.wf-wheel-wrap { position: relative; width: 300px; max-width: 100%; aspect-ratio: 1 / 1; margin: 16px auto 6px; filter: drop-shadow(0 8px 24px rgba(155,109,255,.35)); }
.wf-canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.wf-pointer {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; z-index: 3;
  border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 22px solid #ffd36b; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.wf.spinning .wf-pointer { animation: wfTick .14s ease-in-out infinite alternate; }
@keyframes wfTick { from { transform: translateX(-50%) rotate(-7deg); } to { transform: translateX(-50%) rotate(7deg); } }
.wf-center-dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #b794ff, #6d3fcc); border: 3px solid #15183a; box-shadow: 0 0 0 2px rgba(155,109,255,.5);
}
.wf-result { min-height: 0; margin: 4px 0; font-size: 15px; font-weight: 700; color: #2ecc71; opacity: 0; transition: opacity .25s; }
.wf-result.show { opacity: 1; min-height: 22px; }
.wf-result.err { color: #ff6b7a; font-weight: 600; font-size: 13px; }
.wf-result.err a { color: #ffd36b; font-weight: 700; }
.wf-result.jackpot { color: #ffd36b; font-size: 18px; font-weight: 900; text-shadow: 0 0 14px rgba(255,211,107,.6); animation: wfJp 1s ease 2; }
@keyframes wfJp { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.wf.wf-jp .wf-wheel-wrap { filter: drop-shadow(0 0 28px rgba(255,211,107,.75)); transition: filter .3s; }
.wf-spin-btn {
  display: block; margin-top: 8px; padding: 13px; border: 0; border-radius: 10px; cursor: pointer; text-align: center;
  background: linear-gradient(135deg, #9b6dff, #6d3fcc); color: #fff !important; font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .5px; transition: .2s;
}
.wf-spin-btn:hover:not(:disabled) { background: linear-gradient(135deg, #b794ff, #9b6dff); }
.wf-spin-btn:disabled { opacity: .55; cursor: default; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.wf-credits { font-size: 12px; color: #ffd36b; font-weight: 700; margin-top: 8px; min-height: 0; }
.wf-credits:empty { display: none; }
.wf-buy-toggle {
  margin-top: 8px; padding: 11px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; transition: .2s;
}
.wf-buy-toggle:hover, .wf-buy-toggle.on { filter: brightness(1.08); }
.wf-buy-panel, .wf-history-list { display: none; margin-top: 8px; }
.wf-buy-panel.open, .wf-history-list.open { display: block; }
.wf-pkg {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-bottom: 8px; padding: 11px 14px;
  background: rgba(46,204,113,.1); border: 1px solid rgba(46,204,113,.4); border-radius: 10px; color: #2ecc71; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s;
}
.wf-pkg:hover { background: rgba(46,204,113,.2); }
.wf-pkg:disabled { opacity: .6; }
.wf-pkg b { color: #fff; background: rgba(46,204,113,.25); padding: 3px 9px; border-radius: 7px; }
.wf-history-btn {
  margin-top: 8px; padding: 9px; background: transparent; border: 1px solid rgba(155,109,255,.3); border-radius: 10px;
  color: #b794ff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: .2s;
}
.wf-history-btn:hover, .wf-history-btn.on { background: rgba(155,109,255,.1); }
.wf-history-list { text-align: left; max-height: 160px; overflow-y: auto; }
.wf-hist-row {
  display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; margin-bottom: 5px;
  background: rgba(155,109,255,.06); border: 1px solid rgba(155,109,255,.18); border-radius: 8px; font-size: 12px;
}
.wf-hist-date { color: #888aa0; }
.wf-hist-date em { font-style: normal; color: #b794ff; font-size: 10.5px; margin-left: 4px; }
.wf-hist-prize { color: #2ecc71; font-weight: 700; }
.wf-hist-empty { color: #888aa0; font-size: 12px; text-align: center; padding: 10px; }
.wf-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; font-weight: 600; color: #b794ff; }
.wf-note { margin-top: 10px; font-size: 12.5px; color: #a8aec5; }
@media (max-width: 420px) { .wf-wheel-wrap { width: 260px; } .wf-box { padding: 18px 14px 14px; } }

/* страница /wheel */
.wf-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.wf-page-main { text-align: center; padding: 26px 26px 22px; }
.wf-page-main .wf { max-width: 420px; margin: 0 auto; }
.wf-page-main .wf-wheel-wrap { width: 380px; }
.wf-page-side { display: grid; gap: 16px; }
.wf-page-side .card + .card { margin-top: 0; }
.wf-prizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wf-prizes span { display: grid; gap: 1px; padding: 7px 6px; border-radius: 9px; background: rgba(155,109,255,.08); border: 1px solid rgba(155,109,255,.16); text-align: center; }
.wf-prizes b { font-size: 13.5px; color: #fff; }
.wf-prizes small { font-size: 10.5px; color: #888aa0; }
.wf-prizes span.big b { color: #c9b3ff; }
.wf-prizes span.jp { background: linear-gradient(135deg, rgba(122,90,18,.55), rgba(122,90,18,.25)); border-color: rgba(255,211,107,.5); }
.wf-prizes span.jp b { color: #ffd36b; }
.wf-win-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; font-size: 13px; }
.wf-win-row + .wf-win-row { border-top: 1px solid rgba(155,109,255,.08); }
.wf-win-row a { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-win-row b { color: #2ecc71; }
.wf-win-row b.jp { color: #ffd36b; }
@media (max-width: 1100px) { .wf-page { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .wf-page-main { padding: 18px 14px; } .wf-page-main .wf-wheel-wrap { width: 280px; } }

/* неон */
.neon .wf-box, .neon .hl-promo-box {
  background: linear-gradient(180deg, rgba(20,22,38,.98), rgba(9,10,18,.98)); border: 1px solid var(--line2); border-radius: 22px;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(168,85,247,.08) inset;
}
.neon .wf-box::before, .neon .hl-promo-box::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 1px; background: var(--grad); opacity: .9; }
.neon .hl-promo-box { position: relative; }
.neon .wf-close, .neon .hl-promo-close { border-radius: 10px; border-color: var(--line2); }
.neon .wf-title { font: 600 19px var(--head-font); letter-spacing: -.2px; }
.neon .wf-subtitle { color: #c4b5fd; }
.neon .wf-reset-info { color: var(--muted2); }
.neon .wf-wheel-wrap { filter: drop-shadow(0 0 26px rgba(34,211,238,.28)) drop-shadow(0 10px 30px rgba(168,85,247,.35)); }
.neon .wf-center-dot { background: radial-gradient(circle at 35% 30%, #67e8f9, #7c3aed); border-color: #0b0c16; box-shadow: 0 0 0 2px rgba(34,211,238,.5), 0 0 16px rgba(34,211,238,.6); }
.neon .wf-pointer { border-top-color: #ffd36b; filter: drop-shadow(0 0 8px rgba(255,211,107,.7)); }
.neon .wf-spin-btn { background: var(--grad); color: #05060b !important; border-radius: 13px; box-shadow: 0 10px 30px -10px rgba(34,211,238,.6); }
.neon .wf-spin-btn:hover:not(:disabled) { background: var(--grad); filter: brightness(1.12); }
.neon .wf-spin-btn:disabled { background: rgba(255,255,255,.06); color: #c9cdd9 !important; box-shadow: none; opacity: 1; border: 1px solid var(--line); }
.neon .wf-buy-toggle { border-radius: 13px; background: linear-gradient(90deg, #10b981, #34d399); color: #052e1c; }
.neon .wf-pkg { border-radius: 12px; background: rgba(52,211,153,.07); border-color: rgba(52,211,153,.35); color: #6ee7b7; }
.neon .wf-pkg b { background: rgba(52,211,153,.2); }
.neon .wf-history-btn { border-radius: 13px; border-color: var(--line2); color: #c9cdd9; }
.neon .wf-history-btn:hover, .neon .wf-history-btn.on { background: rgba(255,255,255,.05); color: #fff; }
.neon .wf-hist-row { background: rgba(255,255,255,.03); border-color: var(--line); border-radius: 10px; }
.neon .wf-hist-prize { color: var(--green); }
.neon .wf-all { color: var(--accent2); }
.neon .wf-prizes span { background: rgba(255,255,255,.03); border-color: var(--line); border-radius: 12px; }
.neon .wf-prizes span.big b { color: var(--accent2); }
.neon .wf-prizes span.jp { background: linear-gradient(135deg, rgba(154,114,22,.45), rgba(92,67,12,.25)); border-color: rgba(255,211,107,.45); }
.neon .wf-win-row + .wf-win-row { border-top-color: var(--line); }
.neon .wf-win-row b { color: var(--green); }

/* ---------- Ваучер ---------- */
.hl-promo-box {
  width: 100%; max-width: 400px; margin: 0; overflow: hidden; background: linear-gradient(135deg, #15183a, #0a0a1a);
  border: 1px solid rgba(155,109,255,.4); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); transform: translateY(10px) scale(.98); transition: transform .2s ease;
}
.hl-promo-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(155,109,255,.2); font-size: 16px; font-weight: 700; color: #fff; }
.hl-promo-head span i { color: #b794ff; margin-right: 6px; }
.hl-promo-body { padding: 20px; }
.hl-promo-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #b794ff; font-weight: 600; margin-bottom: 10px; }
.hl-promo-label svg { width: 16px; height: 16px; fill: currentColor; }
input.hl-promo-input {
  width: 100%; padding: 12px 14px; background: rgba(20,15,45,.7); border: 1px solid rgba(155,109,255,.3); border-radius: 10px;
  color: #fff; font-size: 15px; outline: none; text-transform: uppercase; letter-spacing: 1px; transition: .2s;
}
input.hl-promo-input::placeholder { letter-spacing: .5px; color: #6c7290; }
input.hl-promo-input:focus { border-color: #9b6dff; background: rgba(20,15,45,.95); }
.hl-promo-btn {
  width: 100%; margin-top: 14px; padding: 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #9b6dff, #6d3fcc); color: #fff; font: inherit; font-size: 14px; font-weight: 700; transition: .2s;
}
.hl-promo-btn:hover { background: linear-gradient(135deg, #b794ff, #9b6dff); }
.hl-promo-btn:disabled { opacity: .6; cursor: default; }
.hl-promo-result { display: none; margin-top: 14px; padding: 10px 14px; border-radius: 10px; font-size: 13px; }
.hl-promo-result.show { display: block; }
.hl-promo-result.ok { background: rgba(46,204,113,.15); border: 1px solid rgba(46,204,113,.4); color: #2ecc71; }
.hl-promo-result.err { background: rgba(255,107,122,.12); border: 1px solid rgba(255,107,122,.4); color: #ff6b7a; }
.neon .hl-promo-head { border-bottom-color: var(--line); font-family: var(--head-font); font-weight: 600; font-size: 15px; }
.neon .hl-promo-head span i, .neon .hl-promo-label { color: var(--accent2); }
.neon .hl-promo-box input.hl-promo-input, .neon .bal-voucher input.hl-promo-input { background: rgba(0,0,0,.4); border: 1px solid var(--line2); border-radius: 13px; letter-spacing: 1.5px; font-weight: 700; }
.neon .hl-promo-box input.hl-promo-input:focus, .neon .bal-voucher input.hl-promo-input:focus { border-color: rgba(34,211,238,.6); }
.neon .hl-promo-btn { background: var(--grad); color: #05060b; border-radius: 13px; font-weight: 800; box-shadow: 0 10px 30px -10px rgba(34,211,238,.55); }
.neon .hl-promo-btn:hover { background: var(--grad); filter: brightness(1.1); }
.neon .hl-promo-result { border-radius: 12px; }

/* ---------- Меню профиля ---------- */
.userbox .dd-right > .dd-menu { max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; }
.dd-menu a .count { margin-left: auto; }
.dd-right > .dd-menu .dd-promo, .dd-right > .dd-menu .dd-promo i { color: #b794ff; font-weight: 700; }
.dd-right > .dd-menu .dd-wheel, .dd-right > .dd-menu .dd-wheel i { color: #ffd36b; font-weight: 700; }
.dd-right > .dd-menu .dd-money, .dd-right > .dd-menu .dd-money i { color: #2ecc71; font-weight: 700; }
.dd-right > .dd-menu .dd-alert, .dd-right > .dd-menu .dd-alert i { color: #ff8a65; }
.dd-right > .dd-menu .dd-sep-thick { height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); margin: 3px 2px; }
.dd-wheel .count { background: #d4a21a; color: #1a1205; }
.neon .dd-right > .dd-menu .dd-promo, .neon .dd-right > .dd-menu .dd-promo i { color: #d8b4fe; }
.neon .dd-right > .dd-menu .dd-wheel, .neon .dd-right > .dd-menu .dd-wheel i { color: #ffd36b; }
.neon .dd-right > .dd-menu .dd-sep-thick { background: linear-gradient(90deg, rgba(34,211,238,.4), rgba(168,85,247,.4)); height: 2px; margin: 4px 2px; }
.neon .dd-wheel .count { background: #ffd36b; color: #1a1205; }

/* ---------- Колокольчик ---------- */
@keyframes bellRing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
.bell-btn.ring i { animation: bellRing .9s ease; transform-origin: 50% 10%; }
.bell-count[hidden], .count[hidden] { display: none !important; }
.notif-panel { width: 400px; }
.np-list { max-height: 60vh; }
.np-list:empty { display: none; }
.np-empty[hidden] { display: none; }
.np-actions .np-clear { color: #ff8a95; border-color: rgba(255,107,122,.35); }
.np-actions .np-clear:hover { background: rgba(255,107,122,.14); color: #fff; }
.np-actions button[hidden] { display: none; }
.np-item { border-radius: 12px; padding: 12px 30px 12px 14px; transition: opacity .2s, transform .2s; }
.np-item.removing { opacity: .3; transform: translateX(10px); }
.np-item:not(.read)::before { left: 0; top: 10px; bottom: 10px; width: 3px; height: auto; border-radius: 0 3px 3px 0; background: #9b6dff; }
.np-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; color: #fff; font-size: 15px; background: linear-gradient(135deg, #9b6dff, #6d3fcc); box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); }
.np-k-message .np-icon { background: linear-gradient(135deg, #4a9eff, #2b6fc7); }
.np-k-shop .np-icon { background: linear-gradient(135deg, #ffb547, #cf8420); }
.np-k-money .np-icon { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.np-k-friend .np-icon { background: linear-gradient(135deg, #ff6b9d, #c63cff); }
.np-k-warn .np-icon { background: linear-gradient(135deg, #ff6b7a, #c0392b); }
.np-k-case .np-icon { background: linear-gradient(135deg, #b794ff, #9b6dff); }
.np-k-plus .np-icon { background: linear-gradient(135deg, #f5c542, #e0861a); }
.np-k-wheel .np-icon { background: linear-gradient(135deg, #ffd36b, #b98a14); color: #2a1d02; }
.np-k-wall .np-icon { background: linear-gradient(135deg, #22d3ee, #0e7490); }
.np-cat { text-transform: uppercase; font-size: 10.5px; letter-spacing: .5px; color: #b794ff; }
.np-text { font-size: 13px; }
.np-date { font-size: 11px; display: flex; align-items: center; gap: 6px; }
.np-go { font-size: 10px; color: #6c7290; transition: transform .15s; }
.np-item:hover .np-go { transform: translateX(3px); color: #b794ff; }
.np-item.read { opacity: .55; }
.np-item.read .np-body { opacity: 1; }
.np-item.read .np-icon { filter: grayscale(1); box-shadow: none; }
.np-item.read:hover { opacity: .85; }
.neon .np-item:not(.read)::before { width: 3px; height: auto; border-radius: 0 3px 3px 0; top: 10px; bottom: 10px; left: 0; background: var(--grad); box-shadow: 0 0 8px rgba(34,211,238,.6); }
.neon .np-icon { color: #fff; border-radius: 12px; background: linear-gradient(135deg, #a855f7, #6d28d9); }
.neon .np-k-message .np-icon { background: linear-gradient(135deg, #4a9eff, #2b6fc7); }
.neon .np-k-shop .np-icon { background: linear-gradient(135deg, #ffb547, #cf8420); }
.neon .np-k-money .np-icon { background: linear-gradient(135deg, #34d399, #059669); }
.neon .np-k-friend .np-icon { background: linear-gradient(135deg, #ff6b9d, #c63cff); }
.neon .np-k-warn .np-icon { background: linear-gradient(135deg, #fb7185, #be123c); }
.neon .np-k-case .np-icon { background: linear-gradient(135deg, #c084fc, #7c3aed); }
.neon .np-k-plus .np-icon { background: linear-gradient(135deg, #fcd34d, #f59e0b); color: #2a1d02; }
.neon .np-k-wheel .np-icon { background: linear-gradient(135deg, #ffd36b, #b98a14); color: #2a1d02; }
.neon .np-k-wall .np-icon { background: linear-gradient(135deg, #22d3ee, #0e7490); }
.neon .np-cat { color: var(--accent2); }
.neon .np-actions .np-clear { color: #fda4af; border-color: rgba(244,63,94,.35); }
/* страница /notifications */
.np-page { padding: 10px; }
.np-page .np-list { max-height: none; overflow: visible; padding: 0; gap: 8px; }
.np-page .np-item { padding: 14px 40px 14px 16px; }
.np-page a.np-body { display: grid; gap: 3px; min-width: 0; color: inherit; flex: 1; }
.np-page .np-del { top: 50%; margin-top: -11px; right: 12px; width: 22px; height: 22px; }
@media (max-width: 560px) {
  .notif-panel { width: calc(100vw - 20px); }
}

/* ---------- Баланс ---------- */
.bal { display: grid; gap: 16px; }
.bal .card + .card { margin-top: 0; }
.bal-title { margin: 6px 0 0; display: flex; align-items: center; gap: 10px; }
.bal-title i { color: #2ecc71; font-size: .85em; }
.bal-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid; }
.bal-banner > i { font-size: 26px; }
.bal-banner b { display: block; font-size: 15px; color: #fff; }
.bal-banner span { font-size: 13px; color: #c8c9e0; }
.bal-banner.ok { background: linear-gradient(90deg, rgba(46,204,113,.18), rgba(46,204,113,.05)); border-color: rgba(46,204,113,.45); }
.bal-banner.ok > i { color: #2ecc71; }
.bal-banner.err { background: linear-gradient(90deg, rgba(255,107,122,.18), rgba(255,107,122,.05)); border-color: rgba(255,107,122,.45); }
.bal-banner.err > i { color: #ff6b7a; }
.bal-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bal-tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; color: var(--text) !important; background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .2s; min-width: 0; }
a.bal-tile:hover { border-color: var(--line2); transform: translateY(-2px); }
.bal-tile > span:last-child { display: grid; min-width: 0; }
.bal-tile small { color: var(--muted); font-size: 12px; font-weight: 600; }
.bal-tile b { font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bal-ico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; color: #fff; background: linear-gradient(135deg, #9b6dff, #6d3fcc); }
.bal-tile.money .bal-ico { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.bal-tile.money b { color: #2ecc71; }
.bal-tile.disc .bal-ico { background: linear-gradient(135deg, #ffb547, #cf8420); }
.bal-tile.disc b { color: #ffc36b; }
.bal-tile.hist .bal-ico { background: linear-gradient(135deg, #4a9eff, #2b6fc7); }
.bal-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bal-aside { display: grid; gap: 16px; }
.bal-notice { display: flex; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: rgba(255,193,7,.08); border: 1px solid rgba(255,193,7,.3); color: #f3e3b0; font-size: 13px; line-height: 1.5; }
.bal-notice > i { color: #ffc107; margin-top: 3px; }
.bal-notice a { color: #ffd36b; font-weight: 700; text-decoration: underline; }
.bal-notice b { color: #fff; }
.bal-merchant { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bal-fk { padding: 6px 12px; border-radius: 9px; background: linear-gradient(135deg, #1f6feb, #0b4fb3); color: #fff; font-weight: 800; letter-spacing: .3px; font-size: 13px; }
.bal-merchant small { color: var(--muted); font-size: 12px; }
.bal-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.bal-amount { position: relative; }
.bal-amount input[type=number] { width: 100%; padding: 13px 40px 13px 16px; font-size: 22px; font-weight: 800; -moz-appearance: textfield; }
.bal-amount input::-webkit-outer-spin-button, .bal-amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bal-amount span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 800; color: var(--muted); pointer-events: none; }
.bal-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.bal-preset { position: relative; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line2); background: rgba(155,109,255,.08); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: .15s; }
.bal-preset:hover { background: rgba(155,109,255,.18); }
.bal-preset.on { background: linear-gradient(135deg, #9b6dff, #6d3fcc); border-color: transparent; color: #fff; }
.bal-preset em { position: absolute; top: -8px; right: -6px; padding: 1px 5px; border-radius: 6px; background: #2ecc71; color: #062b15; font-style: normal; font-size: 9.5px; font-weight: 800; }
.bal-preview { padding: 11px 14px; border-radius: 11px; background: rgba(46,204,113,.07); border: 1px dashed rgba(46,204,113,.35); font-size: 13.5px; color: #c8c9e0; }
.bal-preview b { color: #2ecc71; font-size: 15px; }
.bal-preview em { font-style: normal; color: #ffd36b; font-weight: 700; }
.bal-preview small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.bal-go { width: 100%; margin-top: 12px; padding: 13px; border: 0; border-radius: 11px; cursor: pointer; background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; font: inherit; font-size: 15px; font-weight: 800; transition: .2s; }
.bal-go:hover:not(:disabled) { filter: brightness(1.08); }
.bal-go:disabled { opacity: .5; cursor: not-allowed; }
.bal-off { margin: 10px 0 0; font-size: 12.5px; color: #ff9aa5; }
.bal-agree { margin: 10px 0 0; font-size: 11.5px; color: var(--muted2); line-height: 1.5; }
.bal-agree a { color: var(--muted); text-decoration: underline; }
.bal-bonus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bal-bonus { display: grid; gap: 2px; padding: 12px 8px; border-radius: 12px; text-align: center; background: linear-gradient(135deg, rgba(245,197,66,.16), rgba(245,197,66,.04)); border: 1px solid rgba(245,197,66,.35); }
.bal-bonus b { font-size: 19px; font-weight: 900; color: #ffd36b; }
.bal-bonus small { font-size: 11.5px; color: #c8c9e0; }
.bal-voucher-row { display: grid; gap: 10px; }
.bal-voucher-row .hl-promo-btn { margin: 0; }
.bal-table { width: 100%; }
.bal-table .r { text-align: right; }
.bal-op { display: flex; align-items: center; gap: 11px; min-width: 0; }
.bal-op > i { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); font-size: 13px; }
.bal-op > span { display: grid; min-width: 0; }
.bal-op b { font-size: 13px; }
.bal-op small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.bal-sum { font-weight: 800; white-space: nowrap; }
.bal-sum.plus { color: #2ecc71; }
.bal-sum.minus { color: #ff8a95; }
.bal-history .pager { margin-top: 12px; }
@media (max-width: 1200px) { .bal-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .bal-tiles { grid-template-columns: 1fr 1fr; }
  .bal-tile.hist { grid-column: 1 / -1; }
  .bal-tile { padding: 12px; gap: 10px; }
  .bal-ico { flex-basis: 36px; width: 36px; height: 36px; font-size: 15px; }
  .bal-tile b { font-size: 16px; }
  .bal-table th:nth-child(3), .bal-table td:nth-child(3) { display: none; }
  .bal-op small { max-width: 170px; }
}
.neon .bal-title { font-family: var(--head-font); }
.neon .bal-title i { color: var(--green); }
.neon .bal-tile { background: var(--tile); border-color: var(--line); border-radius: 18px; }
.neon a.bal-tile:hover { border-color: rgba(168,85,247,.4); }
.neon .bal-tile b { font-family: var(--head-font); font-weight: 600; }
.neon .bal-tile.money b { color: var(--green); }
.neon .bal-ico { border-radius: 13px; }
.neon .bal-tile.money .bal-ico { background: linear-gradient(135deg, #34d399, #059669); }
.neon .bal-banner { border-radius: 18px; }
.neon .bal-notice { border-radius: 14px; background: rgba(250,204,21,.06); border-color: rgba(250,204,21,.25); }
.neon .bal-amount input[type=number] { font-family: var(--head-font); font-weight: 600; border-radius: 14px; padding: 14px 40px 14px 16px; }
.neon .bal-preset { border-radius: 11px; border-color: var(--line2); background: rgba(255,255,255,.04); }
.neon .bal-preset:hover { background: rgba(255,255,255,.09); }
.neon .bal-preset.on { background: var(--grad); color: #05060b; }
.neon .bal-preview { border-radius: 13px; background: rgba(52,211,153,.06); border-color: rgba(52,211,153,.3); }
.neon .bal-preview b { color: var(--green); }
.neon .bal-go { border-radius: 14px; background: linear-gradient(90deg, #10b981, #34d399); color: #04210f; box-shadow: 0 12px 30px -12px rgba(52,211,153,.7); }
.neon .bal-bonus { border-radius: 14px; }
.neon .bal-bonus b { font-family: var(--head-font); font-weight: 600; }

/* ---------- Админка → Платежи ---------- */
.ap-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ap-stats .card + .card { margin-top: 0; }
.ap-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.ap-stat > i { font-size: 22px; width: 28px; text-align: center; }
.ap-stat span { display: grid; }
.ap-stat small { color: var(--muted); font-size: 12px; }
.ap-stat b { font-size: 18px; }
.ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ap-grid .card + .card { margin-top: 0; }
.ap-card h3 { margin-top: 0; }
.ap-sub { font-weight: 700; font-size: 13px; margin: 4px 0 6px; }
.ap-sub .hint, .ap-card .hint { font-weight: 400; }
.ap-tiers { display: grid; gap: 6px; margin-bottom: 10px; }
.ap-tier { display: grid; grid-template-columns: 1fr 1fr 80px; gap: 6px; }
.ap-packs .ap-tier { grid-template-columns: 64px 80px 100px 1fr; }
.ap-tier.head span { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.ap-tier input, .ap-tier select { width: 100%; min-width: 0; }
.ap-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ap-filter select, .ap-filter input { width: auto; flex: 0 1 240px; }
@media (max-width: 1000px) { .ap-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ap-packs .ap-tier { grid-template-columns: 50px 64px 80px 1fr; } }

/* ---------- Мониторинг: избранное, фильтры, скелетон ---------- */
.mon-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mon-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mon-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; border: 1px solid rgba(155,109,255,.25); background: rgba(255,255,255,.03); color: #a8aec5; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .15s; }
.mon-chip i { font-size: 12px; }
.mon-chip:hover { color: #fff; border-color: rgba(155,109,255,.5); }
.mon-chip.active { background: rgba(155,109,255,.2); border-color: rgba(155,109,255,.6); color: #fff; }
.mon-chip[data-mon-chip="fav"].active i { color: #ff5c8a; }
.hl-server-card button.hl-card-heart { display: grid; place-items: center; width: 30px; height: 30px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; font: inherit; font-size: 16px; line-height: 1; z-index: 3;
  background: rgba(5,6,20,.45); color: rgba(255,255,255,.6); filter: none; transition: transform .15s, color .15s, background .15s; }
.hl-server-card button.hl-card-heart:hover { transform: scale(1.12); color: #ff7aa0; }
.hl-server-card.fav button.hl-card-heart, .neon .hl-server-card.fav button.hl-card-heart { color: #ff4d7d; background: rgba(255,77,125,.18); text-shadow: 0 0 10px rgba(255,77,125,.8); }
button.hl-card-heart.pop { animation: favPop .35s ease; }
@keyframes favPop { 50% { transform: scale(1.35); } }
.hl-card-img.is-loading { background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.03) 75%); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
.hl-card-img.is-loading .hl-card-img-pic { opacity: 0; }
.hl-card-img-pic { transition: opacity .3s; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.hl-filter-empty { grid-column: 1 / -1; }
.neon .mon-chip { border-radius: 12px; border-color: var(--line); color: var(--muted); }
.neon .mon-chip.active { background: rgba(168,85,247,.16); border-color: rgba(168,85,247,.5); color: #fff; }
@media (prefers-reduced-motion: reduce) { .hl-card-img.is-loading, .bell-btn.ring i, .wf-result.jackpot { animation: none; } }

/* ---------- Наши услуги (cardstore) в неоне ---------- */
.neon .cs-head h1 { font-family: var(--head-font); font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.neon .cs-head p { color: var(--muted); }
.neon .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.neon .cs-card { flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: 22px; background: var(--tile), var(--surface); border: 1px solid var(--line); box-shadow: none; }
.neon .cs-card:hover { border-color: rgba(168,85,247,.45); box-shadow: 0 24px 60px -30px rgba(168,85,247,.7); }
.neon .cs-img { flex: 0 0 auto; width: 100%; height: 170px; border-radius: 0; position: relative; }
.neon .cs-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(24, 18, 42,.85)); }
.neon .cs-info { padding: 16px 20px 20px; margin-top: -34px; position: relative; z-index: 1; }
.neon .cs-info h2 { font: 600 19px var(--head-font); }
.neon .cs-info p { color: var(--muted); font-size: 13.5px; }
.neon .cs-btn { background: var(--grad); color: #05060b; border-radius: 12px; font-weight: 800; box-shadow: 0 10px 26px -10px rgba(34,211,238,.6); }
.neon .cs-badge { z-index: 2; background: linear-gradient(90deg, #f472b6, #f59e0b); }
@media (max-width: 760px) { .neon .cs-grid { grid-template-columns: 1fr; } .neon .cs-card { text-align: left; } }
.np-page .np-item.read { opacity: .82; }
.np-page .np-item.read .np-icon { filter: grayscale(.65); }

/* ---------- Боковая панель: онлайн, статистика, полезное, кейсы, «Рекомендуем» ---------- */
.su-online { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; background: rgba(10,12,32,.55); border: 1px solid var(--line); color: var(--text) !important; }
.su-online > span:last-child { display: grid; }
.su-online small { color: var(--muted); font-size: 11.5px; }
.su-online b { font-size: 13px; }
.pulse { position: relative; flex: 0 0 12px; width: 12px; height: 12px; margin: 0 4px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 0 rgba(46,204,113,.6); animation: hlPulse 1.8s infinite; }
.pulse.off { background: #6c7290; animation: none; }
@keyframes hlPulse { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.55); } 70% { box-shadow: 0 0 0 10px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }
.ss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-grid div { display: grid; gap: 2px; padding: 10px; border-radius: 11px; text-align: center; background: rgba(155,109,255,.07); border: 1px solid rgba(155,109,255,.14); }
.ss-grid b { font-size: 20px; font-weight: 800; }
.ss-grid b.on { color: #2ecc71; }
.ss-grid small { font-size: 11px; color: var(--muted); }
.seg button span, .seg button b { font-size: 10.5px; opacity: .7; margin-left: 3px; }
.ava-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.ava-strip a { display: block; border-radius: 10px; box-shadow: 0 0 0 2px var(--c, transparent); transition: transform .15s; }
.ava-strip a:hover { transform: translateY(-2px); }
.as-ava { display: block; width: 36px; height: 36px; border-radius: 10px; object-fit: cover; font-size: 14px; }
.as-more { display: grid !important; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(155,109,255,.14); color: var(--accent2); font-size: 11.5px; font-weight: 800; box-shadow: none !important; }
.donor-fire { font-size: 12px; margin-left: 2px; }
.side-case { display: flex !important; align-items: center; gap: 12px; padding: 16px !important; color: #fff !important; overflow: hidden; position: relative;
  background: linear-gradient(90deg, rgba(12,8,32,.92) 30%, rgba(155,109,255,.35)), url(/assets/img/slides/anime2.jpg) center 30% / cover !important; border-color: rgba(155,109,255,.45) !important; }
.side-case .sc-ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; background: rgba(0,0,0,.35); color: #ffd36b; }
.side-case > span:nth-child(2) { display: grid; flex: 1; min-width: 0; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.side-case b { font-size: 15px; }
.side-case small { font-size: 12px; color: #f1e9ff; }
.side-case > i { opacity: .8; }
.side-case:hover > i { transform: translateX(3px); }
.side-info a { display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-size: 13px; color: var(--text); border-radius: 8px; }
.side-info a + a { border-top: 1px solid rgba(155,109,255,.08); }
.side-info a i { width: 18px; text-align: center; color: var(--accent); }
.side-info a:hover { color: #fff; background: rgba(155,109,255,.07); }
.side-promo { position: relative; display: grid; gap: 6px; margin-top: 16px; padding: 18px 16px 16px; border-radius: 14px; color: #fff !important; overflow: hidden;
  background: linear-gradient(160deg, #2a0f3d, #140a26); border: 2px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 2px rgba(255,51,102,.55), 0 0 24px rgba(255,204,0,.18); }
.side-promo::before { content: ""; position: absolute; inset: -2px; border-radius: 15px; padding: 2px; background: linear-gradient(135deg, #ff3366, #ffcc00, #ff3366); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.sp-badge { justify-self: start; padding: 3px 9px; border-radius: 7px; background: linear-gradient(90deg, #ff3366, #ff7a18); font-size: 10.5px; font-weight: 800; letter-spacing: .4px; }
.sp-kicker { font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #ffcc00; font-weight: 800; }
.side-promo b { font-size: 15.5px; line-height: 1.3; }
.sp-text { font-size: 12px; color: #d9cbe8; }
.sp-btn { justify-self: start; margin-top: 6px; padding: 8px 14px; border-radius: 10px; background: linear-gradient(90deg, #ffcc00, #ff9f1a); color: #2a1300; font-weight: 800; font-size: 12.5px; transition: filter .15s; }
.side-promo:hover .sp-btn { filter: brightness(1.1); }
.neon .su-online { background: rgba(255,255,255,.03); border-color: var(--line); border-radius: 14px; }
.neon .pulse { background: var(--green); }
.neon .ss-grid div { background: rgba(255,255,255,.03); border-color: var(--line); border-radius: 13px; }
.neon .ss-grid b { font-family: var(--head-font); font-weight: 600; }
.neon .ss-grid b.on { color: var(--green); }
.neon .as-ava, .neon .ava-strip a { border-radius: 50%; }
.neon .as-more { border-radius: 50%; background: rgba(255,255,255,.06); color: var(--accent2); }
.neon .side-case { border-radius: var(--radius); }
.neon .side-info a i { color: var(--cyan); }
.neon .side-info a + a { border-top-color: var(--line); }
.neon .side-promo { border-radius: 20px; background: linear-gradient(160deg, rgba(244,114,182,.16), rgba(12,13,22,.96) 55%); box-shadow: 0 0 0 1px rgba(244,114,182,.5), 0 0 30px -6px rgba(244,114,182,.5), 0 0 40px -14px rgba(250,204,21,.5); }
.neon .side-promo::before { border-radius: 21px; background: linear-gradient(135deg, #f472b6, #facc15, #a855f7); }

/* ---------- Баннер главной («🎉 Открытие») ---------- */
.hl-banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 16px; padding: 20px 24px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(120deg, #1a0f2e, #3d1a6b); border: 1px solid rgba(155,109,255,.45); box-shadow: 0 12px 34px -14px rgba(155,109,255,.6); }
.hl-banner::after { content: "🎉"; position: absolute; right: 190px; top: -14px; font-size: 90px; opacity: .08; transform: rotate(-12deg); pointer-events: none; }
.hl-banner-in { display: grid; gap: 6px; min-width: 0; position: relative; z-index: 1; }
.hl-banner-tag { justify-self: start; padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,.12); color: #ffd36b; font-size: 12px; font-weight: 800; }
.hl-banner-title { margin: 0; font-size: 22px; color: #fff; line-height: 1.2; }
.hl-banner-title span { background: linear-gradient(90deg, #ffd36b, #ff7ab8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl-banner-text { margin: 0; color: #d9cbe8; font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.hl-banner-text .dot { opacity: .5; }
.hl-banner-ip { padding: 4px 10px; border-radius: 8px; border: 1px dashed rgba(255,211,107,.6); background: rgba(0,0,0,.25); color: #ffd36b; font: 700 13px ui-monospace, Consolas, monospace; cursor: pointer; transition: .15s; }
.hl-banner-ip:hover { background: rgba(255,211,107,.15); }
.hl-banner-ip.copied { color: #2ecc71; border-color: rgba(46,204,113,.7); }
.hl-banner-btn { flex: 0 0 auto; position: relative; z-index: 1; padding: 11px 20px; border-radius: 30px; background: #fff; color: #2a1250 !important; font-weight: 800; white-space: nowrap; transition: transform .15s, box-shadow .15s; box-shadow: 0 8px 22px -8px rgba(255,255,255,.6); }
.hl-banner-btn:hover { transform: translateY(-2px); }
@media (max-width: 640px) { .hl-banner { flex-direction: column; align-items: stretch; padding: 18px; } .hl-banner-btn { text-align: center; } .hl-banner::after { right: 10px; } .hl-banner-title { font-size: 19px; } }
.nx-banner { grid-column: 1 / -1; }
.nx-banner .hl-banner { margin: 0; }
.neon .hl-banner { border-radius: 22px; background: radial-gradient(500px 200px at 85% 50%, rgba(168,85,247,.35), transparent 70%), linear-gradient(120deg, rgba(34,211,238,.12), rgba(13,14,23,.95) 45%); border-color: var(--line2); box-shadow: none; }
.neon .hl-banner::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: var(--grad); }
.neon .hl-banner-title { font: 600 22px var(--head-font); }
.neon .hl-banner-tag { background: rgba(250,204,21,.12); border: 1px solid rgba(250,204,21,.35); }
.neon .hl-banner-ip { border-radius: 10px; border-color: rgba(103,232,249,.5); color: var(--accent2); }
.neon .hl-banner-btn { border-radius: 14px; background: var(--grad); color: #05060b !important; box-shadow: 0 10px 30px -10px rgba(34,211,238,.6); }

/* ---------- Главная (неон): кто на сайте, топ, статистика ---------- */
.nx-online { grid-column: span 6; }
.nx-top { grid-column: span 3; }
.nx-sitestats { grid-column: span 3; }
.nx-online .nx-t-title { flex-wrap: wrap; gap: 8px; }
.nx-seg { margin: 0; font-family: "Manrope", sans-serif; }
.nx-seg button { flex: 0 0 auto; padding: 6px 10px; }
.nx-online .as-ava { width: 40px; height: 40px; }
.nx-online .as-more { width: 40px; height: 40px; }
.nx-top .mu-stats, .nx-row-main .mu-stats { display: flex; gap: 10px; color: #f472b6; font-weight: 700; }
.nx-top .mu-stats span { display: inline-flex; gap: 4px; align-items: center; }
.nx-sitestats .ss-grid div { padding: 12px 6px; }
@media (max-width: 1100px) { .nx-online { grid-column: 1 / -1; } .nx-top, .nx-sitestats { grid-column: span 6; } }
@media (max-width: 700px) { .nx-top, .nx-sitestats { grid-column: 1 / -1; } }

/* ---------- Главная (классика): новости с картинками ---------- */
.news-card.has-img { grid-template-rows: auto; padding: 0 0 14px; overflow: hidden; }
.news-card.has-img > *:not(.news-card-img) { padding: 0 14px; }
.news-card-img { display: block; height: 130px; background: #1d1b3a center 25% / cover no-repeat; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.news-card.has-img .fa-clock { margin-right: 4px; }
.as-ava.ava-letter { display: grid; place-items: center; }
.mini-user .donor-fire { display: inline; }
.neon .side-info a { color: #c9cdd9; }
.neon .side-info a:hover { color: #fff; background: rgba(255,255,255,.04); }
.card-title.fun-head { margin: 0 0 16px !important; padding: 0 0 12px !important; }
/* Меценат с печатью Profile Plus: ник, печать и огонёк в одну строку. */
.mini-user.donor > span:not(.mu-ava) { min-width: 0; flex: 1; }
.mini-user.donor b { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.mini-user.donor b .plus-nick-w { min-width: 0; flex-wrap: nowrap; }
.mini-user.donor b .donor-fire { flex: none; }
/* style.css делает все span внутри .mini-user сеткой — возвращаем строчную раскладку нику с печатью Plus. */
.mini-user b .plus-nick-w, .mini-user b .plus-seal { display: inline-flex; }
.mini-user b .plus-nick { display: inline-block; }

/* grow.css */
/* Реферальная программа, ежедневный стрик и окно пополнения (идеи cs2bgd31).
   Базовые правила — классический вид; переопределения неона начинаются с .neon. Подключается после fun.css в обоих оформлениях. */

/* ---------- общее ---------- */
.rf-ava { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; font-size: 12px; }
.rf-user { display: flex; align-items: center; gap: 9px; }
td.right, th.right { text-align: right; }
.rf-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rf-chips a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); font-size: 12.5px; font-weight: 700; text-decoration: none; transition: .15s; }
.rf-chips a:hover { color: var(--text); }
.rf-chips a.on { background: var(--accent); border-color: transparent; color: #fff; }
.rf-table-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rf-table-head .block-title { margin: 0; }
.rf-place { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.06); font-size: 12px; font-weight: 800; color: var(--muted); }
.rf-place.p1 { background: rgba(255,219,92,.16); color: #ffdb5c; }
.rf-place.p2 { background: rgba(191,224,255,.14); color: #bfe0ff; }
.rf-place.p3 { background: rgba(248,167,133,.15); color: #f8a785; }
.rf-empty { margin: 6px 0 0; }

/* ---------- реферальная программа ---------- */
.rf { display: grid; gap: 16px; }
.rf .card + .card { margin-top: 0; }
.rf-hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 26px; }
.rf-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(155,109,255,.14); color: var(--accent2); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.rf-hero h1 { margin: 12px 0 18px; font-size: 28px; line-height: 1.15; }
.rf-accent { color: var(--accent2); }
.rf-code-row { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.rf-code { display: flex; flex-direction: column; justify-content: center; padding: 6px 16px; border-radius: 12px; border: 1px dashed var(--line2); background: rgba(0,0,0,.2); }
.rf-code small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.rf-code b { font-size: 20px; letter-spacing: 1.5px; }
.rf-change { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.rf-change[hidden] { display: none; }
.rf-change input { max-width: 220px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.rf-change small { flex-basis: 100%; }
.rf-link { margin-top: 10px; word-break: break-all; }
.rf-invite-note { margin: 0 0 14px; padding: 11px 14px; border-radius: 12px; background: rgba(46,204,113,.08); border: 1px solid rgba(46,204,113,.3); font-size: 13.5px; }
.rf-invite-note i { color: var(--green2); margin-right: 6px; }
.rf-stats { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 10px; }
.rf-stats div { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); text-align: center; }
.rf-stats small { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.rf-stats b { font-size: 22px; }
.rf-stats .money b, .rf-income { color: #f4ca80; }
.rf-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.rf-term { display: flex; align-items: center; gap: 14px; }
.rf-term b { display: block; font-size: 16px; }
.rf-term small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.rf-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 19px; flex: none; }
.rf-ico.pct { background: rgba(244,202,128,.14); color: #f4ca80; }
.rf-ico.gift { background: rgba(155,109,255,.16); color: var(--accent2); }
.rf-ico.friend { background: rgba(46,204,113,.14); color: var(--green2); }
.rf-mine { display: flex; gap: 14px; align-items: flex-start; }
.rf-mine > i { font-size: 22px; color: var(--green2); margin-top: 2px; }
.rf-mine b { display: block; }
.rf-mine small { display: block; color: var(--muted); margin-top: 3px; }
.rf-bar { display: block; height: 6px; margin-top: 8px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; max-width: 320px; }
.rf-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2ecc71, #4ade80); }
.rf-bind { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rf-bind > div { flex: 1 1 240px; }
.rf-bind b { display: block; }
.rf-bind b i { color: var(--accent2); margin-right: 5px; }
.rf-bind small { color: var(--muted); }
.rf-bind input { max-width: 220px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.rf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.rf-chip.ok { background: rgba(46,204,113,.14); color: var(--green2); }
.rf-chip.wait { background: rgba(245,158,11,.14); color: #fbbf24; }
.rf-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rf-top-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.rf-top-row + .rf-top-row { border-top: 1px solid var(--line); }
.rf-top-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rf-top-name small { font-size: 11.5px; }
.rf-faq details { padding: 10px 0; border-top: 1px solid var(--line); }
.rf-faq details:first-of-type { border-top: 0; padding-top: 0; }
.rf-faq summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.rf-faq p { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 900px) { .rf-hero { grid-template-columns: 1fr; } .rf-bottom { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .rf-hero { padding: 18px; } .rf-hero h1 { font-size: 22px; } .rf-stats b { font-size: 18px; } .rf-stats div { padding: 10px 6px; } }

/* ---------- стрик: огонёк цвета уровня (--lvl из STREAK_LEVEL_COLORS) ---------- */
.stk-badge { --lvl: #7a7f99; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.2;
  color: var(--lvl); border: 1px solid color-mix(in srgb, var(--lvl) 45%, transparent); background: color-mix(in srgb, var(--lvl) 12%, transparent); vertical-align: middle; }
.stk-badge i { font-size: 11px; }
.stk-badge.lv3, .stk-badge.lv4 { box-shadow: 0 0 10px color-mix(in srgb, var(--lvl) 35%, transparent); }
.stk-badge.lv5, .stk-badge.lv6 { box-shadow: 0 0 14px color-mix(in srgb, var(--lvl) 50%, transparent); animation: stkGlow 2.4s ease-in-out infinite; }
@keyframes stkGlow { 50% { box-shadow: 0 0 22px color-mix(in srgb, var(--lvl) 75%, transparent); } }
.stk-btn { position: relative; display: inline-flex; align-items: center; padding: 0; margin-right: 6px; background: none; border: 0; cursor: pointer; }
.stk-btn .stk-badge { padding: 6px 11px 6px 9px; font-size: 13px; }
.stk-btn:hover .stk-badge { filter: brightness(1.2); }
.stk-dot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #5efcb7; box-shadow: 0 0 0 2px var(--bg), 0 0 8px #5efcb7; animation: stkDot 1.6s ease-in-out infinite; }
.stk-dot[hidden] { display: none; }
@keyframes stkDot { 50% { transform: scale(.7); opacity: .6; } }

/* ---------- стрик: окно ---------- */
.stk-box { max-width: 460px; max-height: 92vh; overflow-y: auto; }
.stk-box { --lvl: #7a7f99; }
.stk-now { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--lvl) 9%, transparent); border: 1px solid color-mix(in srgb, var(--lvl) 40%, transparent); }
.stk-now b { display: block; font-size: 18px; color: #fff; }
.stk-now small { color: var(--muted); font-size: 12.5px; }
.stk-big { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; flex: none; color: var(--lvl); border: 2px solid color-mix(in srgb, var(--lvl) 60%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--lvl) 35%, transparent); }
.stk-freeze { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.stk-freeze b { display: block; font-size: 13.5px; }
.stk-freeze small { color: var(--muted); font-size: 12px; }
.stk-flakes { display: flex; gap: 6px; }
.stk-flakes i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.1); }
.stk-flakes i.on { color: #7dd3fc; border-color: rgba(125,211,252,.45); background: rgba(125,211,252,.1); }
.stk-warn { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.35); color: #fbbf24; font-size: 12.5px; }
.stk-warn[hidden] { display: none; }
.stk-sub { margin: 16px 0 8px; padding-left: 9px; border-left: 3px solid #ff9f43; color: #ff9f43; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.stk-how { margin: 0; padding: 0 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.stk-how li[hidden] { display: none; }
.stk-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stk-tier { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.stk-dotlvl { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--lvl); background: color-mix(in srgb, var(--lvl) 14%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--lvl) 30%, transparent); font-size: 13px; }
.stk-tier b { display: block; font-size: 13px; color: #fff; }
.stk-tier small { color: var(--muted); font-size: 11.5px; }
.stk-tier.on { background: color-mix(in srgb, var(--lvl) 10%, transparent); border-color: color-mix(in srgb, var(--lvl) 55%, transparent); }
.stk-tier.on b { color: var(--lvl); }
.stk-last { margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.03); font-size: 12.5px; color: var(--muted); }
.stk-last b { color: var(--text); }
.stk-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.stk-actions .btn { border-radius: 999px; }
.btn.stk-ok { background: #5efcb7; color: #062b1d; border-color: transparent; }
.btn.stk-ok:hover { filter: brightness(1.08); }

/* ---------- стрик: страница топа ---------- */
.stk-page { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.stk-page .card + .card { margin-top: 0; }
.stk-mine { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stk-mine .stk-big { width: 74px; height: 74px; font-size: 32px; }
.stk-big-days { font-size: 22px; }
.stk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin: 10px 0; }
.stk-tiles div { padding: 10px 6px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.stk-tiles small { display: block; font-size: 11px; color: var(--muted); }
.stk-tiles b { font-size: 17px; }
.stk-mine .stk-how { text-align: left; margin-top: 12px; }
.stk-me td { background: rgba(255,159,67,.07); }
@media (max-width: 900px) { .stk-page { grid-template-columns: minmax(0, 1fr); } .stk-table { overflow-x: auto; } }

/* ---------- окно пополнения ---------- */
.tp-box { max-width: 440px; max-height: 92vh; overflow-y: auto; }
.tp-balance { margin-bottom: 14px; font-size: 13.5px; color: var(--muted); }
.tp-balance b { color: #f4ca80; }
.tp-box .bal-preview small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.tp-box .bal-preview em { color: var(--green2); font-style: normal; }
.tp-agree { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.tp-agree input { margin-top: 2px; }
.tp-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; }
.tp-foot a { text-decoration: none; }

/* ---------- неон ---------- */
.neon .rf-kicker { background: rgba(34,211,238,.1); color: var(--accent2); }
.neon .rf-hero h1 { font-size: 30px; }
.neon .rf-accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.neon .rf-code { border-color: rgba(34,211,238,.4); border-radius: 14px; }
.neon .rf-stats div, .neon .stk-tiles div { background: var(--tile); border-radius: 16px; }
.neon .rf-chips a.on { background: var(--grad); color: #05060b; }
.neon .rf-ico.gift { background: rgba(168,85,247,.16); color: #c4b5fd; }
.neon .stk-dot { box-shadow: 0 0 0 2px var(--bg), 0 0 8px #5efcb7; }
.neon .stk-box .hl-promo-head i { color: #ff9f43; }
.neon .tp-box .bal-preview { border-radius: 13px; }
/* Огонёк стрика добавил кнопку в шапку: на ноутбучных ширинах прячем иконки пунктов меню раньше, чем в neon.css. */
/* Шапка неона без надписи, аватарка маленькая (на ней видна рамка Plus): логотип-значок, меню, справа поиск/баланс/стрик/колокольчик/ник.
   Меню и правый блок не сжимаются, чтобы кнопки не наезжали друг на друга; иконки пунктов прячем, пока места мало. */
.neon .nx-nav { flex: 0 0 auto; }
.neon .nx-bar { gap: 10px; }
@media (min-width: 1021px) {
  .neon .nx-right .profile-pill .pp-ava { flex-basis: 30px; width: 30px; height: 30px; outline: 0; margin-left: 6px; }
}
@media (min-width: 1021px) and (max-width: 1300px) {
  .neon .nx-link i:first-child { display: none; }
  .neon .nx-link { padding: 9px 9px; }
}
@media (min-width: 1021px) and (max-width: 1140px) {
  .neon .nx-balance > span { display: none; }
  .neon .nx-link { padding: 9px 7px; font-size: 13px; }
}
@media (max-width: 700px) { .stk-btn { margin-right: 0; } .stk-btn .stk-badge { padding: 5px 8px; } }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.faq-head h1 { margin: 10px 0 6px; font-size: 30px; }
.faq-head p { margin: 0; }
.faq-list { display: grid; gap: 10px; }
.faq-item { padding: 0; overflow: hidden; transition: border-color .15s; }
.faq-item summary { display: flex; align-items: center; gap: 12px; padding: 15px 18px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary b { flex: 1; font-size: 15px; }
.faq-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: rgba(155,109,255,.14); color: var(--accent2); }
.faq-caret { color: var(--muted); transition: transform .2s; }
.faq-item[open] .faq-caret { transform: rotate(180deg); }
.faq-item[open] { border-color: rgba(155,109,255,.45); }
.faq-a { padding: 0 18px 16px 66px; color: var(--muted); line-height: 1.6; font-size: 14px; }
.faq-a p { margin: 0 0 8px; }
.faq-a code { padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.07); color: var(--text); }
.faq-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.faq-cta b { display: block; font-size: 16px; }
.faq-edit { display: grid; grid-template-columns: 150px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.faq-edit textarea { grid-column: 1 / -1; min-height: 80px; }
.neon .faq-ico { background: rgba(34,211,238,.1); }
.neon .faq-item[open] { border-color: rgba(34,211,238,.35); }
@media (max-width: 700px) { .faq-a { padding-left: 18px; } .faq-head h1 { font-size: 24px; } }

/* ---------- Топ донатеров ---------- */
.dn { display: grid; gap: 16px; }
.dn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dn-head h1 { margin: 10px 0 6px; font-size: 30px; }
.dn-head p { margin: 0; }
.dn-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; max-width: 860px; width: 100%; margin: 0 auto; }
.dn-step { --m: #f59e0b; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 14px 20px; text-align: center;
  border-top: 3px solid var(--m); background: linear-gradient(180deg, color-mix(in srgb, var(--m) 14%, transparent), transparent 70%); }
.dn-step.gold { --m: #fbbf24; padding-top: 40px; padding-bottom: 32px; }
.dn-step.silver { --m: #cbd5e1; }
.dn-step.bronze { --m: #f59e0b; }
.dn-medal { position: absolute; top: -15px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--m); color: #111; font-weight: 900; box-shadow: 0 0 18px color-mix(in srgb, var(--m) 60%, transparent); }
.dn-crown { position: absolute; top: 18px; right: 18px; color: #fbbf24; font-size: 18px; filter: drop-shadow(0 0 6px rgba(251,191,36,.6)); }
.dn-ava { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; font-size: 22px; border: 2px solid var(--m); }
.dn-step.gold .dn-ava { width: 84px; height: 84px; }
.dn-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-sum { font-size: 18px; font-weight: 900; color: var(--m); }
.dn-list { display: grid; gap: 4px; max-width: 860px; width: 100%; margin: 0 auto; }
.dn-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.dn-row:last-child { border-bottom: 0; }
.dn-row-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dn-row-name small { font-size: 12px; }
.dn-row-name .rf-bar { margin-top: 5px; height: 4px; }
.dn-row-name .rf-bar i { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.dn-row-sum { white-space: nowrap; }
.dn .faq-cta { max-width: 860px; width: 100%; margin: 0 auto; }
@media (max-width: 700px) {
  .dn-podium { gap: 8px; }
  .dn-step { padding: 22px 6px 14px; }
  .dn-step.gold { padding-top: 30px; padding-bottom: 22px; }
  .dn-ava { width: 44px; height: 44px; }
  .dn-step.gold .dn-ava { width: 58px; height: 58px; }
  .dn-sum { font-size: 14px; }
  .dn-crown { top: 8px; right: 8px; font-size: 14px; }
  .dn-head h1 { font-size: 24px; }
}

/* ---------- Нижняя панель на телефоне ---------- */
.hl-tabbar { display: none; }
@media (max-width: 760px) {
  .hl-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(14,15,30,.94); backdrop-filter: blur(14px); border-top: 1px solid var(--line2, rgba(255,255,255,.1)); }
  .hl-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; border-radius: 10px; color: var(--muted); font-size: 10.5px; font-weight: 700; text-decoration: none; min-width: 0; }
  .hl-tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hl-tabbar a i { font-size: 18px; }
  .hl-tabbar a.on { color: #fff; background: rgba(155,109,255,.16); }
  .hl-tabbar a.on i { color: var(--accent2); }
  .hl-tabbar-ava { width: 20px; height: 20px; margin: -1px 0 1px; border-radius: 50%; object-fit: cover; font-size: 10px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .hl-toasts, .sc-cart-fab { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .hl-help { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  .hl-cookie { bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
}
.neon .hl-tabbar { background: rgba(27, 20, 46,.94); }
.neon .hl-tabbar a.on { background: rgba(34,211,238,.1); }

/* ---------- Помощь и cookie ---------- */
.hl-help { position: fixed; left: 16px; bottom: 16px; z-index: 850; }
.hl-help-fab { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 19px;
  background: var(--grad, linear-gradient(135deg, #9b6dff, #6d4bff)); box-shadow: 0 10px 28px -6px rgba(155,109,255,.7); transition: transform .15s; }
.hl-help-fab:hover { transform: scale(1.07); }
.hl-help-box { position: absolute; left: 0; bottom: 62px; width: min(340px, calc(100vw - 32px)); padding: 14px; border-radius: 16px;
  background: rgba(18,19,38,.98); border: 1px solid var(--line2, rgba(255,255,255,.12)); box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.hl-help-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hl-help-head i { color: var(--accent2); margin-right: 6px; }
.hl-help-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; }
.hl-help-q { border-radius: 10px; background: rgba(255,255,255,.04); margin-bottom: 6px; }
.hl-help-q summary { padding: 10px 12px; cursor: pointer; font-size: 13.5px; font-weight: 700; }
.hl-help-q div { padding: 0 12px 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.hl-help-q div p { margin: 0 0 6px; }
.hl-help-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.hl-help-actions .btn { justify-content: center; text-align: center; padding-left: 8px; padding-right: 8px; }
.neon .hl-help-box { background: rgba(30, 23, 50,.98); }
.hl-cookie { position: fixed; left: 50%; bottom: 16px; z-index: 860; transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  width: min(620px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 14px; background: rgba(18,19,38,.97); border: 1px solid var(--line2, rgba(255,255,255,.12));
  box-shadow: 0 16px 40px rgba(0,0,0,.5); font-size: 13px; color: var(--muted); }
.hl-cookie[hidden] { display: none; }
.hl-cookie > i { color: #f5b971; font-size: 20px; }
.hl-cookie span { flex: 1; }
.neon .hl-cookie { background: rgba(30, 23, 50,.97); }
@media (max-width: 760px) { .hl-help-fab { width: 44px; height: 44px; font-size: 17px; } .hl-cookie { flex-wrap: wrap; } .hl-cookie .btn { width: 100%; justify-content: center; } }

/* ---------- Магазин: сравнение привилегий ---------- */
.sc-cmp { margin-top: 18px; border-radius: 14px; border: 1px solid var(--line2, rgba(255,255,255,.1)); background: rgba(255,255,255,.02); overflow: hidden; }
.sc-cmp summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; font-weight: 800; list-style: none; }
.sc-cmp summary::-webkit-details-marker { display: none; }
.sc-cmp summary > i:first-child { color: var(--accent2); }
.sc-cmp-caret { margin-left: auto; color: var(--muted); transition: transform .2s; }
.sc-cmp[open] .sc-cmp-caret { transform: rotate(180deg); }
.sc-cmp .table-wrap { overflow-x: auto; padding: 0 12px 12px; }
.sc-cmp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 460px; }
.sc-cmp-table th, .sc-cmp-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; }
.sc-cmp-table th:first-child, .sc-cmp-table td:first-child { text-align: left; color: var(--muted); }
.sc-cmp-table thead th { border-bottom: 2px solid var(--c, var(--line)); vertical-align: bottom; }
.sc-cmp-table thead th b { display: block; color: var(--c, var(--text)); font-size: 14.5px; }
.sc-cmp-table thead th small { color: var(--muted); font-weight: 600; }
.sc-cmp-table tbody tr:hover td { background: rgba(255,255,255,.025); }
.sc-cmp-table tfoot td { border-bottom: 0; padding-top: 14px; }
.sc-yes { color: #4ade80; }
.sc-no { color: rgba(255,255,255,.18); }
.neon .sc-cmp { border-radius: 18px; background: rgba(255,255,255,.015); }
.sc-cmp-table thead th { text-transform: none; letter-spacing: 0; }
@media (max-width: 700px) {
  .sc-cmp-table th:first-child, .sc-cmp-table td:first-child { position: sticky; left: 0; z-index: 1; min-width: 130px; background: var(--bg, #0f1024); }
}

/* ---------- Правки вёрстки после полной проверки (телефон 390px) ---------- */
/* Колонки сетки не должны раздуваться длинными таблицами и ссылками — прокрутка остаётся внутри .table-wrap */
.layout-side > *, .grid-2 > *, .grid-3 > *, .rf > *, .dn > * { min-width: 0; }
/* .card-title с отрицательными отступами рассчитан на карточку; заголовок страницы вне карточки не вылезает за край */
:not(.card) > .card-title, .neon :not(.card) > .card-title { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; }
.rf-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .layout-side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .sa-item { grid-template-columns: 64px minmax(0, 1fr); }
  .sa-item .actions { grid-column: 1 / -1; }
}
/* На телефоне круглая кнопка помощи закрывала поля форм — там помощь есть в меню и в /faq */
@media (max-width: 760px) { .hl-help { display: none; } }
/* Профиль на телефоне: колонка тянется на всю ширину, а не по содержимому (иначе вкладки вылезали за край) */
@media (max-width: 991px) { .pp-main { align-self: stretch; width: 100%; } }
@media (max-width: 560px) { .pp-tabs { overflow-x: auto; scrollbar-width: none; } .pp-tab { white-space: nowrap; } }

/* ---------- Звёздный фон (assets/stars.js) ---------- */
.hl-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- Админка: сводка игрока и выдача ---------- */
.ag-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.ag-stats div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.ag-stats i { grid-row: span 2; color: var(--accent2); font-size: 15px; }
.ag-stats small { color: var(--muted); font-size: 11px; }
.ag-stats b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-give { border-color: rgba(155,109,255,.45); }
.ag-give h3 i { color: #f472b6; }
.ag-preview { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(244,114,182,.08); border: 1px solid rgba(244,114,182,.3); }
.ag-preview b { color: #fff; }
@media (max-width: 600px) { .ag-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Объявление над страницами и техработы ---------- */
.hl-notices { display: grid; gap: 8px; margin-top: 14px; }
.hl-notice { --c: #60a5fa; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 14px; font-size: 14px;
  background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); color: var(--text); }
.hl-notice > i { color: var(--c); font-size: 16px; }
.hl-notice a { color: var(--c); font-weight: 700; }
.hl-notice.promo { --c: #c084fc; }
.hl-notice.warn { --c: #fbbf24; }
.hl-notice.danger { --c: #f87171; }
.hl-maint { max-width: 560px; margin: 40px auto; text-align: center; padding: 40px 28px; }
.hl-maint-ico { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; font-size: 30px; color: #fbbf24; background: rgba(251,191,36,.12); }
.hl-maint h1 { margin: 16px 0 8px; }

/* ---------- варны в профиле: подробности при наведении ---------- */
.pp-stats { overflow: visible; }
.pp-warns { position: relative; cursor: help; outline: none; scroll-margin-top: 110px; }
.pp-warns:focus-visible { border-color: var(--pp-accent-2, #a78bfa); }
.pp-warns__hint { font-size: 10px; opacity: .6; }
.pp-warns__pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; width: min(360px, calc(100vw - 32px)); max-height: 420px; overflow-y: auto;
  padding: 12px; border-radius: 12px; background: #1a1530; border: 1px solid rgba(167,139,250,.28); box-shadow: 0 18px 40px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; cursor: default; }
.pp-warns__pop::before { content: ""; position: absolute; left: 22px; top: -6px; width: 10px; height: 10px; background: inherit; border-left: inherit; border-top: inherit; transform: rotate(45deg); }
.pp-warns:hover .pp-warns__pop, .pp-warns:focus-within .pp-warns__pop { opacity: 1; visibility: visible; transform: none; }
.pp-warns__head { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; margin-bottom: 8px; border-radius: 9px; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.pp-warns__head.lvl-safe { background: rgba(46,204,113,.1); color: #6ee7b7; }
.pp-warns__head.lvl-warning { background: rgba(251,191,36,.1); color: #fbbf24; }
.pp-warns__head.lvl-danger { background: rgba(248,113,113,.12); color: #fca5a5; }
.pp-warns__head i { margin-top: 2px; }
.pp-warn { padding: 9px 10px; margin-bottom: 6px; border-radius: 9px; background: rgba(255,255,255,.04); border-left: 3px solid #fb923c; }
.pp-warn.is-old { border-left-color: rgba(255,255,255,.18); opacity: .75; }
.pp-warn__reason { font-size: 13px; font-weight: 600; color: var(--text, #fff); word-break: break-word; }
.pp-warn__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 11.5px; color: var(--pp-txt-dim, #a3a3c2); }
.pp-warn__meta i { margin-right: 3px; opacity: .8; }
.pp-warn__meta .is-soon { color: #fbbf24; }
.pp-warns__sub { margin: 10px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--pp-txt-dim, #a3a3c2); }
.pp-warns__foot { margin-top: 8px; font-size: 11.5px; color: var(--pp-txt-dim, #a3a3c2); line-height: 1.4; }

/* ---------- вакансии в разделе заявок ---------- */
.svc-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.sv-vac-about { padding: 14px 16px; margin-bottom: 14px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.sv-vac-about h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 17px; }
.sv-vac-about h3 i { color: #00e5a0; }
.sv-vac-list { display: flex; flex-direction: column; gap: 10px; }
.sv-vac { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-left: 3px solid #00e5a0; transition: border-color .15s, transform .15s; }
.sv-vac:hover { border-color: rgba(0,229,160,.45); transform: translateY(-1px); }
.sv-vac__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sv-vac__main b { font-size: 15px; }
.sv-vac__main small { color: var(--muted); font-size: 13px; }
.sv-vac__apps { font-size: 12px; color: var(--muted2, var(--muted)); }
.sv-vac-app { flex-wrap: wrap; }
.sv-vac-app > span:not(:first-child) { flex: none; }
.sv-vac-app__answer { flex-basis: 100%; padding: 6px 0 2px; font-size: 12.5px; color: var(--muted); white-space: normal; }
@media (max-width: 560px) { .sv-vac { flex-direction: column; align-items: stretch; } }

/* ---------- квадратные аватарки по всему сайту (под квадратные рамки Plus) ---------- */
img[data-uid], .ava-letter[data-uid], .pp-uava, .pp-ava, .big-ava, .ava,
.atk-ava, .atk-chip-ava, .aw-ava, .aw-big-ava, .ca-ava, .chat .ch-ac-ava, .chat .ch-uava, .ct-ava .pun-ava-i, .ct-ava img,
.dn-ava, .ev-ava .pun-ava-i, .ev-ava .pun-ava-none, .ev-ava img, .hc-ava-img, .hl-tabbar-ava, .as-ava, .ava-strip a,
.mu-ava, .nx-ava, .person-ava, .pfa-ava, .pp-frame-ava, .pp-friends__body .pp-fava, .pp-pv-ava, .pp-vava, .ppl-ava-img,
.ppl-fr__ava, .ppl-msg__ava, .ps-ava-img, .pun-ava, .pun-ava .pun-ava-i, .pun-ava img, .rf-ava, .rl-person .pun-ava-i,
.rl-person img, .sa-holder-user .sa-ava, .sn-ava, .su-ava, .tc-ava-img, .uc-ava__img, .va-ava .pun-ava-i, .va-ava img,
.wl-ava-img, .cm-ava__img, .cm-mate__img, .dg-ava__img, .ps-bl__ava, .ch-uava-link { border-radius: 14% !important; }
.hc-dot { border-radius: 50% !important; }

/* neon.css */
/* Неоновое оформление: подключается после style.css, только когда в админке выбрана тема «Неон».
   Фиолетовый звёздный фон, стеклянные плитки, акцент — градиент бирюзовый → фиолетовый. */
:root {
  --bg: #1e1731;
  --bg2: #1f1834;
  --card: #231b3b;
  --card2: #2a2147;
  --line: rgba(255, 255, 255, .08);
  --line2: rgba(255, 255, 255, .14);
  --text: #eef0f6;
  --muted: #8b90a3;
  --muted2: #5f647a;
  --accent: #a855f7;
  --accent2: #67e8f9;
  --cyan: #22d3ee;
  --pink: #f472b6;
  --green: #34d399;
  --green2: #34d399;
  --radius: 20px;
  --grad: linear-gradient(90deg, #22d3ee, #a855f7);
  --tile: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  --glass: rgba(31, 24, 52, .8);
  --surface: rgba(35, 27, 59, .9); /* основа карточек: звёзды фона не просвечивают сквозь текст */
  --head-font: "Unbounded", "Manrope", system-ui, sans-serif;
}
html {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 50% 40%, rgba(126,157,255,.10) 0%, transparent 65%),
    radial-gradient(900px 520px at 8% -8%, rgba(148,114,239,.22), transparent 70%),
    radial-gradient(800px 480px at 100% 0%, rgba(34,211,238,.08), transparent 70%);
  background-attachment: fixed;
}
/* Фон как у ночного неба: фиолетовая основа на html, звёзды — canvas .hl-stars из assets/stars.js */
body.neon {
  font: 500 14px/1.55 "Manrope", "Segoe UI", system-ui, sans-serif;
  background: transparent;
}
.neon a { color: var(--accent2); }
.neon a:hover { color: #fff; }
.neon h1, .neon h2, .neon h3 { font-family: var(--head-font); font-weight: 600; letter-spacing: -.2px; }
.neon h1 { font-size: 26px; }
.neon h2 { font-size: 19px; }
.neon h3 { font-size: 15.5px; }
.neon .gt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.neon code { background: rgba(34,211,238,.1); color: #a5f3fc; }
.neon ::selection { background: rgba(168,85,247,.45); }
.neon * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.neon .wrap { max-width: 1300px; padding: 0 20px; }
.neon .main { padding-top: 20px; }

/* ---------- шапка ---------- */
.nx-head { position: sticky; top: 0; z-index: 1200; padding-top: 14px; }
.nx-bar {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 16px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 14px 40px -24px rgba(0,0,0,.9);
}
.nx-bar::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 1px; background: var(--grad); opacity: .75; }
.nx-logo { display: flex; align-items: center; gap: 10px; flex: none; font: 700 16px var(--head-font); letter-spacing: .5px; color: #fff !important; white-space: nowrap; }
.nx-logo img { height: 30px; }
.nx-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; min-width: 0; }
.nx-link {
  display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 12px; border: 0; background: none;
  color: var(--muted) !important; font: 600 13.5px "Manrope", sans-serif; white-space: nowrap; cursor: pointer; transition: .15s;
}
.nx-link i { font-size: 13px; opacity: .75; }
.nx-link .caret { margin: 0; font-size: 9px; color: inherit; }
.nx-link:hover, .dd.open > .nx-link { color: #fff !important; background: rgba(255,255,255,.04); }
.nx-link.active { color: #fff !important; background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(168,85,247,.14)); box-shadow: inset 0 0 0 1px rgba(168,85,247,.35); }
.nx-link.active i { color: var(--cyan); opacity: 1; }
.nx-more .dd-menu { left: auto; right: 0; min-width: 0; width: 380px; display: none; grid-template-columns: 1fr 1fr; gap: 4px; }
.nx-more.open .dd-menu { display: grid; }
.nx-right { display: flex; align-items: center; gap: 8px; flex: none; }
.nx-ib, .neon .bell-btn {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 13px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--muted); font-size: 15px; cursor: pointer; transition: .15s;
}
.nx-ib:hover, .dd.open > .nx-ib, .neon .bell-btn:hover, .neon .dd.open > .bell-btn { color: #fff; background: rgba(255,255,255,.08); border-color: var(--line2); }
.neon .bell-count { background: var(--pink); border: 0; top: -5px; right: -5px; line-height: 18px; box-shadow: 0 0 10px rgba(244,114,182,.7); }
.nx-balance {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 6px 0 13px; border-radius: 13px; white-space: nowrap;
  background: rgba(52,211,153,.07); border: 1px solid rgba(52,211,153,.22); color: var(--green) !important; font-weight: 800;
}
.nx-balance b { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: rgba(52,211,153,.18); color: #fff; font-size: 11px; }
.nx-balance:hover { background: rgba(52,211,153,.13); }
.neon .userbox { gap: 8px; }
.neon .profile-pill { height: 44px; max-width: 220px; padding: 0 30px 0 4px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.neon .profile-pill:hover, .neon .dd.open > .profile-pill { background: rgba(255,255,255,.08); border-color: rgba(168,85,247,.4); }
.neon .pp-ava { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; outline: 2px solid var(--accent); outline-offset: 2px; margin-left: 4px; }
.neon .pp-name { display: grid; gap: 3px; padding-left: 12px; font-size: 13px; text-align: left; }
.neon .pp-role { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.neon .pp-point { top: 2px; left: 2px; border-color: var(--bg); background: var(--pink); }
.neon .burger { display: none; border-radius: 13px; background: rgba(255,255,255,.04); border-color: var(--line); }
.neon .burger span, .neon .burger span::before, .neon .burger span::after { background: #fff; }
.nx-search .dd-menu { width: 320px; padding: 8px; }
.nx-search-form { display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
.nx-search-form i { color: var(--muted); }
.neon .nx-search-form input { border: 0; background: none; padding: 11px 0; box-shadow: none; }

/* выпадающие меню и уведомления */
.neon .dd-menu { background: rgba(33, 26, 56,.97); border: 1px solid var(--line2); border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(0,0,0,.85); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.neon .dd-menu a { color: #c9cdd9; border-radius: 10px; }
.neon .dd-menu a i { color: var(--cyan); }
.neon .dd-menu a:hover, .neon .dd-menu a.active { background: rgba(255,255,255,.06); color: #fff; }
.neon .dd-right > .dd-menu { background: rgba(33, 26, 56,.97); border-color: var(--line2); border-radius: 16px; }
.neon .dd-right > .dd-menu a { background: rgba(255,255,255,.03); border-color: var(--line); color: #d5d8e3; }
.neon .dd-right > .dd-menu a:hover { background: rgba(255,255,255,.07); border-color: rgba(168,85,247,.4); }
.neon .dd-right > .dd-menu .dd-strong { background: linear-gradient(90deg, rgba(34,211,238,.14), rgba(168,85,247,.16)); border-color: rgba(168,85,247,.4); }
.neon .dd-right > .dd-menu .dd-money, .neon .dd-right > .dd-menu .dd-money i { color: var(--green); }
.neon .dd-right > .dd-menu .dd-plus, .neon .dd-right > .dd-menu .dd-promo { color: #d8b4fe; }
.neon .nx-search > .dd-menu { width: 320px; background: rgba(33, 26, 56,.97); }
.neon .notif-panel { border-radius: 18px; }
.neon .np-item { background: rgba(255,255,255,.03); border-color: var(--line); border-radius: 13px; }
.neon .np-item:hover { border-color: rgba(168,85,247,.35); }
.neon .np-item:not(.read)::before { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.neon .np-icon { background: rgba(34,211,238,.1); color: var(--cyan); border-radius: 11px; }
.neon .np-actions button { border-color: var(--line); border-radius: 9px; }

/* ---------- базовые элементы ---------- */
.neon .card {
  background: var(--tile), var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
  box-shadow: none;
}
.neon .shop-side { top: 100px; }
.neon .card-title { border-bottom-color: var(--line); margin: -4px -22px 18px; padding: 0 22px 14px; }
.neon .block-title { font-family: var(--head-font); font-size: 15px; font-weight: 600; }
.neon .block-title i { color: var(--cyan); }
.neon .btn {
  background: var(--grad); color: #05060b; border-radius: 13px; font-weight: 800; padding: 11px 20px;
  box-shadow: 0 10px 30px -10px rgba(34,211,238,.55);
}
.neon .btn:hover { color: #05060b; filter: brightness(1.1); }
.neon .btn-sm { padding: 8px 14px; }
.neon .btn-ghost { background: rgba(255,255,255,.05); color: var(--text); border: 1px solid var(--line2); box-shadow: none; }
.neon .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.neon .btn-outline { background: transparent; color: var(--accent2); border: 1px solid rgba(34,211,238,.45); box-shadow: none; }
.neon .btn-outline:hover { background: rgba(34,211,238,.12); color: #fff; }
.neon .btn-danger { background: linear-gradient(90deg, #f43f5e, #e11d48); color: #fff; box-shadow: 0 10px 30px -12px rgba(244,63,94,.6); }
.neon .btn-danger:hover { color: #fff; }
.neon .btn-steam { background: #171a21; color: #fff; border: 1px solid #2a475e; box-shadow: none; }
.neon .btn-steam:hover { color: #fff; }
.neon input[type=text], .neon input[type=email], .neon input[type=password], .neon input[type=number], .neon input[type=file],
.neon input[type=date], .neon input[type=datetime-local], .neon input[type=search], .neon input[type=url], .neon select, .neon textarea {
  background: rgba(0,0,0,.35); border: 1px solid var(--line2); border-radius: 13px; color: var(--text);
}
.neon input:focus, .neon select:focus, .neon textarea:focus { border-color: rgba(34,211,238,.6); box-shadow: 0 0 0 3px rgba(34,211,238,.14); }
.neon select option { background: #231b3b; }
.neon th { color: var(--muted2); font-weight: 700; }
.neon th, .neon td { border-bottom-color: var(--line); }
.neon tbody tr:hover td { background: rgba(255,255,255,.02); }
.neon .badge { background: rgba(255,255,255,.06); }
.neon .badge-accent { background: rgba(168,85,247,.16); color: #d8b4fe; }
.neon .badge-green { background: rgba(52,211,153,.14); color: var(--green); }
.neon .count { background: var(--pink); }
.neon .alert { border-radius: 14px; }
.neon .alert-info { background: rgba(34,211,238,.08); border-color: rgba(34,211,238,.3); color: #a5f3fc; }
.neon .empty { color: var(--muted); }
.neon .pager a, .neon .pager span { border-radius: 10px; }
.neon .switch span { background: rgba(255,255,255,.1); }
.neon .switch input:checked + span { background: var(--accent); }
.neon .mon-tabs button, .neon .mon-tabs a, .neon .seg button, .neon .seg a { background: rgba(255,255,255,.04); border-color: var(--line); border-radius: 11px; }
.neon .mon-tabs button.active, .neon .mon-tabs a.active, .neon .seg button.active, .neon .seg a.active { background: rgba(255,255,255,.1); border-color: rgba(168,85,247,.45); color: #fff; }
.neon .mon-tabs button span, .neon .mon-tabs a span { background: rgba(34,211,238,.12); color: var(--accent2); }
.neon .mon-tabs button.active span, .neon .mon-tabs a.active span { background: var(--grad); color: #05060b; }
.neon .ava-letter { background: linear-gradient(135deg, #1b1d2b, #12131d); color: var(--cyan); }

/* ---------- колонка слева на внутренних страницах ---------- */
.neon .with-side { grid-template-columns: 290px 1fr; gap: 18px; }
.neon .side-user { padding: 18px; }
.neon .su-head { border-bottom-color: var(--line); }
.neon .su-ava { border: 0; outline: 2px solid var(--accent); outline-offset: 2px; }
.neon .su-balance { background: rgba(52,211,153,.06); border: 1px solid rgba(52,211,153,.2); border-radius: 14px; }
.neon .su-balance i, .neon .su-balance b { color: var(--green); }
.neon .su-plus { background: var(--grad); color: #05060b; }
.neon .side-menu a { border-radius: 12px; color: #c9cdd9; }
.neon .side-menu a i { color: var(--cyan); }
.neon .side-menu a:hover { background: rgba(255,255,255,.05); color: #fff; }
.neon .mini-user { color: var(--text); }
.neon .mu-ava { border-radius: 50%; }
.neon .place.p1 { color: #fbbf24; }
.neon .side-more { color: var(--muted); }

/* ---------- карточки серверов: картинка карты на всю плитку ---------- */
.neon .monitor { margin: 0; }
.neon .hl-servers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.neon .hl-servers-grid > .hl-server-card { max-width: none; min-width: 0; }
.neon .hl-server-card {
  flex-direction: column; justify-content: flex-end; min-height: 232px; border-radius: 22px;
  background: #1b1530; border: 1px solid var(--line); box-shadow: none;
}
.neon .hl-server-card:hover { transform: translateY(-3px); border-color: rgba(168,85,247,.55); box-shadow: 0 0 0 1px rgba(168,85,247,.2), 0 24px 50px -24px rgba(168,85,247,.85); }
.neon .hl-card-img { position: absolute; inset: 0; width: auto; min-width: 0; background: #11121c; }
.neon .hl-card-img-pic { opacity: .6; transition: opacity .3s, transform .4s; }
.neon .hl-server-card:hover .hl-card-img-pic { opacity: .85; transform: scale(1.04); }
.neon .hl-card-img::after { background: linear-gradient(180deg, rgba(24, 18, 42,.05) 10%, #05060b 92%); }
.neon .hl-card-img.no-img { background: radial-gradient(circle at 30% 20%, rgba(168,85,247,.35), transparent 60%), radial-gradient(circle at 80% 40%, rgba(34,211,238,.25), transparent 60%), #231b3b; }
.neon .hl-card-img.no-img .hl-card-noimg { justify-content: flex-start; padding-top: 40px; font: 600 11px/1.4 var(--head-font); letter-spacing: .6px; gap: 6px; color: rgba(255,255,255,.3); text-shadow: none; }
.neon .hl-card-noimg b { display: block; color: rgba(255,255,255,.22); text-shadow: none; font-size: 22px; }
.neon .hl-card-heart { left: auto; right: 14px; top: 12px; color: var(--pink); filter: drop-shadow(0 0 6px rgba(244,114,182,.7)); }
.neon .hl-card-body { padding: 16px; flex: none; }
.neon .hl-card-name { text-transform: none; letter-spacing: 0; font-size: 14.5px; margin-bottom: 2px; }
.neon .hl-card-meta { margin-bottom: 12px; }
.neon .hl-card-body { position: static; }
.neon .hl-card-name, .neon .hl-card-foot, .neon .hl-card-map { position: relative; z-index: 2; }
.neon .hl-card-num { position: absolute; z-index: 3; top: 12px; left: 12px; background: rgba(24, 18, 42,.72); border: 1px solid var(--line2); border-radius: 20px; padding: 4px 10px; box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.neon .hl-card-map { color: var(--muted); font-size: 12px; }
.neon .hl-card-foot { gap: 10px; }
.neon .hl-card-players-pill { background: none; box-shadow: none; padding: 0; font-size: 13px; color: var(--cyan); }
.neon .hl-card-players-pill i { display: none; }
.neon .hl-card-players-pill.off { background: none; color: var(--muted2); }
.neon .hl-card-bar { display: block; flex: 1; height: 5px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.neon .hl-card-bar i { display: block; height: 100%; border-radius: 4px; background: var(--grad); box-shadow: 0 0 10px rgba(34,211,238,.7); transition: width .4s; }
.neon .hl-card-copy-mini { width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.08); border: 1px solid var(--line); color: #fff; }
.neon .hl-card-play { margin-left: 0; width: 34px; height: 34px; border-radius: 11px; background: var(--grad); color: #05060b; box-shadow: 0 6px 18px -6px rgba(34,211,238,.8); }
.neon .hl-card-play:hover { color: #05060b; }
.neon .hl-empty { background: var(--tile), var(--surface); border-color: var(--line2); color: var(--muted); border-radius: 20px; }
.neon .mon-bar { margin-bottom: 14px; }
.neon .hl-modal { background: #231b3b; border-color: var(--line2); border-radius: 22px; }
.neon .hl-modal-header { border-bottom-color: var(--line); }
.neon .hl-modal-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,14,23,.95), rgba(13,14,23,.6)); }
.neon .hl-modal-header > * { position: relative; }
.neon .hl-modal-close { z-index: 2; }
.neon .hl-modal-map-icon { box-shadow: 0 0 0 2px rgba(168,85,247,.5); }
.neon .hl-modal-footer { background: rgba(0,0,0,.25); border-top-color: var(--line); }
.neon .hl-modal-btn-play { background: var(--grad); color: #05060b; box-shadow: 0 8px 24px -8px rgba(34,211,238,.7); }
.neon .hl-modal-btn-copy { background: rgba(255,255,255,.06); border-color: var(--line2); color: #fff; }

/* ---------- главная: плитки ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.t { position: relative; overflow: hidden; padding: 22px; border-radius: 22px; background: var(--tile), var(--surface); border: 1px solid var(--line); }
.t.ne::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: var(--grad); opacity: .8; }
.hero-slider { grid-column: span 8; padding: 0; min-height: 340px; box-shadow: 0 30px 80px -40px rgba(168,85,247,.6); }
.neon .hero-slider.slider { margin: 0; }
.neon .hero-slider .slider-track { grid-auto-columns: 100%; height: 100%; }
.neon .hero-slider .slide { aspect-ratio: auto; border: 0; border-radius: 0; }
.neon .hero-slider .slide:hover { transform: none; }
.neon .hero-slider .slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 18, 42,.97) 30%, rgba(24, 18, 42,.35) 72%, rgba(24, 18, 42,.45)), linear-gradient(0deg, rgba(24, 18, 42,.6), transparent 40%); }
.nx-hero { position: relative; display: flex; align-items: flex-end; min-height: 340px; height: 100%; background: #231b3b right 30% / cover no-repeat; }
.nx-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 18, 42,.97) 30%, rgba(24, 18, 42,.35) 72%, rgba(24, 18, 42,.45)), linear-gradient(0deg, rgba(24, 18, 42,.6), transparent 40%); }
.nx-hero-in { position: relative; padding: 30px 30px 34px; max-width: 600px; }
.nx-hero h1 { margin: 12px 0 10px; font: 700 36px/1.1 var(--head-font); color: #fff; text-shadow: 0 0 40px rgba(168,85,247,.35); }
.nx-hero p { margin: 0 0 22px; color: #b3b8ca; max-width: 440px; font-size: 15px; }
.nx-live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: 1px; background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.25); }
.nx-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: nxPulse 1.6s infinite; }
@keyframes nxPulse { 50% { opacity: .35; } }
.nx-hero-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 14px; font-weight: 800; color: #05060b !important; background: var(--grad); box-shadow: 0 10px 34px -8px rgba(34,211,238,.6); transition: filter .15s, transform .15s; }
.nx-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.nx-btn.ghost { color: #fff !important; background: rgba(255,255,255,.06); border: 1px solid var(--line2); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.neon .hero-slider .slider-dots { position: absolute; right: 26px; bottom: 26px; margin: 0; z-index: 2; }
.neon .slider-dots button.active { background: var(--grad); }
.nx-stats { grid-column: span 4; display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.nx-k small { color: var(--muted); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; }
.nx-k > b { display: block; margin-top: 4px; font: 700 40px/1.15 var(--head-font); color: #fff; }
.nx-k > b span { font-size: 16px; color: var(--muted); }
.nx-k .nx-k-money { font-size: 30px; color: #fff; }
.nx-k .sub { color: var(--muted); font-size: 12.5px; }
.nx-k p { color: var(--muted); margin: 8px 0 0; font-size: 13px; }
.nx-ring { --p: 0; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#22d3ee, #a855f7 calc(var(--p) * 1%), rgba(255,255,255,.07) 0); filter: drop-shadow(0 0 12px rgba(34,211,238,.3)); }
.nx-ring span { width: 70px; height: 70px; border-radius: 50%; background: #0c0d15; display: grid; place-items: center; font-weight: 800; color: #fff; }
.nx-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.nx-mini a { position: relative; text-align: center; padding: 9px 6px; border-radius: 13px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: #fff !important; font-weight: 700; font-size: 12px; transition: .15s; }
.nx-mini a:hover { background: rgba(255,255,255,.08); border-color: rgba(168,85,247,.4); }
.nx-mini a i { display: block; margin-bottom: 3px; font-size: 15px; }
.nx-mini a:nth-child(1) i { color: var(--cyan); }
.nx-mini a:nth-child(2) i { color: var(--accent); }
.nx-mini a:nth-child(3) i { color: var(--green); }
.nx-mini em { position: absolute; top: -6px; right: -6px; font-style: normal; font-size: 10px; background: var(--pink); color: #fff; border-radius: 9px; padding: 1px 6px; box-shadow: 0 0 8px rgba(244,114,182,.7); }
.nx-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 10px 2px -2px; }
.nx-h h2 { margin: 0; font: 600 18px var(--head-font); }
.nx-h .ln { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line2), transparent); }
.nx-h a { color: var(--muted) !important; font-weight: 700; font-size: 13px; white-space: nowrap; }
.nx-h a:hover { color: #fff !important; }
.nx-servers { grid-column: 1 / -1; }
.nx-servers .mon-bar { margin: 0 0 14px; }
.nx-chat { grid-column: span 8; min-width: 0; }
.nx-chat .chat { height: 100%; margin: 0; }
.nx-side { grid-column: span 4; display: grid; gap: 16px; align-content: start; }
.nx-t-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font: 600 15px var(--head-font); }
.nx-t-title a { font: 700 12px "Manrope", sans-serif; color: var(--muted) !important; }
.nx-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--text) !important; }
.nx-row + .nx-row { border-top: 1px solid var(--line); }
.nx-ava { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; font-size: 14px; }
.nx-row-main { display: grid; min-width: 0; }
.nx-row-main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-row-main small { font-size: 11px; font-weight: 700; }
.nx-place { margin-left: auto; font: 700 13px var(--head-font); font-style: normal; color: var(--muted); }
.nx-place.p1 { color: #fbbf24; }
.nx-place.p2 { color: #cbd5e1; }
.nx-place.p3 { color: #f59e0b; }
.nx-ev { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; }
.nx-ev > i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.nx-ev small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.nx-news { grid-column: span 4; display: flex; flex-direction: column; padding: 0; color: var(--text) !important; transition: transform .2s, border-color .2s; }
.nx-news:hover { transform: translateY(-3px); border-color: rgba(168,85,247,.45); }
.nx-news-img { position: relative; height: 140px; background: #151726 center 22% / cover; }
.nx-news-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(24, 18, 42,.75)); }
.nx-news-body { display: grid; gap: 4px; padding: 14px 18px 18px; }
.nx-news-body b { font-size: 15px; }
.nx-news-text { color: var(--muted); font-size: 13px; }
.nx-news-body small { color: var(--muted2); font-size: 12px; }
.nx-news-empty { grid-column: 1 / -1; text-align: center; }
.nx-tag { justify-self: start; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 3px 9px; border-radius: 7px; }
.nx-tag.c0 { color: var(--pink); background: rgba(244,114,182,.12); }
.nx-tag.c1 { color: var(--cyan); background: rgba(34,211,238,.12); }
.nx-tag.c2 { color: #c084fc; background: rgba(168,85,247,.14); }

/* чат */
/* чат на главной — в chat.css; ниже форма личных сообщений */
.neon .chat-form input { border-radius: 14px; }
.neon .chat-form .btn { padding: 0 16px; }

/* профиль */
.neon .pp-wrap {
  --pp-accent: #a855f7; --pp-accent-2: #67e8f9; --pp-green: #34d399;
  --pp-card: rgba(38,30,64,.92); --pp-card-2: rgba(255,255,255,.025);
  --pp-bd: rgba(255,255,255,.08); --pp-bd-2: rgba(255,255,255,.14);
  --pp-txt-dim: #8b90a3; --pp-txt-soft: #c9cdd9; --pp-tile: rgba(255,255,255,.04);
}
.neon .pp-card, .neon .pp-tabs { border-radius: 20px; }
.neon .pp-tab.active { background: var(--grad); color: #05060b; font-weight: 800; }

/* ---------- подвал ---------- */
.nx-foot { margin-top: 50px; border-top: 1px solid var(--line); background: rgba(24,18,42,.9); }
.nx-foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 30px; padding: 34px 0 26px; }
.nx-foot-about p { color: var(--muted); margin: 12px 0 14px; }
.nx-social { display: flex; gap: 8px; }
.nx-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: #fff !important; font-size: 16px; transition: .2s; }
.nx-social a:hover { transform: translateY(-2px); }
.nx-social a.vk:hover { background: #0077ff; }
.nx-social a.telegram:hover { background: #229ed9; }
.nx-social a.discord:hover { background: #5865f2; }
.nx-foot-col { display: grid; align-content: start; gap: 8px; }
.nx-foot-col b { font: 600 13px var(--head-font); margin-bottom: 4px; }
.nx-foot-col a { color: var(--muted) !important; font-size: 13.5px; }
.nx-foot-col a:hover { color: #fff !important; }
.nx-foot-bottom { padding: 16px 0 22px; border-top: 1px solid var(--line); color: var(--muted2); font-size: 12.5px; }

/* ---------- адаптив ---------- */
@media (max-width: 1240px) {
  .nx-link i:first-child { display: none; }
  .nx-link { padding: 9px 9px; }
}
@media (max-width: 1100px) {
  .hero-slider, .nx-stats, .nx-chat, .nx-side { grid-column: 1 / -1; }
  .nx-stats { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .nx-news { grid-column: span 6; }
  .nx-news:nth-of-type(3) { display: none; }
  .neon .with-side { grid-template-columns: 1fr; }
}
@media (max-width: 1020px) {
  .nx-head { padding-top: 10px; }
  .neon .burger { display: block; }
  .nx-nav { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 8px; flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(31, 24, 52,.97); border: 1px solid var(--line2); border-radius: 18px; box-shadow: 0 24px 60px -12px rgba(0,0,0,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .nx-nav.open { display: flex; max-height: calc(100vh - 100px); overflow-y: auto; }
  .nx-link { padding: 11px 12px; font-size: 14px; }
  .nx-link i:first-child { display: inline-block; width: 20px; text-align: center; }
  .nx-link .caret { margin-left: auto; }
  .nx-more .dd-menu { position: static; width: auto; box-shadow: none; border: 0; background: none; padding: 0 0 0 10px; transform: none; }
  .nx-more.open .dd-menu { display: grid; }
  .nx-right { margin-left: auto; }
  .neon .dd-center .dd-menu { top: 74px; }
}
@media (max-width: 700px) {
  .neon .wrap { padding: 0 12px; }
  .nx-bar { gap: 8px; padding: 7px 7px 7px 12px; border-radius: 18px; }
  .nx-logo { font-size: 0; gap: 0; }
  .nx-logo img { height: 28px; }
  .nx-foot .nx-logo { font-size: 15px; gap: 10px; }
  .nx-balance { padding: 0 10px; }
  .nx-balance b { display: none; }
  .nx-right { gap: 6px; }
  .nx-search { display: none; }
  .neon .profile-pill { padding-right: 4px; max-width: none; }
  .neon .profile-pill::after, .neon .pp-name { display: none; }
  .nx-ib, .neon .bell-btn, .neon .burger, .nx-balance { height: 40px; }
  .nx-ib, .neon .bell-btn, .neon .burger { width: 40px; }
  .nx-hero { min-height: 300px; background-position: 70% 30%; }
  .nx-hero::before, .neon .hero-slider .slide::before { background: linear-gradient(0deg, rgba(24, 18, 42,.97) 38%, rgba(24, 18, 42,.35)); }
  .nx-hero-in { padding: 22px 20px 50px; }
  .nx-hero h1 { font-size: 25px; }
  .nx-hero p { font-size: 14px; margin-bottom: 16px; }
  .neon .hero-slider .slider-dots { left: 20px; right: auto; bottom: 20px; }
  .nx-stats { grid-template-columns: 1fr; }
  .nx-k > b { font-size: 34px; }
  .nx-ring { width: 74px; height: 74px; }
  .nx-ring span { width: 58px; height: 58px; font-size: 13px; }
  .nx-news { grid-column: 1 / -1; }
  .nx-news:nth-of-type(3) { display: flex; }
  .neon .hl-servers-grid { grid-template-columns: 1fr; }
  .neon .hl-server-card { min-height: 200px; }
  .nx-foot-top { grid-template-columns: 1fr 1fr; gap: 20px; } .nx-foot-about { grid-column: 1 / -1; }
  .neon .card { padding: 18px; }
  .neon .card-title { margin: -4px -18px 16px; padding: 0 18px 12px; }
  .bento { gap: 12px; }
  .neon h1 { font-size: 21px; }
}

/* ---------- всплывающие уведомления ---------- */
.neon .hl-toast { background: rgba(33, 26, 56,.96); backdrop-filter: blur(14px); border-color: var(--line2, rgba(255,255,255,.12)); border-radius: 14px; }
.neon .hl-toast i { color: var(--accent2); }
.neon .hl-toast.ok i { color: var(--green); }
/* Подвал: линия-блик, звёздочки у заголовков, появление колонок, бьющееся сердце (как на старом сайте) */
.neon .nx-foot { position: relative; }
.neon .nx-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c1, #22d3ee), var(--c2, #a855f7), transparent); opacity: .8; }
.neon .nx-foot-col b::before { content: "★ "; color: var(--c1, #22d3ee); }
.neon .nx-foot-col { animation: nxFootIn .6s both; }
.neon .nx-foot-col:nth-child(2) { animation-delay: .1s; }
.neon .nx-foot-col:nth-child(3) { animation-delay: .2s; }
.neon .nx-foot-col:nth-child(4) { animation-delay: .3s; }
.neon .nx-social a { transition: transform .35s; }
.neon .nx-social a:hover { transform: rotate(360deg) scale(1.08); }
.neon .nx-beat { display: inline-block; color: #ff4d8d; animation: nxBeat 1.2s infinite; }
@keyframes nxFootIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nxBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .neon .nx-foot-col, .neon .nx-beat { animation: none; } }

/* ---------- шапка v2 (2026-10-24): во всю ширину, без логотипа, ровная линия кнопок ---------- */
.nx-head { padding-top: 0; background: rgba(22, 17, 38, .72); border-bottom: 1px solid rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 10px 30px -22px rgba(0,0,0,.9); }
.nx-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.45) 30%, rgba(168,85,247,.45) 70%, transparent); pointer-events: none; }
.nx-bar, .neon .nx-bar { height: 64px; padding: 0; gap: 16px; border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.nx-bar::after { display: none; }
.nx-nav, .neon .nx-nav { margin: 0 auto 0 -10px; height: 100%; gap: 0; }
.nx-link { position: relative; height: 100%; padding: 0 12px; border-radius: 0; font-size: 14px; }
.nx-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--grad); opacity: 0; transform: scaleX(.4); transition: .2s; }
.nx-link:hover, .dd.open > .nx-link { background: none; }
.nx-link.active { background: none; box-shadow: none; }
.nx-link.active::after, .nx-link:hover::after { opacity: 1; transform: none; }
.nx-link:hover::after { opacity: .45; }
.nx-more { height: 100%; display: flex; }
.nx-more .dd-menu { top: calc(100% + 6px); }
.nx-right { gap: 8px; }
.nx-ib, .neon .bell-btn { width: 40px; height: 40px; border-radius: 12px; }
.nx-balance { height: 40px; border-radius: 12px; }
.neon .profile-pill { height: 44px; border-radius: 12px; }
.neon .main { padding-top: 28px; }
@media (max-width: 1020px) {
  .nx-nav, .neon .nx-nav { height: auto; margin: 0; top: calc(100% + 8px); left: 12px; right: 12px; }
  .nx-link { height: auto; padding: 11px 12px; border-radius: 10px; }
  .nx-link::after { display: none; }
  .nx-link.active { background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(168,85,247,.14)); }
  .nx-more { height: auto; display: block; }
  .nx-right { margin-left: 0; width: 100%; }
  .neon .nx-right .burger { margin-left: auto; order: 9; }
}
@media (max-width: 700px) {
  .nx-bar, .neon .nx-bar { height: 58px; }
  .nx-ib, .neon .bell-btn, .neon .burger, .nx-balance { height: 38px; }
  .nx-ib, .neon .bell-btn { width: 38px; }
  .neon .profile-pill { height: 40px; }
  .neon .main { padding-top: 18px; }
}

/* ---------- меню «Ещё»: панель со значками и подписями (2026-10-24, выбран вариант A) ---------- */
.nx-more-btn .caret { transition: transform .2s; opacity: .7; }
.nx-more.open .nx-more-btn .caret { transform: rotate(180deg); }
.nx-more { position: relative; }
.nx-more .dd-menu.nx-more-menu { left: 50%; right: auto; transform: translateX(-50%); top: calc(100% + 10px); width: 720px; min-width: 0; padding: 16px;
  grid-template-columns: 1fr 1fr; gap: 6px; border-radius: 20px; background: rgba(28, 22, 48, .98); }
.neon .nx-more-menu a.nx-mi { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 14px; color: #fff; background: none; }
.neon .nx-more-menu a.nx-mi:hover, .neon .nx-more-menu a.nx-mi.active { background: rgba(255,255,255,.06); }
.nx-mi-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 17px;
  background: color-mix(in srgb, var(--mc) 16%, transparent); color: var(--mc); transition: transform .15s; }
.neon .nx-more-menu .nx-mi-ic i { color: var(--mc); width: auto; opacity: 1; font-size: 17px; }
.nx-mi:hover .nx-mi-ic { transform: scale(1.06); }
.nx-mi-t { display: grid; gap: 2px; min-width: 0; }
.nx-mi-t b { font: 700 14.5px "Manrope", sans-serif; }
.nx-mi-t small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-mi-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding: 12px 14px;
  border-radius: 14px; background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(168,85,247,.14)); font-size: 13px; color: #cbd5e1; }
.neon .nx-more-menu .nx-mi-foot a { padding: 0; background: none; color: var(--cyan); font-weight: 700; white-space: nowrap; }
.neon .nx-more-menu .nx-mi-foot a i { color: inherit; font-size: 11px; margin-left: 4px; }
@media (max-width: 1020px) {
  .nx-more .dd-menu.nx-more-menu { position: static; transform: none; width: auto; padding: 6px 0 0; grid-template-columns: 1fr; background: none; border: 0; box-shadow: none; }
  .neon .nx-more-menu a.nx-mi { padding: 9px 10px; }
  .nx-mi-ic { width: 38px; height: 38px; font-size: 15px; }
  .nx-mi-foot { flex-direction: column; align-items: flex-start; }
}

/* меню из настроек: панель в одну колонку и простой список */
.nx-more .dd-menu.nx-more-menu.one { width: 380px; grid-template-columns: 1fr; }
.nx-more .dd-menu.nx-dd-list { left: 0; right: auto; transform: none; top: calc(100% + 10px); width: auto; min-width: 230px; padding: 8px; grid-template-columns: 1fr; gap: 2px; border-radius: 16px; }
.neon .nx-dd-list a.nx-mi { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 11px; color: #e5e7f0; background: none; white-space: nowrap; }
.neon .nx-dd-list a.nx-mi:hover, .neon .nx-dd-list a.nx-mi.active { background: rgba(255,255,255,.06); color: #fff; }
.nx-dd-list .nx-mi-ic { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.neon .nx-dd-list .nx-mi-ic i { font-size: 13px; }
.nx-dd-list .nx-mi-t b { font-size: 14px; font-weight: 600; }
.nx-more-btn > i:first-child { font-size: 13px; opacity: .75; }
@media (max-width: 1020px) {
  .nx-more .dd-menu.nx-more-menu.one, .nx-more .dd-menu.nx-dd-list { position: static; width: auto; min-width: 0; padding: 4px 0 0; background: none; border: 0; box-shadow: none; }
}