*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#dbe1ea}
body{background:#0b0f17}
.header{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:28px;height:28px;border-radius:50%}
.title{font-weight:700;font-size:18px;letter-spacing:.3px}
.status{margin-left:0;display:inline-flex;align-items:center;gap:8px}
.status + .status{margin-left:18px}
.status .text{opacity:.8}
.status .dot{width:14px;height:14px;border-radius:50%;background:#ff3b3b}
.status.online .dot{background:#1cc266}.status.online .text{opacity:1}
.tabs{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.tab{background:#0f141d;border:1px solid rgba(255,255,255,.08);padding:9px 14px;border-radius:10px;color:#cfe1ff;cursor:pointer;font-size:11px}
.tab.active{background:#101824;border-color:#2a3950}
main{padding:12px 16px}
.panel{display:none}
.panel.show{display:block}
.rowtitle{margin:6px 0 8px 2px;color:#a9b6c7}

.rowtitle-online{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.online-right{display:flex;align-items:center;gap:12px;}
.online-sums{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.tablewrap{border:1px solid rgba(255,255,255,.06);border-radius:12px;overflow-x:auto;overflow-y:visible}
#tab-violations .tablewrap{
  overflow-x:auto;
}

.hacks-suspicious-wrap{
  max-height:360px;
  overflow-y:auto;
}


.viol-history-wrap{max-height:220px;overflow-y:auto;}

table{width:100%;border-collapse:collapse}
thead th{background:#0f141d;color:#cfe1ff;font-weight:600;text-align:left;padding:6px 12px;position:sticky;top:0}
tbody td{padding:6px 12px;border-top:1px solid rgba(255,255,255,.06)}
.btn{display:inline-block;background:#0f141d;border:1px solid rgba(255,255,255,.08);padding:8px 12px;border-radius:9px;color:#cfe1ff;text-decoration:none}
.buttons{display:flex;gap:10px;margin:10px 0 16px}
.buttons-whalley .btn{
  padding:4px 8px;
  font-size:12px;
}
.logbox{margin-top:10px}
.logtitle{margin-bottom:6px;color:#a9b6c7}
.log{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px;max-height:220px;overflow:auto;background:#090e14;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;}
/* Chat coloring */
/* Chat column layout - simplified, widths via colgroup */
#chat-table{table-layout:fixed;width:100%;}
#chat-table th, #chat-table td{padding:6px 12px;}
#chat-table th:nth-child(3), #chat-table td:nth-child(3){text-align:center;}
#chat-table td:nth-child(4){white-space:normal;word-break:break-word;}
#chat-table th:nth-child(5), #chat-table td:nth-child(5){white-space:nowrap;}


tr.chat-row[data-type]{background:transparent;}
.badge-chat{display:inline-block;width:43px;padding:2px 0;border-radius:999px;font-size:11px;font-weight:600;margin-right:6px;text-align:center;}
.badge-chat.global{background:#1e90ff;color:#000000;}
.badge-chat.local{background:#ffffff;color:#000000;}
.badge-chat.squad{background:#ffd700;color:#000000;}
.badge-chat.admin{background:#ff4b4b;color:#000000;}
.badge-chat.bot{background:#00ff00;color:#000000;}
.mono{font-family:SFMono-Regular,Consolas,Menlo,monospace;font-size:12px}

#tab-chat .tablewrap{border:none;border-radius:0;}
.btn.btn-sm.btn-mute{color:#ffffff;min-width:0;padding:4px 10px;}



#tab-chat tbody td{padding:3px 12px;}

.online-header{margin-left:auto;margin-right:16px;display:inline-flex;align-items:center;gap:8px;color:#dbe1ea}
.online-header span{font-weight:600;}

.online-count-low{color:#ff4b4b;}
.online-count-mid{color:#ffd700;}
.online-count-high{color:#00ff00;}

.rowtitle-players{display:flex;align-items:center;justify-content:space-between;gap:12px}
.players-search{min-width:220px;max-width:260px;padding:4px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#0f141d;color:#dbe1ea;font-size:13px;}
.players-search::placeholder{color:#6e7a8c;font-size:12px;}

#chat-date-title{font-weight:600;}

.rowtitle-whalley{font-weight:600;}

#tab-settings .buttons{display:flex;}
#tab-settings .buttons .btn{flex:1;text-align:center;white-space:nowrap;}

.discord-status{margin:4px 0 10px 2px;color:#a9b6c7;font-size:13px;}
.discord-send{margin-top:10px;display:flex;gap:10px;}
.discord-input{flex:1;padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0f141d;color:#dbe1ea;font-size:13px;}
.discord-input::placeholder{color:#6e7a8c;font-size:12px;}


.discord-tools{margin-top:8px;display:flex;justify-content:flex-end;}


.discord-send .discord-btn{
  min-width:120px;
}


.rowtitle-sub{
  margin-top:12px;
  margin-bottom:6px;
  font-size:13px;
  font-weight:600;
  color:#a5b4c4;
}


.server-time-box{margin:6px 0 14px 2px;font-size:13px;color:#a9b6c7;}
.server-time-box div+div{margin-top:2px;}
.server-time-box span{font-weight:600;color:#dbe1ea;}


/* Equal columns for Wargm votes table */
#wargm-votes-table{
  table-layout:fixed;
}
#wargm-votes-table th,
#wargm-votes-table td{
  width:25%;
}


/* Smaller height for small buttons (Действие, Mute) */
.btn.btn-sm{
  padding:2px 10px;
  font-size:12px;
  line-height:1.2;
}


/* Fixed column widths for chat table */
#chat-table{
  table-layout:fixed;
  width:100%;
}
#chat-table th:nth-child(3),
#chat-table td:nth-child(3){
  text-align:center;
}
#chat-table th:nth-child(5),
#chat-table td:nth-child(5){
  min-width:110px; /* чуть шире, чем кнопка Заглушить */
}

/* Equal columns for Wargm tables */
#wargm-shop-table,
#wargm-votes-table{
  table-layout:fixed;
  width:100%;
}
#wargm-shop-table th,
#wargm-shop-table td,
#wargm-votes-table th,
#wargm-votes-table td{
  width:16.6667%;
}


/* Wrap long messages in chat */
#chat-table td:nth-child(4){
  white-space:normal;
  word-break:break-word;
}


/* Align time, nick, badge and action button to top when message wraps */
#chat-table td:nth-child(1),
#chat-table td:nth-child(2),
#chat-table td:nth-child(3),
#chat-table td:nth-child(5){
  vertical-align:top;
}

.vip-col{ text-align:center; white-space:nowrap; }

.vip-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#1e90ff; box-shadow:0 0 6px rgba(30,144,255,.9); }

/* VIP action dropdown */
.action-dropdown{position:relative;display:inline-block;}
.action-dropdown .action-toggle{min-width:110px;justify-content:center;}
.action-menu{position:absolute;top:100%;left:0;margin-top:4px;background:#0f141d;border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.65);padding:4px 0;min-width:140px;z-index:30;display:none;}
.action-menu.show{display:block;}
.action-menu.up{top:auto;bottom:100%;margin-top:0;margin-bottom:4px;}
.action-menu.up{top:auto;bottom:100%;margin-top:0;margin-bottom:4px;}
.action-item{padding:4px 12px;font-size:12px;white-space:nowrap;cursor:pointer;}
.action-item:hover{background:rgba(255,255,255,.08);}

.mute-dot{
  background:#ff9800; /* оранжевая */
  box-shadow:0 0 6px rgba(255,152,0,.9);
}

.ban-dot{
  background:#ff3b30; /* красная */
  box-shadow:0 0 6px rgba(255,59,48,.9);
}

/* Modal overlay */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
}
.modal-overlay.hidden{display:none;}
.modal-window{
  background:#111827;
  border-radius:16px;
  padding:16px 20px 14px;
  box-shadow:0 20px 40px rgba(0,0,0,.8);
  min-width:260px;
  max-width:360px;
}
/* Опасное модальное окно для перезагрузки сервера */
.modal-window.modal-danger{
  background:#7f1d1d;   /* тёмно-красный фон */
  box-shadow:none;      /* убираем свечение */
}
/* Заголовок по центру и посветлее */
.modal-window.modal-danger .modal-title{
  color:#fee2e2;
  text-align:center;
  width:100%;
}
/* Тело не показываем вообще — без строки "Перезагрузить сервер?" */
.modal-window.modal-danger .modal-body{
  display:none;
}
/* Кнопки по центру окна */
.modal-window.modal-danger .modal-actions{
  justify-content:center;
}
/* Кнопка Перезагрузить — красная */
.modal-window.modal-danger .modal-btn-ok{
  background:#b91c1c;
  border-color:#b91c1c;
  color:#fef2f2;
}
/* Кнопка Отмена — более спокойная */
.modal-window.modal-danger .modal-btn-cancel{
  background:transparent;
  border-color:rgba(248,250,252,0.3);
  color:#e5e7eb;
  opacity:0.9;
}
.modal-title{
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
}
.modal-body{
  font-size:13px;
  margin-bottom:10px;
}
.modal-input-wrap{
  margin-bottom:10px;
}
.modal-input{
  width:100%;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.15);
  background:#020617;
  color:#f9fafb;
  font-size:13px;
}
.modal-actions{
  display:flex;
  justify-content:center;
  gap:8px;
}
.modal-btn-cancel{
  opacity:.8;
}
.hidden{display:none;}


/* =============================
   UI Login modal (pretty)
   Only affects #ui-login-overlay
   ============================= */

#ui-login-overlay.modal-overlay{
  /* slightly softer + blur, but only for login */
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(30,144,255,.14), rgba(0,0,0,0) 55%),
    rgba(0,0,0,.70);
  backdrop-filter: blur(6px);
}

#ui-login-overlay .modal-window.modal-login{
  position:relative;
  width: min(92vw, 420px);
  max-width: 420px;
  padding: 22px 24px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(2,6,23,.92));
  box-shadow: 0 26px 60px rgba(0,0,0,.78);
  overflow:hidden; /* prevent huge logo from spilling out */
}

/* watermark logo (subtle) */
#ui-login-overlay .modal-window.modal-login::before{
  content:"";
  position:absolute;
  right:-88px;
  top:-78px;
  width: 320px;
  height: 320px;
  background: url('/img/sp.png') no-repeat center/contain;
  opacity: .10;
  filter: saturate(1.05);
  pointer-events:none;
}

#ui-login-overlay .login-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 14px;
}

#ui-login-overlay .login-logo{
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55));
}

#ui-login-overlay .login-head-text{display:flex;flex-direction:column;gap:2px;}
#ui-login-overlay .login-title{font-size:20px;font-weight:800;letter-spacing:.3px;line-height:1.1;}
#ui-login-overlay .login-sub{font-size:13px;color:#a9b6c7;line-height:1.25;}

#ui-login-overlay .modal-body{position:relative;z-index:1;margin:0;}

#ui-login-overlay .modal-input-row{
  margin-top: 10px;
}

#ui-login-overlay .modal-input-label{
  min-width: 72px;
  color: #9ca3af;
}

#ui-login-overlay .modal-input{
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,6,23,.72);
}

#ui-login-overlay .modal-input:focus{
  outline: none;
  box-shadow: 0 0 0 1px rgba(30,144,255,.55), 0 0 22px rgba(30,144,255,.12);
  border-color: rgba(30,144,255,.55);
}

#ui-login-overlay #ui-login-error{
  margin-top: 10px !important;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(185,28,28,.16);
  border: 1px solid rgba(248,113,113,.35);
  color: #fecaca !important;
  font-size: 12px;
}

#ui-login-overlay .modal-actions{
  margin-top: 14px !important;
  justify-content: stretch;
}

#ui-login-overlay .modal-btn-ok{
  width: 100%;
  height: 38px;
  border-radius: 10px;
  background: #1e90ff;
  border-color: #1e90ff;
  color: #000;
  font-weight: 800;
  letter-spacing: .2px;
}

#ui-login-overlay .modal-btn-ok:hover{
  filter: brightness(1.05);
}



/* VIP notify settings row */
.vip-notify-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0 14px 2px;
  font-size:13px;
  color:#a9b6c7;
}
.vip-notify-label{
  width:260px;
}
.vip-toggle{
  min-width:80px;
  padding:4px 6px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
}
.vip-toggle.on{
  background:#1e90ff;
  color:#000000;
}
.vip-toggle.off{
  background:#4b5563;
  opacity:.85;
}
.vip-input-prefix,
.vip-input-message{
  padding:4px 8px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.15);
  background:#020617;
  color:#e5e7eb;
  font-size:13px;
  width:480px;
  max-width:480px;
  flex:0 0 auto;
  height:28px;
  line-height:18px;
}
.vip-input-prefix{
  width:90px;
}
.vip-input-message{
  flex:1;
}



