/* ============================================================
   Новая главная — стили черновика (/newhome)
   Всё внутри .nh, классы с префиксом nh_ — mystyles.css не задет.
   ============================================================ */

.nh{
  --nh-bg:#121014;
  --nh-deep:#0C0A0E;
  --nh-surface:#1A171E;
  --nh-surface2:#221E29;
  --nh-surface3:#2A2533;
  --nh-line:#302A3A;
  --nh-line-soft:#26212E;
  --nh-text:#EFEBF5;
  --nh-muted:#9A93A8;
  --nh-dim:#6E6880;
  --nh-accent:#8C69FB;
  --nh-accent-hi:#C4A3FF;
  --nh-wash:rgba(140,105,251,.13);
  --nh-live:#48D597;
  --nh-gold:#F5C451;
  --nh-danger:#E4635E;
  --nh-orange:#FF8A3D;
  --nh-blue:#5FA8F5;

  --nh-r:18px;
  --nh-r-md:14px;
  --nh-r-sm:10px;
  --nh-pill:999px;

  --nh-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  display:block;
  color:var(--nh-text);
  font-family:Inter,"Segoe UI",system-ui,sans-serif;

  /* Контент лежит внутри .row, а у него боковые margin:-15px — из-за
     этого страница была шире подвала. Компенсируем, чтобы края совпадали.
     Снизу — воздух, иначе секция липнет к подвалу. */
  padding:0 15px 36px;

  /* У авторизованного блок лежит внутри бутстраповской колонки из
     home/left.tpl, а у гостя такой обёртки нет — not_authorized.php её
     не подключает. Без ширины блок остаётся флекс-элементом .row и
     схлопывается по содержимому, поэтому задаём её явно. */
  width:100%;
  flex:1 1 100%;
  min-width:0;
}

.nh *{box-sizing:border-box}
.nh a{color:inherit;text-decoration:none}
.nh [hidden]{display:none !important}

.nh_lbl{font-family:var(--nh-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--nh-dim)}

/* ---------- Появление блоков при прокрутке ---------- */
.nh_reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.nh_reveal.nh_in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .nh_reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Первый экран ---------- */
.nh_hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:12px;align-items:stretch}
.nh_hero_main{display:flex;flex-direction:column;gap:12px;min-width:0}

.nh_slider{position:relative;border-radius:var(--nh-r);overflow:hidden;border:1px solid var(--nh-line);aspect-ratio:855/477;flex:none}
.nh_slides{display:flex;height:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
/* фон нужен для баннеров с fit:contain — по краям остаются поля */
.nh_slide{position:relative;flex:0 0 100%;height:100%;display:flex;align-items:flex-end;overflow:hidden;background:var(--nh-deep)}
.nh_slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nh_slide_shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,8,14,.82),rgba(10,8,14,0) 45%)}
.nh_slide_in{position:relative;padding:24px 26px}

.nh_dots{position:absolute;right:20px;bottom:20px;display:flex;gap:7px;z-index:3}
.nh_dot{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:rgba(239,235,245,.28);cursor:pointer;transition:.25s}
.nh_dot:hover{background:rgba(239,235,245,.55)}
.nh_dot[aria-current="true"]{background:var(--nh-accent-hi);width:26px;border-radius:var(--nh-pill)}

.nh_arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(12,10,14,.6);border:1px solid var(--nh-line);color:var(--nh-muted);
  opacity:0;transition:.22s;
}
.nh_slider:hover .nh_arrow,.nh_arrow:focus-visible{opacity:1}
.nh_arrow:hover{color:var(--nh-text);background:rgba(12,10,14,.9)}
.nh_arrow_prev{left:14px}
.nh_arrow_next{right:14px}

