@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    background: #171717;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
}

#root {
    width: 100vw;
}

:root {
	--main-bg: #171717;
	--accent: #1f9bd4;
  	--accent-light: #58b7e3;
	--divider: #262626;
  	--text-dim: #8798ad;
	--hover: #1d1d1e;
   	--card2: #222223;
	--statics: #696969;
	--text-white: #cfdae8;
	--text-second: #718096;
}

                            
* {
	padding: 0px;
	margin: 0px;
	border: none;
  
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

           

a, a:link, a:visited  {
    text-decoration: none;
}

a:hover  {
    text-decoration: none;
}

            

aside, nav, footer, header, section, main {
	display: block;
}

h1, h2, h3, h4, h5, h6, p {
    font-size: inherit;
	font-weight: inherit;
}

ul, ul li {
	list-style: none;
}

img {
	vertical-align: top;
}

img, svg {
	max-width: 100%;
	height: auto;
}

address {
  font-style: normal;
}

                                      

input, textarea, button, select {
	font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
}

input::-ms-clear {
	display: none;
}

button, input[type="submit"] {
    display: inline-block;
    box-shadow: none;
    background-color: transparent;
    background: none;
    cursor: pointer;
}

input:focus, input:active,
button:focus, button:active {
    outline: none;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

label {
	cursor: pointer;
}

legend {
	display: block;
}

input[type='file'] {
	max-width: 100%;
}

.tippy-box[data-theme~='custom'] {
    background: var(--main-bg);
    color: var(--text-white);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--divider);
    backdrop-filter: blur(8px);
    padding: 2px 4px;
}

.tippy-box[data-theme~='custom'] .tippy-arrow {
    display: none;
}

.tippy-box[data-theme~='custom'][data-animation='shift-away'] {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tippy-box[data-theme~='custom'][data-animation='shift-away'][data-state='hidden'] {
    opacity: 0;
    transform: scale(0.85) translateY(4px) !important;
}

.tippy-box[data-theme~='custom'][data-animation='shift-away'][data-state='visible'] {
    opacity: 1;
    transform: scale(1) translateY(0) !important;
}

              
.iziToast {
	font-family: Montserrat, sans-serif !important;
    height: 68px;
    background: #262626 !important;
    border-radius: 15px !important;
    padding: 10px 0px 10px 0px !important;
}

.flag-preloader-css {
    width: 24px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flag-preloader-css::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #666;
    border-top-color: transparent;
    border-radius: 50%;
    animation: preloader-spin 0.8s linear infinite;
}

@keyframes preloader-spin {
    to { transform: rotate(360deg); }
}

.swiper-slide {
    width: 100% !important;
}

.banner_top{
	display: flex;
    gap: 15px;
}

.banner_top .banner_left {
    width: 77%;
}

.banner_top .top_donators {
	width: 23%;
    height: 100%;
}

.block{
	border: 1px solid var(--divider);
    border-radius: 15px;
    padding: 15px 20px;
    background: var(--hover);
}

.block .block_head{
	display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-white);
}

.block_head .head_icon{
	border: 1px solid rgba(0, 158, 255, 0.8);
    border-radius: 8px;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 158, 255, 0.2);
}

.donator_card{
	border-radius: 15px;
    padding: 10px;
    background: var(--divider);
    display: block;
}

.card_flex{
	display: flex;
    align-items: center;
    justify-content: space-between;
}

.card_title{
	display: flex;
    flex-direction: column;
    line-height: 1;
    width: 70%;
}

.card_title .login{
	font-weight: 500;
    font-size: 13px;
    color: var(--text-white);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.card_title .group{
	font-weight: 400;
	font-size: 12px;
	color: var(--text-second);
}

.donator_img{
	width: 40px;
    height: 40px;
    border-radius: 50%;
}

#online_users{
	margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.new_container{
	width: 100%;
  	height: 100vh;
    margin-right: auto;
    margin-left: auto;
    display: flex;
}

.left_menu{
	flex-direction: column;
    display: flex;
    width: 220px;
    border-right: 1px solid #262626;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
    z-index: 999;
}

.left_menu:after{
	content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(0, 158, 255, 0.09) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.menu_btn{
	display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 15px;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
}

.social_btn{
	display: flex;
    gap: 15px;
    padding: 15px;
    border-top: 1px solid var(--divider);
    flex-shrink: 0;
    justify-content: center;
}

.social_btn > a svg{
	width: 24px;
  	transition: 0.3s ease;
}

.social_btn > a:hover svg, .social_btn > a:hover svg path{
	color: var(--accent);
  	fill: var(--accent);
}

.collapsible-menu{
	display: flex;
    flex-direction: column;
    gap: 10px;
}

.collapsible-menu > li ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.collapsible-menu a{
	z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 12px;
    height: 42px;
    border-radius: 11px;
    color: var(--text-second);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    border: 1px solid transparent;
    position: relative;
}

svg{
  color: #696969;
	transition: 0.3s ease;
}

.collapsible-menu > li > a svg{
	width: 20px;
}

.collapsible-menu a:hover {
    background: var(--hover);
    color: var(--text-white);
    border-color: var(--divider);
  	font-weight: 600;
}

.collapsible-menu a.active svg{
	color: var(--accent);
    transform: scale(1.2);
}

.collapsible-menu a:hover svg{
	color: var(--accent);
    transform: scale(1.2);
}

.collapsible-menu a.active {
    background: var(--hover);
    color: var(--text-white);
    border-color: var(--divider);
  	font-weight: 600;
}

.collapsible-menu li.collapsible:has(.active) > a {
    background-color: #0056b3;
    color: white;
}

.collapsible-menu li.collapsible:has(.active) ul {
    display: block !important;
}

.collapsible-menu li.collapsible:has(.active) > a.open {
                                  
}

.sidebar-profile {
	margin: 10px 15px 0 15px;
    padding: 15px;
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.15s;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
  }
    .sidebar-profile:hover { border-color: rgba(0,158,255,0.35); }
	.sidebar-profile.active { border-color: var(--accent); }
  .sidebar-profile-glow {
    position: absolute;
    right: -20px; top: -20px;
    width: 80px; height: 80px;
    background: radial-gradient(circle, rgba(0,158,255,0.1) 0%, transparent 70%);
    pointer-events: none;
  }
  .sidebar-profile-ava {
	width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(0, 158, 255, 0.3);
    position: relative;
  }
.sidebar-profile-ava img{
	width: 100%;
  	border-radius: 10px;
}
  .sidebar-profile-info { 
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px; }

  .sidebar-profile-name {
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-white);
    line-height: 1;}

  .sidebar-profile-balance {
	font-weight: 700;
    font-size: 12px;
    color: var(--accent);
    line-height: 1;
  }
.sidebar-profile-register {
	margin: 10px 15px 0 15px;
    padding: 15px;
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.15s;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
  }
  .sidebar-profile-info-register { 
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px; }

  .sidebar-profile-name-register {
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-white);
    line-height: 1;
	transition: 0.3s ease;}
.sidebar-profile-name-register:hover{
	color: var(--accent);
  	cursor: pointer;
}
  .sidebar-profile-balance-register {
	font-weight: 700;
    font-size: 12px;
    color: var(--text-white);
    line-height: 1;
    	transition: 0.3s ease;
  }
.sidebar-profile-balance-register:hover{
	color: var(--accent);
  cursor: pointer;
}
  .sidebar-profile-arrow {
    width: 25px;
    height: 25px;
    background: var(--main-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 6px;
    padding: 0px 10px;
    transition: 0.3s ease;
  }
  .sidebar-profile-arrow svg { width: 12px; height: 12px; }
.sidebar-profile:hover .sidebar-profile-arrow{
	background: var(--accent);
}
.sidebar-profile.active .sidebar-profile-arrow{
	background: var(--accent);
}

.logo{
	opacity: 1;
    transition: all .3s;
    display: flex;
    gap: 10px;
    align-items: center;
}

.logo-container{
	padding: 0 16px;
    height: 62px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--divider);
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.logo-container > .info-line div{
	margin-left: auto;
    background: rgba(0, 158, 255, 0.1);
    border: 1px solid rgba(0, 158, 255, 0.25);
    border-radius: 6px;
    padding: 2px 8px;
    letter-spacing: 0.5px;
    font-weight: 700;
    font-size: 14px;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 5px;
}

.logo:hover{
  	cursor: pointer;
	opacity: .5;
}

.logo img{
	width: 40px;
    height: 14px;
}

.logo span{
	font-size: 15px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: var(--text-white);
    text-transform: uppercase;
    width: 40%;
    line-height: 1;
}

.page_container {
  max-width: 1660px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  transition: all 0.3s ease;
}

.page_container.chat-open {
	max-width: 100% !important;
}

.flex_container {
  display: flex;
  position: relative;
  min-height: 100vh;
}

.content_area {
  flex: 1;
  transition: all 0.3s ease;
  position: relative;
    margin-left: 220px;
    transition: all 0.3s ease;
}

.content_wrapper {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.content_area.chat-open {
  margin-right: 290px;
}

.content_area.chat-open .content_wrapper {
  overflow-y: auto;
  max-height: calc(100vh - 40px);
  padding-left: 10px;
}

.main_content {
	background: var(--main-bg);
    padding: 20px;
    padding-bottom: 0;
    border-radius: 10px;
    transition: all 0.3s ease;
    min-height: 1200px;
}

.chat_wrapper {
    position: fixed;
    right: 0;
    top: 0;
  	z-index: 10;
}

.chat_toggle {
	position: fixed;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    background: var(--divider);
    color: var(--text-white);
    border: none;
    padding: 15px 10px;
    border-radius: 25px 0 0 25px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: -2px 2px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    font-size: 14px;
}

.chat_toggle:hover{
	 background: var(--hover);
}

.chat_sidebar {
    position: fixed;
    top: 0;
    right: -290px;
    width: 290px;
    height: 100vh;
    background: #171717;
    border-left: 1px solid #262626;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    z-index: 999;
}

.chat_sidebar.active {
  right: 0;
}

.chat-close {
	width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--divider);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    color: var(--text-second);
    flex-shrink: 0;
}
.chat-close:hover { border-color: rgba(255,80,80,.3); background: rgba(255,80,80,.06); color: #FF5050; }
.chat-close svg { width: 12px; height: 12px; transition: 0.15s ease; }
.chat-close:hover svg{ color: #FF5050; } 

.chat-header {
	color: var(--text-white);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 52px;
    border-bottom: 1px solid var(--divider);
    background: var(--main-bg);
    position: relative;
    top: 0px;
    z-index: 6;
}

.chat-header-glow {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 60px;
    background: radial-gradient(ellipse, rgba(0, 158, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.chat-server-ico {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(0, 158, 255, 0.12);
    border: 1px solid rgba(0, 158, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-server-ico svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
}

.chat-title{
	font-size: 13px;
    font-weight: 700;
    color: var(--text-white);
    letter-spacing: 0.5px;
    flex: 1;
}

.input_new-group{
	display: flex;
    padding: 5px;
}

.input_new-group .input_new{
	width: 100%;
    padding-right: 5px;
}

.input_new-group input{
	border-radius: 10px;
    background: var(--hover);
    padding: 10px 10px;
    border: 1px solid #e5e7eb00;
    transition: all 0.2s ease;
    font-weight: 500;
  	position: relative;
}

.flex-online-block {
	display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 3px 6px 3px 3px;
    border-radius: 20px;
    border: 1px solid transparent;
    transition: border-color .15s, background .15s;
}

.flex-online-block:hover {
  border-color: rgba(0,158,255,.25);
  background: rgba(0,158,255,.06);
}

.user_online_block {
	display: flex;
    border-radius: 15px;
    align-items: center;
    max-width: 65px;
    overflow: hidden;
}

.chat-online-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #06D16C;
  box-shadow: 0 0 5px #06D16C;
  animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

.users_chat_online {
    display: flex;
    flex-wrap: wrap;
    font-size: 0px;
    overflow: auto;
}

.user_online_block .online-user {
    display: none;
}

.user_online_img{
	margin-right: -6px;
    border-radius: 50%;
    max-width: 22px;
    width: 22px;
    height: 22px;
    border: 2px solid var(--hover);
}

.online_pro {
    position: relative;
    border-radius: 50%;
}

.arrow_users_top {
	display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: #06D16C;
}

.flex-online-block:hover > .online_pro .online_prcr  {
	opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

.online_prcr {
	position: absolute;
    top: calc(100% + 8px);
    right: 0px;
    width: 240px;
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 158, 255, .06);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(.97);
    transition: opacity .18s, transform .18s;
    overflow: hidden;
}

.online-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--divider);
}
.online-popup-title {
	font-size: 10px;
    font-weight: 700;
    color: var(--text-second);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.online-popup-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #06D16C;
  background: rgba(6,209,108,.1);
  border: 1px solid rgba(6,209,108,.25);
  border-radius: 20px;
  padding: 2px 8px;
}
.online-popup-badge-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #06D16C;
  box-shadow: 0 0 4px #06D16C;
  animation: blink 2s infinite;
}

.online-popup-list {
  padding: 6px 0;
  max-height: 220px;
  overflow-y: auto;
}
.online-popup-list::-webkit-scrollbar { width: 3px; }
.online-popup-list::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 2px; }

.online-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  transition: background .1s;
  cursor: default;
}
.online-user:hover { background: rgba(255,255,255,.03); }

.online-user-ava {
  width: 30px; height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  position: relative;
}
.online-user-ava img{
	width: 100%;
    border-radius: 8px;
}
.online-user-ava-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--card);
  box-shadow: 0 0 4px var(--green);
}

.online-user-info { flex: 1; min-width: 0; }
.online-user-name {
	font-size: 12px;
    font-weight: 700;
    color: var(--text-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.online-user-role {
    font-size: 8px;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 5px;
    letter-spacing: .3px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.online_scroll {
    overflow: auto;
    color: #fff0;
    display: flex;
    gap: 12px;
    flex-direction: row;
    flex-wrap: wrap;
    max-height: 290px;
    overscroll-behavior: contain;
}

.online-popup-list .user_online_top {
    display: none;
}

.online-popup-list::-webkit-scrollbar {
    display: none;
}

.online-popup-footer {
  padding: 7px 14px;
  border-top: 1px solid var(--divider);
  font-size: 10px;
  color: var(--text-second);
  text-align: center;
}

#chat:after {
	background: linear-gradient(180deg, var(--main-bg) 15%, rgba(26, 26, 26, 0) 35%);
    content: "";
    height: 30%;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 5;
}

#chat {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#chat form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#drop_zone {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    min-height: 0;
}

#chat_messages {
	overflow-y: auto;
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow-x: hidden;
}

.input-group,
#chat form p.mb-0.text-center {
    flex-shrink: 0;
    margin-top: auto;
}


@media (min-width: 769px) {
  .content_area.chat-open {
    margin-right: 290px;
  }
  
  .content_area.chat-open .content_wrapper {
    max-height: calc(100vh - 40px);
  }
}

@media (max-width: 768px) {
  
      .left_menu {
        position: fixed;
        width: 100%;
        height: auto;
        z-index: 1001;
    }
    
    .new_container {
		flex-direction: column;
    }
    
    .chat_wrapper {
        position: fixed;
        bottom: 0;
        top: auto;
        width: 100%;
    }
  .page_container.chat-open {
    max-width: 100% !important;
    padding: 0;
  }
  
  .content_area {
    transition: transform 0.3s ease;
            margin-left: 0;
        width: 100%;
  }
  
  .content_area.chat-open {
    margin-right: 0;
    transform: translateX(-100%);
  }
  
  .content_area.chat-open .content_wrapper {
    max-height: none;
  }
  
  .chat_sidebar {
    width: 100vw;
    right: -100vw;
    border-left: none;
    border-radius: 0;
  }
  
  .chat_sidebar.active {
    right: 0;
  }
  
  .chat_toggle {
    right: 10px;
    padding: 12px 8px;
    font-size: 12px;
    z-index: 1001;
  }
  
  .chat_toggle.mobile-open {
    display: none;
  }
  
  .chat_header {
    padding: 20px;
    font-size: 20px;
  }
  
  .close_btn {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
  
  .chat_body {
    padding: 20px;
  }
}

.new_container::-webkit-scrollbar {
  width: 5px;
}

.new_container::-webkit-scrollbar-track {
  background: #2c2c2c;
  border-radius: 4px;
}

.new_container::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 4px;
}

.new_container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.content_wrapper::-webkit-scrollbar {
  width: 5px;
}

.content_wrapper::-webkit-scrollbar-track {
  background: #2c2c2c;
  border-radius: 4px;
}

.content_wrapper::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 4px;
}

.content_wrapper::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

#chat #chat_messages::-webkit-scrollbar {
  width: 5px;
}

#chat #chat_messages::-webkit-scrollbar-track {
  background: #2c2c2c;
  border-radius: 4px;
}

#chat #chat_messages::-webkit-scrollbar-thumb {
 background: #262626;
  border-radius: 4px;
}

#chat #chat_messages::-webkit-scrollbar-thumb:hover {
  background: #6c757d;
}

.monitoring{
margin-top: 15px;
    width: 100%;
    white-space: nowrap;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    display: grid;
    grid-gap: 15px !important;
    gap: 15px !important;
    height: 100% !important;
    overflow: initial;
    align-content: flex-start !important;
}

.monitoring .server{
	height: 160px;
    width: 100%;
    border-radius: 11px;
    display: inline-flex;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    padding: 10px 12px;
}

.monitoring > .server .server_name{
	display: flex;
    gap: 7px;
    align-items: center;
}

.monitoring .server::before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(11, 11, 11, 0.6) 0%, rgba(11, 11, 11, 0.7) 100%);
    z-index: 1;
}

.monitoring > .server p{
	z-index: 2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-white);
    width: 100%;
}