.vip-header-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.vip-header-row .btn{
  margin-left:auto;
}

.vip-counter{
  font-size:13px;
  color:#a9b6c7;
}


.settings-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0 8px 0;
}

.hacks-hint{
  font-size:12px;      
  color:#a9b6c7;       
}


.settings-controls{
  display:flex;
  align-items:center; 
  gap:8px;            
}

/* Wipe DB row: stretch buttons block to full available width */
.settings-controls.settings-controls-wipe{
  flex: 1 1 auto;
}

.settings-controls-hacks{
  display:flex;
  align-items:center;
  gap:8px;
}

.hacks-first-control{
  min-width:120px; 
  display:inline-flex;
  justify-content:flex-start; 
}

.settings-sub-label.hacks-first-control{
  margin-left:-4px;
}

.settings-controls-hacks > :first-child{
  min-width:110px;          /* подгони под свой вкус: 100–120 */
  display:inline-flex;
  justify-content:flex-start;
}

.settings-label{
  width:260px;
  font-size:13px;
  color:#a9b6c7;   /* как у vip-notify-row */
  font-weight:400;
}

.settings-sub-label.hacks-attempts-label{
  margin-left:24px;
  margin-right:10px;
}

.settings-sub-label{
  font-size:13px;
  font-weight:400;
  color:#e5e7eb;
}