.nh_btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--nh-pill);font-size:13.5px;font-weight:600;
  transition:.16s;white-space:nowrap;border:none;cursor:pointer;
}
.nh_btn_go{background:linear-gradient(135deg,var(--nh-accent-hi),var(--nh-accent));color:#140F22;box-shadow:0 10px 26px -12px rgba(140,105,251,.95)}
.nh_btn_go:hover{filter:brightness(1.07);transform:translateY(-1px);color:#140F22}
.nh_btn_ghost{border:1px solid var(--nh-line);color:var(--nh-muted);background:var(--nh-surface2)}
.nh_btn_ghost:hover{color:var(--nh-text)}

/* ---------- Быстрые разделы ---------- */
.nh_quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;flex:none}
.nh_tile{
  position:relative;display:flex;flex-direction:column;gap:9px;padding:14px;
  border-radius:var(--nh-r);background:var(--nh-surface);border:1px solid var(--nh-line);
  overflow:hidden;transition:.18s;
}
.nh_tile:hover{transform:translateY(-2px);border-color:var(--nh-accent)}
.nh_tile::after{
  content:"";position:absolute;right:-34px;top:-34px;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(closest-side,var(--tile-glow),transparent);pointer-events:none;
}
.nh_tile_i{width:38px;height:38px;object-fit:contain;display:block;position:relative;flex:none}
.nh_tile b{font-size:13px;font-weight:600;position:relative;line-height:1.2}
.nh_tile span:last-child{font-size:11px;color:var(--nh-dim);position:relative;line-height:1.3}

/* ---------- Карточка игрока ---------- */
.nh_side{display:flex;flex-direction:column;min-width:0}
@media (min-width:1181px){
  .nh_side{position:relative;min-height:380px}
  .nh_side > .nh_me{position:absolute;inset:0}
}
.nh_me{
  background:linear-gradient(180deg,var(--nh-surface2),var(--nh-surface));
  border:1px solid var(--nh-line);border-radius:var(--nh-r);padding:18px;
  flex:1;display:flex;flex-direction:column;
}
.nh_me_top{display:flex;align-items:center;gap:12px}
.nh_me_ava{width:52px;height:52px;border-radius:15px;border:1px solid var(--nh-line);object-fit:cover;flex:none;display:block}
.nh_me_id{flex:1;min-width:0}
.nh_me_name{font-weight:600;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh_role{
  display:inline-flex;align-items:center;margin-top:4px;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:var(--nh-pill);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.nh_me_msg{display:flex;gap:7px;flex:none}
.nh_msgbtn{
  position:relative;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--nh-surface3);border:1px solid var(--nh-line);color:var(--nh-muted);font-size:15px;transition:.16s;
}
.nh_msgbtn:hover{color:var(--nh-text);border-color:var(--nh-accent);background:var(--nh-wash)}
.nh_msgbtn svg{width:17px;height:17px}
/* top.js вписывает в #inmess2_val1 число непрочитанных, а
   #notifications_line остаётся пустым — поэтому пустой бейдж
   схлопывается в точку, а с числом растягивается в кружок с цифрой */
.nh_msgbtn .circleuved,
.nh_msgbtn .circleuved_1{
  position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--nh-danger);border:2px solid var(--nh-surface2);color:#fff;
  font-family:var(--nh-mono);font-size:10px;font-weight:600;line-height:13px;text-align:center;
}
.nh_msgbtn .circleuved:empty,
.nh_msgbtn .circleuved_1:empty{min-width:9px;width:9px;height:9px;padding:0;border-radius:50%}
.nh_msgbtn .circleuved.disp-n,
.nh_msgbtn .circleuved_1.hidden{display:none}

/* Уведомления: наведение показывает три последних, клик по иконке ведёт
   на страницу целиком. Список тот же, что отдаёт GetData:notifications —
   его же скрипты зажигают красную точку на иконке. */
.nh_noti{position:relative}
.nh_noti_pop{
  position:absolute;top:calc(100% + 10px);right:0;z-index:40;width:310px;
  background:var(--nh-deep);border:1px solid var(--nh-line);border-radius:var(--nh-r-md);
  padding:10px;box-shadow:0 22px 44px -20px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;
}
.nh_noti:hover .nh_noti_pop,
.nh_noti:focus-within .nh_noti_pop{opacity:1;visibility:visible;transform:none}
.nh_noti_pop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nh_noti_head{
  font-family:var(--nh-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nh-dim);padding:2px 4px 8px;
}
/* #block в mystyles.css — выпадашка родной шапки с абсолютными
   координатами (top:95px; right:432px). Внутри поповера сбрасываем всё. */
.nh_noti_pop #block{
  position:static;display:block;width:auto;max-height:260px;overflow-y:auto;
  top:auto;right:auto;left:auto;bottom:auto;
  background:none;padding:0;border-radius:0;box-shadow:none;z-index:auto;
}
.nh_noti_pop #notifications{display:flex;flex-direction:column;gap:6px}
.nh_noti_pop .noty-block{
  border-radius:var(--nh-r-sm);padding:9px 11px;margin:0;
  font-size:12px;line-height:1.4;position:relative;
}
/* показываем только три свежих — остальное на странице уведомлений */
.nh_noti_pop .noty-block:nth-of-type(n+4){display:none}
.nh_noti_pop .noty-block span{display:block;margin-top:4px;font-family:var(--nh-mono);font-size:9.5px;opacity:.7}
.nh_noti_pop .noty-block .m-icon{display:none}
.nh_noti_empty{padding:14px;text-align:center;font-size:12px;color:var(--nh-dim)}
.nh_noti_all{
  display:block;text-align:center;margin-top:8px;padding:7px;
  border-radius:var(--nh-r-sm);background:var(--nh-surface3);border:1px solid var(--nh-line);
  font-size:12px;color:var(--nh-muted);transition:.16s;
}
.nh_noti_all:hover{color:var(--nh-text);border-color:var(--nh-accent)}