.server > .server_name .server_icon{
	z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.server .server_map{
	border: 0.50px solid rgba(0, 158, 255, 0.6);
    border-radius: 6px;
    padding: 1.5px 8px;
    width: fit-content;
    backdrop-filter: blur(1.5099338293075562px);
    background: rgba(0, 158, 255, 0.3);
    z-index: 2;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 10px;
    color: var(--text-white);
    margin-top: 8px;
}

.server .server_online{
	display: flex;
    gap: 10px;
    align-items: center;
    z-index: 2;
    margin-top: 20px;
}

.server > .server_online .progress {
    display: -ms-flexbox;
    display: flex;
    height: 4px;
    overflow: hidden;
    font-size: .75rem;
    border-radius: 15px;
    width: 100%;
    background: var(--main-bg);
}

.server > .server_online > .progress .bg-success, .bg-warning, .bg-danger {
    background: linear-gradient(90deg, #009eff 0%, #8dd4ff 100%);
}

.server > .server_online .online_nowmax {
	font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.02em;
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.server > .server_online > .online_nowmax .online_max {
	font-weight: 600;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.server .server_btn{
	display: flex;
    margin-top: 8px;
    gap: 10px;
  	z-index: 2;
}

.server_ip .copy-ip{
	display: flex;
}

.server > .server_btn .server_ip{
	border: 0.50px solid rgba(105, 105, 105, 0.9);
    border-radius: 6px;
    padding: 5.5px 11.5px;
    width: 100%;
    backdrop-filter: blur(3.0198676586151123px);
    background: rgba(23, 23, 23, 0.6);
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    transition: 0.3s ease;
}

.server > .server_btn .connect-server{
	border: 0.50px solid rgba(105, 105, 105, 0.9);
    border-radius: 6px;
    padding: 5.5px 11.5px;
    backdrop-filter: blur(3.0198676586151123px);
    background: rgba(23, 23, 23, 0.6);
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    transition: 0.3s ease;
    width: 100%;
    font-weight: 500;
    font-size: 11px;
    color: #a9a9a9;
}

.server > .server_btn .server_ip:hover, .server > .server_btn .connect-server:hover{
	border: 0.50px solid rgb(255 255 255 / 90%);
    background: rgb(63 62 62 / 60%);
}

.server > .server_btn > .server_ip .ip-server:hover{
      cursor: pointer;
}

.server > .server_btn span{
	font-weight: 500;
    font-size: 11px;
    color: #a9a9a9;
    	transition: 0.3s ease;
}

.server > .server_btn > .server_ip:hover span, .server > .server_btn > .connect-server:hover span {
    color: #fff;
}

.server > .server_btn .ip-server > svg > g path, .server > .server_btn .connect-server > svg > g path {
    transition: 0.3s ease;
}

.server > .server_btn > .server_ip:hover .ip-server > svg > g path, .server > .server_btn > .connect-server:hover > svg > g path {
    fill: #fff;
}

.nav_btns {
	display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.nav_btns-container .nav_btns-ul {
	display: flex;
    align-items: center;
    min-width: 0;
    background: var(--hover);
    padding: 3.75px;
    border-radius: 15.75px;
    z-index: 1;
    overflow: hidden;
    width: fit-content;
    max-width: 60%;
}

.nav_btns-container > .nav_btns-ul ul li{
	flex-shrink: 0;
    padding: 12px 16px;
    border-radius: 12px;
}

.nav_btns-container > .nav_btns-ul ul li.active a {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-white);
}

.nav_btns-container > .nav_btns-ul ul li a {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-second);
    transition: 0.3s ease;
    white-space: nowrap;
}

.nav_btns-container > .nav_btns-ul ul li:hover a {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-white);
}

.btns_caterogy-list{
	display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    transition: transform 0.3s ease;
}

.btns_caterogy-container{
	width: 100%;
    overflow: hidden;
    position: relative;
    min-width: 0;
}

.btns_caterogy-list .active{
    background: var(--divider);
    padding: 12px 16px;
    border-radius: 12px;
}

            

.nav {
	display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.nav .nav_icon{
	display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
    color: #dbe6f3;
    white-space: nowrap;
    text-shadow: none;
}

.nav > .nav_icon .svg{
	border-radius: 8px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--divider);
}

.nav_container .nav_ul {
	display: flex;
    align-items: center;
    min-width: 0;
    background: var(--hover);
    border: 1px solid var(--divider);
    padding: 3.75px;
    border-radius: 15.75px;
    z-index: 1;
    overflow: hidden;
    width: fit-content;
    max-width: 60%;
}

.nav_container > .nav_ul .nav_btn{
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.caterogy-list .active{
    background: var(--divider);
    padding: 12px 16px;
    border-radius: 12px;
}

.nav_container > .nav_ul .nav_btn a{
	border: 1px solid var(--divider);
    border-radius: 12px;
    padding: 17px 18.5px 16.5px 20px;
                        
                         
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.nav_container > .nav_ul .nav_btn a:hover {
    border-color: var(--text-white);
}

.nav_container > .nav_ul .nav_btn a svg path{
    transition: 0.3s ease;
}

.nav_container > .nav_ul .nav_btn a:hover svg path{
    fill: var(--text-white);
}

.nav_container > .nav_ul .nav_btn a.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.nav_container > .nav_ul .nav_btn a.disabled:hover {
    border-color: var(--divider);
}

.caterogy-container {
width: 100%;
    overflow: hidden;
    position: relative;
    min-width: 0;
}

.caterogy-list {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    transition: transform 0.3s ease;
}

.nav_container > .nav_ul ul li {
    flex-shrink: 0;
    padding: 12px 16px;
    border-radius: 12px;
}

.nav_container > .nav_ul ul li a{
    font-weight: 600;
    font-size: 14px;
    color: var(--text-second);
    transition: 0.3s ease;
    white-space: nowrap;
}

.nav_container > .nav_ul ul li.active a{
	font-weight: 600;
    font-size: 14px;
    color: var(--text-white);
}

.nav_container > .nav_ul ul li:hover a{
    font-weight: 600;
    font-size: 14px;
    color: var(--text-white);
}

.search_container{
	display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    position: relative;
}

.nav_container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
}

.input {
    display: flex;
    position: relative;
    justify-self: end;
}

.input input {
    width: 100%;
    border-radius: 15.75px;
    background: var(--hover);
    padding: 15px 50px;
    border: 1px solid #e5e7eb00;
    transition: all 0.2s ease;
    font-weight: 500;
}

.input input:hover {
    border-color: var(--divider);
}

.input input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--text-white);
    outline: none;
}

.input input::placeholder {
    color: var(--text-second);
    transition: 0.3s ease;
}

.input:hover input::placeholder {
    color: var(--text-white);
}

.input input:focus::placeholder {
    color: var(--text-white);
}

.input svg {
    fill: var(--text-second);
}

.input:hover svg {
    fill: var(--text-white);
}

.input:focus-within svg {
    fill: var(--text-white);
}

.input a {
    position: absolute;
    top: 15px;
    left: 15px;
}

.select_container{
	display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.select_container .input{
	width: 100%;
}


select{
    width: 100%;
    border-radius: 15.75px;
    background: var(--hover);
    padding: 15px 15px;
    border: 1px solid #e5e7eb00;
    transition: all 0.2s ease;
    font-weight: 500;
    display: flex;
    align-items: center;
    color: var(--text-second);
  outline: none;
}

select:hover {
  border-color: var(--divider);
  cursor: pointer;
  color: var(--text-white);
}

select:focus {
	border-color: var(--accent);
    box-shadow: 0 0 10px 1px 
 color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--text-white);
}


select::placeholder {
  color: var(--text-second);
  transition: 0.3s ease;
}

select::placeholder {
  color: var(--text-white);
}

 .site-footer {
	position: relative;
    background: var(--main-bg);
    overflow: hidden;
    width: 100%;
    margin-top: 60px;
  }

  .footer-glow {
    position: absolute;
    bottom: -80px; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 260px;
    background: radial-gradient(ellipse, rgba(0,158,255,0.07) 0%, transparent 70%);
    pointer-events: none;
  }
  .footer-grid { display: none; }
  .footer-inner {
	position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 0 0 0;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 60px;
    padding-bottom: 36px;
  }
  .footer-logo {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
  }
  .footer-logo-text {
    font-size: 16px; font-weight: 900;
    letter-spacing: 1.5px; color: var(--text-white);
  }
  .footer-logo-badge {
	font-size: 9px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(0, 158, 255, 0.1);
    border: 1px solid rgba(0, 158, 255, 0.25);
    border-radius: 4px;
    padding: 2px 6px;
    letter-spacing: 0.5px;
  }
  .footer-desc {
	font-size: 12px;
    font-weight: 400;
    color: var(--text-second);
    line-height: 1.65;
    margin-bottom: 20px;
  }

  .footer-links-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .footer-col-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700;
    color: var(--text-white);
    letter-spacing: 1px; text-transform: uppercase;
    margin-bottom: 14px;
  }
  .footer-col-title svg { width: 13px; height: 13px; color: var(--accent); stroke: var(--accent); flex-shrink: 0; }
  .footer-col-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
  .footer-col-list li a {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-second);
    text-decoration: none;
    transition: color 0.15s, padding-left 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .footer-col-list li a::before {
    content: '';
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--divider);
    flex-shrink: 0;
    transition: background 0.15s;
  }
  .footer-col-list li a:hover { color: var(--accent); padding-left: 3px; }
  .footer-col-list li a:hover::before { background: var(--accent); }

  .footer-divider {
    display: flex; align-items: center; gap: 10px;
  }
  .footer-divider-line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--divider) 30%, var(--divider) 70%, transparent);
  }
  .footer-divider-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(0,158,255,0.6);
    flex-shrink: 0;
  }
  .footer-bottom {
    display: flex; align-items: center;
    gap: 20px; padding: 16px 0 22px;
    flex-wrap: wrap;
  }
  .footer-copy {
    font-size: 11px;
    color: var(--text-second);
    opacity: 0.5;
    white-space: nowrap;
  }
  .footer-bottom-links {
    display: flex; align-items: center;
    gap: 12px; flex: 1; flex-wrap: wrap;
  }
  .footer-bottom-links a {
	font-size: 11px;
    color: var(--text-second);
    text-decoration: none;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
    white-space: nowrap;
  }
  .footer-bottom-links a:hover { opacity: 1; color: var(--accent); }
  .footer-bottom-sep { color: var(--divider); font-size: 12px; }


.chat_date{
	display: flex;
    align-items: center;
}

.icon-ok:hover{
	background-color: var(--text-white);
  	cursor: pointer;
}

.icon-ok{
   background-color: var(--text-second);
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cg fill='none'%3e%3cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z' /%3e%3cpath fill='currentColor' d='M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m3.535 4.381a1 1 0 0 1 1.498 1.32l-.083.094l-5.586 5.587a1.1 1.1 0 0 1-1.46.085l-.096-.085l-2.758-2.758a1 1 0 0 1 1.32-1.498l.094.084l2.122 2.121l4.95-4.95Z' /%3e%3c/g%3e%3c/svg%3e");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cg fill='none'%3e%3cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z' /%3e%3cpath fill='currentColor' d='M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m3.535 4.381a1 1 0 0 1 1.498 1.32l-.083.094l-5.586 5.587a1.1 1.1 0 0 1-1.46.085l-.096-.085l-2.758-2.758a1 1 0 0 1 1.32-1.498l.094.084l2.122 2.121l4.95-4.95Z' /%3e%3c/g%3e%3c/svg%3e");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
  transition: 0.3s ease;
}

.icon-trash svg{
	color: var(--text-second);
  	transition: 0.3s ease;
}

.icon-trash svg:hover{
	color: var(--text-white);
  cursor: pointer;
}

.chat_message{
	display: flex;
    gap: 9px;
    padding: 8px 14px;
    position: relative;
    transition: background .12s;
}

.chat_message:hover { background: rgba(255,255,255,.025); }
.chat_message:hover .msg-actions { opacity: 1; pointer-events: all; }

.msg-actions {
	position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 3px 4px;
}
.msg-action-btn {
	width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, color .12s;
    color: var(--text-second);
}
.msg-action-btn:hover.edit  { background: rgba(0,158,255,.12); color: var(--accent); }
.msg-action-btn:hover.del   { background: rgba(255,80,80,.12); color: #FF5050; }
.msg-action-btn svg { width: 13px; height: 13px; color: var(--text-second); transition: 0.12s ease; }
.msg-action-btn:hover.edit svg { width: 13px; height: 13px; color: var(--accent); }
.msg-action-btn:hover.del svg { width: 13px; height: 13px; color: #FF5050; }

.msg-deleted .msg-text {
  color: var(--muted);
  font-style: italic;
  font-size: 12px;
}

.msg-ava{
	width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
}

.msg-ava img{
	border-radius: 9px;
  	width: 100%;
}

.msg-body { flex: 1; min-width: 0; }

.msg-top {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 2px;
}

.msg-name {
  font-size: 12px; font-weight: 700;
  line-height: 1;
}

.msg-role {
  font-size: 9px; font-weight: 700;
  font-family: 'Inter', sans-serif;
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: .4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.role-admin { background: rgba(255,80,80,.1);   color: var(--red);    border: 1px solid rgba(255,80,80,.2); }
.role-mod   { background: rgba(0,158,255,.1);   color: var(--accent); border: 1px solid rgba(0,158,255,.2); }
.role-prem  { background: rgba(255,215,0,.08);  color: var(--gold);   border: 1px solid rgba(255,215,0,.2); }

.msg-time {
	font-size: 10px;
    font-weight: 400;
    color: var(--text-second);
    margin-left: auto;
    flex-shrink: 0;
}

.msg-text {
	font-size: 13px;
    font-weight: 500;
    color: var(--text-white);
    line-height: 1.5;
    word-break: break-word;
}

.chat-footer {
	flex-shrink: 0;
    padding: 10px 12px;
    border-top: 1px solid var(--divider);
    background: var(--main-bg);
}

.chat-input-wrap {
	display: flex;
    align-items: center;
    gap: 8px;
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 0 10px;
    transition: border-color .15s;
}
.chat-input-wrap:focus-within,.msg-edit-form:focus-visible { border-color: rgba(0,158,255,.4); }
.msg-edit-form:focus {
    border-color: rgba(0,158,255,.4);
    outline: none;
}

.msg-edit-form{
	background: var(--hover);
    border: 1px solid var(--divider);
      border-radius: 10px;
    padding: 0 10px;
    transition: border-color .15s;
}

.chat-input {
	flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-white);
    padding: 10px 0;
    min-width: 0;
}
.chat-input::placeholder { color: var(--text-second); }

.chat-send, .smile_btn {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  flex-shrink: 0;
}
.chat-send:hover, .smile_btn:hover { opacity: .9; }
.chat-send svg, .smile_btn svg{ width: 13px; height: 13px; color: #fff; }
.msg-text .g_sticker{
	width: 100%;
}

.popover-body > .smiles_box {
overflow-x: hidden;
overflow-y: scroll;
width: 253px;
height: 300px;
}

.popover-body > .smiles_box .smile {
cursor: pointer;
margin: 7px;
float: left;
width: 25px;
height: 25px;
}

.popover-body > .smiles_box .sticker {
cursor: pointer;
margin: 6px;
float: left;
width: 65px;
height: 65px;
}

.smiles_panel {
	width: 100%;
    border-top: 1px solid var(--divider);
    padding-top: 10px;
    gap: 5px;
}

.smilebtn:hover{
	cursor: pointer;
} 

.stickers_img {
border-radius: 2px;
width: 236px;
height: 250px;
}

.smile_input_forum .btn {
display: inline-block;
margin-right: 10px;
margin-bottom: 0;
}

.smile_input_forum #smile_btn {
position: relative;
display: inline-block;
}

.smile_input_forum #smile_btn::after {
position: absolute;
top: 5px;
}

.smiles_panel > .owl-stage-outer .owl-stage{
	display: flex;
  gap: 10px;
}

.smiles_panel > .owl-stage-outer > .owl-stage .owl-item{
	width: 100% !important;
    background: var(--hover);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
  	cursor: pointer;
}

.smiles_panel > .owl-stage-outer > .owl-stage .owl-item:hover{
	background: var(--divider);
}

.page_header{
	display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    padding: 20px 0 20px 0px;
}

.page_header .header_bg, .page_header .header_pers{
	width: 100%;
    z-index: 0;
    top: -50%;
    position: absolute;
}

.page_header > .header_bg img, .page_header > .header_pers img{
	object-position: center;
    object-fit: cover;
    z-index: 0;
    right: 0;
    position: absolute;
    width: fit-content;
}

.table_info{
	display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    background: var(--hover);
    padding: 5px;
    border-radius: 15px;
    width: 100%;
}

.table_info div{
	flex: 1 1;
  	padding: 10px;
}

.table_info .with-icon{
	    display: flex;
    gap: 5px;
    align-items: center;
}

.table_info > .with-icon svg{
	color: var(--accent);
}

.table_info > div img{
	width: 55px;
}

.table_info > div > a .small_us_av, .table_info > div > span > a .small_us_av{
	width: 22px;
    border-radius: 50px;
}

.table_info > div a{
	display: flex;
    align-items: center;
    gap: 5px;
}

.table_info > div > a i, .table_info .info_player{
	font-style: normal;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table_info > div > span > a i{
	font-style: normal;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 85%;
}

.table_info > div span{
	max-width: 60%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table_info div:last-child{
	width: 0;
}

.header_table_info{
	display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    background: var(--main-bg);
    padding: 10px;
    border-radius: 15px;
}

.header_table_info div{
	flex: 1 1;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-second);
    padding: 0 0 0 10px;
}

.search_container #stats, 
.search_container #banlist,
.search_container #muts,
.search_container #bans{
	display: flex;
    flex-direction: column;
    gap: 8px;
}

#bans .table_info{
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.text-warning {
    color: #FF9A00 !important;
  	fill: #FF9A00 !important;
}

.text-success {
    color: #06D16C !important;
  	fill: #06D16C !important;
}

.text-danger {
    color: #FF5050 !important;
  	fill: #FF5050 !important;
}

.dropdown_table .top_1{
	background: linear-gradient(90deg, rgb(251, 222, 93, 0.1), var(--hover) 60%);
}

.dropdown_table .top_2{
	background: linear-gradient(90deg, rgb(178, 233, 240, 0.1), var(--hover) 60%);
}

.dropdown_table .top_3{
	background: linear-gradient(90deg, rgb(241, 178, 160, 0.1), var(--hover) 60%);
}

.table_info div:first-child{
	    font-size: 24px;
    font-weight: 800;
    font-style: italic;
}

.dropdown_table > .top_1 > div .place-top1{
	color: rgb(238 225 157);
}

.dropdown_table > .top_2 > div .place-top2{
	color: rgb(206 238 238);
}

.dropdown_table > .top_3 > div .place-top3{
	color: rgb(238 185 157);
}

.header_table_info div:first-child, .table_info div:first-child{
	max-width: 90px;
}

#stats > .dropdown_table > .table_info div:first-child{
	padding: 4px 10px 4px 10px;
}

.card-body > .header_table_info div:first-child{
	    max-width: 100%;
}

.card-body > .tableinfo_dropdown div{
    flex: 1 1;
    padding: 0px 10px 10px 10px;
}

.card-body{
	padding: 10px;
}

.card-body > .tableinfo_dropdown div:last-child{
    display: flex;
    gap: 5px;
}

.card-body > .tableinfo_dropdown > div:last-child button{
	color: var(--text-white);
  	transition: 0.3s ease;
}

.card-body > .tableinfo_dropdown > div:last-child button:hover{
	color: var(--text-second);
}