.settings-input{
  width:80px;
  flex:0 0 80px;
  padding:4px 8px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.15);
  background:#020617;
  color:#e5e7eb;
  font-size:13px;
  margin-left:0;
  text-align:center;
  height:28px;
  line-height:18px;
}

/* Выравниваем по одной вертикали инпуты серии и времени взлома */
#hacks-autoban-repeats,
#hacks-adv-seconds,
#hacks-dial-seconds{
  width:80px;          /* одинаковая ширина для всех трёх */
  display:inline-block;
}

#vip-slots-input,
#vip-coins-per-vip-input,
#vip-coins-for-all-input,
#wargm-vote-coins-amount{
  width:80px;
  flex:0 0 80px;
}

#hacks-autoban-repeats,
#hacks-adv-seconds,
#hacks-dial-seconds,
#hacks-adv-attempts,
#hacks-dial-attempts{
  width:80px;
  flex:0 0 80px;
}

#vip-slots-input,
#vip-coins-per-vip-input,
#vip-coins-for-all-input,
#wargm-vote-coins-amount{
  -moz-appearance:textfield;
}

/* Chrome, Safari, Edge */
#vip-slots-input::-webkit-outer-spin-button,
#vip-slots-input::-webkit-inner-spin-button,
#vip-coins-per-vip-input::-webkit-outer-spin-button,
#vip-coins-per-vip-input::-webkit-inner-spin-button,
#vip-coins-for-all-input::-webkit-outer-spin-button,
#vip-coins-for-all-input::-webkit-inner-spin-button,
#wargm-vote-coins-amount::-webkit-outer-spin-button,
#wargm-vote-coins-amount::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* Замки и Автобан — без шаговых стрелок */
#hacks-adv-seconds,
#hacks-adv-attempts,
#hacks-dial-seconds,
#hacks-dial-attempts,
#hacks-autoban-repeats{
  -moz-appearance:textfield;
}

/* Chrome, Safari, Edge */
#hacks-adv-seconds::-webkit-outer-spin-button,
#hacks-adv-seconds::-webkit-inner-spin-button,
#hacks-adv-attempts::-webkit-outer-spin-button,
#hacks-adv-attempts::-webkit-inner-spin-button,
#hacks-dial-seconds::-webkit-outer-spin-button,
#hacks-dial-seconds::-webkit-inner-spin-button,
#hacks-dial-attempts::-webkit-outer-spin-button,
#hacks-dial-attempts::-webkit-inner-spin-button,
#hacks-autoban-repeats::-webkit-outer-spin-button,
#hacks-autoban-repeats::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}


/* Overlay dropdown over tables: action menu as viewport-fixed popup */
.action-menu{
  position:fixed;
  z-index:1000;
}


#modal-input{
  -moz-appearance:textfield;
}
#modal-input::-webkit-outer-spin-button,
#modal-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.rowtitle-viol-history{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}

/* Fixed layout for violations tables so columns align exactly by colgroup */
#viol-mutes-table,
#viol-bans-table,
#viol-mutes-history-table,
#viol-bans-history-table{
  table-layout: fixed;
  width: 100%;
}

.viol-col-date{
  width: 18%;
}

.viol-col-nick{
  width: 22%;
}

.viol-col-steam{
  width: 25%;
}

.viol-col-term{
  width: 10%;
}

.viol-col-reason{
  width: 25%;
}
#viol-mutes-table,
#viol-bans-table,
#viol-mutes-history-table,
#viol-bans-history-table{
  table-layout: fixed;
  width: 100%;
}

.viol-col-date{
  width: 18%;
}

.viol-col-nick{
  width: 22%;
}

.viol-col-steam{
  width: 25%;
}

.viol-col-term{
  width: 10%;
}

.viol-col-reason{
  width: 25%;
}
.mute-ban-durations{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}

.mute-ban-durations .btn{
  flex: 1 1 0;
  white-space: nowrap;
}