.nh_bal{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.nh_bal > div{background:var(--nh-deep);border:1px solid var(--nh-line-soft);border-radius:var(--nh-r-md);padding:10px 12px}
.nh_bal .nh_lbl{display:block;margin-bottom:3px}
.nh_bal b{font-family:var(--nh-mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.nh_bal .nh_rub b{color:var(--nh-accent-hi)}
.nh_bal .nh_coin b{color:var(--nh-gold)}

.nh_acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.nh_qa{
  display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:var(--nh-r-md);
  background:var(--nh-surface3);border:1px solid var(--nh-line);font-size:12.5px;font-weight:500;
  color:var(--nh-muted);transition:.16s;
}
.nh_qa:hover{color:var(--nh-text);border-color:var(--nh-accent);background:var(--nh-wash)}
.nh_qa em{font-style:normal;font-size:15px;line-height:1}
.nh_qa_full{
  grid-column:1 / -1;justify-content:center;border-color:transparent;font-weight:700;color:#140F22;
  background:linear-gradient(135deg,var(--nh-accent-hi),var(--nh-accent));
}
.nh_qa_full:hover{color:#140F22;filter:brightness(1.07);background:linear-gradient(135deg,var(--nh-accent-hi),var(--nh-accent))}

.nh_privs{margin-top:16px;display:flex;flex-direction:column;gap:6px;flex:1;min-height:70px}
.nh_privs_head{display:flex;align-items:center;gap:8px}
.nh_privs_count{font-family:var(--nh-mono);font-size:10px;color:var(--nh-accent-hi);background:var(--nh-wash);border-radius:var(--nh-pill);padding:1px 7px}
.nh_privs_list{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;overflow-y:auto;padding-right:2px}
.nh_privs_list.nh_more{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
}
.nh_priv{
  display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:var(--nh-r-sm);
  background:var(--nh-deep);border:1px solid var(--nh-line-soft);transition:.16s;
}
.nh_priv:hover{border-color:var(--nh-accent)}
.nh_priv_dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--nh-dim)}
.nh_priv_body{flex:1;min-width:0}
.nh_priv_name{display:block;font-size:12.5px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh_priv_server{display:block;font-size:10.5px;color:var(--nh-dim);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh_priv_state{
  font-family:var(--nh-mono);font-size:10px;letter-spacing:.03em;flex:none;
  color:var(--nh-dim);white-space:nowrap;
}

/* статусы привилегии: срок, бессрочная, приостановлена, заблокирована */
.nh_priv_on{color:var(--nh-live)}
.nh_priv_dot.nh_priv_on{background:var(--nh-live)}
.nh_priv_forever{color:var(--nh-accent-hi)}
.nh_priv_dot.nh_priv_forever{background:var(--nh-accent-hi)}
.nh_priv_paused{color:var(--nh-orange)}
.nh_priv_dot.nh_priv_paused{background:var(--nh-orange)}
.nh_priv_blocked{color:var(--nh-danger)}
.nh_priv_dot.nh_priv_blocked{background:var(--nh-danger)}
.nh_priv_state.nh_priv_paused,
.nh_priv_state.nh_priv_blocked{text-transform:uppercase;font-weight:600;font-size:9.5px;letter-spacing:.06em}

/* Гость */
.nh_guest{text-align:center;justify-content:center;padding:22px 18px}
.nh_guest h3{font-size:18px;margin:0 0 6px;font-weight:700}
.nh_guest p{color:var(--nh-muted);font-size:13px;margin:0 auto 18px;max-width:32ch}
.nh_guest .nh_btn{width:100%;margin-bottom:8px}

/* ---------- Пульс проекта ---------- */
.nh_pulse{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(220px,1.3fr);
  gap:1px;background:var(--nh-line);border:1px solid var(--nh-line);
  border-radius:var(--nh-r);overflow:hidden;margin-top:12px;
}
.nh_stat{background:var(--nh-surface);padding:15px 17px}
.nh_stat .nh_lbl{display:block;margin-bottom:6px}
.nh_stat b{font-family:var(--nh-mono);font-size:23px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:block;line-height:1.1}
.nh_stat small{font-size:11.5px;color:var(--nh-dim)}
/* прирост пользователей за сутки — приписка рядом с общим числом */
.nh_gain{
  font-style:normal;font-size:12px;font-weight:600;color:var(--nh-live);
  margin-left:7px;vertical-align:2px;
}
/* Пятая плашка устроена как остальные — подпись, число, пояснение;
   график уходит подложкой в правый нижний угол и на ритм текста не влияет */
.nh_spark{position:relative;overflow:hidden}
.nh_spark > .nh_lbl,
.nh_spark > b,
.nh_spark > small{position:relative;z-index:2;pointer-events:none}
/* без pointer-events график не ловил курсор и подсказка не появлялась */
.nh_spark_bg{
  position:absolute;right:0;bottom:0;width:64%;height:64%;
  display:block;opacity:.9;z-index:1;
}
.nh_spark_wait{
  position:absolute;right:16px;bottom:14px;
  font-family:var(--nh-mono);font-size:10.5px;color:var(--nh-dim);
}
.nh_spark_bg{cursor:crosshair}
.nh_spark_tip{
  position:absolute;right:14px;top:11px;z-index:2;pointer-events:none;
  font-family:var(--nh-mono);font-size:10.5px;color:var(--nh-text);white-space:nowrap;
  background:rgba(10,8,14,.92);border:1px solid var(--nh-line);
  border-radius:var(--nh-r-sm);padding:4px 9px;
}

/* ---------- Заголовки секций ---------- */
.nh_sec{margin-top:34px}
.nh_sec_head{display:flex;align-items:flex-end;gap:14px;margin-bottom:14px;flex-wrap:wrap;min-height:44px}
.nh_sec_head h2{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0}
.nh_sec_head p{font-size:12.5px;color:var(--nh-dim);margin:0}
.nh_sec_link{margin-left:auto;font-size:12.5px;color:var(--nh-muted);border-bottom:1px dashed var(--nh-line);white-space:nowrap;transition:.16s}
.nh_sec_link:hover{color:var(--nh-accent-hi);border-color:var(--nh-accent-hi)}

/* ---------- Серверы ---------- */
.nh_servers{display:flex;flex-wrap:wrap;gap:12px}
.nh_srv{
  position:relative;display:flex;align-items:flex-start;gap:12px;padding:12px;
  border-radius:var(--nh-r);background:var(--nh-surface);border:1px solid var(--nh-line);
  transition:.18s;overflow:hidden;flex:1 1 calc(33.333% - 8px);min-width:290px;
}
.nh_srv{cursor:pointer}
.nh_srv:hover{border-color:var(--nh-accent);transform:translateY(-2px);box-shadow:0 16px 34px -24px rgba(140,105,251,.85)}
.nh_srv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--nh-accent)}
.nh_srv_thumb{
  width:96px;height:96px;flex:none;border-radius:var(--nh-r-md);overflow:hidden;
  border:1px solid var(--nh-line-soft);background:var(--nh-surface2) center/cover no-repeat;
}
.nh_srv_body{flex:1;min-width:0;display:flex;flex-direction:column}
.nh_srv_name{font-weight:600;font-size:13.5px;line-height:1.3;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh_srv_meta{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:6px}
.nh_srv_map{font-family:var(--nh-mono);font-size:11px;color:var(--nh-dim);margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh_srv_foot{display:flex;align-items:center;gap:8px}
.nh_bar{height:7px;border-radius:var(--nh-pill);background:var(--nh-surface3);overflow:hidden;flex:1}
.nh_bar > i{display:block;height:100%;border-radius:var(--nh-pill);background:linear-gradient(90deg,var(--nh-accent),var(--nh-accent-hi))}
.nh_bar.cold > i{background:linear-gradient(90deg,#4B4459,#6E6880)}
.nh_srv_cnt{font-family:var(--nh-mono);font-size:11.5px;color:var(--nh-text);font-variant-numeric:tabular-nums;flex:none}
.nh_srv_tools{display:flex;gap:6px;margin-top:6px}
.nh_mini{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px;border-radius:var(--nh-r-sm);
  font-size:11.5px;font-weight:500;color:var(--nh-muted);background:var(--nh-surface2);
  border:1px solid var(--nh-line);cursor:pointer;transition:.16s;
}
.nh_mini:hover{color:var(--nh-text)}
.nh_mini_go{color:#140F22;background:linear-gradient(135deg,var(--nh-accent-hi),var(--nh-accent));border-color:transparent;font-weight:600}
.nh_mini_go:hover{color:#140F22;filter:brightness(1.07)}
.nh_srv.srv_off .nh_srv_thumb{opacity:.5;filter:grayscale(.6)}
.nh_srv.srv_off .nh_srv_name{color:var(--nh-muted)}

/* ---------- Три колонки ---------- */
.nh_triple{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.5fr) minmax(0,1.05fr);gap:12px;align-items:stretch}
/* Высоту ряда задаёт чат. Топ и ленту вынимаем из потока, иначе длинная
   лента растягивала бы всю секцию вниз вместо прокрутки внутри блока. */
.nh_col{display:flex;flex-direction:column;min-width:0}
@media (min-width:1181px){
  .nh_col{position:relative;min-height:460px}
  .nh_col > .nh_panel{position:absolute;inset:0}
}
.nh_panel{
  background:var(--nh-surface);border:1px solid var(--nh-line);border-radius:var(--nh-r);
  display:flex;flex-direction:column;overflow:hidden;height:100%;min-height:0;
}
.nh_panel_head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--nh-line-soft);flex:none}
.nh_panel_head h3{font-size:14px;font-weight:600;margin:0}
.nh_panel_head .nh_lbl,.nh_panel_head .nh_sec_link{margin-left:auto}
.nh_pico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--nh-wash);color:var(--nh-accent-hi);font-size:14px;flex:none}
/* Затухание внизу — иначе обрезанный последний элемент читается как конец списка.
   JS снимает класс, когда список домотали до низа. */
.nh_scroll{
  position:relative;flex:1;min-height:0;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--nh-surface3) transparent;
}
.nh_scroll.nh_more{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);
}
.nh_scroll::-webkit-scrollbar{width:6px}
.nh_scroll::-webkit-scrollbar-thumb{background:var(--nh-surface3);border-radius:3px}
.nh_scroll_pad{padding:8px 12px 8px 8px}

/* id #top_users нужен: на нём держится весь вид карточек топа
   (#top_users > .new__topusers). Но он же несёт свой max-height с
   прокруткой — вместе с прокруткой панели получалось два ползунка.
   Внутренний выключаем, мотает только .nh_scroll. */
.nh #top_users{max-height:none;overflow:visible;padding-right:12px}

/* Топ донатеров: своя строка, потому что родной top_donator.tpl
   не умеет обложку профиля — виджет её просто не передаёт */
.nh_top_list{display:flex;flex-direction:column;gap:6px}
.nh_top_row{
  position:relative;display:flex;align-items:center;gap:11px;padding:9px 10px;
  border-radius:var(--nh-r-md);border:1px solid var(--nh-line-soft);
  background:var(--nh-surface2);background-size:cover;background-position:center;
  transition:.16s;
}
.nh_top_row:hover{border-color:var(--nh-accent);transform:translateX(2px)}
.nh_top_place{
  width:24px;height:24px;flex:none;border-radius:8px;display:grid;place-items:center;
  font-family:var(--nh-mono);font-size:11px;font-weight:600;color:var(--nh-dim);background:rgba(10,8,14,.55);
}
.nh_top_row:nth-child(1) .nh_top_place{color:#241B04;background:linear-gradient(140deg,#FFDD7A,#E0A21C)}
.nh_top_row:nth-child(2) .nh_top_place{color:#1B1B20;background:linear-gradient(140deg,#E7E7EF,#A8A8B8)}
.nh_top_row:nth-child(3) .nh_top_place{color:#231409;background:linear-gradient(140deg,#E8A87C,#B26A3C)}
.nh_top_ava{width:32px;height:32px;flex:none;border-radius:9px;object-fit:cover;border:1px solid rgba(255,255,255,.12)}
.nh_top_name{flex:1;min-width:0}
.nh_top_name b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.nh_top_sub{display:block;font-size:11px;color:#A79FB6}
.nh_top_val{font-family:var(--nh-mono);font-size:12.5px;font-weight:600;color:var(--nh-accent-hi);flex:none;white-space:nowrap}

.nh_tabs{display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid var(--nh-line-soft);flex:none}
.nh_tab{
  flex:1;text-align:center;font-size:12px;font-weight:500;color:var(--nh-dim);
  padding:6px;border:none;border-radius:var(--nh-r-sm);background:none;cursor:pointer;transition:.16s;
}
.nh_tab:hover{color:var(--nh-text)}
.nh_tab[aria-selected="true"]{color:var(--nh-text);background:var(--nh-surface3)}

/* Чат приходит готовым блоком темы со своим заголовком, скроллом сообщений
   и строкой ввода. Раскладку не навязываем — только подгоняем под вид
   остальных панелей: шапка как .nh_panel_head, без своей серой плашки. */
.nh_chat_slot{flex:1;min-height:0;overflow:auto}
.nh_chat_slot .new_header_tab{
  padding:14px 16px;border-radius:0;background:none;
  border-bottom:1px solid var(--nh-line-soft);margin-bottom:0;
}
.nh_chat_slot .card_servers__header__icon{
  width:28px;height:28px;border-radius:9px;flex:none;
  background:var(--nh-wash);color:var(--nh-accent-hi);
}
.nh_chat_slot .card_servers__header__icon svg{width:15px;height:15px}
.nh_chat_slot .card_servers__header__title{font-size:14px;font-weight:600;color:var(--nh-text)}
.nh_chat_slot .block{margin-bottom:0;background:none;padding:10px 12px !important}

/* аватарки онлайна наезжали на индикатор — даём им свою полосу и счётчик */
.nh_chat_slot .flex_online_block{background:var(--nh-surface3);padding:5px 10px;gap:10px;align-items:center}
.nh_chat_slot .user_online_block{max-width:none;gap:0;margin-right:2px}
.nh_chat_slot .user_online_block .user_online_top:nth-of-type(n+4){display:none}
.nh_chat_slot .user_online_img{width:26px;height:26px;border-radius:50%;margin-right:-7px;border:2px solid var(--nh-surface3)}
.nh_online_more{
  font-family:var(--nh-mono);font-size:10.5px;color:var(--nh-muted);
  padding-left:13px;white-space:nowrap;
}

/* ---------- Новости и форум ---------- */
.nh_duo{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:12px;align-items:stretch}
.nh_duo_col{display:flex;flex-direction:column;min-width:0}
.nh_duo_body{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
/* новостей обычно меньше, чем тем на форуме, — раскладываем их сеткой
   и растягиваем по высоте колонки, чтобы снизу не оставалась пустота */
.nh_duo_body #new_news{
  flex:1;min-height:0;display:grid;gap:12px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-content:stretch;
}
@media (max-width:900px){
  .nh_duo_body #new_news{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .nh_duo_body #new_news{grid-template-columns:1fr}
}
.nh_duo_body #new_news > *{height:100%;margin:0}

/* Темы форума приходят из elements/last_forum_topic.tpl — там иконка и текст
   упираются в край панели, добавляем поля */
.nh .forum-feed-item{padding:12px 16px}
.nh .forum-feed-item__icon{margin-right:2px}

/* Последние покупки привилегий */
.nh_buys_head{display:flex;align-items:center;gap:12px;margin-top:16px;flex:none}
.nh_buys_head .nh_sec_link{margin-left:auto}
/* Витрина магазина */
.nh_goods_row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:8px;flex:none}
.nh_goods{
  display:flex;flex-direction:column;gap:4px;padding:13px 14px;min-width:0;
  border-radius:var(--nh-r-md);background:var(--nh-surface);border:1px solid var(--nh-line);
  transition:.16s;
}
.nh_goods:hover{border-color:var(--nh-accent);transform:translateY(-2px)}
.nh_goods_name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh_goods_server{font-size:10.5px;color:var(--nh-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh_goods_price{
  margin-top:4px;font-family:var(--nh-mono);font-size:12.5px;font-weight:600;color:var(--nh-accent-hi);
}
@media (max-width:1100px){.nh_goods_row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.nh_goods_row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* карточки покупок были слишком тесными — две в ряд вместо трёх */
.nh_buys{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin-top:8px;flex:none;
}
.nh_buy{
  display:flex;align-items:center;gap:12px;padding:12px 14px;min-width:0;
  border-radius:var(--nh-r-md);background:var(--nh-surface);border:1px solid var(--nh-line);
  transition:.16s;
}
.nh_buy:hover{border-color:var(--nh-accent);transform:translateY(-2px)}
.nh_buy_ava{width:32px;height:32px;flex:none;border-radius:9px;object-fit:cover;border:1px solid var(--nh-line-soft)}
.nh_buy_body{flex:1;min-width:0;display:flex;flex-direction:column}
.nh_buy_top{font-size:12.5px;line-height:1.3;color:var(--nh-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh_buy_top b{font-weight:600}
.nh_buy_top em{font-style:normal;font-weight:600;color:var(--nh-accent-hi)}
.nh_buy_sub{font-size:10.5px;color:var(--nh-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh_buy_date{font-family:var(--nh-mono);font-size:9.5px;color:var(--nh-dim);flex:none;white-space:nowrap}
@media (max-width:560px){
  .nh_buys{grid-template-columns:1fr}
}

/* Соцсети под новостями */
.nh_social{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:none;margin-top:12px}
.nh_soc{
  display:flex;align-items:center;gap:11px;padding:12px 14px;min-width:0;
  border-radius:var(--nh-r-md);background:var(--nh-surface);border:1px solid var(--nh-line);
  transition:.18s;
}
.nh_soc:hover{border-color:var(--soc);transform:translateY(-2px)}
.nh_soc iconify-icon{
  width:34px;height:34px;flex:none;display:grid;place-items:center;font-size:19px;
  border-radius:11px;background:var(--soc);color:#fff;
}
.nh_soc span{display:flex;flex-direction:column;min-width:0}
.nh_soc b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh_soc i{font-style:normal;font-size:11px;color:var(--nh-dim)}
@media (max-width:560px){
  .nh_social{grid-template-columns:1fr}
}

/* Лента: родные .event_card__title обрезают текст в одну строку и
   рассчитаны на широкую колонку — в узкой распускаем на две строки */
.nh #events{display:flex;flex-direction:column;gap:8px}
.nh #events .event{
  padding:10px 12px;background:none;border:1px solid var(--nh-line-soft);
  border-radius:var(--nh-r-md);transition:.16s;cursor:pointer;
}
.nh #events .event:hover{background:var(--nh-surface2);border-color:var(--nh-accent)}
.nh .event_card__button{opacity:0;transition:.16s;flex:none}
.nh #events .event:hover .event_card__button{opacity:.75}
.nh .event_card__button svg{width:22px;height:22px}
.nh .event_card__title > a{font-size:12.5px;font-weight:600}
.nh .event_card__title{width:auto;flex:1;min-width:0}
.nh .event_card__title > span{
  white-space:normal;width:auto;overflow:hidden;text-overflow:clip;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  font-size:12px;line-height:1.35;
}
.nh .event_card__profile img{width:34px;height:34px}
.nh .event_card__button{flex:none}

/* Окно со списком игроков сервера */
.nh_srv_modal .modal-dialog{max-width:880px}
.nh_srv_modal .modal-content{
  background:var(--nh-surface);border:1px solid var(--nh-line);
  border-radius:var(--nh-r);overflow:hidden;padding:0;
}
.nh_srv_modal .modal-header{padding:0;border:none;position:relative;display:block}
.nh_srv_modal .close{
  position:absolute;top:12px;right:16px;z-index:2;
  color:#fff;opacity:.65;font-size:26px;line-height:1;text-shadow:0 1px 6px #000;
}
.nh_srv_modal .close:hover{opacity:1;color:#fff}

/* обложка карты должна закрывать всю шапку, иначе видно её исходный размер */
.nh_srv_modal_top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  min-height:132px;padding:20px 22px;
  background-size:cover !important;background-position:center !important;
  background-repeat:no-repeat !important;
}
.nh_srv_modal_info{display:flex;flex-direction:column;gap:5px;min-width:0}
.nh_srv_modal_name{font-size:17px;font-weight:600;color:#fff;line-height:1.25}
.nh_srv_modal_meta{font-family:var(--nh-mono);font-size:11.5px;color:#B9B2C8}
.nh_srv_modal .modal-body{padding:8px}

/* строки игроков приходят из elements/server_player.tpl —
   снимаем табличные рамки и приводим к виду карточек страницы */
.nh_players{margin:0;width:100%;border:none;background:none}
.nh_players tbody tr{display:flex;align-items:center;gap:14px;padding:2px 4px}
.nh_players tbody tr + tr{border-top:1px solid var(--nh-line-soft)}
/* у ячеек в server_player.tpl висят бутстраповские col-lg-*, их проценты
   мешали флексу — ширину задаём сами */
.nh_players td{
  border:none !important;padding:10px 6px;vertical-align:middle;background:none;
  width:auto !important;float:none !important;
}
.nh_players td:first-child{
  flex:none;width:30px;text-align:center;font-family:var(--nh-mono);color:var(--nh-dim);
}
.nh_players td:nth-child(2){flex:1 1 auto;min-width:120px}
.nh_players td:nth-child(3){flex:none;width:64px}
/* время не режем — оно фиксированной длины и должно читаться целиком */
.nh_players td:nth-child(4){flex:none;white-space:nowrap}
.nh_players td:nth-child(4) .descriptionbansp{white-space:nowrap}
/* блок команд всегда у правого края строки */
.nh_players tbody tr > td:last-child{flex:none;margin-left:auto;padding-right:2px}
.nh_players .descriptionbansp{
  margin:0;font-size:13px;font-weight:600;color:var(--nh-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nh_players .descriptionbans{
  font-family:var(--nh-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--nh-dim);
}
/* В mystyles.css кнопка .btn-save-settings — position:absolute, она задумана
   как часть поля: список слева, подтверждение справа внутри той же рамки.
   Сохраняем эту механику, меняем только оформление. */
.nh_players .input_new{position:relative;display:inline-flex;align-items:center;margin:0}
.nh_players select{
  flex:none;width:auto !important;max-width:190px;margin:0 !important;height:36px;
  padding:8px 46px 8px 12px !important;font-size:12px;line-height:1;
  background:var(--nh-surface2);border:1px solid var(--nh-line);color:var(--nh-text);
  border-radius:var(--nh-r-sm);cursor:pointer;
}
.nh_players select:hover{border-color:var(--nh-muted)}
.nh_players .btn-save-settings{
  position:absolute;top:1px;right:1px;bottom:1px;width:36px;height:auto;
  display:grid;place-items:center;padding:0;opacity:1;
  background:var(--nh-wash);border:none;border-left:1px solid var(--nh-line);
  border-radius:0 var(--nh-r-sm) var(--nh-r-sm) 0;
}
.nh_players .btn-save-settings:hover{background:rgba(140,105,251,.28);opacity:1}
.nh_players .btn-save-settings svg{width:16px;height:16px}
.nh_players .loader{margin:20px auto}

.nh_empty{padding:26px;text-align:center;color:var(--nh-muted);background:var(--nh-surface);border:1px dashed var(--nh-line);border-radius:var(--nh-r);width:100%}
.nh_empty_small{padding:12px;text-align:center;color:var(--nh-dim);font-size:12px}

/* ---------- Адаптив ---------- */
@media (max-width:1180px){
  .nh_hero{grid-template-columns:1fr}
  .nh_triple{grid-template-columns:1fr 1fr}
  .nh_col_chat{grid-column:1 / -1;order:-1;min-height:420px}
  /* на узком экране колонки идут друг под другом — ограничиваем,
     чтобы лента не растянулась на несколько экранов */
  .nh_col > .nh_panel{max-height:560px}
  .nh_privs_list{max-height:168px}
  .nh_pulse{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nh_pulse .nh_spark{grid-column:1 / -1}
  .nh_duo{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nh_slide_in{padding:16px}
  .nh_quick{
    display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:4px;scrollbar-width:none;
  }
  .nh_quick::-webkit-scrollbar{display:none}
  .nh_quick .nh_tile{flex:0 0 142px;scroll-snap-align:start}
  .nh_srv{min-width:100%}
  .nh_triple{grid-template-columns:1fr}
  .nh_slide.nh_has_art .nh_slide_in{position:absolute;right:12px;bottom:12px;padding:0}
}