.dropdown_table .table_info {
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dropdown_table .table_info::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23009eff'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.dropdown_table .table_info[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(270deg);
    opacity: 1;
}

.dropdown_table .table_info:hover::after {
    opacity: 1;
}

#banlist > .dropdown_table > .table_info div:nth-child(n+3):nth-child(-n+5),
#banlist > .dropdown_table > .table_info > div:nth-child(5) p{
	max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#banlist > .dropdown_table > .table_info div:nth-child(4){
	width: 90px;
}

#banlist > .dropdown_table > .collapse > .card-body > .tableinfo_dropdown > .ban_closed a,
#muts > .dropdown_table > .collapse > .card-body > .tableinfo_dropdown > .ban_closed a{
	display: flex;
    align-items: center;
    gap: 5px;
}

#banlist > .dropdown_table > .collapse > .card-body > .tableinfo_dropdown > .ban_closed > a img,
#muts > .dropdown_table > .collapse > .card-body > .tableinfo_dropdown > .ban_closed > a img{
	width: 22px;
    border-radius: 50px;
}

#banlist > .dropdown_table > .collapse > .card-body > .tableinfo_dropdown > .ban_closed > a i,
#muts > .dropdown_table > .collapse > .card-body > .tableinfo_dropdown > .ban_closed > a i{
	font-style: normal;
}

.table-bordered thead td, .table-bordered thead th {
    border-bottom-width: 0px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-second);
    padding: 0 0 0 10px;
}

.table-bordered td, .table-bordered th {
    border: none;
}

.table tbody td[colspan="10"] {
    background: var(--hover);
    display: flex;
    padding: 10px;
    border-radius: 15px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-second);
    width: 100%;
    position: absolute;
}

#search_ban_res_min > tr > td button{
	color: var(--text-white);
  	transition: 0.3s ease;
}

#search_ban_res_min > tr > td button:hover{
	color: var(--text-second);
}

.new_btn{
	padding: 12px 16px;
    border-radius: 12px;
    background: var(--hover);
  transition: 0.3s ease;
}

.new_btn:hover{
	background: var(--divider);
}

.mt-2{
	margin-top: 15px;
}

.modal-content {
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 16px;
}

.first_card > .profile_name a{
	display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.first_card > .profile_name > a img{
	border-radius: 50%;
}

.pl-row {
  display: flex; 
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  transition: background .1s;
}
.pl-row:hover { background: rgba(255,255,255,.025); }

.pl-rank {
	font-size: 11px;
    font-weight: 700;
    color: var(--text-second);
    width: 20px;
    flex-shrink: 0;
    text-align: center;
}

.pl-ava {
  width: 28px; 
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 10px; 
  font-weight: 800;
  background: var(--main-bg);
  color: var(--accent);
}

.pl-badge {
  font-size: 9px; 
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}

.pl-name {
	flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-name > a .small_us_av{
	display: none;
}

.pl-name > a i{
	font-style: normal;
}

.pl-time {
	font-size: 10px;
    font-weight: 500;
    color: var(--text-second);
    max-width: 130px;
    text-align: right;
    flex-shrink: 0;
}

.pl-kd {
	font-size: 11px;
    font-weight: 700;
    width: 30px;
    text-align: right;
    flex-shrink: 0;
    color: var(--text-second);
}

.modal .modal-content .modal-header .close {
    position: absolute;
    right: 20px;
    top: 11px;
    font-size: 20px;
}

.modal-head{
	display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--divider);
    flex-shrink: 0;
}

.modal-head-info {
    flex: 1;
    min-width: 0;
}

.modal-head-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-head-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.modal-head-meta span:first-child {
	font-size: 10px;
    font-weight: 600;
    border-radius: 5px;
    padding: 2px 8px;
    background: #009eff33;
    color: var(--accent);
    border: 1px solid #009eff78;
}

.modal-head-meta span:last-child{
	font-size: 10px;
    font-weight: 600;
    border-radius: 5px;
    padding: 2px 8px;
    background: var(--hover);
    color: var(--text-dim);
    border: 1px solid var(--divider);
}

.modal-close {
	width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--divider);
    background: transparent;
    color: var(--text-second);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .12s, color .12s;
    flex-shrink: 0;
}
.modal-close:hover { border-color: rgba(255,80,80,.4); color: #FF5050; }
.modal-close svg { width: 12px; height: 12px; transition: 0.12s ease;}
.modal-close:hover svg { color: #FF5050; }
.modal-reload:hover { border-color: rgb(0 158 255 / 40%); color: var(--accent);}
.modal-reload:hover svg { color: var(--accent); }

.modal-stats {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--divider);
    border-bottom: 1px solid var(--divider);
    flex-shrink: 0;
}

.modal-stat {
	background: var(--hover);
    padding: 11px 14px;
    text-align: center;
}
.modal-stat-val {
  font-size: 17px; font-weight: 800;
  color: #e8e8e8;
  line-height: 1;
}
.modal-stat-val.green { color: #06D16C; }
.modal-stat-val.orange { color: #FF9A00; }
.modal-stat-val.red { color: #FF5050; }
.modal-stat-val.accent { color: var(--accent); }
.modal-stat-label {
  	font-size: 9px;
    font-weight: 600;
    color: var(--text-second);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-top: 4px;
}

.modal-body {
	flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    max-height: 500px;
}

.modal-section-label {
	font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-second);
    padding: 4px 16px 8px;
}

.mt-40px{
	margin-top: 40px;
}

.shop_cards{
	margin-top: 15px;
    width: 100%;
    white-space: nowrap;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    display: grid;
    grid-gap: 25px !important;
    gap: 25px !important;
    height: 100% !important;
    overflow: initial;
    align-content: flex-start !important;
}

.shop_cards .shop_card{
	display: flex;
    flex-direction: column;
    gap: 5px;
}

.shop_card .card_bg{
	border: 1px solid var(--divider);
    border-radius: 15px;
    padding: 10px 25px;
    height: 258px;
    overflow: hidden;
    position: relative;
  	transition: 0.3s ease;
}

.shop_card:nth-child(2) > .card_bg .card_human{
	height: 315px;
    width: 472px;
    top: 10px;
    left: -50px;
}

.shop_card:nth-child(2):hover > .card_bg .card_human {
    left: -70px;
}

.shop_card:nth-child(3) > .card_bg .card_human{
	height: 255px;
    width: 382px;
    top: 15px;
    left: 4px;
}

.shop_card:nth-child(3):hover > .card_bg .card_human {
    left: -14px;
}

.shop_card:nth-child(4) > .card_bg .card_human{
	height: 318px;
    width: 318px;
    top: 15px;
    left: 8px;
}

.shop_card:nth-child(4):hover > .card_bg .card_human {
    left: -10px;
}

.shop_card:nth-child(5) > .card_bg .card_human{
	height: 244px;
    width: 244px;
    top: 15px;
    left: 65px;
}

.shop_card:nth-child(5):hover > .card_bg .card_human {
    left: 45px;
}

.card_bg h2{
	font-weight: 800;
    font-size: 42px;
    line-height: 107%;
    color: var(--text-white);
   	width: 90%;
    white-space: normal;
    max-width: 100%;
    word-wrap: break-word;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.2);
  	margin-bottom: 0;
}

.card_bg p{
	font-weight: 700;
    font-size: 20px;
    color: var(--text-white);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.2);
  	transition: 0.3s ease;
}

.shop_card h5{
	margin-bottom: 0;
    font-weight: 500;
    font-size: 12px;
    color: var(--statics);
    text-align: center;
  	transition: 0.3s ease;
}

.card_bg .card_human{
	position: absolute;
    height: 521px;
    width: 521px;
    max-width: fit-content;
    top: 0px;
    left: -75px;
  	transition: 0.3s ease;
}

.shop_card:hover > .card_bg .card_human{
	left: -95px;
}

.shop_card:hover .card_bg{
	border: 1px solid var(--accent);
}

.shop_card:hover > .card_bg p{
	color: var(--accent);
}

.shop_card:hover h5{
	color: var(--text-white);
}

.sum_donators{
	border-radius: 30px;
    padding: 5px 10px;
    background: var(--hover);
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    color: var(--text-white);
}

.grid-filler {
    border: 1px solid var(--divider);
    background: var(--hover);
    border-radius: 11px;
  	transition: 0.3s ease;
}

.grid-filler:hover{
	border: 1px solid var(--accent);
  	cursor: help;
}

.none_serv {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.default-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

.hover-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    width: 100%;
}

.grid-filler:hover .default-content {
    opacity: 0;
}

.grid-filler:hover .hover-content {
    opacity: 1;
}

.hover-text-top {
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 600;
    font-size: 16px;
    background: linear-gradient(90deg, #009eff 0%, #8dd4ff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.hover-text-bottom {
	font-weight: 500;
    font-size: 12px;
    text-align: center;
    color: var(--text-second);
}
  
.hover-text-bottom a{
  font-weight: 500;
    font-size: 12px;
    text-align: center;
    color: var(--accent);
    transition: 0.3s ease;
  }
  
.hover-text-bottom a:hover{
  	color: var(--text-white);
  }

a {
    color: var(--accent);
  	transition: 0.3s ease;
}

a:hover{
	color: var(--text-white);
}

.profile-info-bar {
	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 0 0 15px 15px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1px;
    margin-bottom: 16px;
    position: relative;
}

  .profile-user-row {
	position: relative;
    padding: 14px 0 14px 90px;
    min-height: 64px;
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
  }
  .profile-avatar {
	position: absolute;
    left: 0;
    top: -36px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid var(--hover);
    background: var(--divider);
    overflow: hidden;
    flex-shrink: 0;
  }
  .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .profile-username { font-size: 20px; font-weight: 700; color: var(--text-white); }
  .profile-role { font-size: 12px; font-weight: 500; color: var(--accent); }

  .info-cell {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .info-cell-label { font-size: 11px;font-weight: 500;color: var(--text-second); }
  .info-cell-value { font-size: 13px; font-weight: 600; color: var(--text-white); }

.banner-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, var(--hover), transparent);
}

.profile_header_banner{
	position: relative;
    height: 280px;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 30%, #0f3460 60%, #1a1a2e 100%);
    margin-bottom: 0;
}

.profile_header_social{
	display: flex;
    gap: 5px;
}

.profile_page_nav{
	display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--divider);
    margin-bottom: 24px;
    flex-direction: row;
}

.profile_page_nav .profile_btn{
	padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-second);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    flex: 1 1;
    display: flex;
    justify-content: center;
}

.profile_page_nav .profile_btn.active{
	color: var(--text-white);
    font-weight: 600;
    border-bottom-color: var(--accent);
}

.profile_page_nav .profile_btn:hover{
	color: var(--text-white);
}

 .g-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 24px;
  }
  .g-stat-card {
	position: relative;
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    padding: 20px 18px 16px;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
    cursor: default;
  }
  .g-stat-card:hover { 
	border-color: var(--accent);
    transform: translateY(-2px);
}
  .g-stat-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0,158,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,158,255,0.04) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
  }
  .g-stat-icon {
    width: 32px; height: 32px;
    background: rgba(0,158,255,0.1);
    border: 1px solid rgba(0,158,255,0.25);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
  }
  .g-stat-icon svg { width: 16px; height: 16px; }
  .g-stat-value { 
    font-size: 26px; 
    font-weight: 800; 
    color: var(--text-white); 
    letter-spacing: -1px; 
    line-height: 1; 
    margin-bottom: 4px; }
  .g-stat-label { 
	font-size: 11px;
    font-weight: 500;
    color: var(--text-second);
    text-transform: uppercase;
    letter-spacing: 0.8px; 
}

.wlt-section-label {
	display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-second);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
  	gap: 8px;
}

.g-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
.g-info-item {
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 12px;
    padding: 14px 18px;
    transition: border-color 0.15s;
}
.g-info-item:hover { border-color: var(--accent); }
.g-info-label { font-size: 10px; font-weight: 600; color: var(--text-second); text-transform: uppercase; letter-spacing: 1px;margin-bottom: 5px; }
.g-info-value { font-size: 13px; font-weight: 600; color: var(--text-white); }

.wlt-hero {
	position: relative;
    border-radius: 16px;
    overflow: hidden;
    padding: 28px 28px 20px;
    margin-bottom: 24px;
    background: var(--hover);
    border: 1px solid var(--divider);
  }
  .wlt-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .wlt-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(0,158,255,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,158,255,0.06) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  .wlt-hero-glow {
    position: absolute;
    right: -60px;
    top: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0,158,255,0.12) 0%, transparent 70%);
  }

  .wlt-hero-content {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .wlt-label {
	font-size: 11px;
    font-weight: 500;
    color: var(--text-second);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
  }
  .wlt-balance {
    font-size: 52px;
    font-weight: 900;
    color: var(--text-white);
    line-height: 1;
    letter-spacing: -2px;
  }
  .wlt-cur {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0;
  }
  .wlt-id {
	margin-top: 10px;
    font-size: 11px;
    color: var(--text-second);
  }
  .wlt-id span {color: var(--text-white);}

  .wlt-hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .wlt-chip {
    opacity: 0.8;
  }
  .wlt-logo-text {
	font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
  }
  .wlt-logo-text span { color: var(--accent); }

  .wlt-hero-footer {
	position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .wlt-discount-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(0,158,255,0.08);
    border: 1px solid rgba(0,158,255,0.2);
    border-radius: 20px;
    padding: 4px 12px;
  }
  .wlt-joined {
    font-size: 11px;
    color: var(--text-second);
  }
 .wlt-tiers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 28px;
  }
  .wlt-tier {
	position: relative;
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    transition: 0.15s ease;
  }
	.wlt-tier:hover{
	border-color: rgba(0, 158, 255, 0.3);
    transform: translateX(4px);
	}
  .wlt-tier.mid { border-color: rgba(0,158,255,0.2); }
  .wlt-tier.top { border-color: rgba(0,158,255,0.4); background: rgba(0,158,255,0.04); }
  .wlt-tier-rank {
	font-size: 11px;
    font-weight: 800;
    color: var(--text-second);
    letter-spacing: 1px;
    width: 24px;
    flex-shrink: 0;
  }
  .wlt-tier.top .wlt-tier-rank { color: var(--accent); }
  .wlt-tier-body { flex: 1; min-width: 0; }
  .wlt-tier-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-white);
    letter-spacing: 0.5px;
  }
  .wlt-tier.top .wlt-tier-name { color: var(--accent); }
  .wlt-tier-threshold {
	font-size: 11px;
    font-weight: 500;
    color: var(--text-second);
    margin-top: 2px;
  }
  .wlt-tier-bonus {
	font-size: 18px;
    font-weight: 800;
    color: #06D16C;
    flex-shrink: 0;
    min-width: 70px;
    text-align: right;
  }
  .wlt-tier-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--divider);
  }
  .wlt-tier-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 2px;
    transition: width 0.6s ease;
  }
.wlt-tier:first-child > .wlt-tier-bar .wlt-tier-fill{
	width: 25%;
}
.wlt-tier:nth-child(2) > .wlt-tier-bar .wlt-tier-fill{
	width: 50%;
}
.wlt-tier:last-child > .wlt-tier-bar .wlt-tier-fill{
	width: 100%;
}
.wlt-quick-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
  }
  .wlt-quick {
    position: relative;
    background: var(--card);
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-white);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .wlt-quick:hover { border-color: rgba(0,158,255,0.4); }
  .wlt-quick.active {
    border-color: var(--accent);
    background: rgba(0,158,255,0.1);
    color: var(--accent);
  }
  .wlt-quick-badge {
    font-size: 10px;
    font-weight: 700;
    color: #06D16C;
    background: rgba(6,209,108,0.12);
    border-radius: 20px;
    padding: 2px 7px;
  }
.wlt-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
  }
  .wlt-method {
	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s;
  }
  .wlt-method:hover { border-color: rgba(0,158,255,0.3); }
  .wlt-method-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
  }
  .wlt-method-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--divider);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s;
  }
  .wlt-method-radio.active {
    border-color: var(--accent);
  }
  .wlt-method-radio.active::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .wlt-method-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-white);
    flex: 1;
  }
  .wlt-method-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
  }
  .wlt-tag {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-second);
    background: var(--main-bg);
    border: 1px solid var(--divider);
    border-radius: 4px;
    padding: 2px 7px;
  }

  .wlt-method-body {
    padding: 0 18px 18px;
    border-top: 1px solid var(--divider);
    display: flex;
    gap: 14px;
    align-items: flex-end;
  }
  .wlt-method-body.hidden { display: none; }

  .wlt-input-wrap { flex: 1; min-width: 0; }
  .wlt-input-label {
	display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-second);
    margin: 14px 0 6px;
  }
  .wlt-input-row {
	display: flex;
    align-items: center;
    background: var(--main-bg);
    border: 1px solid var(--divider);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s;
  }
  .wlt-input-row:focus-within { border-color: var(--accent); }
  .wlt-input {
	flex: 1;
    background: none;
    border: none;
    outline: none;
    padding: 10px 14px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-white);
    min-width: 0;
  }
  .wlt-input::placeholder { color: var(--divider); }
  .wlt-input-cur {
    padding: 0 16px 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
  }
  .wlt-input-hint {
	margin-top: 6px;
    font-size: 11px;
    color: var(--text-second);
    min-height: 16px;
  }
  .wlt-input-hint strong { color: #06D16C; }

  .wlt-pay-btn {
	background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: opacity 0.15s, transform 0.1s;
    flex-shrink: 0;
  }
  .wlt-pay-btn:hover { opacity: 0.92; }
  .wlt-pay-btn:active { transform: scale(0.98); }
 .g-priv-list { display: flex; flex-direction: column; gap: 8px; }
 .g-priv-item {
	position: relative;
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.1s;
    cursor: default;
  }
  .g-priv-item:hover { border-color: rgba(0,158,255,0.3); transform: translateX(4px); }
  .g-priv-num {
	font-size: 12px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 1px;
    width: 24px;
    flex-shrink: 0;
  }
  .g-priv-body { flex: 1; min-width: 0; }
  .g-priv-server { font-size: 13px; font-weight: 700; color: var(--text-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .g-priv-steam { font-size: 11px;
    color: var(--text-second);
    margin-top: 3px; }
  .g-priv-status {
	display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #06D16C;
    flex-shrink: 0;
  }
  .g-status-dot {
    width: 7px; 
    height: 7px;
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
    flex-shrink: 0;
  }
.g-status-dot.red{
	box-shadow: 0 0 6px #dc3545;
    background: #dc3545;
}

.g-status-dot.green{
	box-shadow: 0 0 6px #06D16C;
    background: #06D16C;
}

.g-status-dot.yellow{
	box-shadow: 0 0 6px #ffc107;
    background: #ffc107;
}
	
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  .g-priv-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--divider);
  }
  .g-priv-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 2px;
  }