.mute-ban-durations .on{
  box-shadow:0 0 0 1px rgba(96,165,250,.9);
}
.modal-input-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.modal-input-label{
  min-width:60px;
  font-size:13px;
  color:#9ca3af;
}

.discord-commands-grid {
  display: grid;
  grid-template-columns: 1fr 120px 120px;
  column-gap: 8px;
  row-gap: 10px;
  margin-top: 10px;
}


.discord-commands-grid .discord-send {
  display: contents;
}


.discord-commands-grid .discord-input {
  grid-column: 1;
  width: 100%;
}


#discord-send-btn {
  grid-column: 2;
}
#discord-clear-btn {
  grid-column: 3;
}


#discord-global-input {
  grid-column: 1;
}
#discord-global-send-btn {
  grid-column: 2 / 4;
}

#discord-ann-input {
  grid-column: 1;
}
#discord-ann-send-btn {
  grid-column: 2 / 4;
}
.discord-restart-wrap {
  margin-top: 10px;
  display: flex;
}
.discord-restart-wrap .btn.discord-btn {
  flex: 1 1 auto;
  width: 100%;
}
  cursor: default;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
  background-color: rgba(59,130,246,0.18);
  box-shadow: 0 0 0 1px rgba(59,130,246,0.6);
}
.action-dropdown .action-toggle{
  cursor: default;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
.action-dropdown .action-toggle:hover{
  background-color: rgba(59,130,246,0.15);
  box-shadow: 0 0 0 1px rgba(59,130,246,0.5);
}
.action-menu .action-item{
  cursor: default;
  transition: background-color 0.12s ease;
}
.action-menu .action-item:hover{
  background-color: rgba(31,41,55,0.95);
}
.chat-row .btn-mute{
  cursor: default; /* не даём курсору превращаться в текстовый */
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
.chat-row .btn-mute:hover{
  background-color: rgba(59,130,246,0.18);  /* лёгкая синяя подсветка */
  box-shadow: 0 0 0 1px rgba(59,130,246,0.6);
}
.btn:hover,
.btn-outline:hover,
.btn-xs:hover,
.btn-sm:hover {
  cursor: pointer;
  filter: brightness(1.2);
  transition: all 0.15s ease-in-out;
}

.viol-unmute-btn:hover,
.viol-unban-btn:hover,
.vip-remove-btn:hover,
.chat-row .btn-mute:hover,
.action-dropdown .action-toggle:hover {
  background-color: #3a7cff !important; /* SteelBlue */
  color: #fff !important;
  filter: brightness(1.1);
}

#discord-send-btn:hover,
#discord-clear-btn:hover,
#discord-global-send-btn:hover,
#discord-ann-send-btn:hover {
  background-color: #4169e1 !important; /* RoyalBlue */
  color: white !important;
  filter: brightness(1.15);
}

#discord-restart-btn {
  background-color: #b22222 !important; /* FireBrick */
  color: #ffffff !important;
}

#discord-restart-btn:hover {
  background-color: #8b0000 !important; /* DarkRed */
  color: #ffffff !important;
  filter: brightness(1.05);
}

.settings-input{
  flex:0 0 80px;
  padding:4px 8px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.15);
  background:#020617;
  color:#e5e7eb;
  font-size:13px;
  margin-left:0;
  text-align:center;
}

.settings-input{
  -moz-appearance:textfield;
}
.settings-input::-webkit-outer-spin-button,
.settings-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}







/* Top players (ambient cards) */
/* Glass style like login modal: transparent card + big watermark logo + translucent rows */
#tab-topplayers .topplayers-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:6px;
  max-width:1322px; /* 320*4 + 14*3 */
  margin:0 auto;
  scroll-snap-type:x proximity;
}
#tab-topplayers .topplayers-grid > .ambient-window{
  flex:0 0 320px;
  scroll-snap-align:start;
}
@media (max-width: 900px){
  #tab-topplayers .topplayers-grid{
    flex-wrap:wrap;
    max-width:100%;
  }
  #tab-topplayers .topplayers-grid > .ambient-window{
    flex:1 1 320px;
  }
}

#tab-topplayers .ambient-window{
  position:relative;
  border:none;
  /* smoother rounding like requested */
  border-radius:30px;
  outline:none;

  /* фон как в примере (положи файл в /img/spbot_bg_glass_1024.png) */
  background-color: rgba(12,18,32,.18) !important;
  background-image: url('/img/spbot_bg_glass_1024.png') !important;
  /* zoom a bit to crop the dark vignette/outline baked into the image */
  background-size: 118% 118% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  /* keep depth but avoid a visible dark "stroke" */
  box-shadow: 0 12px 28px rgba(0,0,0,.28);

  padding:14px 14px 10px;
  overflow:hidden;
}

/* big watermark logo (half-visible like login modal background) */
#tab-topplayers .ambient-window::before{
  display:none;
}

/* soft glow + vignette */
#tab-topplayers .ambient-window::after{
  display:none;
}

#tab-topplayers .ambient-title{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  margin:2px 0 12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.10);
  font-weight:800;
  letter-spacing:.2px;
  text-transform:uppercase;
  color:#cfe1ff;
}

/* icon block similar to login modal */
#tab-topplayers .tp-title-icon{
  width:48px;
  height:48px;
  padding:8px;
  border-radius:16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  object-fit:contain;
  flex:0 0 48px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.45));
}

#tab-topplayers .ambient-list{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-bottom:42px;
}

#tab-topplayers .top-row{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;

  /* translucent horizontal bars */
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 26px rgba(0,0,0,.25);
}
#tab-topplayers .top-row:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}

#tab-topplayers .top-rank{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;

  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#tab-topplayers .top-rank-icon{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.55));
}

#tab-topplayers .top-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
  opacity:.95;
}

#tab-topplayers .top-value{
  flex:0 0 auto;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
  font-weight:800;
  letter-spacing:.2px;
  opacity:.95;
}

#tab-topplayers .top-empty{
  position:relative;
  z-index:2;
  opacity:.70;
  text-align:center;
  padding:10px 0;
}

/* Remove any podium outline/background around medal icons */
#tab-topplayers .top-row:nth-child(1) .top-rank,
#tab-topplayers .top-row:nth-child(2) .top-rank,
#tab-topplayers .top-row:nth-child(3) .top-rank{
  border-color: rgba(255,255,255,.14) !important;
}


/* Modal duration selection highlight */
.mute-ban-durations .btn.on{
  border-color: rgba(70,130,180,.65);
  background: rgba(70,130,180,.25);
}


/* FTP sync indicator (orange pulse) */
.ftp-syncing{
  animation: ftpSyncPulse 1.15s ease-in-out infinite;
  border-color: rgba(255, 165, 0, 0.85) !important;
}
@keyframes ftpSyncPulse{
  0%{
    box-shadow: 0 0 0 0 rgba(255,165,0,0.10);
    background: rgba(255,165,0,0.10);
  }
  50%{
    box-shadow: 0 0 0 6px rgba(255,165,0,0.22);
    background: rgba(255,165,0,0.22);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(255,165,0,0.10);
    background: rgba(255,165,0,0.10);
  }
}


/* ===== UI Logout button (tabs) ===== */
.tab.tab-logout{
  background: #141019;
  border-color: rgba(239,68,68,.35);
  color: #fecaca;
}
.tab.tab-logout:hover{
  border-color: rgba(239,68,68,.55);
}
.tab.tab-logout:active{
  opacity: .92;
}
/* ===== /UI Logout button ===== */

/* ===== Login modal tweaks (hide placeholders + hint) ===== */
.login-input::placeholder{
  color: transparent;
}
.login-hint{
  display:none !important;
}
/* ===== /Login modal tweaks ===== */



/* === Trader Config Tab (embedded v15) === */

#tab-trader{
  /* scoped variables for Trader Config UI */
  --bg: transparent;
  --card: rgba(16, 24, 36, 0.62);
  --text: #f2f6ff;
  --tab: rgba(0,0,0,.18);
  --tabActive: #2d79c7;
  --btn: rgba(0,0,0,.18);
  --btnOn: #2d79c7;
  --input: rgba(0,0,0,.20);
  --shadow: 0 10px 24px rgba(0,0,0,.30);
  --radius: 14px;
    --tcCardW: 470px; /* card width (−2%) */
  --tcPriceReserve: 5ch; /* reserve for 5 digits */
  --tcPriceTotalW: 266px;  /* width like A0 B4 C2 Z3 */
  --tcTopH: 34px; /* height of chips + search */
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

#tab-trader *{ box-sizing:border-box; }
#tab-trader .trader-wrap{ padding:10px 12px 18px 12px; }

#tab-trader .topbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:10px}
#tab-trader .left,#tab-trader .right{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Reuse SPBot buttons but ensure label-btn behaves like button */
#tab-trader label.btn{cursor:pointer;user-select:none}
#tab-trader .btn.toggle.on{background:var(--btnOn);border-color:rgba(45,121,199,.55);font-weight:900}
#tab-trader .btn.primary{background:#2f5d8f}
#tab-trader .btn.good{background:#2e7b5d}
#tab-trader .btn.warn{background:#8f7430}

#tab-trader input[type="text"],
#tab-trader input[type="number"],
#tab-trader select{
  border:1px solid rgba(255,255,255,.08);
  background: var(--input);
  color: var(--text);
  padding:7px 10px;
  font-size:12px;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  border-radius:10px;
}
#tab-trader input[type="text"]{min-width:260px}
#tab-trader input[type="text"]::placeholder{color:rgba(242,246,255,.55)}
#tab-trader #trader-search{height:var(--tcTopH);padding:0 10px;}

#tab-trader input[type="number"]{width:140px}

#tab-trader .chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px;font-size:12px}
#tab-trader .chip{height:var(--tcTopH);padding:0 10px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);font-family:var(--mono);border-radius:10px;display:inline-flex;align-items:center}

#tab-trader .tabs{
  display:flex;gap:2px;background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);padding:2px;overflow:auto;white-space:nowrap;border-radius:10px;
}
#tab-trader .tab{
  background:var(--tab);border:1px solid rgba(255,255,255,.08);
  color:var(--text);padding:6px 12px;font-weight:700;font-size:12px;
  cursor:pointer;min-width:140px;text-align:center;border-radius:8px;
}
#tab-trader .tab.active{background:var(--tabActive)}
#tab-trader .tab .count{opacity:.85;font-weight:900;margin-left:6px;font-family:var(--mono);font-size:11px}

#tab-trader .grid{
  margin-top:10px;
  margin-left:auto;
  margin-right:auto;
  display:grid;
  grid-template-columns:repeat(3, var(--tcCardW));
  gap:12px;
  align-items:stretch;
  justify-content:center;
  width:100%;
  max-width:calc(3 * var(--tcCardW) + 24px);
}
@media (max-width:1460px){
  #tab-trader .grid{grid-template-columns:repeat(2, var(--tcCardW));max-width:calc(2 * var(--tcCardW) + 12px)}
}
@media (max-width:900px){
  #tab-trader .grid{grid-template-columns:1fr;max-width:none}
}

#tab-trader .card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  /* allow group dropdown menu to overlay outside the card */
  overflow:visible;
  min-height:320px;
}
#tab-trader .cardHead{
  padding:12px 12px 8px 12px;
  font-family:var(--mono);
  font-size:20px;
  font-weight:900;
  letter-spacing:.2px;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
}
#tab-trader .cardBody{
  padding:10px 12px 14px 12px;
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px;
  align-items:center;
}

#tab-trader .thumb{
  width:120px;height:160px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
}
#tab-trader .thumb img{width:100%;height:100%;object-fit:contain;display:block}
#tab-trader .thumb .ph{font-family:var(--mono);font-size:11px;color:rgba(242,246,255,.6);padding:8px;text-align:center}

#tab-trader .rows{
  display:grid;
  grid-template-columns: 130px 1fr;
  row-gap:10px;
  column-gap:12px;
  align-items:center;
  font-size:12px;
}
#tab-trader .k{font-weight:400;text-align:left}
#tab-trader .v{display:flex;gap:8px;align-items:center;justify-content: flex-end;flex-wrap:wrap}