.popover {
    background-color: var(--main-bg);
    border: 1px solid var(--divider);
    border-radius: 10px;
}
.popover-header {
    background-color: var(--divider);
    border-bottom: 1px solid var(--text-second);
}
.popover-body {
    color: var(--text-white);
    position: relative;
}
.g-search {
	display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    transition: border-color 0.15s;
  }
  .g-search:focus-within { border-color: rgba(0,158,255,0.4); }
  .g-search svg { 
    width: 16px;
    height: 16px;
    color: var(--text-second);
    flex-shrink: 0; }
  .g-search input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-white);
  }
  .g-search input::placeholder { color: var(--text-second); }
  .g-search-count { font-size: 11px; font-weight: 600; color: var(--text-second); flex-shrink: 0; }

  .g-friend-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  .g-friend-card {
	position: relative;
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    padding: 20px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
    text-align: center;
  }
  .g-friend-card:hover { border-color: rgba(0,158,255,0.35); transform: translateY(-3px); }
  .g-friend-card-bg {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(0,158,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,158,255,0.03) 1px, transparent 1px);
    background-size: 16px 16px;
    pointer-events: none;
  }
  .g-friend-ava {
    width: 52px; height: 52px;
    background: var(--divider);
    border: 2px solid var(--divider);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: border-color 0.15s;
  }
.g-friend-ava img{
	width: 100%;
  	border-radius: 10px;
}
  .g-friend-card:hover .g-friend-ava { border-color: rgba(0,158,255,0.4); }
  .g-friend-name { font-size: 12px; font-weight: 700; color: var(--text-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
  .g-friend-badge {
    font-size: 10px; font-weight: 600;
    color: var(--text-second);
    background: var(--main-bg);
    border: 1px solid var(--divider);
    border-radius: 4px;
    padding: 2px 8px;
    letter-spacing: 0.3px;
  }

 .g-search-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
  }
  .g-search-btn:hover { opacity: 0.88; }
  .g-search-btn svg { width: 14px; height: 14px; color: #fff; stroke: #fff; }
.g-friends-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
  }
  .g-friends-navbtn {
	display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid var(--divider);
    background: var(--hover);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-second);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .g-friends-navbtn svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; }
  .g-friends-navbtn:hover { border-color: rgba(0,158,255,0.3); color: var(--text-white); }
  .g-friends-navbtn.active {
    border-color: var(--accent);
    background: rgba(0,158,255,0.08);
    color: var(--text-white);
  }
	.g-friends-navbtn.active svg { opacity: 1; }
	.g-friends-pane { display: none; }
	.g-friends-pane.active { display: block; }
	.g-req-list { display: flex; flex-direction: column; gap: 8px; }

  .g-req-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    transition: border-color 0.15s;
  }
  .g-req-item:hover { border-color: rgba(0,158,255,0.3); }

  .g-req-ava {
	width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--divider);
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
  }
.g-req-ava img{
	width: 100%;
    border-radius: 10px;
}
  .g-req-body { flex: 1; min-width: 0; }
  .g-req-name { 
    font-size: 13px; 
    font-weight: 700; 
    color: var(--text-white); }
  .g-req-meta { 
    font-size: 11px;
    color: var(--text-second);
    margin-top: 3px; }

  .g-req-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

  .g-req-badge {
    font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 6px;
    white-space: nowrap;
  }
  .g-req-badge.outgoing {
	color: var(--text-second);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--divider);
  }

  .g-req-accept {
	display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid rgba(6, 209, 108, 0.35);
    border-radius: 8px;
    background: rgba(6, 209, 108, 0.08);
    font-size: 12px;
    font-weight: 600;
    color: #06D16C;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
  }
  .g-req-accept:hover { background: rgba(6,209,108,0.15); border-color: rgba(6,209,108,0.5); }
  .g-req-accept svg { 
    width: 12px;
    height: 12px;
    color: #06D16C; }

  .g-req-cancel {
	display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 8px;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #ff5050;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
  }
  .g-req-cancel:hover { background: rgba(255,80,80,0.08); border-color: rgba(255,80,80,0.4); }
  .g-req-cancel svg { 
    width: 12px;
    height: 12px;
    color: #ff5050; 
}
#place_for_messages {
    display: flex;
    flex-direction: column;
}
  .g-msg-item {
	position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
    margin-bottom: 8px;
  }
.g-msg-item:hover { 
    border-color: var(--accent);
    transform: translateX(4px); 
}
  .unread-msg { border-left: 2px solid var(--accent); }
  .g-msg-ava {
	width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--divider);
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
  }
.g-msg-ava img{
	width: 100%;
    border-radius: 10px;
}
  .accent-ava { background: rgba(0,158,255,0.12); border-color: rgba(0,158,255,0.3); color: var(--accent); }
  .g-msg-body { flex: 1; min-width: 0; }
  .g-msg-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
  .g-msg-name { font-size: 13px; font-weight: 700; color: var(--text-white); }
  .g-msg-time { font-size: 11px; color: var(--text-second); }
  .g-msg-preview { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--text-second); }
  .g-msg-preview svg { flex-shrink: 0; }
  .g-msg-unread-dot {
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--accent);
    flex-shrink: 0;
  }
.g-msg-preview .text-info {
    color: var(--accent);
    display: flex;
    gap: 5px;
    align-items: center;
}
.g-msg-preview .text-default{
	color: var(--text-second);
    display: flex;
    gap: 5px;
    align-items: center;
}
.g-msg-preview .text-success {
    color: #28a745 !important;
    display: flex;
    align-items: center;
    gap: 5px;
}
.g-msg-trash{
	display: flex;
  	transition: 0.3s ease;
}
.g-msg-trash:hover svg{
	color: var(--text-white);
}

#messages{
	display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 400px;
}
#messages::-webkit-scrollbar {
  width: 5px;
}
#messages::-webkit-scrollbar-track {
  background: #2c2c2c;
  border-radius: 4px;
}
#messages::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 4px;
}
#messages::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.g-notif-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.g-notif-clear {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #ff5050;
    background: rgba(255,80,80,0.06);
    border: 1px solid rgba(255,80,80,0.2);
    border-radius: 8px; padding: 6px 12px;
    cursor: pointer; transition: background 0.15s;
}
.g-notif-clear:hover { background: rgba(255,80,80,0.12); }
.g-notif-list { display: flex; flex-direction: column; gap: 8px; }
.g-notif-item {
	display: flex;
    gap: 14px;
    padding: 16px 18px;
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    align-items: center;
}

.g-notif-icon {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.g-notif-icon svg { width: 16px; height: 16px; }
.success-icon {
  background: rgba(6,209,108,0.1);
  border: 1px solid rgba(6,209,108,0.25);
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 8l3 3 7-7" stroke="%2306D16C" stroke-width="1.5" stroke-linecap="round"/></svg>');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

.error-icon {
  background: rgba(255,80,80,0.1);
  border: 1px solid rgba(255,80,80,0.25);
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 4v5M8 11v1" stroke="%23ff5050" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="%23ff5050" stroke-width="1.2"/></svg>');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

.info-icon {
  background: rgba(255,165,0,0.1);
  border: 1px solid rgba(255,165,0,0.25);
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2L14 13H2L8 2z" stroke="%23ffa500" stroke-width="1.2"/><path d="M8 7v3M8 11.5v.5" stroke="%23ffa500" stroke-width="1.5" stroke-linecap="round"/></svg>');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

.g-notif-body { flex: 1; min-width: 0; }
.g-notif-text { font-size: 13px; font-weight: 500; color: var(--text-white); line-height: 1.5; }
.g-notif-meta {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-second);
}


 .settings-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .settings-section {
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 15px;
    overflow: hidden;
  }

  .settings-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--divider);
  }

  .settings-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0,158,255,0.15);
    border: 1px solid rgba(0,158,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .settings-section-icon svg { width: 16px; height: 16px; color: var(--accent); }

  .settings-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-white);
  }

  .settings-rows {
    display: flex;
    flex-direction: column;
  }

  .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    gap: 20px;
    border-bottom: 1px solid var(--divider);
  }
  .settings-row:last-child { border-bottom: none; }

  .settings-row-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .settings-row-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-white);
  }
  .settings-row-desc {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-second);
    line-height: 1.4;
  }

    .settings-row-right { flex-shrink: 0; position: relative; }
	.settings-result{
    position: absolute;
    right: 10px;
    top: -7px;
    color: var(--accent);
    font-size: 10px;}

  .settings-input {
    background: var(--main-bg);
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-white);
    outline: none;
    width: 260px;
    transition: border-color 0.15s;
  }
  .settings-input:focus { border-color: var(--accent); }
  .settings-input::placeholder { color: var(--text-second); }

  .settings-textarea {
    background: var(--main-bg);
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-white);
    outline: none;
    width: 260px;
    height: 80px;
    resize: vertical;
    transition: border-color 0.15s;
    line-height: 1.5;
  }

  .toggle {
    width: 44px;
    height: 24px;
    background: var(--divider);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
  }
  .toggle.on { background: var(--accent); }
  .toggle::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  }
  .toggle.on::after { transform: translateX(20px); }

  .avatar-upload {
    display: flex;
    align-items: center;
    gap: 14px;
  }
#edit_user_avatar_result{
	color: var(--text-second);
    font-size: 12px;
}
  .avatar-preview {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0f3460, #16213e);
    border: 2px solid var(--divider);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    flex-shrink: 0;
    overflow: hidden;
  }
  .avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
  .avatar-btns { display: flex; flex-direction: column; gap: 6px; }
  .btn-outline {
    background: transparent;
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-white);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
  }
.btn-outline svg{
	color: var(--text-white);
  	transition: 0.3s ease;
}

.btn-outline:hover svg{
	color: var(--accent);
}
  .btn-outline:hover { border-color: var(--accent); color: var(--accent); }
  .btn-danger {
    background: transparent;
    border: 1px solid rgba(255,80,80,0.3);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #ff5050;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
  }
  .btn-danger:hover { background: rgba(255,80,80,0.08); border-color: #ff5050; }

  .settings-save-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
  }
  .btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border: none;
    border-radius: 10px;
    padding: 10px 28px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-white);
    cursor: pointer;
    transition: opacity 0.15s;
  }
  .btn-primary:hover { opacity: 0.9; }

  .input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 260px;
  }
  .input-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-second);
  }

  .dob-inputs {
    display: flex;
    gap: 6px;
    width: 260px;
  }
  .dob-inputs .settings-input {
    width: 100%;
  }

  .social-connected {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .social-connected-badge {
	display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(6, 209, 108, 0.08);
    border: 1px solid rgba(6, 209, 108, 0.3);
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #06D16C;
    white-space: nowrap;
  }
  .social-connected-badge svg { 
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #06D16C; }
  .social-connected-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-second);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .section-save-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--divider);
    background: rgba(255,255,255,0.01);
  }

  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 2px; }

.password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field .settings-input {
    padding-right: 40px;
}

.password-toggle {
    position: absolute;
    right: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: color 0.2s;
}

.password-toggle:hover {
    color: #333;
}

.password-toggle .eye-icon {
    display: block;
}

.password-toggle .eye-icon.closed {
    display: none;
}

.two-monitoring {
    margin-top: 15px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(29rem, 1fr));
    grid-gap: 15px;
    gap: 15px;
    height: 100%;
    overflow: initial;
    align-content: flex-start;
}

.two-server {
	border-radius: 15px;
    background: var(--hover);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 15px;
    padding: 15px;
  	transition: 0.3s ease;
  border: 1px solid var(--divider);
}

.two-server:hover{
	background: var(--divider);
}

.two-server > .server-info > .server_online > .progress .progress-bar {
	transition: 0.3s ease;
}

.two-server:hover > .server-info > .server_online > .progress .progress-bar {
	box-shadow: 0px 0px 20px 0px var(--accent);
}

.two-server:hover > .server-info > .server_online .progress{
	overflow: visible;
}

.two-server:hover .server-mapname{
	color: var(--text-dim);
}

.two-server .server-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.server-info > .server_name p {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-white);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%; 
}

.two-server .server-mapname{
	display: flex;
    gap: 5px;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-second);
    margin-top: 5px;
  	transition: 0.3s ease;
}

.two-server .server_btn {
    display: flex;
    flex-direction: column; 
    gap: 5px;
    align-items: flex-end;
}

.two-server .server-number{
	font-weight: 700;
    font-size: 12px;
    color: var(--text-second);
}

.server_online .progress{
	height: 3px;
    margin-top: 10px;
    margin-bottom: 13px;
    background: var(--main-bg);
  	transition: 0.3s ease;
}

.server_online > .progress .bg-success, .bg-warning, .bg-danger{
    background: linear-gradient(90deg, #009eff 0%, #8dd4ff 100%) !important;
}

.server_online .online_nowmax{
	font-weight: 600;
    font-size: 16px;
    color: var(--text-white);
}

.server_online > .online_nowmax .online_max{
	font-weight: 500;
    font-size: 12px;
    color: var(--text-second);
}

.two-server > .server_btn .server_ip, .two-server > .server_btn a{
    border: 1px solid var(--divider);
    border-radius: 6px;
    padding: 7.5px 10px;
    display: flex;
    gap: 5px;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-second);
    background: var(--hover);
    width: stretch;
    align-items: center;
    justify-content: center;
  	transition: 0.3s ease;
}

.two-server > .server_btn .server_ip, .two-server > .server_btn a:hover{
	border: 1px solid var(--accent);
  	cursor: pointer;
  	background: #009eff17;
  	color: var(--text-white);
}

.two-server > .server_btn .server_ip, .two-server > .server_btn > a svg{
	transition: 0.3s ease;
}

.two-server > .server_btn .server_ip, .two-server > .server_btn > a:hover svg{
	color: var(--text-white);
}

.modal-foot {
	display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--divider);
    flex-shrink: 0;
}
.modal-foot-btn {
  flex: 1; 
  height: 38px;
  border-radius: 10px;
  font-size: 11px; 
  font-weight: 700;
  cursor: pointer; 
  border: none;
  display: flex; 
  align-items: center; 
  justify-content: center;
  gap: 6px;
  transition: opacity .12s;
}
.modal-foot-btn:hover { opacity: .88; }
.modal-foot-btn:active { opacity: .75; }
.mfb-join {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: var(--text-white);
}
.mfb-join svg{
	color: var(--text-white);
}
.mfb-copy {
    background: var(--hover);
    border: 1px solid var(--divider);
    color: var(--text-second);
  	transition: 0.3s ease;
}

.mfb-copy:hover{
	border: 1px solid var(--accent);
    cursor: pointer;
    background: #009eff17;
    color: var(--text-white);
}
.mfb-copy svg { width: 13px; height: 13px; }
.mfb-copy:hover svg{ color: var(--text-white); }
.pl-row.admin-mode { flex-wrap: wrap; padding-bottom: 10px; }
.pl-admin-bar {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 68px;                             
  margin-top: 6px;
}
.pl-admin-select {
	flex: 1;
    height: 28px;
    background: var(--main-bg);
    border: 1px solid var(--divider);
    border-radius: 7px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-second);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url(data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    transition: 0.15s ease;
}
.pl-admin-select:focus { border-color: var(--accent); }
.pl-admin-select option { background: var(--main-bg); }

.pl-admin-exec {
	flex-shrink: 0;
    height: 28px;
    padding: 0 12px;
    border-radius: 7px;
    border: 1px solid var(--divider);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-second);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}
.pl-admin-exec:hover { background: rgb(0 158 255 / 15%);border-color: var(--accent);color: var(--accent); }
.pl-admin-exec:active { transform: scale(.97); }
.pl-admin-exec svg { width: 11px;height: 11px;color: var(--text-second); transition: .12s ease; }
.pl-admin-exec:hover svg { color: var(--accent); }

.input-group-timepicker{
	display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    padding: 0 !important;
}

.input-group-timepicker input{
	width: 55%;
}

.input-group-timepicker .input-group-append{
	padding: 0 !important;
}

.btn-timepicker{
	display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--divider);
    border-radius: 5px;
    transition: 0.3s ease;
}

.btn-timepicker:hover{
	background: var(--divider);
}
.btn-timepicker:hover svg{
	color: var(--text-white);
}

#nprogress {
  pointer-events: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
}

#nprogress .bar {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, #009eff 0%, #8dd4ff 100%);
  height: 3px;
}

#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;
  transform: rotate(3deg) translate(0px, -4px);
}

#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 9999;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;
  animation: nprogress-spinner 400ms linear infinite;
}

@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.result_ok, .result_ok_b {
  display: block;
  position: fixed;
  z-index: 1200;
  top: 16px;
  right: 18px;
  color: #4d86d1;
  font-size: 16px;
}

.result_error, .result_error_b {
  display: block;
  position: fixed;
  z-index: 1200;
  top: 17px;
  right: 18px;
  color: #4d86d1;
  font-size: 16px;
}

.page-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.page-head-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(0,158,255,.12);
  border: 1px solid rgba(0,158,255,.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.page-head-ico svg { width: 18px; height: 18px; color: var(--accent); }
.page-head-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--text-white);
    margin: 0;
}
.page-head-title span { color: var(--accent); }

.shop-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: start;
}

.shop-card {
	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 15px;
    overflow: hidden;
}
.shop-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--divider);
  background: var(--card2);
}
.shop-card-head-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(0,158,255,.1);
  border: 1px solid rgba(0,158,255,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.shop-card-head-ico svg { width: 15px; height: 15px; color: var(--accent); }
.shop-card-head-title { 
  	font-size: 13px;
    font-weight: 700;
    color: var(--text-white);
}
.shop-card-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.shop-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-step-label {
	display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
}
.shop-step-num {
	width: 18px;
    height: 18px;
    border-radius: 5px;
    background: rgba(0, 158, 255, .12);
    border: 1px solid rgba(0, 158, 255, .25);
    display: flex;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: var(--accent);
    flex-shrink: 0;
    align-items: center;
    letter-spacing: 0;
}
.shop-step-hint {
	font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 158, 255, .04);
    border: 1px solid rgba(0, 158, 255, .1);
    border-radius: 8px;
    padding: 8px 12px;
    line-height: 1;
}
.shop-step-hint svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }

.shop-select {
	width: 100%;
    height: 42px;
    background: var(--card2);
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 0 36px 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-white);
    outline: none;
    appearance: none;
    background-image: url(data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236D6D6D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    transition: border-color .15s;
}
.shop-select:focus { border-color: rgba(0,158,255,.5); }
.shop-select option { background: #222; }
.shop-select:disabled { opacity: .4; cursor: not-allowed; }

.shop-divider {
  height: 1px;
  background: var(--divider);
  margin: 0 -20px;
}

.auth-warn {
  background: rgba(255,80,80,.06);
  border: 1px solid rgba(255,80,80,.2);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,80,80,.8);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background .15s;
}
.auth-warn:hover { background: rgba(255,80,80,.1); }
.auth-warn svg { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; }