#tab-trader .seg{
  display:inline-flex;border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);border-radius:10px;overflow:hidden;
}
#tab-trader .seg button{
  border:none;background:transparent;
  color:rgba(242,246,255,.9);
  padding:6px 10px;font-size:12px;cursor:pointer;min-width:76px;
}
#tab-trader .seg button + button{border-left:1px solid rgba(255,255,255,.06)}
#tab-trader .seg button.active{background:var(--btnOn);font-weight:900}

#tab-trader .price{display:grid;grid-template-columns:var(--tcPriceReserve) 1fr;column-gap:10px;align-items:center;width:var(--tcPriceTotalW);}
#tab-trader .cur{font-family:var(--mono);font-weight:900}
#tab-trader .cur small{font-family:var(--sans);font-weight:800;opacity:.9;}

#tab-trader .badgeRow{
  grid-column:1 / span 2;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:4px;
}
#tab-trader .pillBtn{
  font-family:var(--mono);
  font-size:11px;
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(0,0,0,.18);
  color:rgba(242,246,255,.92);
  cursor:pointer;
  user-select:none;
}
#tab-trader .pillBtn.on{background:var(--btnOn);font-weight:900}
#tab-trader .pillBtn.off{opacity:.55}
#tab-trader .pill{
  font-family:var(--mono);
  font-size:11px;
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(0,0,0,.18);
}
#tab-trader .pill.ok{background:#2e7b5d}
#tab-trader .pill.dirty{background:#8f7430}
#tab-trader .pill.bad{background:#8f3030}

#tab-trader .sqWrap{display:flex;gap:6px;flex-wrap:wrap}
#tab-trader .sqBtn{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  color:rgba(242,246,255,.92);
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  font-family:var(--mono);
  border-radius:10px;
  min-width:62px;
  text-align:center;
  user-select:none;
}
#tab-trader .sqBtn.on{background:var(--btnOn);font-weight:900}
#tab-trader .sqBtn.off{opacity:.55}

/* Global settings modal */
#tab-trader .modalOverlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:24px 12px;
  z-index:999;
}
/* In embedded mode we rely on class="hidden" to keep the modal closed by default.
   SPBot global styles don't define .hidden, so the modal could become visible and block the UI. */
#tab-trader .modalOverlay.hidden{display:none !important;}
#tab-trader .hidden{display:none !important;}
#tab-trader .modal{
  width:min(980px, 100%);
  background:var(--card);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
#tab-trader .modalHead{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
}
#tab-trader .modalTitle{font-weight:900;font-size:14px;letter-spacing:.2px;}
#tab-trader .modalBody{padding:12px 12px 16px 12px}
#tab-trader .gsGrid{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:10px 12px;
  align-items:center;
  font-size:12px;
}
#tab-trader .gsLabel{font-weight:900}
#tab-trader .gsKey{font-family:var(--mono);font-size:11px;opacity:.85;margin-top:2px}
#tab-trader .gsLabelWrap{display:flex;flex-direction:column}
#tab-trader .gsControl{display:flex;align-items:center;justify-content:flex-end;gap:10px}
#tab-trader .gsInput{min-width:220px;width:260px}
@media (max-width:700px){
  #tab-trader .gsGrid{grid-template-columns:1fr}
  #tab-trader .gsControl{justify-content:flex-start}
  #tab-trader .gsInput{width:100%;min-width:0}
}

/* Align all controls to match Squares row (A0/B4/C2/Z3) */
#tab-trader .sqWrap{
  display:flex;
  gap:8px;
  width:100%;
  min-width:0;
}
#tab-trader .sqWrap .sqBtn{
  flex:1 1 0;
  min-width:0;
  padding:6px 0;
}

/* Segmented buttons occupy full control width */
#tab-trader .rows .seg{
  display:flex;
  width:100%;
}
#tab-trader .rows .seg button{
  flex:1 1 0;
  min-width:0;
  padding:6px 0;
  text-align:center;
}

/* Price control: reserve 4-digit space for old price, input width is consistent (same total width as Squares) */
#tab-trader .rows .price{
  width:100%;
  display:grid;
  grid-template-columns: minmax(4ch, max-content) 1fr;
  gap:10px;
  align-items:center;
  min-width:0;
}
#tab-trader .rows .price > .tc-old-price{
  min-width:4ch;
  justify-content:flex-end;
  text-align:right;
  padding-right:4px;
}
#tab-trader .rows .price > input{
  width:100% !important;
  min-width:0;
}

/* Famepoints control ("Нужны Очки славы"):
   - Def/Да/Нет must be equal-width and occupy the same width as A0/B4/C2/Z3 row
   - In "Да + input" mode: 50/50 on one line, total width matches the same control width
*/
#tab-trader .tc-fame-root{
  width:100%;
  flex:1 1 0;
  min-width:0;
}
#tab-trader .tc-fame-root > .seg{
  width:100%;
}
#tab-trader .tc-fame-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
}
#tab-trader .tc-fame-wrap > .tc-fame-btn,
#tab-trader .tc-fame-wrap > .tc-fame-input{
  flex:1 1 0;
  min-width:0;
}
#tab-trader .tc-fame-wrap > .tc-fame-btn{
  padding:6px 0;
}
#tab-trader .tc-fame-wrap > .tc-fame-input{
  width:100% !important;
  -moz-appearance:textfield;
}
#tab-trader .tc-fame-wrap > .tc-fame-input::-webkit-outer-spin-button,
#tab-trader .tc-fame-wrap > .tc-fame-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* Old price visual (no border, +50% font size) */
#tab-trader .tc-old-price{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  font-family:var(--mono);
  font-weight:900;
  font-size:18px;
  padding:8px 10px;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  border-radius:10px;
  background:rgba(0,0,0,.18);
}