.shop-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn-buy {
	flex: 1;
    min-width: 180px;
    height: 48px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity .15s, transform .1s;
    letter-spacing: .3px;
}
.btn-buy:hover { opacity: .92; }
.btn-buy:active { transform: scale(.98); }
.btn-buy:disabled { opacity: .35; cursor: not-allowed; }
.btn-buy svg { width: 16px; height: 16px; color: var(--text-white); }

.btn-voucher {
	height: 48px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid var(--divider);
    background: var(--card2);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color .15s, color .15s;
}
.btn-voucher:hover { border-color: rgba(255,215,0,.35); color: #FFD700; }
.btn-voucher svg { width: 15px; height: 15px; transition: .15s ease}
.btn-voucher:hover svg{ color: #FFD700; }

.agreement {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-second);
    line-height: 1.6;
}
.agreement a { color: var(--accent); text-decoration: none; }
.agreement a:hover { text-decoration: underline; }


.info-panel { display: flex; flex-direction: column; gap: 12px; }

.info-card {
	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 15px;
    overflow: hidden;
}
#store_service_info > p img{
	width: 100%;
}
.info-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--divider);
  background: var(--card2);
}
.info-card-head svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.info-card-head span {
	font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-white);
}
.info-card-body { padding: 14px 16px; }

.srv-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 12px;
}
.srv-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.srv-info-row-label { 
  color: var(--text-second);
  font-weight: 500; 
}
.srv-info-row-val { 
  	font-weight: 700;
    color: var(--text-white);
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; 
}
.srv-bar-mini { height: 3px; background: #222; border-radius: 2px; overflow: hidden; margin-top: 3px; }
.srv-bar-mini-fill { height: 100%; border-radius: 2px; }

.modal-input {
  width: 100%; height: 44px;
  background: #141415;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 13px; 
  font-weight: 500;
  color: var(--text-white); 
  outline: none;
  transition: border-color .15s;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.modal-input:focus { border-color: var(--accent); }
.modal-input::placeholder { color: #444; text-transform: none; letter-spacing: 0; }

.profile_header{
	position: relative;
}

.profile-page-top-actions{
	    position: absolute;
    z-index: 11;
    right: 20px;
    top: 20px;
}

.profile-actions-dropdown .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.btn-actions {
	width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-second);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-actions:hover{
	    background: rgba(255, 255, 255, 0.12);
}

.btn-actions:hover svg{
    color: var(--text-white);
}

.profile-actions-dropdown {
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 5px;
    min-width: 190px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.profile-actions-dropdown .dropdown-item {
    color: var(--text-second);
    border-radius: 6px;
    padding: 8px 11px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
}

.profile-actions-dropdown .dropdown-item::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: background 0.12s;
}

.profile-actions-dropdown .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-white);
}

.profile-actions-dropdown .dropdown-item:hover::before {
	background: var(--accent);
}

.profile-actions-dropdown .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.07);
    margin: 4px 0;
}

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.stat-card { 
  	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 14px; 
}
.stat-card .label { 
  	font-size: 11px;
    color: var(--text-second);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em; 
}
.stat-card .value { 
  	font-size: 20px;
    font-weight: 500;
    color: var(--text-white); 
}
.stat-card.accent { border-color: rgba(59,130,246,0.25); background: rgba(59,130,246,0.06); }
.bar-card { 
	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    margin-top: 10px; 
}
.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-label { 
  	font-size: 12px;
    color: var(--text-second);
    width: 130px;
    flex-shrink: 0; 
}
.bar-track { flex: 1; height: 6px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; background: #3b82f6; }
.bar-pct { font-size: 12px; color: #60a5fa; width: 34px; text-align: right; flex-shrink: 0; }
.info-row { 
  	display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 0.5px solid var(--divider); 
}
.info-row:last-child { border-bottom: none; }
.info-key { 
  	font-size: 12px;
    color: var(--text-second);
    width: 150px;
    flex-shrink: 0; 
}
.info-val { 
  	font-size: 13px;
    color: var(--text-white);
    font-weight: 500; 
}
.kd-badge { 
  	display: inline-block;
    background: rgba(59, 130, 246, 0.12);
    color: var(--accent);
    border: 0.5px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 13px;
    font-weight: 500; 
}
.bar-fill.acc {
    background: #22c55e;
}

.user-profile{
  display: flex;
    gap: 5px;
    align-items: center;
}

.bar-pct.acc {
    color: #4ade80;
}

.page-head-back {
	width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--divider);
    background: var(--card2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-dim);
    flex-shrink: 0;
    transition: border-color .15s, color .15s;
    text-decoration: none;
}
.page-head-back:hover { border-color: rgba(0,158,255,.35); color: var(--accent); }
.page-head-back svg { width: 14px; height: 14px; transition: .15s ease;}
.page-head-back:hover svg {color: var(--accent);}

.page-head-id {
	font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--card2);
    border: 1px solid var(--divider);
    border-radius: 6px;
    padding: 3px 9px;
    margin-left: 4px;
}

.status-chip {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 5px 12px;
    flex-shrink: 0;
}
.status-chip .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.chip-success {color: #06D16C;background: rgba(6, 209, 108, .1);border: 1px solid rgba(6, 209, 108, .25);}
.chip-danger {color: #dc3545;background: rgb(220 47 36 / 10%);border: 1px solid rgb(220 53 69 / 25%);}
.chip-warning {color: var(--accent);background: rgb(0 158 255 / 10%);border: 1px solid rgb(0 158 255 / 25%);}

.complaint-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.c-block {
  background: var(--card2);
  border: 1px solid var(--divider);
  border-radius: 14px;
  overflow: hidden;
}
.c-block-head {
	display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--divider);
    background: var(--hover);
}
.c-block-head-ico {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(0,158,255,.1);
  border: 1px solid rgba(0,158,255,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.c-block-head-ico svg { width: 13px; height: 13px; color: var(--accent); }
.c-block-head-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
}
.c-block-body { padding: 18px; }

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 32px;
}
.c-block-body > .info-grid .info-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 0.5px solid var(--divider);
    font-size: 13px;
}
.info-row:nth-child(5),
.info-row:nth-child(6) {
  border-bottom: none;
}
.info-label {
	font-weight: 700;
    color: var(--text-dim);
    flex-shrink: 0;
    min-width: 110px;
}
.info-value {
  font-weight: 500;
  color: var(--text-white);
  word-break: break-all;
}
.info-value.green { color: var(--green); font-weight: 700; }
.info-value.orange { color: var(--orange); font-weight: 700; }
.info-value.red { color: var(--red); font-weight: 700; }
.info-value.accent { color: var(--accent); }
.info-value a { color: var(--accent); text-decoration: none; }
.info-value a:hover { text-decoration: underline; }

.complaint-comment {
  font-size: 13px; font-weight: 500;
  color: var(--text-dim);
  line-height: 1.7;
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 14px 16px;
}

.demo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.demo-empty {
	display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim);
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 10px 14px;
    flex: 1;
}
.demo-empty svg { 
  	width: 14px;
    height: 14px;
    color: var(--text-dim);
    flex-shrink: 0; }
.demo-link {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px; font-weight: 600;
  color: var(--accent);
  background: rgba(0,158,255,.08);
  border: 1px solid rgba(0,158,255,.25);
  border-radius: 8px;
  padding: 10px 14px;
  text-decoration: none;
  flex: 1;
  transition: background .15s;
}
.demo-link:hover { background: rgba(0,158,255,.14); }
.demo-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.ops-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ops-label {
	font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-right: 4px;
}

.op-btn {
  height: 36px;
  padding: 0 18px;
  border-radius: 9px;
  border: none;
  font-size: 12px; 
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: opacity .12s, transform .1s;
  letter-spacing: .2px;
}
.op-btn:active { transform: scale(.97); }
.op-btn:hover { opacity: .88; }
.op-btn svg { 
  width: 13px;
    height: 13px; }

.op-btn-detail {
    background: var(--hover);
    border: 1px solid var(--divider);
    color: var(--text-dim);
}
.op-btn-detail:hover{
	color: var(--text-dim);
}
.op-btn-banned {
  background: linear-gradient(135deg, #06D16C, #50ff9a);
  color: #0a2a18;
}
.op-btn-banned svg{
	color: #0a2a18;
}
.op-btn-unbanned {
  background: linear-gradient(135deg, #FF9A00, #ffcc44);
  color: #2a1800;
}
.op-btn-unbanned svg{
	color: #2a1800;
}
.op-btn-delete {
  background: rgba(255,80,80,.1);
  border: 1px solid rgba(255,80,80,.25);
  color: #FF5050;
}
.op-btn-delete svg{
	color: #FF5050;	
}
.op-btn-delete:hover { background: rgba(255,80,80,.18); }

.comments-list {
	display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--divider);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}
.comment-item {
	background: var(--hover);
    padding: 14px 18px;
    display: flex;
    gap: 12px;
}
.comment-ava {
  width: 34px; 
  height: 34px;
  flex-shrink: 0;
  display: flex; 
  align-items: center; 
  justify-content: center;
}
.comment-ava img{
	width: 100%;
    border-radius: 9px;
}
.comment-body { flex: 1; min-width: 0; }
.comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.comment-author a {
  font-size: 12px; 
  font-weight: 700;
  color: var(--text-white);
}
.comment-role {
  font-size: 9px; font-weight: 700;
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.cr-admin { background: rgba(255,80,80,.1); color: var(--red); border: 1px solid rgba(255,80,80,.2); }
.cr-mod   { background: rgba(0,158,255,.1); color: var(--accent); border: 1px solid rgba(0,158,255,.2); }
.comment-time {
  font-size: 10px; font-weight: 500;
  color: var(--muted);
  margin-left: auto;
}
.comment-text {
	font-size: 10px;
    font-weight: 500;
    color: var(--text-second);
    margin-left: auto;
}
.comment-text b { color: var(--accent); font-weight: 700; }
.comment-text > p img{
	width: 50%;
}

.editor-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--divider);
}
.btn-submit-comment {
  height: 34px; padding: 0 18px;
  border-radius: 8px; border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  font-size: 11px; font-weight: 800;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: opacity .12s;
}
.btn-submit-comment:hover { opacity: .9; }
.btn-submit-comment svg { width: 12px; height: 12px; color: var(--text-white);}
#imgs .thumbnail {
    max-width: 100px;
    margin-right: 10px;
    margin-bottom: 0;
    float: left;
}
img.thumbnail-img {
    border-radius: 2px;
    height: auto;
    margin: 0;
    width: 100%;
}
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-title { 
	font-size: 18px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--text-white);
    margin: 0;
}
.btn-add { 
	display: flex;
    align-items: center;
    gap: 7px;
    background: var(--accent);
    color: var(--text-white);
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.15s ease;
  	opacity: 1;
}
.btn-add:hover { 
	opacity: 0.9;	
}
.btn-add.active{
	opacity: 0.9;	
}
.btn-add svg { 
  	width: 14px;
    height: 14px;
    color: var(--text-white); 
}
.table-wrap { 
	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 12px;
    overflow: hidden;
}
.t-head { 
  	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 10px 20px;
    border-bottom: 1px solid var(--divider); 
}
.t-head span { 
  	font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.07em; 
}
.t-row { 
  	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 13px 20px;
    border-bottom: 1px solid var(--divider);
    align-items: center;
    transition: background 0.12s;
    cursor: pointer; 
}
.t-row:last-child { border-bottom: none; }
.t-row:hover { background: rgba(255,255,255,0.03); }
.status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status.success { color: #4ade80; }
.status.success .status-dot { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.4); }
.status.danger { color: #f87171; }
.status.danger .status-dot { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,0.4); }
.status.warning { color: #fbbf24; }
.status.warning .status-dot { background: #fbbf24; }
.nick { 
  	font-size: 13px;
    color: var(--text-white);
    font-weight: 500; 
}
.date { 
  	font-size: 12px;
    color: var(--text-dim); 
}
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; }
.pagination li{
	width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid var(--divider);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-dim);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.12s;
}
.pagination li a{
	color: var(--text-dim);
  	transition: 0.12s ease;
}
.pagination li:hover a{
	color: var(--text-white);
}
.pagination li:hover { background: rgba(255,255,255,0.08); color: #c8d4e4; }
.pagination li.active { 
  	background: rgba(37, 99, 235, 0.2);
    border-color: var(--accent);
    color: var(--accent); 
}
.pagination li.active a{
	color: var(--accent); 
}
.modal-icon{
	border-radius: 15px;
    padding: 20px;
    background: var(--accent);
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 30px;
  	box-shadow: 0px 0px 20px 5px var(--accent);
}
.modal-icon svg{display:flex;}
.modal-register{
	padding: 50px;
    overflow: hidden;
    max-height: fit-content;
}
.modal-register h3{
	font-weight: 600;
    font-size: 22px;
    color: var(--text-white);
    text-align: center;
}
.modal-register h5{
	font-weight: 500;
    font-size: 14px;
    color: var(--text-second);
    text-align: center;
    margin-bottom: 30px;
}
.authorization, .registration{
	display: flex;
    flex-direction: column;
    gap: 30px;
}

.authorization > .reg-form label, .registration > .reg-form label{
	font-weight: 500;
	font-size: 14px;
	color: var(--text-white);
}
.authorization .btn-primary{
	box-shadow: 0px 0px 15px 0px var(--accent);
}
.reg-input{
	border: 0.50px solid var(--statics);
    border-radius: 15px;
    padding: 10px 15px;
    width: 100%;
    padding-left: 45px;
    background: var(--divider);
}
.reg-input:hover {
    border-color: var(--accent);
  	color: var(--text-white);
}

.reg-input:focus {
    border-color: var(--accent);
    outline: none;
}

.reg-input:hover::placeholder {
      color: var(--text-white);
}

.reg-input:focus::placeholder {
      color: var(--text-white);
}

.reg-inputs {
    position: relative;
}

.reg-inputs svg {
    position: absolute;
    left: 15px;
    top: 12px;
    transition: all 0.3s ease;
    pointer-events: none;
}

.reg-inputs svg path {
    transition: fill 0.3s ease;
    fill: #696969;
}

.reg-input:hover + svg path {
    fill: var(--accent);
}

.reg-input:focus + svg path {
    fill: var(--accent);
}

.reg-inputs:hover svg path {
    fill: var(--accent);
}

.btn-recovery{
	font-weight: 500;
    font-size: 12px;
    color: var(--accent);
  	transition: 0.3s ease;
  	margin-left: auto;
}

.btn-recovery:hover{
	color: var(--text-white);
}
.login_social_register_header{
	display: flex;
    align-items: center;
}

.login_social_register_header p{
	font-weight: 500;
	font-size: 14px;
	color: var(--text-second);
  	margin-left: 30px;
    margin-right: 30px;
}

.login_social_register_line{
	height: 1px;
    flex: 1;
    background-color: var(--statics);
}
.btns-registr-next {
	font-weight: 600;
	font-size: 12px;
	text-align: center;
	color: var(--statics);
}

.btns-registr-next a{
	color: var(--accent);
}
.btns-registr-next a:hover{
	color: var(--text-white);
}

.btn-registr-social{
	border: 0.50px solid var(--statics);
    border-radius: 15px;
    padding: 10px 15px;
    background: var(--divider);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  	transition: 0.3s ease;
}
.btn-registr-social:hover{
	background: var(--hover);
  	cursor: pointer;
}
.btns-registr-social{
	display: flex;
    gap: 30px;
    justify-content: space-between;
}
.privacy-text, .privacy-text a{
	font-weight: 500;
	font-size: 10px;
	color: var(--text-second);
}
.custom-checkbox input[type="checkbox"] {
            display: none;
}
        
.custom-checkbox {
	display: flex;
    align-items: center;
    gap: 10px;
}
        
.custom-checkbox .checkmark {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid var(--statics);
            border-radius: 5px;
            position: relative;
            cursor: pointer;
            flex-shrink: 0;
            background-color: transparent;
            transition: all 0.2s ease;
}
        
.custom-checkbox input[type="checkbox"]:checked + .checkmark {
            background-color: var(--statics);
            border-color: var(--statics);
}
        
.custom-checkbox input[type="checkbox"]:checked + .checkmark::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 2px;
            width: 6px;
            height: 11px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
}
        
.custom-checkbox:hover .checkmark {
            border-color: var(--statics);
            opacity: 0.8;
}
        
.btn-primary:disabled {
            opacity: 0.6;
            cursor: not-allowed;
}

.forum-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}

.forum-group { margin-bottom: 20px; }
.forum-group-title {
	font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-dim);
    padding: 0 0 8px 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.forum-group-title::after {
  content: '';
  flex: 1; height: 1px;
  background: var(--divider);
}

.cat-card {
	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 8px;
    transition: border-color .15s;
}
.cat-card:hover { border-color: rgba(0,158,255,.3); }

.cat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  text-decoration: none;
}
.cat-ico {
  width: 36px; 
  height: 36px;
  border-radius: 10px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  flex-shrink: 0;
}
.cat-ico img { width: 100%; }
.cat-info { flex: 1; min-width: 0; }
.cat-name {
	font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    display: block;
    text-decoration: none;
    transition: color .12s;
    line-height: 1;
}
.cat-name:hover { color: var(--accent-light); }
.cat-desc {
	font-size: 11px;
    font-weight: 500;
    color: var(--text-second);
}
.cat-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.cat-count {
	font-size: 13px;
    font-weight: 800;
    color: var(--text-dim);
}
.cat-count-label {
	font-size: 9px;
    font-weight: 600;
    color: var(--text-second);
    text-transform: uppercase;
    letter-spacing: .8px;
}

.latest-card {
	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}
.latest-head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--divider);
  background: var(--card2);
}
.latest-head svg { width: 14px; height: 14px; color: var(--accent); }
.latest-head span {
	font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-dim);
}
.latest-list { }
.latest-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  transition: background .1s;
  text-decoration: none;
}
.latest-item:last-child { border-bottom: none; }
.latest-item:hover { background: rgba(255,255,255,.025); }
.latest-ava {
  width: 28px; height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  margin-top: 1px;
}
.latest-ava img{
	width: 100%;
    border-radius: 7px;
}
.latest-body { flex: 1; min-width: 0; }
.latest-topic {
	font-size: 12px;
    font-weight: 700;
    color: var(--text-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-bottom: 3px;
}
.latest-meta {
	font-size: 10px;
    font-weight: 500;
    color: var(--text-second);
}
.latest-meta a { color: var(--accent); text-decoration: none; }
.latest-meta a:hover { text-decoration: underline; }
.topics-table {
	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 14px;
}
.topics-head {
  display: grid;
  grid-template-columns: 1fr 80px 80px 200px;
  gap: 0;
  padding: 9px 18px;
  border-bottom: 1px solid var(--divider);
  background: var(--card2);
}
.topics-head-cell {
	font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-second);
}
.topics-head-cell.right { text-align: right; }