/* === Trader Card Head: title left, category select right (fixed to controls width) === */
#tab-trader .cardHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  /* dropdown menu must not be clipped by the head */
  overflow:visible;
}
#tab-trader .cardHead .tc-title{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#tab-trader .cardHead .tc-headRight{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}

#tab-trader .tc-groupdd{position:relative;display:inline-block;}
#tab-trader .tc-groupdd-btn{
  width:142px; min-width:142px; max-width:142px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  color:var(--text);
  border-radius:10px;
  padding:7px 10px;
  font-size:12px;
  cursor:pointer;
  user-select:none;
}
#tab-trader .tc-groupdd-btn:hover{border-color:rgba(45,121,199,.55);}
#tab-trader .tc-groupdd-label{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#tab-trader .tc-groupdd-arrow{opacity:.85;font-size:12px;flex:0 0 auto;}
#tab-trader .tc-groupdd-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:220px;
  background:#0f141d;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  box-shadow:0 14px 30px rgba(0,0,0,.75);
  padding:6px 0;
  z-index:2000;
}
#tab-trader .tc-groupdd-item{padding:7px 12px;font-size:12px;cursor:pointer;white-space:nowrap;}
#tab-trader .tc-groupdd-item:hover{background:rgba(255,255,255,.08);}
#tab-trader .tc-groupdd-item.active{background:rgba(45,121,199,.35);}
#tab-trader .tc-groupdd-sep{height:1px;background:rgba(255,255,255,.10);margin:6px 0;}
#tab-trader .tc-groupdd-new{color:#cfe1ff;}
#tab-trader .cardHead .headGroupSelect{
  width:142px;
  min-width:142px;
  max-width:142px;
  font-size:12px;
}

/* Old price: remove box/outline */
#tab-trader .tc-old-price{background:transparent !important;border-radius:0 !important;width:var(--tcPriceReserve);min-width:var(--tcPriceReserve);max-width:var(--tcPriceReserve);text-align:right;font-variant-numeric:tabular-nums;}


/* Trader Config: new price input should fill available space in price control */
#tab-trader .tc-new-price{width:100% !important; min-width:0;}

/* Remove number spinners (stepper arrows) for New Price + Fame points inputs */
#tab-trader input.tc-new-price[type="number"],
#tab-trader input.tc-fame-input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
  text-align:center;
  font-variant-numeric: tabular-nums;
}
#tab-trader input.tc-new-price[type="number"]::-webkit-outer-spin-button,
#tab-trader input.tc-new-price[type="number"]::-webkit-inner-spin-button,
#tab-trader input.tc-fame-input[type="number"]::-webkit-outer-spin-button,
#tab-trader input.tc-fame-input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* === Trader Group Create Modal: force opaque background (no transparency) === */
#tab-trader #trader-groupOverlay .modal,
#tab-trader .modal.tcGroupModal{
  background: rgb(16, 24, 36) !important;
}


/* === Trader: Group create modal (opaque, SPBot style) === */
.tc-group-modal-overlay{z-index:9999;}
.tc-group-modal-overlay .modal-window{
  background:#0f141d;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 20px 45px rgba(0,0,0,.85);
  max-width:380px;
}
.tc-group-modal-overlay .modal-title{
  text-align:center;
  margin-bottom:10px;
}
.tc-group-modal-overlay .modal-input{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  background:#0b1220;
  color:#dbe1ea;
  padding:8px 10px;
  border-radius:10px;
  outline:none;
}
.tc-group-modal-overlay .modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:12px;
}
.tc-group-modal-overlay .tc-modal-btn-ok{
  background:#2d79c7;
  border-color:rgba(45,121,199,.55);
}
.tc-group-modal-overlay .tc-modal-btn-cancel{
  background:transparent;
  opacity:.9;
}


/* === Global settings modal (Глобальные настройки): opaque + compact controls + centered values + bigger labels === */
#tab-trader #trader-globalOverlay.modalOverlay{
  background:#0b0f17 !important; /* non-transparent */
}
#tab-trader #trader-globalOverlay .modal{
  background:#0f141d !important; /* ensure modal window is opaque */
}
#tab-trader #trader-globalOverlay .modalTitle{font-weight:400;font-size:28px;letter-spacing:.2px;}

/* Control sizing */
#tab-trader #trader-globalOverlay{ --gsControlW:130px; } /* ~1/2 of previous 260px */

/* Labels (left column) */
#tab-trader #trader-globalOverlay .gsLabel{
  font-size:22px;
  font-weight:400;   /* ~2x */
  line-height:1.15;
}
#tab-trader #trader-globalOverlay .gsKey{
  font-size:10px;
  font-weight:400;
  margin-top:4px;
  opacity:.85;
}

/* Inputs + buttons (right column) */
#tab-trader #trader-globalOverlay .gsInput{
  width:var(--gsControlW);
  min-width:var(--gsControlW);
  text-align:center; /* centered value */
  font-variant-numeric: tabular-nums;
}
#tab-trader #trader-globalOverlay .gsControl > button,
#tab-trader #trader-globalOverlay .gsControl > .btn,
#tab-trader #trader-globalOverlay .gsControl > .pillBtn{
  width:var(--gsControlW);
  min-width:var(--gsControlW);
  text-align:center;
  justify-content:center;
}

/* Segmented controls fit the same width as inputs */
#tab-trader #trader-globalOverlay .gsControl > .seg{
  width:var(--gsControlW);
}
#tab-trader #trader-globalOverlay .seg{
  display:flex;
  width:100%;
}
#tab-trader #trader-globalOverlay .seg button{
  flex:1 1 0;
  min-width:0;
  text-align:center;
  padding:6px 0;
}

/* Mobile: keep full width */
@media (max-width:700px){
  #tab-trader #trader-globalOverlay{ --gsControlW:100%; }
  #tab-trader #trader-globalOverlay .gsInput{ width:100%; min-width:0; }
  #tab-trader #trader-globalOverlay .gsControl > button,
  #tab-trader #trader-globalOverlay .gsControl > .btn,
  #tab-trader #trader-globalOverlay .gsControl > .pillBtn,
  #tab-trader #trader-globalOverlay .gsControl > .seg{
    width:100%;
    min-width:0;
  }
}