.topic-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px 200px;
  gap: 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--divider);
  transition: background .1s;
  cursor: pointer;
  align-items: center;
}
.topic-row:last-child { border-bottom: none; }
.topic-row:hover { background: rgba(255,255,255,.025); }

.topic-main { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.topic-ava {
	width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    background: var(--main-bg);
}
.ava-blue{
	background: var(--accent);
    color: var(--text-white);
}
.topic-info { min-width: 0; flex: 1; }
.topic-title {
	font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-bottom: 3px;
    transition: color .12s;
    line-height: 1;
}
.topic-row:hover .topic-title { color: var(--accent-light); }
.topic-author-row {
  display: flex; align-items: center; gap: 6px;
}
.topic-author a{
  font-size: 11px; 
  font-weight: 600;
  color: var(--text-dim);
}
.topic-tag {
  font-size: 9px; 
  font-weight: 700;
  border-radius: 4px; 
  padding: 1px 5px;
  text-transform: uppercase; 
  letter-spacing: .3px;
}
.tag-close   { background: rgba(255,80,80,.1);   color: #FF5050;    border: 1px solid rgba(255,80,80,.2); }
.tag-pin   { background: rgba(0,158,255,.1);   color: var(--accent); border: 1px solid rgba(0,158,255,.2); }

.topic-stat {
	font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    text-align: right;
}
.topic-last {
  text-align: right;
  min-width: 0;
}
.topic-last-label {
	font-size: 10px;
    font-weight: 500;
    color: var(--text-second);
    margin-bottom: 2px;
}
.topic-last-who {
    font-size: 11px;
    font-weight: 600;
}
.topic-last-who a { color: var(--accent); text-decoration: none; }
.topic-last-who a:hover { text-decoration: underline; }
.topic-last-time {
	font-size: 10px;
    font-weight: 400;
    color: var(--text-second);
}
.page-head-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.btn-primary svg {
    width: 13px;
    height: 13px;
  	color: var(--text-white);
}

.btn-topic {
	height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid var(--divider);
    background: var(--hover);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: border-color .15s, color .15s;
}
.btn-topic:hover { border-color: rgba(0,158,255,.35); color: var(--accent); }
.btn-topic svg { width: 13px; height: 13px; color: var(--text-dim); }
.btn-topic:hover svg {color: var(--accent);}

.topic-layout {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 16px;
    align-items: start;
}

.topic-sidebar { display: flex; flex-direction: column; gap: 10px; }
.sidebar-card {
	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    overflow: hidden;
}
.sidebar-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--divider);
  background: var(--card2);
}
.sidebar-card-head svg { width: 13px; height: 13px; color: var(--accent); }
.sidebar-card-head span {
  font-size: 10px; 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: .8px;
  color: var(--text-dim);
}
.sidebar-card-body { padding: 12px 14px; }
.sidebar-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 11px;
}
.sidebar-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-info-label {
    color: var(--text-second);
}
.sidebar-info-val { font-weight: 700; color: var(--text-white); }
.sidebar-info-val.accent { color: var(--accent); }
.sidebar-info-val.green  { color: #06D16C; }
.sidebar-info-val.red  { color: #FF5050; }

.posts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.post-card {
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    overflow: hidden;
}

.post-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--divider);
    background: var(--card2);
}

.post-author-name a{
    font-size: 13px;
    font-weight: 700;
    color: var(--text-white);
}

.post-time {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-second);
    margin-left: auto;
}

.post-body {
    padding: 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dim);
    line-height: 1.7;
}

.post-body b { color: var(--accent); font-weight: 700; }
.post-body a { color: var(--accent); }
.post-body .edited{
	text-align: end;
    color: var(--text-second);
    font-size: 10px;
}

.post-foot{
	display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--divider);
    padding: 10px 16px;
}

.post-body img{
	width: 100%;
}

.post-author-role {
    font-size: 9px;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 6px;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-left: 4px;
}

.post-foot .post-foot-btns{
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-foot .thank_str{
	font-size: 12px;
    color: var(--text-second);
}

.post-action {
	display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-second);
    cursor: pointer;
    transition: color .12s;
    background: none;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
}
.post-action:hover { color: var(--accent); background: rgba(0,158,255,.07); }
.post-action svg { width: 13px; height: 13px; }
.post-action:hover svg {color: var(--accent);}

.reply-form {
	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 10px;
}
.reply-head {
  display: flex; 
  align-items: center; 
  gap: 9px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
  background: var(--card2);
}
.reply-head svg { width: 14px; height: 14px; color: var(--accent); }
.reply-head span { font-size: 12px; font-weight: 700; color: var(--white); }
.reply-foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--divider);
}

.news-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  align-items: start;
}

.news-grid { display: flex; flex-direction: column; gap: 10px; }

.news-card {
	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, transform .12s;
    display: flex;
}
.news-card:hover { border-color: rgba(0,158,255,.35); transform: translateX(3px); }
.news-card-img {
  width: 180px; flex-shrink: 0;
  background: #222;
  position: relative;
  overflow: hidden;
}
.news-card-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .3s;
}
.news-card:hover .news-card-img img { transform: scale(1.04); }
.news-card-img-placeholder {
	width: 100%;
    height: 257px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}
.news-card-img-placeholder svg { width: 32px; height: 32px; }

.news-card-body { padding: 14px 16px; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.news-card-title {
	font-size: 14px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 7px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card-short {
	font-size: 12px;
    font-weight: 400;
    color: var(--text-second);
    line-height: 1.55;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card-meta {
	display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-second);
    flex-wrap: wrap;
}
.news-card-meta-item {
  display: flex; 
  align-items: center; 
  gap: 4px;
}
.news-card-meta-item svg { width: 11px; height: 11px; }
.news-card-meta .read-more {
  margin-left: auto; color: var(--accent);
  font-weight: 700; cursor: pointer;
  transition: color .12s; text-decoration: none;
}
.news-card-meta .read-more:hover { color: var(--accent-light); }

.news-sidebar { display: flex; flex-direction: column; gap: 12px; }
.sidebar-block {
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 14px; 
  overflow: hidden;
}
.sidebar-block-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--divider);
  background: var(--card2);
}
.sidebar-block-head svg { width: 13px; height: 13px; color: var(--accent); }
.sidebar-block-head span {
  font-size: 10px; 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: .8px;
  color: var(--text-dim);
}

.cat-list li a{
	display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    cursor: pointer;
    transition: background .1s;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    text-decoration: none;
}
.cat-list li:hover a { background: rgba(255,255,255,.025); color: var(--accent); }
.cat-list li.active a { color: var(--accent); background: rgba(0,158,255,.06); }

.article-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px; align-items: start;
}
.article-card {
	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
}
.article-head {
  padding: 20px 22px 0;
}
.article-cat {
	display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    border-radius: 5px;
    padding: 3px 10px;
    margin-bottom: 12px;
}
.article-title {
	font-size: 20px;
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.35;
    margin-bottom: 10px;
}
.article-meta {
	display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--divider);
    font-size: 11px;
    color: var(--text-second);
    flex-wrap: wrap;
}
.article-meta-item { display: flex; align-items: center; gap: 5px; }
.article-meta-item svg { width: 12px; height: 12px; }
.article-meta-item a { color: var(--accent); text-decoration: none; }
.article-meta-item a:hover { text-decoration: underline; }
.article-body {
	padding: 20px 22px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-dim);
    line-height: 1.75;
}
.article-body p { margin-bottom: 14px; }
.article-body b, .article-body strong { color: var(--text-white); font-weight: 700; }
.article-body a { color: var(--accent); }
.article-body h3 { font-size: 15px; font-weight: 700; color: var(--text-white); margin: 18px 0 8px; }

.article-admin-card {
  background: var(--hover);
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 14px; 
  overflow: hidden;
}
.article-admin-head {
  display: flex; 
  align-items: center; 
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,215,0,.15);
  background: rgba(255,215,0,.05);
}
.article-admin-head svg { width: 13px; height: 13px; color: #FFD700; }
.article-admin-head span {
  font-size: 10px; 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: .8px;
  color: #FFD700;
}
.article-admin-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.article-admin-body button{
	width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 6px;
}
.article-admin-body > button svg{
	width: 14px;
 	height: 14px;
}
.article-admin-body > .btn-danger svg{
	color: #ff5050;
  	transition: 0.15s ease;
}

.article-admin-body > .btn-danger:hover svg{
	color: var(--text-white);
}

.comments-card {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 14px; 
  overflow: hidden;
}
.comments-head {
  display: flex; 
  align-items: center; 
  gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--divider);
  background: var(--hover);
}
.comments-head svg { width: 14px; height: 14px; color: var(--accent); }
.comments-head-title { font-size: 12px; font-weight: 700; flex: 1; }
.recent-item {
  display: flex; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--divider);
  cursor: pointer; transition: background .1s;
  text-decoration: none;
}
.recent-item:last-child { border-bottom: none; }
.recent-item:hover { background: rgba(255,255,255,.025); }
.recent-thumb {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    flex-shrink: 0;
    overflow: hidden;
}
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-info { flex: 1; min-width: 0; }
.recent-title {
	font-size: 11px;
    font-weight: 700;
    color: var(--text-white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    margin-bottom: 3px;
}
.recent-date {
	font-size: 10px;
    font-weight: 500;
    color: var(--text-second);
}

.form-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px; align-items: start;
}
.form-card {
	background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    overflow: hidden;
}
.form-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--divider);
  background: var(--card2);
}
.form-card-head-ico {
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(0,158,255,.1);
  border: 1px solid rgba(0,158,255,.2);
  display: flex; align-items: center; justify-content: center;
}
.form-card-head-ico svg { width: 13px; height: 13px; color: var(--accent); }
.form-card-head-title { font-size: 12px; font-weight: 700; color: var(--text-white); }
.form-card-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }

.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-label {
	font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-second);
    display: flex;
    align-items: center;
    gap: 6px;
}
.form-label svg { width: 12px; height: 12px; color: var(--accent); }
.form-label .req { color: #FF5050; }

.form-input {
  width: 100%; 
  height: 42px;
  background: var(--card2);
  border: 1px solid var(--divider);
  border-radius: 10px; 
  padding: 0 14px;
  font-size: 13px; 
  font-weight: 500;
  color: var(--text-white); 
  outline: none;
  transition: border-color .15s;
}
.form-input:focus { border-color: rgba(0,158,255,.5); }
.form-input::placeholder { color: var(--text-second); }

.form-textarea {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--divider);
  border-radius: 10px; 
  padding: 12px 14px;
  font-size: 13px; 
  font-weight: 500;
  color: var(--text-white); 
  outline: none;
  resize: vertical; 
  min-height: 80px;
  transition: border-color .15s; 
  line-height: 1.5;
}
.form-textarea:focus { border-color: rgba(0,158,255,.5); }
.form-textarea::placeholder { color: var(--text-second); }

.form-select {
  width: 100%; 
  height: 42px;
  background: var(--card2);
  border: 1px solid var(--divider);
  border-radius: 10px; 
  padding: 0 36px 0 14px;
  font-size: 13px; 
  font-weight: 600;
  color: var(--text-white); 
  outline: none; 
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236D6D6D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color .15s;
}
.form-select:focus { border-color: rgba(0,158,255,.5); }
.form-select option { background: #222; }

.img-upload-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px; 
  align-items: center;
}
.img-preview {
  width: 140px; height: 100px;
  border-radius: 10px;
  border: 1px solid var(--divider);
  background: var(--card2);
  overflow: hidden; 
  position: relative;
  display: flex; 
  align-items: center; 
  justify-content: center;
}
.img-preview img { width: 100%; height: 100%; object-fit: cover; }
.img-preview svg { width: 28px; height: 28px; color: #333; }
.img-upload-right { display: flex; flex-direction: column; gap: 10px; }
.img-upload-input-wrap {
  border: 1.5px dashed var(--divider);
  border-radius: 10px; 
  padding: 14px 16px;
  text-align: center; 
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.img-upload-input-wrap:hover {
  border-color: rgba(0,158,255,.4);
  background: rgba(0,158,255,.03);
}
.img-upload-input-wrap input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.img-upload-text {
  font-size: 11px; 
  font-weight: 500;
  color: var(--text-second);
}
.img-upload-text span { color: var(--accent); font-weight: 700; }

.tips-card {
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 14px; 
  overflow: hidden;
}
.tips-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--divider);
  background: var(--card2);
}
.tips-head svg { width: 13px; height: 13px; color: var(--accent); }
.tips-head span {
  font-size: 10px; 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: .8px;
  color: var(--text-dim);
}
.tips-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.tip-item {
  display: flex; 
  gap: 8px;
  font-size: 11px; 
  font-weight: 500;
  color: var(--text-second); 
  line-height: 1.5;
}
.tip-num {
  width: 18px; 
  height: 18px; 
  border-radius: 5px;
  background: rgba(0,158,255,.12);
  border: 1px solid rgba(0,158,255,.2);
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 9px; 
  font-weight: 800; 
  color: var(--accent);
  flex-shrink: 0; 
  margin-top: 1px;
}

.dop-btns{
	margin: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dop-btn{
	z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 12px;
    height: 42px;
    border-radius: 11px;
    color: var(--text-second);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    border: 1px solid var(--divider);
    position: relative;
}

.dop-btn.exit:hover {
    background: var(--hover);
    color: #FF5050;
    border-color: #FF5050;
  	font-weight: 600;
}

.dop-btn.admin:hover {
    background: var(--hover);
    color: #FF9A00;
    border-color: #FF9A00;
  	font-weight: 600;
}

.dop-btn.admin:hover svg{
	color: #FF9A00;
    transition: 0.15s ease;
}

.dop-btn.exit:hover svg{
	color: #FF5050;
    transition: 0.15s ease;
}

.form-control {
  width: 100%; 
  height: 42px !important;
  background: var(--card2);
  border: 1px solid var(--divider);
  border-radius: 10px; 
  padding: 0 36px 0 14px;
  font-size: 13px; 
  font-weight: 600;
  color: var(--text-white); 
  outline: none; 
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236D6D6D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color .15s;
}
.form-control:focus { 
  	border-color: rgba(0, 158, 255, .5);
    background-color: #222;
    color: var(--text-white); }
.form-control option { background: #222; }

.edit-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.c-block.danger { border-color: rgba(255,80,80,.25); }
.c-block.danger .c-block-head { background: rgba(255,80,80,.06); border-bottom-color: rgba(255,80,80,.2); }
.c-block.danger .c-block-head-ico { background: rgba(255,80,80,.1); border: 1px solid rgba(255,80,80,.25); }
.c-block.danger .c-block-head-ico svg { color: #FF5050; }
.c-block.danger .c-block-head-title { color: rgba(255,80,80,.7); }

.forms-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.f-btn {
  height: 40px; 
  padding: 0 14px;
  border-radius: 10px; 
  border: none;
  background: rgba(0,158,255,.12);
  border: 1px solid rgba(0,158,255,.3);
  font-size: 11px; 
  font-weight: 700;
  color: var(--accent); 
  cursor: pointer;
  display: flex; 
  align-items: center; 
  gap: 5px;
  white-space: nowrap; 
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
}
.f-btn:hover { background: rgba(0,158,255,.2); border-color: rgba(0,158,255,.5); }
.f-btn:active { transform: scale(.97); }
.f-btn svg { width: 12px; height: 12px; color: var(--accent); }
.f-btn-danger svg {color: #FF5050;}

.f-btn-danger {
  background: rgba(255,80,80,.1);
  border-color: rgba(255,80,80,.3);
  color: #FF5050;
}
.f-btn-danger:hover { background: rgba(255,80,80,.18); border-color: rgba(255,80,80,.5); }

.f-btn-submit {
  height: 40px; 
  padding: 0 18px;
  border-radius: 10px; 
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  font-size: 12px; 
  font-weight: 700;
  color: #fff; 
  cursor: pointer;
  display: flex; 
  align-items: center; 
  gap: 6px;
  transition: opacity .12s;
}
.f-btn-submit:hover { opacity: .88; }
.f-btn-submit svg {
    width: 13px;
    height: 13px;
    color: var(--text-white);
}

.f-select {
  flex: 1;
  height: 40px;
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 0 32px 0 14px;
  font-size: 12px; 
  font-weight: 600;
  color: var(--text-white); 
  outline: none;
  cursor: pointer; 
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236D6D6D' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .15s;
  min-width: 0;
}
.f-select:focus { border-color: rgba(0,158,255,.5); }
.f-select option { background: #222; }

.f-input {
  flex: 1;
  height: 40px;
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 12px; 
  font-weight: 500;
  color: var(--text-white); 
  outline: none;
  transition: border-color .15s;
  min-width: 0;
}
.f-input:focus { border-color: rgba(0,158,255,.5); }
.f-input::placeholder { color: var(--text-second); }

.forms-field {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.forms-field:first-child { padding-top: 0; }
.forms-field:last-child { border-bottom: none; padding-bottom: 0; }

.avatar-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  align-items: center;
}
.forms-field > .avatar-row .avatar-preview {
	width: 80px;
    height: 80px;
    border-radius: 12px;
    border: 1px solid var(--divider);
    background: var(--hover);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-preview svg { width: 28px; height: 28px; color: #333; }
.avatar-right { display: flex; flex-direction: column; gap: 8px; }
.avatar-upload-wrap {
  border: 1.5px dashed var(--divider);
  border-radius: 9px; 
  padding: 10px 14px;
  cursor: pointer; 
  position: relative;
  transition: border-color .15s;
}
.avatar-upload-wrap:hover { border-color: rgba(0,158,255,.4); cursor: pointer; }
.avatar-upload-wrap input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.avatar-upload-text {
  font-size: 10px; 
  font-weight: 500;
  color: var(--text-second);
  pointer-events: none;
}
.avatar-upload-text span { color: var(--accent); font-weight: 700; }

.info-table { width: 100%; border-collapse: collapse; }
.info-table tr { border-bottom: 1px solid rgba(255,255,255,.04); }
.info-table tr:last-child { border-bottom: none; }
.info-table td {
  padding: 10px 4px;
  font-size: 12px; vertical-align: middle;
}
.info-table td:first-child {
  color: var(--text-second);
  font-weight: 500; 
  width: 45%; 
  padding-right: 12px;
}
.info-table td:last-child {
  color: var(--text-white); 
  font-weight: 600;
}
.info-table td a { color: var(--accent); text-decoration: none; font-weight: 700; }
.info-table td a:hover { text-decoration: underline; }
.status-ok  { color: #06D16C !important; font-weight: 700 !important; }
.status-off { color: #FF5050 !important; font-weight: 700 !important; }

.f-notice {
  display: flex; 
  align-items: flex-start; 
  gap: 8px;
  background: rgba(0,158,255,.06);
  border: 1px solid rgba(0,158,255,.2);
  border-radius: 9px; 
  padding: 10px 12px;
  font-size: 11px; 
  font-weight: 500;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
}
.f-notice.warn { background: rgba(255,154,0,.06); border-color: rgba(255,154,0,.2); }
.f-notice svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.f-notice a { color: var(--accent); text-decoration: none; }
.f-notice a:hover { text-decoration: underline; }

.ma-table { width: 100%; border-collapse: collapse; }
.ma-table thead th {
  font-size: 9px; 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: 1px;
  color: var(--text-second);
  padding: 0 4px 8px; text-align: left;
}
.ma-table tr { border-bottom: 1px solid rgba(255,255,255,.04); }
.ma-table tr:last-child { border-bottom: none; }
.ma-table td {
  padding: 9px 4px;
  font-size: 12px;
  vertical-align: middle; 
  color: var(--text-dim);
}
.ma-table td a { color: var(--accent); text-decoration: none; font-weight: 600; }
.ma-table td a:hover { text-decoration: underline; }
.ma-actions { display: flex; align-items: center; gap: 6px; }
.ma-action-btn {
  width: 24px; 
  height: 24px; 
  border-radius: 6px;
  border: 1px solid var(--divider); 
  background: var(--card2);
  display: flex; 
  align-items: center; 
  justify-content: center;
  cursor: pointer; 
  color: var(--text-second);
  transition: border-color .12s, color .12s;
}
.ma-action-btn:hover.link { border-color: rgba(0,158,255,.4); color: var(--accent); }
.ma-action-btn:hover.del  { border-color: rgba(255,80,80,.4); color: #FF5050; }
.ma-action-btn svg { width: 11px; height: 11px; transition: .12s ease;}
.ma-action-btn:hover.link svg {color:var(--accent);}
.ma-action-btn:hover.del svg {color: #FF5050;}

.match-badge {
  font-size: 10px; 
  font-weight: 700;
  border-radius: 5px; 
  padding: 2px 7px;
}
.match-ip   { background: rgba(150,150,150,.1); color: var(--text-dim); border: 1px solid var(--divider); }
.match-os   { background: rgba(255,154,0,.1); color: #FF9A00; border: 1px solid rgba(255,154,0,.25); }
.match-full { background: rgba(255,80,80,.1); color: #FF5050; border: 1px solid rgba(255,80,80,.25); }

.empty-row {
  color: var(--text-second); 
  font-size: 12px;
  text-align: center; 
  padding: 16px 0;
}

.ops-table { width: 100%; border-collapse: collapse; }
.ops-table thead th {
  font-size: 9px; 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: 1px;
  color: var(--text-second);
  padding: 0 4px 8px; 
  text-align: left;
}
.ops-table tr { border-bottom: 1px solid rgba(255,255,255,.04); }
.ops-table tr:last-child { border-bottom: none; }
.ops-table td {
  padding: 9px 4px;
  font-size: 12px;
  vertical-align: middle;
}
.ops-amount { font-weight: 700; }
.ops-amount.plus  { color: #06D16C; }
.ops-amount.minus { color: #FF5050; }
.ops-type { color: var(--text-dim); font-weight: 500; }
.ops-date { color: var(--text-second); font-size: 11px; }


.modal-head-service {
	display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--divider);
    flex-shrink: 0;
}
.modal-head-ico-service {
  width: 34px; 
  height: 34px;
  border-radius: 9px;
  background: rgba(255,215,0,.1);
  border: 1px solid rgba(255,215,0,.25);
  display: flex; 
  align-items: center; 
  justify-content: center;
  flex-shrink: 0;
}
.modal-head-ico-service svg { width: 16px; height: 16px; color: #FFD700; }
.modal-head-info-service { flex: 1; min-width: 0; }
.modal-head-title-service {
  font-size: 14px; 
  font-weight: 800;
  color: var(--textwhite);
}
.modal-head-sub-service {
  font-size: 10px; 
  font-weight: 500;
  color: var(--text-second);
  margin-top: 2px;
}
.modal-close-service {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--divider);
  background: transparent; 
  color: var(--text-second);
  display: flex; 
  align-items: center; 
  justify-content: center;
  cursor: pointer; 
  flex-shrink: 0;
  transition: border-color .12s, color .12s;
}
.modal-close-service:hover { border-color: rgba(255,80,80,.4); color: #FF5050; }
.modal-close-service svg { width: 12px; height: 12px; }
.modal-close-service:hover svg {color: #FF5050;}

.section-label {
  display: flex; 
  align-items: center;
  gap: 8px;
  font-size: 10px; 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: 1.2px;
  color: var(--text-second);
  margin-bottom: 12px;
}
.section-label svg { width: 12px; height: 12px; color: var(--accent); }
.section-label::after {
  content: ''; 
  flex: 1; 
  height: 1px;
  background: var(--divider);
}

.settings-block {
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}

.setting-row {
  display: flex; 
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--divider);
}
.setting-row:last-child { border-bottom: none; }

.setting-label {
  font-size: 11px; 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: .8px;
  color: var(--text-second);
  width: 130px; 
  flex-shrink: 0;
}
.setting-control {
  flex: 1; 
  display: flex; 
  align-items: center;
  gap: 8px; 
  min-width: 0;
}

.s-btn {
  height: 36px; 
  padding: 0 14px;
  border-radius: 9px; 
  border: none;
  background: rgba(0,158,255,.12);
  border: 1px solid rgba(0,158,255,.3);
  font-size: 11px; 
  font-weight: 700;
  color: var(--accent); 
  cursor: pointer;
  display: flex; 
  align-items: center; 
  gap: 5px;
  white-space: nowrap; 
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
}
.s-btn:hover { background: rgba(0,158,255,.2); border-color: rgba(0,158,255,.5); }
.s-btn:active { transform: scale(.97); }
.s-btn:disabled { opacity: .35; cursor: not-allowed; }
.s-btn svg { width: 11px; height: 11px; color: var(--accent);}

.s-select {
  flex: 1; height: 36px;
  background: var(--main-bg);
  border: 1px solid var(--divider);
  border-radius: 9px; 
  padding: 0 30px 0 12px;
  font-size: 12px; 
  font-weight: 600;
  color: var(--text-white); 
  outline: none; 
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236D6D6D' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .15s; 
  min-width: 0;
}
.s-select:not(:disabled):focus { border-color: rgba(0,158,255,.5); }
.s-select:disabled { opacity: .45; cursor: not-allowed; background-color: var(--hover); }
.s-select option { background: #1e1e1f; }

.status-active {
  display: inline-flex; 
  align-items: center; 
  gap: 5px;
  font-size: 11px; 
  font-weight: 700;
  color: #06D16C;
  background: rgba(6,209,108,.1);
  border: 1px solid rgba(6,209,108,.25);
  border-radius: 20px; 
  padding: 3px 10px;
}
.status-paused {
  display: inline-flex; 
  align-items: center; 
  gap: 5px;
  font-size: 11px; 
  font-weight: 700;
  color: #FF9A00;
  background: rgba(255,154,0,.1);
  border: 1px solid rgba(255,154,0,.25);
  border-radius: 20px; 
  padding: 3px 10px;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.s-btn-unlock {
  height: 36px; 
  padding: 0 16px;
  border-radius: 9px; 
  border: none;
  background: linear-gradient(135deg, #06D16C, #50ff9a);
  font-size: 11px; 
  font-weight: 800;
  color: #0a2a15; 
  cursor: pointer;
  display: flex; 
  align-items: center; 
  gap: 6px;
  transition: opacity .12s;
}
.s-btn-unlock.warning{
	background: linear-gradient(135deg, #FF9A00, #FF9A00);
}
.s-btn-unlock.danger{
	background: linear-gradient(135deg, #FF5050, #FF5050);
}
.s-btn-unlock:hover { opacity: .88; }

.s-input {
  flex: 1; 
  height: 36px;
  background: var(--main-bg);
  border: 1px solid var(--divider);
  border-radius: 9px; 
  padding: 0 12px;
  font-size: 12px; 
  font-weight: 500;
  color: var(--text-white); 
  outline: none;
  transition: border-color .15s;
  min-width: 0;
}
.s-input:not(:disabled):focus { border-color: rgba(0,158,255,.5); }
.s-input:disabled {
  opacity: .45; cursor: not-allowed;
  background: var(--hover);
}
.s-input[type="text"][style*="font-family:'Inter'"] {
  font-size: 12px;
  letter-spacing: .3px;
}

.services-table {
  width: 100%; 
  border-collapse: separate;
  border-spacing: 0 6px;
}

.services-table thead th {
  font-size: 9px; 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: 1px;
  color: var(--text-second);
  padding: 0 14px 4px; 
  text-align: left;
}

.service-row td {
  background: var(--hover);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 11px 14px;
  vertical-align: middle;
  font-size: 12px;
}
.service-row td:first-child {
  border-left: 1px solid var(--divider);
  border-radius: 10px 0 0 10px;
}
.service-row td:last-child {
  border-right: 1px solid var(--divider);
  border-radius: 0 10px 10px 0;
}
.service-row:hover td {
  background: #242426;
  border-color: rgba(0,158,255,.2);
}

.svc-name {
  font-size: 13px; 
  font-weight: 700;
  color: var(--text-white);
}

.svc-date {
  font-size: 11px; 
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
}

.btn-extend {
  height: 28px; 
  padding: 0 12px;
  border-radius: 7px; 
  border: none;
  background: rgba(0,158,255,.1);
  border: 1px solid rgba(0,158,255,.25);
  font-size: 10px; 
  font-weight: 700;
  color: var(--accent); 
  cursor: pointer;
  display: inline-flex; 
  align-items: center; 
  gap: 4px;
  transition: background .12s;
}
.btn-extend:hover { background: rgba(0,158,255,.18); }
.btn-extend:disabled { opacity: .35; cursor: not-allowed; }
.btn-extend svg { width: 10px; height: 10px; color: var(--accent);}

.extend-block {
  	align-items: center; 
  	gap: 6px;
  	margin-top: 6px;
}

.extend-select {
  flex: 1; 
  height: 28px;
  background: var(--main-bg);
  border: 1px solid var(--divider);
  border-radius: 7px; 
  padding: 0 26px 0 10px;
  font-size: 11px; 
  font-weight: 500;
  color: var(--text-white); 
  outline: none; 
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236D6D6D' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.extend-select option { background: #1e1e1f; }

.btn-extend-ok {
  height: 28px; 
  padding: 0 12px;
  border-radius: 7px; 
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  font-size: 10px; 
  font-weight: 800;
  color: var(--text-white); 
  cursor: pointer;
  white-space: nowrap; 
  flex-shrink: 0;
  transition: opacity .12s;
}
.btn-extend-ok:hover { opacity: .88; }

.btn-return {
  height: 28px; 
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid rgba(255,80,80,.25);
  background: rgba(255,80,80,.08);
  font-size: 10px; 
  font-weight: 700;
  color: #FF5050; 
  cursor: pointer;
  display: inline-flex; 
  align-items: center; 
  gap: 4px;
  margin-top: 5px;
  transition: background .12s;
}
.btn-return:hover { background: rgba(255,80,80,.16); }
.btn-return:disabled { opacity: .35; cursor: not-allowed; }

.svc-num {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-second);
    width: 32px;
}

.svc-right{
	display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.svc-right-td{
	width: 70px;
}

.svc-right-btn{
	display: flex;
    gap: 2px;
}

.svc-right-btn button{
	width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--main-bg);
  	transition: 0.3s ease;
}

.svg-right-btn button:hover{
	border: 1px solid var(--divider);
}

.svc-date.admin, .svc-name.admin{
	max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.list-tabs a {
  display: inline-flex;
  align-items: center;
  height: 34px; 
  padding: 0 18px;
  border-radius: 9px;
  font-size: 12px; 
  font-weight: 700;
  color: var(--text-second);
  text-decoration: none;
  border: 1px solid var(--divider);
  background: var(--hover);
  transition: border-color .15s, color .15s, background .15s;
}
.list-tabs a:hover {
  border-color: rgba(0,158,255,.35);
  color: var(--text-white);
}
.list-tabs a.active {
	background: rgb(0 158 255 / 10%);
    border-color: rgb(0 158 255 / 35%);
    color: var(--accent);
}
.server-nav {
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.server-nav-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px; 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: 1px;
  color: var(--text-second);
  flex-shrink: 0;
}
.server-nav-label svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }

.server-list-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1; min-width: 0;
  overflow: hidden;
}
.server-list {
  display: flex;
  gap: 6px;
  overflow: hidden;
  flex: 1;
}
.server-btn {
  display: inline-flex;
  align-items: center;
  height: 30px; padding: 0 14px;
  border-radius: 8px;
  font-size: 11px; font-weight: 700;
  color: var(--text-second);
  text-decoration: none;
  border: 1px solid var(--divider);
  background: var(--card2);
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
  cursor: pointer;
}
.server-btn a{
	color: var(--text-second);
}

.server-btn.active a{
	color: var(--accent);
}
.server-btn:hover a { color: var(--text-white); }
.server-btn:hover { border-color: rgba(0,158,255,.35); }
.server-btn.active {
  background: rgba(0,158,255,.1);
  border-color: rgba(0,158,255,.35);
  color: var(--accent);
}

.scroll-btn {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1px solid var(--divider);
  background: var(--card2);
  display: flex; 
  align-items: center; 
  justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: border-color .15s;
  text-decoration: none;
}
.scroll-btn:hover { border-color: rgba(0,158,255,.35); color: var(--text-white);}
.scroll-btn svg { width: 6px; height: 11px; }
.scroll-btn:hover svg {color: var(--text-white);}
.search-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.search-input {
  height: 34px;
  width: 240px;
  background: var(--card2);
  border: 1px solid var(--divider);
  border-right: none;
  border-radius: 9px 0 0 9px;
  padding: 0 12px;
  font-size: 12px; 
  font-weight: 500;
  color: var(--text-white); 
  outline: none;
  transition: border-color .15s;
}
.search-input:focus { border-color: rgba(0,158,255,.5); }
.search-input::placeholder { color: var(--text-second); }
.search-btn {
  width: 36px; 
  height: 34px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border: none;
  border-radius: 0 9px 9px 0;
  display: flex; 
  align-items: center; 
  justify-content: center;
  cursor: pointer;
  transition: opacity .12s;
  text-decoration: none; 
  flex-shrink: 0;
}
.search-btn:hover { opacity: .88; }
.search-btn svg { width: 16px; height: 16px; color: #fff; fill: #fff; }
.ban-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.ban-stat-card {
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.ban-stat-val {
  font-size: 22px; 
  font-weight: 900;
  line-height: 1; 
  color: var(--text-white);
}
.ban-stat-val.red    { color: #FF5050; }
.ban-stat-val.orange { color: #FF9A00; }
.ban-stat-val.green  { color: #06D16C; }
.ban-stat-label {
  font-size: 10px; 
  font-weight: 600;
  color: var(--text-second); 
  text-transform: uppercase; 
  letter-spacing: .8px;
}

.ban-table-head {
	display: grid;
    grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr;
    gap: 0;
    padding: 9px 14px;
    background: var(--card2);
    border: 1px solid var(--divider);
    border-radius: 11px;
    margin-bottom: 2px;
}
.ban-table-head > div {
  font-size: 9px; 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: 1px;
  color: var(--text-second);
}

.ban-row {
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 11px;
  overflow: hidden;
  transition: border-color .12s;
}
.ban-row:hover { border-color: rgba(255,255,255,.1); }
.ban-row.expanded { border-color: rgba(0,158,255,.3); }

.ban-row-head {
	display: grid;
    grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr;
    gap: 0;
    padding: 12px 14px;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background .1s;
}
.ban-row-head:hover { background: rgba(255,255,255,.02); }

.ban-col-ico {
  display: flex; align-items: center;
}
.ban-ico-wrap {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,80,80,.1);
  border: 1px solid rgba(255,80,80,.2);
  display: flex; align-items: center; justify-content: center;
}
.ban-ico-wrap svg { width: 16px; height: 16px; }

.ban-col-nick {
  font-size: 13px; 
  font-weight: 700;
  color: var(--text-white);
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
  padding-right: 8px;
}
#banlist, #muts, .stats_table {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}
.ban-col-reason {
  font-size: 12px; 
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
  padding-right: 8px;
}
.ban-col-length {
  font-size: 11px; 
  font-weight: 700;
  color: var(--text-dim);
  max-width: 110px;
}
.ban-col-end { }
.ban-col-admin {
	font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ban-col-admin span{
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ban-col-admin > span > a img{
  width: 22px; 
  height: 22px;
  border-radius: 6px;
}

.ban-col-admin > span > a i{
	font-style: normal !important;
}

.ban-status {
	display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    padding: 3px 9px;
    color: var(--text-dim);
}

.ban-chevron {
  width: 18px; 
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--divider);
  background: var(--card2);
  display: flex; 
  align-items: center; 
  justify-content: center;
  flex-shrink: 0; 
  margin-left: auto;
  transition: transform .2s;
}
.ban-chevron svg { width: 10px; height: 10px; color: var(--text-second); }
.ban-row.expanded .ban-chevron { transform: rotate(180deg); }


.ban-details {
  display: none;
  border-top: 1px solid var(--divider);
}
.ban-details.open { display: block; }

.ban-details-head {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 0;
    padding: 9px 14px;
    background: rgba(0, 0, 0, .2);
    border-bottom: 1px solid var(--divider);
}
.ban-details-head > div {
  font-size: 9px; 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: 1px;
  color: var(--text-second);
}

.ban-details-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 0;
  padding: 12px 14px;
  align-items: center;
}
.ban-details-body > div {
  font-size: 12px; 
  font-weight: 500;
  color: var(--text-dim);
  padding-right: 10px;
}
.ban-details-body .bid-val {
  font-size: 13px; 
  font-weight: 800;
  color: var(--text-white);
}
.ban-details-body .mono {
  font-size: 11px; letter-spacing: .3px;
}

.timepicker-wrap {
  display: flex; align-items: center; gap: 4px;
}
.ban-date-input {
  height: 32px; 
  flex: 1;
  background: var(--main-bg);
  border: 1px solid var(--divider);
  border-radius: 8px; 
  padding: 0 10px;
  font-size: 11px; 
  font-weight: 500;
  color: var(--text-white); 
  outline: none;
  transition: border-color .15s;
  min-width: 0;
}
.ban-date-input:focus { border-color: rgba(0,158,255,.5); }
.ban-date-input::placeholder { color: var(--text-second); }

.btn-timepicker {
  width: 28px; 
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--divider);
  background: var(--card2);
  display: flex; 
  align-items: center; 
  justify-content: center;
  cursor: pointer; color: var(--text-second);
  flex-shrink: 0;
  transition: border-color .12s, color .12s;
}
.btn-timepicker:hover { border-color: rgba(0,158,255,.4); color: var(--accent); }
.btn-timepicker:hover.save { border-color: rgba(6,209,108,.4); color: #06D16C; }
.btn-timepicker svg { width: 12px; height: 12px; }

.ban-closed-text {
  font-size: 11px; font-weight: 600;
  color: #06D16C;
}

.unban-btns {
  display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap;
}

.btn-buy-unban {
  height: 30px; 
  padding: 0 12px;
  border-radius: 8px; 
  border: none;
  background: linear-gradient(135deg, #FFD700, #ffe680);
  font-size: 10px; 
  font-weight: 800;
  color: #1a1200; 
  cursor: pointer;
  display: flex; 
  align-items: center; 
  gap: 4px;
  white-space: nowrap;
  transition: opacity .12s;
}
.btn-buy-unban:hover { opacity: .88; }
.btn-buy-unban svg { width: 11px; height: 11px; }

.btn-unban {
  height: 30px; 
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(6,209,108,.3);
  background: rgba(6,209,108,.1);
  font-size: 10px; 
  font-weight: 700;
  color: #06D16C; 
  cursor: pointer;
  display: flex; 
  align-items: center; 
  gap: 4px;
  white-space: nowrap;
  transition: background .12s;
}
.btn-unban:hover { background: rgba(6,209,108,.18); }
.btn-unban svg { width: 11px; height: 11px; color: #06D16C; }

.ban-ico-wrap svg{
	color: #FF5050;
}

#muts > .ban-row > .ban-details .ban-details-head, 
#muts > .ban-row > .ban-details .ban-details-body{
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.stats-col-ranks img{
	width: 60px;
}

#stats > .ban-row > .ban-details .ban-details-head,
#stats > .ban-row > .ban-details .ban-details-body{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}


.ban-ico-wrap.top-1{
	background: rgb(251 194 71 / 10%) !important;
  border: 1px solid rgb(251 194 71 / 20%) !important;}


.ban-ico-wrap.top-2{
	background: rgb(183 188 207 / 10%) !important;
    border: 1px solid rgb(183 188 207 / 20%) !important;
}

.ban-ico-wrap.top-3{
	background: rgb(255 133 67 / 10%) !important;
    border: 1px solid rgb(255 133 67 / 20%) !important;
}

#stats > .ban-row > .ban-row-head > .ban-col-ico .ban-ico-wrap{
	background: var(--hover);
    border: 1px solid var(--divider);
  	font-size: 12px;
}

.ban-col-nick > a i{
	font-style: normal !important;
  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ban-col-nick > a img{
	width: 15px;
    border-radius: 4px;
}

.g-msg-list{
	display: flex;
    flex-direction: column;
}

.g-msg-list .btn-add{
	margin-left: auto;
}

.bs-callout{
	padding: 16px 18px;
    background: var(--hover);
    border: 1px solid var(--divider);
    border-radius: 14px;
    align-items: center;
}
.sidebar-profile-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border: 2px solid var(--hover);
  border-radius: 50%;
  display: none;
  box-shadow: 0 0 6px var(--accent);
}

.disp-b {
    display: block;
}

.disp-n{
	display: none;
}

#noty_bottomRight_layout_container {
	width: fit-content !important;
}

#noty_bottomRight_layout_container li{
	background-color: var(--hover) !important;
    color: var(--text-white) !important;
    width: 100% !important;
    cursor: pointer !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    border: none !important;
    height: auto !important;
    border: 1px solid var(--divider) !important;
}



.forum-admin-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.forum-admin-head-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,215,0,.1);
  border: 1px solid rgba(255,215,0,.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.forum-admin-head-ico svg { width: 18px; height: 18px; color: #FFD700; }
.forum-admin-head-title { font-size: 17px; font-weight: 800; color: var(--text-white); }


.forum-admin-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.forum-admin-actions a.btn-outline-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent) !important;
  border: 1px solid rgba(0,158,255,.35) !important;
  background: rgba(0,158,255,.07) !important;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  letter-spacing: .2px;
}
.forum-admin-actions a.btn-outline-primary:hover {
  background: rgba(0,158,255,.14) !important;
  border-color: rgba(0,158,255,.6) !important;
}
.forum-admin-actions a.btn-outline-primary svg {
  	width: 14px;
    height: 14px;
    color: var(--accent);
}

#sections {
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 14px;
  overflow: hidden;
  min-height: 80px;
}

#add_section > .modal-dialog > .modal-content > .modal-header > .modal-title .close,
#add_forum > .modal-dialog > .modal-content > .modal-header > .modal-title .close{
	position: relative;
    top: 0;
    right: 0;
    margin: 0;
}

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px;
}
.loader::before,
.loader::after,
.loader-dot {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .3;
  animation: ldot 1.2s infinite;
}
.loader::after { animation-delay: .4s; }
@keyframes ldot { 0%,80%,100%{opacity:.2;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }

.modal .modal-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--text-white) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 !important;
}

#add_section > .modal-dialog > .modal-content .modal-body,
#add_forum > .modal-dialog > .modal-content .modal-body{
  background: var(--hover) !important;
  padding: 20px !important;
}

.modal .form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}
.modal .form-group:last-of-type { margin-bottom: 0; }

.modal .form-group label h4,
.modal .form-group > label {
  font-size: 10px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-second);
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.modal .form-group label h4::before {
  content: '';
  display: inline-block;
  width: 3px; height: 12px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.modal .form-control {
  height: 42px !important;
  background: var(--card2) !important;
  border: 1px solid var(--divider) !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-white) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s;
}
.modal .form-control:focus {
  border-color: rgba(0,158,255,.5) !important;
}
.modal .form-control::placeholder {
  color: var(--text-secondary) !important;
}

.forum-img-upload-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  align-items: center;
}
.forum-img-preview {
  width: 80px; height: 80px;
  border-radius: 10px;
  border: 1px solid var(--divider);
  background: var(--card2);
  overflow: hidden;
}
.forum-img-preview img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.forum-img-upload-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.forum-img-file-wrap {
  border: 1.5px dashed var(--divider);
  border-radius: 9px;
  padding: 10px 14px;
  position: relative;
  cursor: pointer;
  transition: border-color .15s;
}
.forum-img-file-wrap:hover { border-color: rgba(0,158,255,.4); }
.forum-img-file-wrap input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.forum-img-file-text {
  font-size: 11px; font-weight: 500;
  color: var(--text-secondar);
  pointer-events: none;
}
.forum-img-file-text span { color: var(--accent); font-weight: 700; }


#access, .access-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#access .btn,
#access label,
.access-wrap .btn,
.access-wrap label{
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-second) !important;
  border: 1px solid var(--divider) !important;
  background: var(--card2) !important;
  cursor: pointer !important;
  transition: background .12s, border-color .12s, color .12s !important;
  margin: 0 !important;
  user-select: none;
}
#access .btn:hover,
#access label:hover,
.access-wrap .btn:hover,
.access-wrap label:hover{
  border-color: rgba(0,158,255,.35) !important;
  color: var(--text-white) !important;
}
#access .btn.active,
#access label.active,
.access-wrap .btn.active,
.access-wrap label.active{
  background: rgba(0,158,255,.12) !important;
  border-color: rgba(0,158,255,.5) !important;
  color: var(--accent) !important;
}

.access-wrap > label input{
	position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}


#sections_list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#sections_list label,
#sections_list .btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 14px !important;
  border-radius: 9px !important;
  border: 1px solid var(--divider) !important;
  background: var(--card2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  transition: background .12s, border-color .12s !important;
  margin: 0 !important;
}
#sections_list label:hover,
#sections_list .btn:hover {
  border-color: rgba(0,158,255,.35) !important;
  color: var(--text-white) !important;
}
#sections_list label.active,
#sections_list .btn.active {
  background: rgba(0,158,255,.1) !important;
  border-color: rgba(0,158,255,.4) !important;
  color: var(--accent) !important;
}

#add_forum_result:not(:empty) {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
}


.modal .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 40px !important;
  padding: 0 20px !important;
  border-radius: 10px !important;
  border: none !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #fff !important;
  cursor: pointer !important;
  letter-spacing: .2px;
  transition: opacity .12s !important;
  box-shadow: none !important;
}
.modal .btn-primary:hover { opacity: .88 !important; }
.modal .btn-primary:active { transform: scale(.98); }

.modal .mt-3 { margin-top: 16px !important; }


.sections-wrap { background: var(--hover); border: 1px solid var(--divider); border-radius: 14px; overflow: hidden; }
  .section-block { border-bottom: 1px solid var(--divider); }
  .section-block:last-child { border-bottom: none; }

  .section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; cursor: pointer; transition: background .12s;
  }
  .section-head:hover { background: rgba(255,255,255,.03); }
  .section-head-left { display: flex; align-items: center; gap: 10px; }
  .drag-handle { display: flex; flex-direction: column; gap: 3px; cursor: grab; padding: 2px 4px; }
  .drag-handle span { display: block; width: 14px; height: 1.5px; background: var(--text-second); border-radius: 2px; }
  .section-name { font-size: 13px; font-weight: 700; color: var(--text-white); }
  .section-badge {
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
    background: rgba(0,158,255,.12); border: 1px solid rgba(0,158,255,.3);
    color: var(--accent); letter-spacing: .5px;
  }
  .section-head-right { display: flex; align-items: center; gap: 6px; }

  .icon-btn {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--card2); border: 1px solid var(--divider);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-family: inherit; color: var(--text-second);
    transition: background .12s, border-color .12s, color .12s;
  }
  .icon-btn:hover { border-color: rgba(0,158,255,.4); color: var(--accent); background: rgba(0,158,255,.08); }
  .icon-btn.danger:hover { border-color: rgba(255,70,70,.4); color: #ff4646; background: rgba(255,70,70,.08); }
.icon-btn.danger:hover svg {color:#ff4646;}
  .icon-btn svg { width: 13px; height: 13px; }
.icon-btn:hover svg{ color: var(--accent);}
  .chevron { transition: transform .2s; }
  .chevron.open { transform: rotate(180deg); }

  .section-body { display: none; padding: 0 18px 18px; }
  .section-body.open { display: block; }

  .section-body > form .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
  @media (max-width: 600px) { .section-body > form .settings-grid { grid-template-columns: 1fr; } }

  .form-group { display: flex; flex-direction: column; gap: 7px; }
  .form-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-second);
    display: flex; align-items: center; gap: 6px;
  }
  .form-label::before {
    content: ''; display: inline-block; width: 3px; height: 12px;
    border-radius: 2px; background: var(--accent); flex-shrink: 0;
  }
  .form-input {
    height: 42px; background: var(--card2); border: 1px solid var(--divider);
    border-radius: 10px; padding: 0 14px; font-family: inherit;
    font-size: 13px; font-weight: 500; color: var(--text-white);
    outline: none; transition: border-color .15s; width: 100%;
  }
  .form-input:focus { border-color: rgba(0,158,255,.5); }

  .access-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
  .access-chip {
    display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
    border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 700;
    color: var(--text-second); border: 1px solid var(--divider);
    background: var(--card2); cursor: pointer;
    transition: background .12s, border-color .12s, color .12s; user-select: none;
  }
  .access-chip:hover { border-color: rgba(0,158,255,.35); color: var(--text-white); }
  .access-chip.active { background: rgba(0,158,255,.12); border-color: rgba(0,158,255,.5); color: var(--accent); }

  .section-footer { display: flex; gap: 8px; margin-top: 16px; }
  .btn-save {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 18px; border-radius: 10px;
    border: none; background: linear-gradient(135deg, var(--accent), var(--accent-light));
    font-size: 12px; font-weight: 800; font-family: inherit; color: #fff;
    cursor: pointer; letter-spacing: .2px; transition: opacity .12s;
  }
  .btn-save:hover { opacity: .88; }
  .btn-save svg { width: 13px; height: 13px; }

  .forums-head {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-second);
    padding: 14px 0 10px; border-top: 1px solid var(--divider); margin-top: 18px;
    display: flex; align-items: center; gap: 6px;
  }
  .forums-head::before {
    content: ''; display: inline-block; width: 3px; height: 12px;
    border-radius: 2px; background: var(--accent); flex-shrink: 0;
  }

  .forums-table-wrap { border-radius: 10px; overflow: hidden; border: 1px solid var(--divider); }
  .forums-table-wrap table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .forums-table-wrap > table > thead td {
    background: var(--card2); padding: 10px 14px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: var(--text-second);
    border-bottom: 1px solid var(--divider);
  }
  .forums-table-wrap > table > tbody tr { transition: background .12s; }
  .forums-table-wrap > tbody tr:hover { background: rgba(255,255,255,.02); }
  .forums-table-wrap > table > tbody td { padding: 10px 12px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
  .forums-table-wrap > table > tbody tr:last-child td { border-bottom: none; }

  .td-input {
    height: 36px; background: var(--card2); border: 1px solid var(--divider);
    border-radius: 8px; padding: 0 10px; font-family: inherit;
    font-size: 12px; font-weight: 600; color: var(--text-white);
    outline: none; transition: border-color .15s; width: 100%;
  }
  .td-input:focus { border-color: rgba(0,158,255,.5); background: rgba(0,158,255,.04); }
  .td-input.desc { font-weight: 500; color: var(--text-second); font-size: 11px; }
  .td-input.desc:focus { color: var(--text-white); }

  .td-inputs-wrap { display: flex; flex-direction: column; gap: 5px; }

  .forum-img-placeholder {
    width: 40px; height: 40px; border-radius: 8px;
    background: var(--card2); border: 1px dashed var(--divider);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: border-color .15s;
  }
  .forum-img-placeholder:hover { border-color: rgba(0,158,255,.4); }

  .order-wrap { display: flex; flex-direction: column; gap: 4px; align-items: center; }
  .order-btn {
    width: 26px; height: 22px; border-radius: 6px;
    background: var(--card2); border: 1px solid var(--divider);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-second); font-family: inherit;
    transition: background .12s, color .12s; font-size: 10px;
  }
  .order-btn:hover { background: rgba(0,158,255,.1); color: var(--accent); border-color: rgba(0,158,255,.3); }

  .act-row { display: flex; flex-direction: column; gap: 5px; }
  .act-btn {
    height: 28px; padding: 0 10px; border-radius: 7px;
    font-size: 11px; font-weight: 700; font-family: inherit;
    cursor: pointer; border: 1px solid var(--divider);
    background: var(--card2); color: var(--text-second);
    transition: background .12s, border-color .12s, color .12s; white-space: nowrap;
  }
  .act-btn:hover { background: rgba(0,158,255,.1); color: var(--accent); border-color: rgba(0,158,255,.3); }
  .act-btn.save-forum { background: rgba(0,158,255,.1); border-color: rgba(0,158,255,.35); color: var(--accent); }
  .act-btn.save-forum:hover { background: rgba(0,158,255,.2); }
  .act-btn.del:hover { background: rgba(255,70,70,.08); color: #ff4646; border-color: rgba(255,70,70,.3); }

                     
#stats td[colspan="10"],
#banlist td[colspan="10"],
#muts td[colspan="10"],
#answers .empty-element,
#comments .empty-element{
	background: var(--hover);
    display: flex;
    padding: 10px;
    border-radius: 15px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-second);
}

#my_stores > tr td[colspan="10"]{
		background: var(--hover);
    display: flex;
    padding: 10px;
    border-radius: 15px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-second);
  	position: relative;
}

                                                                     
:root {
	--accent: #1f9bd4;
	--accent-light: #58b7e3;
	--text-white: #cfdae8;
	--text-dim: #8798ad;
	--text-second: #718096;
}

body {
	color: var(--text-second);
}

h1,
h2,
h3,
h4,
h5,
h6,
.nav .nav_icon,
.block_head .title,
.block_head span,
.chat-header,
.chat-title,
.server > .server_name,
.sidebar-profile-name,
.sidebar-profile-name-register,
.profile-username,
.forum-admin-head-title,
.modal .modal-title,
.footer-logo-text,
.footer-col-title,
.article-title,
.section-name,
.form-card-head-title,
.g-msg-name,
.g-friend-name,
.g-info-value,
.info-cell-value,
.ban-stat-val,
.ban-col-nick,
.ban-details-body .bid-val {
	color: var(--text-white) !important;
	text-shadow: none !important;
}

.nav .nav_icon {
	color: #dbe6f3 !important;
}

a,
button,
.btn,
[class*="btn"],
[class*="-btn"],
.access-chip,
.section-badge,
.role-mod,
.profile-role,
.modal-stat-val.accent {
	text-shadow: none !important;
}

.input input:focus,
select:focus,
.form-input:focus,
.td-input:focus,
.search-input:focus,
.f-select:focus,
.wlt-input-row:focus-within,
.g-search-wrap:focus-within {
	box-shadow: 0 0 0 3px rgba(31, 155, 212, 0.10) !important;
	border-color: rgba(31, 155, 212, 0.42) !important;
}

.btn-save,
.chat-send,
.smile_btn,
.g-search-btn,
.wlt-submit,
.wlt-deposit-btn,
.support-create-ticket,
.support-action-main,
.profile-action-primary,
.shop_showcase-btn-main {
	background: linear-gradient(135deg, #176b95, #238fc3) !important;
	color: #e1ebf6 !important;
	box-shadow: none !important;
}

.btn-save:hover,
.chat-send:hover,
.smile_btn:hover,
.g-search-btn:hover,
.wlt-submit:hover,
.wlt-deposit-btn:hover,
.support-create-ticket:hover,
.support-action-main:hover,
.profile-action-primary:hover,
.shop_showcase-btn-main:hover {
	background: linear-gradient(135deg, #1d7daa, #2b9ed4) !important;
	box-shadow: 0 0 0 1px rgba(88, 183, 227, 0.16) inset !important;
}

.section-badge,
.role-mod,
.accent-ava,
.access-chip.active,
.list-tabs a.active,
.server-btn.active {
	color: #71c8ef !important;
	border-color: rgba(31, 155, 212, 0.30) !important;
	background: rgba(31, 155, 212, 0.09) !important;
	box-shadow: none !important;
}

.online-indicator,
.online-dot,
.chat-online-dot,
.modal-online-dot,
.footer-dot,
.status-dot {
	box-shadow: 0 0 4px rgba(6, 209, 108, 0.28) !important;
}

.footer-bottom-dot,
.slider-dot.active,
.swiper-pagination-bullet-active {
	background: var(--accent) !important;
	box-shadow: 0 0 5px rgba(31, 155, 212, 0.26) !important;
}