/* === Mass settings modal (Массовые настройки): match Global settings modal === */
#tab-trader #trader-massOverlay.modalOverlay{
  background:#0b0f17 !important; /* non-transparent */
}
#tab-trader #trader-massOverlay .modal{
  background:#0f141d !important; /* opaque */
}
#tab-trader #trader-massOverlay .modalTitle{font-weight:400;font-size:28px;letter-spacing:.2px;}

/* Typography like Global modal */
#tab-trader #trader-massOverlay{ --gsControlW:130px; }
#tab-trader #trader-massOverlay .gsLabel{
  font-size:22px;
  font-weight:400;
  line-height:1.15;
}
#tab-trader #trader-massOverlay .gsKey{
  font-size:10px;
  font-weight:400;
  margin-top:4px;
  opacity:.85;
}

/* Controls width and 50/50 for 2-button segment */
#tab-trader #trader-massOverlay .gsInput{
  width:var(--gsControlW);
  min-width:var(--gsControlW);
  text-align:center;
  font-variant-numeric: tabular-nums;
}
#tab-trader #trader-massOverlay .gsControl > .seg{
  width:var(--gsControlW);
}
#tab-trader #trader-massOverlay .seg{
  display:flex;
  width:100%;
}
#tab-trader #trader-massOverlay .seg button{
  flex:1 1 0;
  min-width:0;
  text-align:center;
  padding:6px 0;
}

/* Match Apply button height to segment buttons */
#tab-trader #trader-massOverlay .seg button{
  height:34px;
  padding:0;
}

/* Top row: status left, Apply button right */
#tab-trader #trader-massOverlay .trader-massBadgeRow{
  flex-wrap:nowrap;
}
#tab-trader #trader-massOverlay #trader-btnMassApply{
  margin-left:auto;
  width:var(--gsControlW);
  min-width:var(--gsControlW);
  height:34px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;}

@media (max-width:700px){
  #tab-trader #trader-massOverlay{ --gsControlW:100%; }
  #tab-trader #trader-massOverlay .gsInput{ width:100%; min-width:0; }
  #tab-trader #trader-massOverlay .gsControl > .seg{ width:100%; }
  #tab-trader #trader-massOverlay .trader-massBadgeRow{ flex-wrap:wrap; }
}


/* Economy Logs coloring */
.log .econ-sale{color:#1cc266;font-weight:700;}
.econ-buy{color:#ff4b4b;font-weight:700;}

/* Gameplay Log coloring */
.log .gpl-day{color:rgba(255,255,255,0.55);font-weight:700;}
.log .gpl-minigame{color:#4da3ff;font-weight:700;}
.log .gpl-lockpicking{color:#4da3ff;font-weight:700;}
.log .gpl-chest{color:#f7c843;font-weight:700;}
.log .gpl-bunker{color:#b18cff;font-weight:700;}
.log .gpl-other{color:rgba(255,255,255,0.55);font-weight:700;}


/* Online: Map button should match top tabs */
#btn-online-map.tab{ margin-left: 10px; }


/* =======================
   Online Map (Players)
   ======================= */
.modal-window.modal-map{
  width:min(98vw, 1848px);
  max-width:min(98vw, 1848px);
  height:min(96vh, 1204px);
  max-height:min(96vh, 1204px);
  padding:14px 14px 12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.modal-map-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 2px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.modal-map-title{
  font-weight:700;
  font-size:16px;
  letter-spacing:.2px;
}

.modal-map-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.modal-map-body{
  flex:1;
  min-height:0;
  display:flex;
  gap:12px;
  padding-top:12px;
}

.modal-map-side{
  width:320px;
  min-width:260px;
  max-width:420px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:10px;
  overflow:hidden;
}

.map-side-top{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.map-search{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.25);
  color:#dbe1ea;
  outline:none;
}

.map-search:focus{
  border-color:rgba(56,189,248,.45);
  box-shadow:0 0 0 3px rgba(56,189,248,.12);
}

.map-side-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  opacity:.85;
  font-size:12px;
  padding:0 2px;
}

.map-list{
  flex:1;
  min-height:0;
  overflow:auto;
  padding-right:2px;
}

.map-list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.18);
  margin-bottom:8px;
  cursor:pointer;
  user-select:none;
}

.map-list-item:hover{
  border-color:rgba(255,255,255,.14);
}

.map-list-item.active{
  border-color:rgba(34,197,94,.55);
  box-shadow:0 0 0 3px rgba(34,197,94,.12);
}

.map-list-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.map-list-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 12px rgba(34,197,94,.35);
  flex:0 0 auto;
}

.map-list-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
}

.map-list-coords{
  font-size:11px;
  opacity:.7;
  flex:0 0 auto;
}

.modal-map-stage{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  overflow:hidden;
}

.map-viewport{
  position:relative;
  height:100%;
  aspect-ratio:1/1;
  width:auto;
  max-width:100%;
  max-height:100%;
}

.map-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  image-rendering:auto;
}

.map-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.map-dot{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 16px rgba(34,197,94,.45);
  transform:translate(-50%,-50%);
  cursor:pointer;
  z-index:2;
}

.map-dot.active{
  width:12px;
  height:12px;
  box-shadow:0 0 22px rgba(34,197,94,.65);
  z-index:4;
}

.map-label{
  position:absolute;
  padding:4px 8px;
  border-radius:10px;
  font-size:12px;
  line-height:1.1;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  color:#dbe1ea;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space:nowrap;
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  z-index:3;
}

.map-label.active{
  border-color:rgba(34,197,94,.55);
  box-shadow:0 0 0 3px rgba(34,197,94,.12);
  z-index:5;
}

.map-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.75;
  font-size:14px;
}


.economy-count{ font-weight: 500; color: #7f8da0; font-size: 12px; margin-left: 6px; }

/* Twinks table action buttons — same visual size as top action button */
.twink-action-btn{
  min-width:110px;
  justify-content:center;
  text-align:center;
  padding:2px 10px;
  font-size:12px;
  line-height:1.2;
}