/* ========================================
   ������ WARCRAFT
   ����������� ��������� ������� ��� �������� WoW
   ������������: ��������� �� ���� ���������
   ======================================== */
@font-face {
    font-family: 'Warcraft';
    src: url('/fonts/Warcraft.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'WarSans';
    src: url('/fonts/WarSans.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* ========================================
   ���� ����������� (������ ������)
   ������� ���� ��� ����������� �� ������
   ������������: ������� ��������, �������� ��������
   ======================================== */
.vote {
  background-color: #000033;
  width: 280px;
  height: 200px;
  position: absolute;
  right: -290px;
  top: 240px; /* �� 10px ����, ��� � .test2 */
  z-index: 1;
}

/* ========================================
   ������� ����� (����� � body)
   ����� ����������� �������� � ������� �����������
   ������������: ���������
   ======================================== */
h1, h2, form, html, p, div, span, table, tbody, td, tr, img {
    margin: 0;
    padding: 0;
}

body {
    color: #FFFFFF;
    margin: 0;
    background-color: #333333;
    overflow-x: hidden;
    position: relative;
}

/* ������ ��� ���� �������� */
.page-wrapper {
    width: 100%;
    margin: 0 auto;
    background-color: #333333;
}

body, table, td, th, input, textarea, select, button, a, p, div, span, li, h1, h2, h3, h4, h5, h6 {
    font-family: 'WarSans', Verdana, Arial, sans-serif;
}

body {
    background-color: #333333;
}

h1 {
    font-size: medium;
    font-weight: normal;
    color: #ff6600;
}

h2 {
    font-size: medium;
    font-weight: normal;
    color: #ff6600;
    padding-top: 6px;
}

a {
    color: #ffff33;
    outline: none;
    text-decoration: underline;
}

/* ========================================
   ������������� ��� (Theme Switcher)
   ������ ������������ ����� ������ � ������� �����
   ������������: ��� �������� (������������� � ����� ������ ����)
   ======================================== */
.theme-switcher {
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 1000;
}

.theme-toggle-btn {
    background: rgba(26, 58, 90, 0.95);
    border: 1px solid #4a7a9a;
    border-radius: 20px;
    padding: 8px 16px;
    color: #ffff99;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.theme-toggle-btn:hover {
    background: rgba(42, 90, 122, 0.98);
    border-color: #5a8aaa;
    box-shadow: 0 4px 12px rgba(90, 138, 170, 0.4);
    transform: translateX(3px);
}

.theme-toggle-btn:active {
    transform: translateX(1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.theme-icon {
    font-size: 16px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.theme-text {
    letter-spacing: 0.3px;
    font-size: 11px;
}

.theme-text strong {
    color: #ffd700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

body {
    transition: opacity 0.2s ease;
}

/* ========================================
   ������� �������� (�������, �����������, �������)
   ����� ��� ����������� HTML ���������
   ������������: ���������
   ======================================== */
table {
    border: 0;
    border-collapse: collapse;
}

img {
    border: 0;
    vertical-align: middle;
}

/* ������� ��� �������� */
.pt {
    padding-top: 6px;
}

.pb {
    padding-bottom: 6px;
}

.p2 {
    padding-top: 6px;
    padding-bottom: 6px;
}

span.pag {
    color: #999999;
}

.pag {
    color: #FFFF33;
}

ul.feedbackPanel {
    list-style: none;
    margin: 0;
    display: block;
    padding: 0;
}

ul.feedbackPanel li {
    display: block;
    margin: 0;
    padding: 0;
}

ol, li {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

.body {
    background-color: #000033;
    padding: 4px;
    
}

.header, .footer {
    background-color: #333366;
    padding: 4px;
    max-width: 1190px; /* ������ = 280px (����� ����) + 10px (gap) + 900px (�������) */
    margin: 0 auto; /* ������������� �� ����������� */
}




.header-navigation {
    background-color: #333366;
    width: 100%; /* �� ��� ������ body (1300px) */
    margin-left: 0;
    margin-right: 0;
    padding: 0px;
    color: white; 
    height: 62px; 
}

/* === LAYOUT - ����������� ������� (��� ������� �������) === */
.layout-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

a.headerButton {
    background-color: #333366;
    text-align: center;
    width: 100%;
    display: inline-block;
    text-decoration: underline !important;
    padding: 2px 0;
    border-top: 1px solid #669;
    border-bottom: 1px solid #000;
}

span.headerButton {
    background-color: #333366;
    text-align: center;
    width: 100%;
    display: inline-block;
    text-decoration: none;
    border-radius: 5px;
    color: #999999
}

/* Disabled button */
a.headerButtonNoAlign {
    background-color: #333366;
    width: 99%;
    padding: 2px;
    display: inline-block;
    text-decoration: none;
    border-radius: 5px;
}

/* ��� */
a.headerButtonMy {
    background-color: #333366;
    width: auto;
    padding: 2px;
    display: inline-block;
    text-decoration: none;
    border-radius: 5px;
}

input.headerButton, button.headerButton {
    color: #ffff33;
    text-align: center;
    width: 100%;
    outline: none;
    border: medium none;
    cursor: pointer;
    background-color: #333366;
    text-decoration: underline !important;
    padding: 2px 0;
    border-top: 1px solid #669;
    border-bottom: 1px solid #000;
}

.event {
    background-color: #003300;
    padding: 4px;
}

.back-event {
    background-color: #003300;
    padding: 0;
}

.major, .feedbackPanelERROR {
    color: #FF3333;
}

.useless {
    color: #FF3333;
}

.warn {
    color: #FFFF33;
}

.info, .feedbackPanelINFO {
    color: #33CC33;
}

.new {
    color: #FFFF33;
}

.wide {
    width: 90%;
}

.yellow {
    color: #FFFF33;
}
.green {color:#33cc33;}
.gold {
    color: #FF9900;
}

.blue {
    color: #0066FF;
}

.minor {
    color: #999999;
}

/* .initial - ����������������, �� ������������
.initial {
    color:#999999; font-size:200%; float:left; margin-right:2px;
}
*/

.iNoob {
    color: #339933;
}

.iGood {
    color: #339933;
}

.iSuperior {
    color: #3366FF;
}

.iEpic {
    color: #9933ff;
}

.iLegendary {
    color: #ff9900;
}

.bluepost {
    color: #33CCFF;
}

.senatepost {
    color: #ee00ff;
}

.btn-link {
    color: #ffff33;
    outline: none;
    font-size: medium;
    padding: 0;
    text-decoration: underline;
    border-style: none;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
}

.description {
    color: #FFFF33;
    font-size: small;
    padding-bottom: 6px;
}

.small {
    font-size: small;
}

.eOld {
    color: #999999;
}

.eSimple {
    color: #33cc33;
}

.eRare {
    color: #0066ff;
}

.eEpic {
    color: #9933ff;
}

.eInfernal {
    color: #ff9900;
}

.brmargin {
    margin: 0 4px 4px 0;
}

.icon {
    height: 12px;
    width: 12px;
}

.ident {
    text-indent: 8px
}

.block-border {
    border: 1px solid #999999;
}
.block-border-top {
    border-top: 1px solid #999999;
}
.block-border-bottom {
    border-bottom: 1px solid #999999;
}

.panel {
    margin: 2px;
    padding: 3px;
    background-color: #191948
}

.notify-inner {
    font-size: small;
}

.link-icon {
    margin-right: .4em;
    height: 12px;
    width: 12px;
}

.panel-inner {
    font-size: small;
}


.img-npc {
    float: left;
    margin-right:8px;
}

.fright {
    float: right;
}
.c-red {
    color: red;
}

.mb5 { margin-bottom: 5px !important; }
.ml5 { margin-left: 5px !important; }

.mr5 { margin-right: 5px !important; }
.mt5 { margin-top: 5px !important; }

.ml10 { margin-left: 10px; }

.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-bold { font-weight: bold !important; }

.b-expa {
    height: 5px;
    background: #444;
}

.expa-fill {
    height: 5px;
    background: #067;
}

.center {text-align: center !important;}

.b-progress-hp {
    width: 100%;
    height: 6px;
    background: #1b1b1b;
}
.hp-fill {
    float: right;
    height: 6px;
    background: #2b8b00;
}
.hp-fill-red {
    float: right;
    height: 6px;
    background: #890000;
}
.hp-fill.enemy, .hp-fill-red.enemy {float: left !important;}

.clearer {
    clear: both;
    height: 0;
    font-size: 0;
    line-height: 0;
}

.arena-avatar {
    display: block;
    min-width: 58px;
    min-height: 57px;
    margin-top: 1px;
}

.mr10 {
    margin-right: 10px;
}
.mt10 {
    margin-top: 10px;
}
.mb10 { margin-bottom: 10px; }
.mt20 {
    margin-top: 20px;
}
.font14 {
    font-size: 14px;
}
.glow-wrap {
    position: relative;
    width: 46px;
    height: 46px;
}
.glow-wrap img {display: block; position: absolute; top: 7px; left: 7px;}
.glow-wrap .buff {display: block; position: absolute; height: 18px; width: 46px; bottom: -13px; background-position: 50% 0; background-repeat: no-repeat;}
.glow-wrap.violet { background: url('/images/glow-icons/Icon_glow_violet.png') no-repeat 0 0 transparent; }
.glow-wrap.blue { background: url('/images/glow-icons/Icon_glow_blue.png') no-repeat 0 0 transparent; }
.glow-wrap.green { background: url('/images/glow-icons/Icon_glow_green.png') no-repeat 0 0 transparent; }
.glow-wrap.orange { background: url('/images/glow-icons/Icon_glow_orange.png') no-repeat 0 0 transparent; }

.enchants-progress {height: 4px; background: #3f3f3f; }
.enchants-progress-fill {height: 4px; background: #3d6d9d; }

.nowrap {
    white-space: nowrap;
}
.progressbar-bg {
    height: 4px;
    background: #3f3f3f;
}
.progressbar-fill-blue {
    height: 4px;
    background: #3d6d9d;
}
.sep {
    border-top: 1px solid #7373a5;
    margin: 0 -4px;
}

.quest-hard {
    color: #F18835;
}

.quest-impossible {
    color: #F83434;
}


.mb15{
    margin-bottom: 15px !important;
}
.mt15{
    margin-top: 15px !important;
}
.fleft {
    float: left;
}

.progressbar-bg {
    position: relative;
    height: 4px;
    background: #3f3f3f;
}

.battle-shtandart{
    position: absolute;
    top: -15px;
    right: -6px;
    width: 32px;
    height: 32px;
    background: url('/images/icons/lands/flag.png') no-repeat;
}

.trans-item{
    position: relative;
    display: inline-block;
    margin-left: 2px;
    text-decoration: none;
    height: 55px;
    vertical-align: top;
}
.trans-item:first-child{
    margin-left: 0px;
}
.trans-item > img {
    display: inline-block;
}
.trans-item > div:not(.active-border) {
    width: 100%;
    height: 21px;
    padding-top: 3px;
}
.trans-item > div > img{
    float: right;
    margin-right: -4px;
}
.trans-item > div > img:first-child{
    margin-right: 0px;
}
.trans-item > .active-border{
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid #099b01;
    top: -3px;
    left: -3px;
    background: url('/images/active_trans_item_border.png');
}
.mb10{margin-bottom: 10px !important;}

.no-break{
    white-space: nowrap;
}

.b-panel-new .panel-inner2{
    padding: 10px 5px;
}
.c-gold{
    color: #FFFF33;
}
/*
.btn-red-new{
    text-align: center;
    background:
        url("/images/btns/btn-red-top.png") no-repeat 50% 0,
        url('/images/btns/btn-red-bot.png') repeat-x 0 100%;
    background-color: #750707;
}
*/

.plpr10{
    padding-left: 10px;
    padding-right: 10px;
}

.cr-icon {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}
.cr-icon-count {
    position: absolute;
    height: 13px;
    width: 15px;
    padding: 1px 0;
    bottom: -2px;
    right: -2px;
    background: #185272;
    border: 1px solid #16202f;
    border-radius: 50%;
    font-size: 11px;
    text-align: center;
}
.mt3 {margin-top: 3px !important;}
.footer.nav.block-border-top .progressbar-bg {background: #8585a3;}
.event.border {
    border: 1px solid #FFF;
}


.b-equip {
    margin: 5px -5px 0;
    background: #030;
    border: 1px solid #999;
    padding: 4px;
}
.va-m {vertical-align: middle; }
.font18 {font-size: 18px;}
@media (min-width: 800px) and (max-width: 1200px) {@-ms-viewport {width: 640px !important;}}
input[type="text"] {background: #fff;}
input[type="password"] {background: #fff;}

.striker {
    display: inline-block;
    position: relative;
    color: #989898;

}
.striker:after {
    content: '';
    position: absolute;
    display: block;
    width: 109%;
    top: 45%;
    left: -2px;
    border-top: 1px solid #989898;
}
.link_show {
    display: inline-block;
    position: relative;
    margin-bottom: 5px;
}

.link_show:after {
    content: '';
    position: absolute;
    width: 43px;
    height: 43px;
    bottom: 5%;
    right: 5%;
    background: url('/images/profile/lupa_21.png') no-repeat 94% 94%;
}
.td-n {
    text-decoration: none !important;
}
/*........................................
.................tutorial.................
........................................*/
.content {
    background: #333366;
    border: 1px solid #999999;
    padding: 4px;
}

.mt0 {margin-top: 0 !important;}
.pt0 {padding-top: 0 !important;}
.i_locked:after, .i_print.locked:after {
    background: rgba(0, 0, 51, 0.7) !important;
}
.i_print.empty {background: #1a1a3b;}

.mt-footer-inner {
    text-align: center;
    padding-top: 10px;
}

.b-mt-footer {
    text-align: center;
    padding: 10px 0;
    font-size: 12px;
    color: #767676;
    max-width: 1400px; /* ������ �������� �������� */
    margin: 0 auto;
}

.section-sep {
    padding: 15px 0 0 0;
}
.hidden { display: none; }

/* Shop page */
.shop-items {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.shop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin: 15px auto;
    max-width: 600px;
    width: 100%;
    border: 2px solid #4a4a70;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(25, 25, 72, 0.95) 0%, rgba(0, 0, 51, 0.95) 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.shop-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    transition: left 0.5s ease;
}
.shop-item:hover {
    border-color: #6666aa;
    box-shadow: 0 6px 20px rgba(102, 102, 170, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}
.shop-item:hover::before {
    left: 100%;
}
.shop-item-info { 
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
}
.shop-item-info img {
    padding: 8px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(51, 51, 102, 0.3) 100%);
    border: 2px solid #5a5a80;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}
.shop-item:hover .shop-item-info img {
    border-color: #7a7aaa;
    box-shadow: 0 4px 12px rgba(90, 90, 128, 0.6);
    transform: scale(1.05);
}
.shop-item-info h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: bold;
    color: #ffff99;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}
.shop-item-price {
    text-align: right;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
.shop-item-price strong {
    display: block;
    color: #ffd700;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.7);
    letter-spacing: 1px;
}
.shop-buy-btn {
    padding: 10px 24px;
    cursor: pointer;
    background: linear-gradient(135deg, #2a5a7a 0%, #1a3a5a 100%);
    border: 2px solid #4a7a9a;
    border-radius: 6px;
    color: #ffff99;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.shop-buy-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}
.shop-buy-btn:hover {
    background: linear-gradient(135deg, #3a6a8a 0%, #2a4a6a 100%);
    border-color: #5a8aaa;
    box-shadow: 0 5px 15px rgba(90, 138, 170, 0.5);
    transform: translateY(-2px);
}
.shop-buy-btn:hover::before {
    width: 300px;
    height: 300px;
}
.shop-buy-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* Modal animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes slideOut {
    from { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to { 
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
}
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}::-webkit-scrollbar {
  display: none;
}

* {
  scrollbar-width: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

._rejectable::after {
    content: '';
    display: inline-block;
    width: 65px;
    height: 17px;
    background: url("/images/campaign/Update_2021/bonus.png") 0 0/100% auto no-repeat;
    vertical-align: middle;
    margin-left: 5px;
}

.enemy-hp2 {
  position: relative;
  overflow: hidden;
  margin-left: 3px;
  margin-top: 5px;
  height: 4px;
  background: #2b2b2b;
  border: solid 2px black;
}

.admin-btn {
  text-decoration: none !important;
  color: #8ecde5;
  background: #1c485f;
  padding: 3px;
  margin: 3px;
  display: inline-block;
}

.enemy-hp-remain2 {
  float: left;
  height: 4px;
}
.hp-green {
  background: #0d6822 !important;
}
h3 {
  margin: 0;
  padding: 0;
}
h3 {
  font-size: small;
  font-weight: normal;
  color: #fff;
}
a {
  text-decoration: underline !important;
}
.b-notice {
  background: #003300;
  border-bottom: 1px solid #999999;
  padding: 10px;
}
.b-notice h3 {
  text-align: center;
}
.b-notice p {
  padding: 0 0 5px 0;
  color: #8199a6;
  font-size: 12px;
}
.b-notice .lvlup-img {
  width: 210px;
  height: 32px;
  margin: 10px 0;
}
.b-notice .action-link {
  padding: 5px 0 0 0;
  font-size: 14px;
}

.arena-avatar {
  display: block;
  min-width: 58px;
  min-height: 57px;
  margin-top: 1px;
}
@media screen and (max-width: 240px) {
  .arena-avatar {
    width: 77px;
  }
}
input[type="text"] {
  background: #fff;
}
input[type="password"] {
  background: #fff;
}

.book_link {
  display: inline-block;
  width: 62px;
  height: 74px;
  background: url("/images/daily_gifts/book_active_64.png") 0 0 no-repeat;
  vertical-align: middle;
}
span.book_link {
  background: url("/images/daily_gifts/book_unactive_64.png") 50% 50% no-repeat;
}

.i_print {
  display: inline-block;
  vertical-align: middle;
  width: 35px;
  height: 58px;
  margin: 0 1px;
  background: url("/images/daily_gifts/print_empty.png") 0 0 no-repeat;
}
.i_print.empty {
  background: #1a1a3b;
}

.i_print.enemy_1 {
  background: url("/images/daily_gifts/collections/animals_01_37x58.png") 0 0
    no-repeat;
}
.i_print.enemy_2 {
  background: url("/images/daily_gifts/collections/animals_02_37x58.png") 0 0
    no-repeat;
}
.i_print.enemy_3 {
  background: url("/images/daily_gifts/collections/animals_03_37x58.png") 0 0
    no-repeat;
}
.i_print.enemy_4 {
  background: url("/images/daily_gifts/collections/animals_04_37x58.png") 0 0
    no-repeat;
}
.i_print.enemy_5 {
  background: url("/images/daily_gifts/collections/animals_05_37x58.png") 0 0
    no-repeat;
}

.i_print.undead_1 {
  background: url("/images/daily_gifts/collections/undead_01_37x58.png") 0 0
    no-repeat;
}
.i_print.undead_2 {
  background: url("/images/daily_gifts/collections/undead_02_37x58.png") 0 0
    no-repeat;
}
.i_print.undead_3 {
  background: url("/images/daily_gifts/collections/undead_03_37x58.png") 0 0
    no-repeat;
}
.i_print.undead_4 {
  background: url("/images/daily_gifts/collections/undead_04_37x58.png") 0 0
    no-repeat;
}
.i_print.undead_5 {
  background: url("/images/daily_gifts/collections/undead_05_37x58.png") 0 0
    no-repeat;
}

.i_print.demon_1 {
  background: url("/images/daily_gifts/collections/demons_01_37x58.png") 0 0
    no-repeat;
}
.i_print.demon_2 {
  background: url("/images/daily_gifts/collections/demons_02_37x58.png") 0 0
    no-repeat;
}
.i_print.demon_3 {
  background: url("/images/daily_gifts/collections/demons_03_37x58.png") 0 0
    no-repeat;
}
.i_print.demon_4 {
  background: url("/images/daily_gifts/collections/demons_04_37x58.png") 0 0
    no-repeat;
}
.i_print.demon_5 {
  background: url("/images/daily_gifts/collections/demons_05_37x58.png") 0 0
    no-repeat;
}

.i_print.dragon_1 {
  background: url("/images/daily_gifts/collections/dragons_01_37x58.png") 0 0
    no-repeat;
}
.i_print.dragon_2 {
  background: url("/images/daily_gifts/collections/dragons_02_37x58.png") 0 0
    no-repeat;
}
.i_print.dragon_3 {
  background: url("/images/daily_gifts/collections/dragons_03_37x58.png") 0 0
    no-repeat;
}
.i_print.dragon_4 {
  background: url("/images/daily_gifts/collections/dragons_04_37x58.png") 0 0
    no-repeat;
}
.i_print.dragon_5 {
  background: url("/images/daily_gifts/collections/dragons_05_37x58.png") 0 0
    no-repeat;
}

.i_print.june_1 {
  background: url("/images/daily_gifts/collections/june_01_37x58.png") 0 0
    no-repeat;
}
.i_print.june_2 {
  background: url("/images/daily_gifts/collections/june_02_37x58.png") 0 0
    no-repeat;
}
.i_print.june_3 {
  background: url("/images/daily_gifts/collections/june_03_37x58.png") 0 0
    no-repeat;
}
.i_print.june_4 {
  background: url("/images/daily_gifts/collections/june_04_37x58.png") 0 0
    no-repeat;
}
.i_print.june_5 {
  background: url("/images/daily_gifts/collections/june_05_37x58.png") 0 0
    no-repeat;
}

.i_print.planets_1 {
  background: url("/images/daily_gifts/collections/planets_01_37x58.png") 0 0
    no-repeat;
}
.i_print.planets_2 {
  background: url("/images/daily_gifts/collections/planets_02_37x58.png") 0 0
    no-repeat;
}
.i_print.planets_3 {
  background: url("/images/daily_gifts/collections/planets_03_37x58.png") 0 0
    no-repeat;
}
.i_print.planets_4 {
  background: url("/images/daily_gifts/collections/planets_04_37x58.png") 0 0
    no-repeat;
}
.i_print.planets_5 {
  background: url("/images/daily_gifts/collections/planets_05_37x58.png") 0 0
    no-repeat;
}

.i_print.ny_1 {
  background: url("/images/daily_gifts/collections/NY_01_37x58.png") 0 0
    no-repeat;
}
.i_print.ny_2 {
  background: url("/images/daily_gifts/collections/NY_02_37x58.png") 0 0
    no-repeat;
}
.i_print.ny_3 {
  background: url("/images/daily_gifts/collections/NY_03_37x58.png") 0 0
    no-repeat;
}
.i_print.ny_4 {
  background: url("/images/daily_gifts/collections/NY_04_37x58.png") 0 0
    no-repeat;
}
.i_print.ny_5 {
  background: url("/images/daily_gifts/collections/NY_05_37x58.png") 0 0
    no-repeat;
}

.i_print.dr2017_1 {
  background: url("/images/daily_gifts/collections/card_fair_1_37x58.png") 0 0
    no-repeat;
}
.i_print.dr2017_2 {
  background: url("/images/daily_gifts/collections/card_fair_2_37x58.png") 0 0
    no-repeat;
}
.i_print.dr2017_3 {
  background: url("/images/daily_gifts/collections/card_fair_3_37x58.png") 0 0
    no-repeat;
}
.i_print.dr2017_4 {
  background: url("/images/daily_gifts/collections/card_fair_4_37x58.png") 0 0
    no-repeat;
}
.i_print.dr2017_5 {
  background: url("/images/daily_gifts/collections/card_fair_5_37x58.png") 0 0
    no-repeat;
}

.i_print.feb14_2019_1 {
  background: url("/images/daily_gifts/collections/card_fair_1_37x58.png") 0 0
    no-repeat;
}
.i_print.feb14_2019_2 {
  background: url("/images/daily_gifts/collections/card_fair_2_37x58.png") 0 0
    no-repeat;
}
.i_print.feb14_2019_3 {
  background: url("/images/daily_gifts/collections/card_fair_3_37x58.png") 0 0
    no-repeat;
}
.i_print.feb14_2019_4 {
  background: url("/images/daily_gifts/collections/card_fair_4_37x58.png") 0 0
    no-repeat;
}
.i_print.feb14_2019_5 {
  background: url("/images/daily_gifts/collections/card_fair_5_37x58.png") 0 0
    no-repeat;
}

.i_print.dr2018_1 {
  background: url("/images/daily_gifts/collections/card_fair_1_37x58.png") 0 0
    no-repeat;
}
.i_print.dr2018_2 {
  background: url("/images/daily_gifts/collections/card_fair_2_37x58.png") 0 0
    no-repeat;
}
.i_print.dr2018_3 {
  background: url("/images/daily_gifts/collections/card_fair_3_37x58.png") 0 0
    no-repeat;
}
.i_print.dr2018_4 {
  background: url("/images/daily_gifts/collections/card_fair_4_37x58.png") 0 0
    no-repeat;
}
.i_print.dr2018_5 {
  background: url("/images/daily_gifts/collections/card_fair_5_37x58.png") 0 0
    no-repeat;
}

.i_print.dr2020_1 {
  background: url("/images/daily_gifts/collections/card_fair_1_37x58.png") 0 0
    no-repeat;
}
.i_print.dr2020_2 {
  background: url("/images/daily_gifts/collections/card_fair_2_37x58.png") 0 0
    no-repeat;
}
.i_print.dr2020_3 {
  background: url("/images/daily_gifts/collections/card_fair_3_37x58.png") 0 0
    no-repeat;
}
.i_print.dr2020_4 {
  background: url("/images/daily_gifts/collections/card_fair_4_37x58.png") 0 0
    no-repeat;
}
.i_print.dr2020_5 {
  background: url("/images/daily_gifts/collections/card_fair_5_37x58.png") 0 0
    no-repeat;
}

.i_print.tourn_17dec_1 {
  background: url("/images/daily_gifts/collections/card_fair_1_37x58.png") 0 0
    no-repeat;
}
.i_print.tourn_17dec_2 {
  background: url("/images/daily_gifts/collections/card_fair_2_37x58.png") 0 0
    no-repeat;
}
.i_print.tourn_17dec_3 {
  background: url("/images/daily_gifts/collections/card_fair_3_37x58.png") 0 0
    no-repeat;
}
.i_print.tourn_17dec_4 {
  background: url("/images/daily_gifts/collections/card_fair_4_37x58.png") 0 0
    no-repeat;
}
.i_print.tourn_17dec_5 {
  background: url("/images/daily_gifts/collections/card_fair_5_37x58.png") 0 0
    no-repeat;
}

.i_print.tourn_25jan_1 {
  background: url("/images/daily_gifts/collections/june_01_37x58.png") 0 0
    no-repeat;
}
.i_print.tourn_25jan_2 {
  background: url("/images/daily_gifts/collections/june_02_37x58.png") 0 0
    no-repeat;
}
.i_print.tourn_25jan_3 {
  background: url("/images/daily_gifts/collections/june_03_37x58.png") 0 0
    no-repeat;
}
.i_print.tourn_25jan_4 {
  background: url("/images/daily_gifts/collections/june_04_37x58.png") 0 0
    no-repeat;
}
.i_print.tourn_25jan_5 {
  background: url("/images/daily_gifts/collections/june_05_37x58.png") 0 0
    no-repeat;
}

.i_print.summer_1 {
  background: url("/images/daily_gifts/collections/aztec_card_1_37x58.png") 0 0
    no-repeat;
}
.i_print.summer_2 {
  background: url("/images/daily_gifts/collections/aztec_card_2_37x58.png") 0 0
    no-repeat;
}
.i_print.summer_3 {
  background: url("/images/daily_gifts/collections/aztec_card_3_37x58.png") 0 0
    no-repeat;
}
.i_print.summer_4 {
  background: url("/images/daily_gifts/collections/aztec_card_4_37x58.png") 0 0
    no-repeat;
}
.i_print.summer_5 {
  background: url("/images/daily_gifts/collections/aztec_card_5_37x58.png") 0 0
    no-repeat;
}

.i_print.elemental_1 {
  background: url("/images/daily_gifts/collections/page_elemental_war_05_37x58.png")
    0 0 no-repeat;
}
.i_print.elemental_2 {
  background: url("/images/daily_gifts/collections/page_elemental_war_04_37x58.png")
    0 0 no-repeat;
}
.i_print.elemental_3 {
  background: url("/images/daily_gifts/collections/page_elemental_war_03_37x58.png")
    0 0 no-repeat;
}
.i_print.elemental_4 {
  background: url("/images/daily_gifts/collections/page_elemental_war_02_37x58.png")
    0 0 no-repeat;
}
.i_print.elemental_5 {
  background: url("/images/daily_gifts/collections/page_elemental_war_01_37x58.png")
    0 0 no-repeat;
}

.i_print.alchemist_1 {
  background: url("/images/daily_gifts/collections/card_alchemist-1_37x58.png") 0 0 no-repeat;
}
.i_print.alchemist_2 {
  background: url("/images/daily_gifts/collections/card_alchemist-2_37x58.png") 0 0 no-repeat;
}
.i_print.alchemist_3 {
  background: url("/images/daily_gifts/collections/card_alchemist-3_37x58.png") 0 0 no-repeat;
}
.i_print.alchemist_4 {
  background: url("/images/daily_gifts/collections/card_alchemist-4_37x58.png") 0 0 no-repeat;
}
.i_print.alchemist_5 {
  background: url("/images/daily_gifts/collections/card_alchemist-5_37x58.png") 0 0 no-repeat;
}

.i_print.skull_1 {
  background: url('/images/daily_gifts/collections/card_poison-1_37x58.png')
  0 0 no-repeat;
}
.i_print.skull_2 {
  background: url('/images/daily_gifts/collections/card_poison-2_37x58.png')
  0 0 no-repeat;
}
.i_print.skull_3 {
  background: url('/images/daily_gifts/collections/card_poison-5_37x58.png')
  0 0 no-repeat;
}
.i_print.skull_4 {
  background: url('/images/daily_gifts/collections/card_poison-4_37x58.png')
0 0 no-repeat;
}
.i_print.skull_5 {
  background: url('/images/daily_gifts/collections/card_poison-3_37x58.png')
  0 0 no-repeat;
}

.i_print.birthday2021_1 {
  background: url('/images/daily_gifts/collections/card_birthday2021_1_37x58.png')
  0 0 no-repeat;
}
.i_print.birthday2021_2 {
  background: url('/images/daily_gifts/collections/card_birthday2021_2_37x58.png')
  0 0 no-repeat;
}
.i_print.birthday2021_3 {
  background: url('/images/daily_gifts/collections/card_birthday2021_3_37x58.png')
  0 0 no-repeat;
}
.i_print.birthday2021_4 {
  background: url('/images/daily_gifts/collections/card_birthday2021_4_37x58.png')
0 0 no-repeat;
}
.i_print.birthday2021_5 {
  background: url('/images/daily_gifts/collections/card_birthday2021_5_37x58.png')
  0 0 no-repeat;
}

.i_print.pirat_1 {
  background: url('/images/daily_gifts/collections/card_pirat-event-1_37x58.png')
  0 0 no-repeat;
}
.i_print.pirat_2 {
  background: url('/images/daily_gifts/collections/card_pirat-event-2_37x58.png')
  0 0 no-repeat;
}
.i_print.pirat_3 {
  background: url('/images/daily_gifts/collections/card_pirat-event-3_37x58.png')
  0 0 no-repeat;
}
.i_print.pirat_4 {
  background: url('/images/daily_gifts/collections/card_pirat-event-4_37x58.png')
0 0 no-repeat;
}
.i_print.pirat_5 {
  background: url('/images/daily_gifts/collections/card_pirat-event-5_37x58.png')
  0 0 no-repeat;
}

.i_print.sun_civil_1 {
  background: url('/images/daily_gifts/collections/card_sun-civilization-1_37x58.png')
  0 0 no-repeat;
}
.i_print.sun_civil_2 {
  background: url('/images/daily_gifts/collections/card_sun-civilization-2_37x58.png')
  0 0 no-repeat;
}
.i_print.sun_civil_3 {
  background: url('/images/daily_gifts/collections/card_sun-civilization-3_37x58.png')
  0 0 no-repeat;
}
.i_print.sun_civil_4 {
  background: url('/images/daily_gifts/collections/card_sun-civilization-4_37x58.png')
0 0 no-repeat;
}
.i_print.sun_civil_5 {
  background: url('/images/daily_gifts/collections/card_sun-civilization-5_37x58.png')
  0 0 no-repeat;
}

.i_print.print_new {
  position: relative;
}
.i_print.locked {
  position: relative;
}
.i_locked {
  display: inline-block;
  position: relative;
  font-size: 11px;
}
.table_reward .entity table,
.table_reward .entity td {
  display: block !important;
  width: auto !important;
  font-size: 11px !important;
}
.i_locked:after,
.i_print.locked:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
}
.table_reward {
  border-collapse: separate;
  border-spacing: 5px 10px;
  text-align: center;
}
.entity.e-pet {
  display: block;
  min-height: 32px;
}
.e-tournament-rewards .entity {
  display: block;
  padding-top: 3px;
  text-align: left;
}
.e-tournament-rewards .e-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  vertical-align: middle;
}
.e-tournament-rewards .e-name {
  display: inline-block;
  vertical-align: middle;
}
.e-tournament-rewards .center {
  text-align: left !important;
}
.j-event {
  padding: 12px 0 5px 0;
}
.j-event-time {
  font-style: italic;
  color: #a3a3ad;
  white-space: nowrap;
}
.print_lable_name.event_card {
  background: #a00000;
  border-color: #da4d00;
}
.b-mt-footer {
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  color: #767676;
  max-width: 900px; /* ������ �������� �������� */
  margin: 0 auto;
}
.mt-footer-inner {
  text-align: center;
  padding-top: 10px;
}

.e-desc {
  display: none;
}
.bestiary_col .e-desc {
  display: inline-block;
  color: #999999;
}
.bestiary_col .e-desc:before {
  content: "(";
}
.bestiary_col .e-desc:after {
  content: ")";
}

/*...............................
............entity...............
...............................*/
.wrap-items._no-icons .entity table tr td:first-child,
.wrap-items._no-icons .e-icon {
  display: none !important;
}
.wrap-items._no-icons .entity table td {
  padding-left: 0 !important;
}
.wrap-entity-cell .entity {
  display: block;
  width: 100%;
  overflow: hidden;
  margin-bottom: 5px;
}
.wrap-entity-cell .e-name,
.wrap-entity-cell .b-potion-img {
  min-height: 32px;
  display: block !important;
  float: left;
}
.wrap-entity-cell .b-potion-img {
  width: 32px;
  margin-right: 5px;
}
.wrap-entity-cell .e-icon {
  width: 32px;
  height: 32px;
  display: block;
  position: relative;
}
.wrap-entity-cell .e-count {
  position: absolute;
  right: 0;
  bottom: 0;
}
.bestiary_col .wrap-items-block .e-name {
  display: inline-block !important;
  vertical-align: top !important;
  text-align: left !important;
  width: 130px;
  padding-left: 2px !important;
}

.ent {
  display: inline-block;
  white-space: nowrap;
  font-size: 0;
}

.ent-col1 {
  display: inline-block;
  vertical-align: middle;
  white-space: initial;
  font-size: 12px;
  width: 32px;
  height: 32px;
  position: relative;
}

.ent-col2 {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  padding: 0 0 0 5px;
  height: auto;
  max-width: 170px;
  white-space: initial;
  text-overflow: ellipsis;
  font-size: 12px;
}

.ent-desc {
  font-size: 12px;
  padding-top: 2px;
  white-space: normal !important;
}
.ent-name {
  font-size: 14px;
}

.ent-count {
  position: absolute;
  z-index: 1;
  width: 32px;
  overflow: hidden;
  bottom: 0;
  right: 0;
  color: #fff;
  text-align: right;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000,
    0 0 2px #000, 0 0 2px #000;
}

.ent._top .ent-col1,
.ent._top .ent-col2 {
  vertical-align: top;
  margin-top: -7px;
}
.event-boss-bonuses .entity.e-buff .e-extra {
  display: none;
}
.event-boss-bonuses .entity.e-buff .e-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 0px;
  left: -18px;
}
.event-boss-bonuses .entity.e-buff {
  position: relative;
}
/*...............................
...........end of entity.........
...............................*/

/*..........................................
..................crosspromo................
..........................................*/
/* crosspromo sleg */
.cross-widget {
  position: relative;
  padding: 4px;
  background: #2a2724;
  border-top: 1px solid #635636;
  border-bottom: 1px solid #635636;
}
.cross-widget-inner {
  color: #ff6600;
  font-size: 14px;
  padding: 0 0 5px 0;
}
.cross-widget-btn {
  color: #ffff33;
}
.cross-widget-btn:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  background: url("/images/icons/arr.png") 0 0 no-repeat;
  margin-right: 5px;
}
.clock-icon,
.i_book_key {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  background: url("/images/icons/clock.png") 0 0 no-repeat;
}
.i_book_key {
  background: url("/images/daily_gifts/key_12x12_stroke.png") 0 0 no-repeat;
}

/* crosspromo vmmo widget */
.vmmo_wrapper {
  font-family: Arial, sans-serif !important;
  overflow: hidden;
  position: relative;
}
a.vmmo_footer {
  display: table;
  width: 100%;
  height: 42px;
  border-bottom-width: 0 !important;
  background: #252525 !important;
}
.vmmo_footer-left,
.vmmo_footer-right {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
  height: 42px;
  padding: 0 12px;
  text-align: left;
}
.vmmo_footer-right {
  text-align: right;
}
a.vmmo_footer .vmmo_footer_link {
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  border-bottom: 1px solid #767676 !important;
  color: #767676 !important;
}
.vmmo-content-link {
  border-bottom-width: 0 !important;
  text-decoration: underline !important;
  background-color: #1c1c1c !important;
}
.vmmo-content-link._open {
  text-decoration: none !important;
  color: #fff !important;
}
.vmmo-content-banner {
  background: #1c1c1c !important;
  padding: 5px 10px !important;
  text-align: left !important;
}
.vmmo-content-banner:after {
  display: none !important;
}
.c-white {
  color: #fff !important;
}
.vmmo-note tr td:first-child {
  display: none !important;
}
.vmmo-note {
  padding: 10px !important;
  background-color: #1c1c1c !important;
  text-align: left !important;
}
.vmmo-note,
.vmmo-note td {
  font-size: 14px !important;
}
a.v_btn {
  padding: 0 !important;
  background: transparent !important;
  text-decoration: underline !important;
  color: #ffff33 !important;
  text-align: left !important;
  border: 0 !important;
  font-size: 14px !important;
}
img.vmmo_logo {
  width: 58px !important;
  height: auto !important;
}
/*..........................................
...............end of crosspromo............
..........................................*/
.error-none-style {
  height: 1px;
}
.freeze-icon {
  display: inline-block;
  vertical-align: middle;
  background: url("/images/icons/slow.png") 0 0 no-repeat;
  width: 12px;
  height: 12px;
}

/*..............................................
...............guild ships......................
..............................................*/
.wrap-ship {
  margin: 5px 0;
}
.wrap-ship-image {
  position: relative;
  max-width: 240px;
  z-index: 1;
}
.ship-image {
  position: relative;
  width: 100% !important;
  max-width: 240px;
  height: auto !important;
  z-index: 20;
}
.ship-controlls {
  padding-top: 10px;
}

.form-label {
  display: block;
  color: #ff6600;
  margin-bottom: 4px;
}
.form-input {
  display: block;
  border: 0;
  padding: 6px 4px;
  width: 98%;
}
button.headerButton {
  font-size: 16px;
  margin-top: 5px;
  padding: 6px 2%;
}
._none {
  display: none;
}
.form-error-hint {
  font-size: 12px;
  color: #ff3333;
}

/*..............................................
..............end of guild ships................
..............................................*/

/*..............................................
................serial task.....................
..............................................*/

.wrap-serial-task {
  padding: 0 0 5px 0;
}
.serial-task-progress {
  white-space: nowrap;
  padding: 0 0 9px 0;
  font-size: 0;
  text-align: center;
  height: 21px;
  border-bottom: 1px solid #b4b4b4;
  margin-bottom: 5px;
}
.i-step {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin: 0 2px 0 2px;
  width: 5px;
  height: 5px;
  background: #6b6b6b;
  border-radius: 50%;
}
.i-step._done {
  background: #00cd0d;
}
.i-step._current {
  background: #b4b4b4;
}
.i-step._last {
  width: 20px;
  height: 20px;
  background: url("/images/icons/penta_20x20.png") 50% 50% no-repeat;
}
.i-step._last._done {
  width: 21px;
  height: 21px;
  background: url("/images/icons/task-tick.png") 0 0 no-repeat !important;
}

.i-step._current:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: -17px;
  left: -5px;
  border-style: solid;
  border-color: transparent transparent #b4b4b4 transparent;
  border-width: 10px 8px;
  z-index: 10001;
}
.i-step._last._current:after {
  bottom: -10px;
  left: 2px;
}
.serial-task-prize {
  margin: 5px 0 0 0;
  text-align: center;
}
/*..............................................
................serial task.....................
..............................................*/

/*............................
............fair..............
............................*/
.fair-progress {
  position: relative;
  color: #a3a3ad;
  font-size: 11px;
}
.fair-progress-inner {
  font-size: 0;
  height: 26px;
  white-space: nowrap;
}
.icon-diamond {
  display: inline-block;
  vertical-align: middle;
  width: 21px;
  height: 21px;
  background: url("/images/fair/diamond_21.png") 50% 50% no-repeat;
}
.d-prg {
  display: inline-block;
  vertical-align: middle;
  width: 26px;
  height: 26px;
  margin: 0 3px 0 0;
  background: url("/images/fair/diamond_opacity_21.png") 50% 50% no-repeat;
}
.d-prg._currnet {
  background: url("/images/fair/diamond_light_26.png") 50% 50% no-repeat;
}
.d-prg._done {
  background: url("/images/fair/diamond_21.png") 50% 50% no-repeat;
}
.font24 {
  font-size: 24px !important;
}
/*............................
............fair..............
............................*/

.icon-add {
  display: inline-block;
  width: 18px;
  height: 15px;
  vertical-align: middle;
  background: url("/images/menu/add-icon.png") 0 0 no-repeat;
}
.icon-add._lock {
  background-position: 0 -20px;
}
.icon-add._show {
  background-position: 0 -40px;
}
.icon-add._hide {
  background-position: 0 -60px;
}
.msg {
  position: relative;
  padding: 8px 20px 8px 0;
  border-bottom: 1px solid #232342;
}
.msg-reply {
  display: inline-block;
  text-decoration: none;
  vertical-align: middle;
  position: absolute;
  top: 10px;
  right: 0;
  width: 13px;
  height: 15px;
  background: url("/images/menu/msg-reply_white.png") 50% 50% no-repeat;
}
/* .msg-text - ������ ������� ������� */
.msg-time {
  margin-left: 5px;
  color: #999999;
  font-size: small;
  white-space: nowrap;
}
.headerButton {
  border-radius: 0 !important;
}

div[style="margin:-10px;"] {
  margin: 0 !important;
}

.b-maneken {
  height: 190px;
  max-width: 320px;
  margin: 7px 0;
  position: relative;
  padding: 0;
}
.link_ava_scale {
  height: 190px;
  display: block;
  text-decoration: none;
}
.admin-text,
.admin-text * {
  color: #33ccff !important;
}
.maneken-image {
  width: 100%;
  height: auto;
  max-width: 320px;
}
.b-maneken {
  position: relative;
  height: auto;
  padding: 0;
  overflow: hidden;
  max-width: 320px;
}
.equip {
  display: block;
  position: absolute;
  width: 32px;
  height: 32px;
  z-index: 100;
  text-decoration: none;
  background: url("/images/tutorial/32_slot.png") 0 100% no-repeat;
}
.equip._equip-none {
  background: url("/images/tutorial/32_slot.png") 0 0 no-repeat;
}
.maneken-image-link {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 80px;
  width: 58%;
  height: 100%;
}
.equip._equip1 {
  top: 7px;
  left: 6px;
}
.equip._equip2 {
  top: 44px;
  left: 6px;
}
.equip._equip3 {
  top: 81px;
  left: 6px;
}
.equip._equip4 {
  top: 118px;
  left: 6px;
}
.equip._equip5 {
  top: 155px;
  left: 6px;
}
.equip._equip6 {
  top: 7px;
  left: 43px;
}
.equip._equip7 {
  top: 7px;
  right: 43px;
}
.equip._equip8 {
  top: 7px;
  right: 6px;
}
.equip._equip9 {
  top: 44px;
  right: 6px;
}
.equip._equip10 {
  top: 81px;
  right: 6px;
}
.equip._equip11 {
  top: 118px;
  right: 6px;
}
.equip._equip12 {
  top: 155px;
  right: 6px;
}
.link_ava_scale {
  height: 0;
}

/*
Social widget header
*/
.social-widget._social-widget-ok {
  position: relative;
  z-index: 1000;
  display: block;
  margin-bottom: -26px;
}
.social-widget._social-widget-ok a {
  width: 26px !important;
  height: 26px !important;
  background-position: 50% 50% !important;
}
.header._social-widget-ok {
  padding-left: 31px;
}

.section-label {
  display: block;
  padding: 0 0 3px 0;
}
.section-input {
  display: block;
  width: 190px;
  padding: 3px 5px;
}
.section-form {
  padding-top: 15px;
}
.section-form._form-error .section-label {
  color: #ff0000 !important;
}
.section-form._form-error .section-input {
  border-color: #ff0000 !important;
}

/* 
Bank 
*/
.pack-link .link-icon {
  margin-right: 3px;
}
.pack-info {
  padding: 0 0 0 14px;
  font-size: small;
}
.b-pack {
  padding: 5px 0 15px 0;
}
.vip-inner-line,
.bank-action-line {
  display: block;
  padding: 5px 5px 5px 25px;
  position: relative;
  font-size: 12px;
}
.vip-inner-line:before,
.bank-action-line:before {
  content: "";
  width: 16px;
  height: 16px;
  background: url("/images/bank/i-tick.png") 0 0 no-repeat;
  position: absolute;
  left: 4px;
  top: 4px;
}
.b-pack._label-hit .pack-link:after,
.b-pack._label-action .pack-link:after {
  content: "���!";
  color: #33cc33;
  font-style: italic;
}
.b-pack._label-action .pack-link:after {
  content: "";
}
.bank-action {
  padding: 4px;
  border: 1px solid #cccccc;
  background: #003300;
}
.bank-action h2 {
  margin-top: 0;
  padding-top: 0;
}
.bank-action-line {
  color: #ffff33;
}
.sms-code {
  font-size: 16px;
  font-weight: normal;
}
.font16 {
  font-size: 16px !important;
}
.pt5 {
  padding-top: 5px !important;
}
.buy-link {
  display: inline-block;
  text-decoration: none !important;
  color: #fff !important;
}
.buy-link u {
  color: #ffff33 !important;
  text-decoration: underline !important;
}
a._current {
  text-decoration: none !important;
  color: #fff !important;
}
/* 
end of Bank 
*/

/*...................TUTORIAL LIGHT...............*/
.char-name {
  display: block;
  color: #ffffff;
}

.tut-item-icon:after {
  content: "";
  position: absolute;
  z-index: 30;
  bottom: -2px;
  left: -1px;
  width: 36px;
  height: 10px;
  background: url("/images/tutorial/items-label-new.png") 0 0 no-repeat;
}
._new-item {
  position: relative;
}
._new-item td:first-child span {
  position: relative;
}
._new-item td:first-child span:after {
  content: "new!";
  position: absolute;
  color: #ffff33;
  font-size: 12px;
  top: 28px;
  left: 1px;
}
.wrap-promo,
.wrap-promo .center {
  text-align: left !important;
  clear: both;
}
.vip-tape {
  max-width: 310px;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  margin: 0 0 0 0;
  padding: 5px 0;
}
.promo-back {
  height: auto;
  text-align: center;
  display: block;
  min-width: 210px;
  width: 100%;
  max-width: 310px;
}
.wrap-promo .c-marked {
  color: #ffff33 !important;
}
.section-sep {
  padding: 15px 0 0 0;
}
.wrap-promo h2 {
  padding-bottom: 7px;
}
.wrap-promo .brl_btn {
  display: block;
  margin-bottom: 10px;
}
.wrap-promo .brl_btn:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 12px;
  height: 12px;
  background: url("/images/icons/arr.png") 0 0 no-repeat;
}

/* Rarityshop recommended*/
.text-strike {
  display: inline-block;
  position: relative;
  color: #999999;
}
.text-strike:before {
  content: "";
  display: block;
  width: 100%;
  border-top: 2px solid #f00;
  position: absolute;
  top: 6px;
}
.rare-lot {
  position: relative;
  background-color: #003300;
  border: 1px solid #cccccc;
  font-size: 13px;
  margin: 4px 0;
  display: block;
  text-decoration: none;
}
a.rare-lot {
  text-decoration: none !important;
}
.rare-lot._sold {
  background: #333366;
  border-color: #555555;
  opacity: 0.5;
}
.rare-lot-title {
  font-size: 14px;
}
.rare-lot._sold .rare-lot-title {
  color: #999999 !important;
}
.rare-lot._sold .rare-lot-descr {
  display: none;
}
.rare-lot-descr {
  font-size: small;
  color: #999999;
}
.rare-lot._offer {
  border-color: #ffff33;
  border-width: 3px;
}
.rare-lot._discount:before {
  content: "%";
  display: block;
  position: absolute;
  font-size: 12px;
  font-weight: bold;
  padding: 2px;
  background: #a00;
  color: #fff;
  top: -3px;
  left: -6px;
  z-index: 10;
  border: 2px solid #440000;
}
.rare-lot._discount._offer:before {
  top: 10px;
  left: -8px;
}
.rare-lot table td {
  padding: 3px 8px 3px 3px;
}
.rare-lot-offer {
  background: #ffff33;
  color: #000;
  font-size: 10px;
  text-align: center;
  padding: 0 2px 2px 0;
}
/* End of Rarityshop recommended*/

.ya-share2__item {
  margin: 5px 10px 0 0 !important;
}
.text-form-link {
  display: block;
  color: yellow;
  border: 0;
  background: transparent;
  font-size: inherit;
  text-decoration: underline;
  padding: 0;
  margin: 5px 0 5px 0;
}
.custom-checkbox {
  display: inline-block;
  vertical-align: middle;
  padding-left: 0;
  margin-left: 0;
}

.promo-back._480 {
  width: 100%;
  height: initial !important;
}
.promo-back._480 img {
  width: 100%;
  height: auto;
}
.img-list-table {
  border-collapse: separate;
  border-spacing: 0 8px;
}
.img-list-table td {
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}
.img-list-table tr td:first-child img {
  margin: 3px 0 0 0 !important;
}

.img-list-table .text-gold {
  color: #ffff33 !important;
}
.font11 {
  font-size: small;
}

.daily-gift-table {
  max-width: 320px;
  border-collapse: collapse;
  margin: 5px 0 10px 0;
}
.daily-gift-table td {
  width: 33%;
  padding: 5px 5px 0 0;
  text-align: center;
  vertical-align: top;
}
.daily-gift-table tr td:last-child {
  padding-right: 0;
}
.daily-gift-table {
  border-spacing: 10px 10px;
}

.daily-box {
  text-decoration: none;

  background: rgba(255, 255, 255, 0.11);
  display: block;
  padding: 3px;
  height: 116px;
  color: inherit;
  overflow: hidden;
}
.daily-box._today {
  background: rgba(255, 255, 255, 0.17);
}
.daily-box._received {
  opacity: 0.5;
}
.daily-box-title {
  color: #fff;
  font-size: 12px;
}
.daily-box._today .daily-box-title {
  color: #ffff33;
  /*  text-decoration: underline; */
}
.daily-box._today .daily-box-title:before {
  content: "�������";
  height: 12px;
  padding: 0 0 2px 15px;
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  margin-right: 3px;
  background: url("/images/icons/arr.png") 0 100% no-repeat;
}
.daily-box._received .daily-box-title:before {
  content: "";
  height: 12px;
  padding: 0 0 2px 15px;
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  margin-right: 3px;
  background: url("/images/icons/tick.png") 0 100% no-repeat;
  display: inline-block;
}
.daily-box._received._today .daily-box-title:before {
  content: "�������";
  height: 12px;
  padding: 0 0 2px 15px;
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  margin-right: 3px;
  background: url("/images/icons/tick.png") 0 100% no-repeat;
}

.daily-box._today .daily-box-title,
.daily-box._tomorrow .daily-box-title {
  font-size: 0;
}
.daily-box._tomorrow .daily-box-title:before {
  content: "������";
  height: 12px;
  padding: 0 0 2px 0;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  font-size: 12px;
}
.daily-box-prize {
  padding: 5px 0 3px 0;
}
.daily-box-prize-name {
  font-size: 12px;
}
.navigator {
  color: #33cc33;
}
.navigator:before {
  content: "(";
  margin-right: -2px;
}
.navigator:after {
  content: ")";
  margin-left: -2px;
}
.wrap-fight {
  position: relative;
}
.wrap-fight._fight-lock:after {
  content: "";
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url("/images/menu/opacity-half.png") 0 0 repeat;
}
.worng a,
.wrong span,
.wrong {
  color: #ff3333 !important;
}
.wrong a {
  text-decoration: underline !important;
  color: #ff3333 !important;
}

.house-lvl {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  background: #2a241c;
  padding: 0 0 0 0;
  font-size: 10px;
  color: #fff;
  margin: 0 3px;
  text-align: center;
  width: 22px;
  height: 17px;
  line-height: 17px;
  background: url("/images/house/house-lvl.png") 50% 50% no-repeat;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000,
    0 0 3px #000;
}
.house-lvl._lvl2 {
  background-image: url("/images/house/house-lvl2.png") !important;
  font-size: 0;
}
.h-scroll {
  display: inline-block;
  padding: 2px 5px;
  font-size: 12px;
  min-width: 80px;
  background: #333366;
  margin: 1px;
  text-align: left;
}

.soc-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 5px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAAAYCAMAAABDY6Z9AAACf1BMVEUAAAAArO0WjeJnf7JIcp47WZjrci4WjeI7WZhIcp7rci4ArO1nf7L///+drMzvjVV2lbbS3Ofv+v763Msnu/+nkf+SeP/U6vr+9/NAwfJ8v+9CoufP1uYzm+b75dijuM5rg7L1uZfseztQyf9Hxv8wv/+tmP+Yf/+VfP/09vm33PZQxvMwvPBm0P84wf8WuP8FtP+/rf+gif+agv/A6vuA1vaazfIgtu8Qse5QqukllOR8gtKNp8NhgrdqjbBfhKrzp33uhEht0v9Zzv9Xy/9Aw/+1of+vm/+plP+kjf+hi/+dhf+OdP9hzv7j8fsks/rF4/ig4Piklfdgy/T+9vLd5e1esev97ua7ytu1wdh9fdg+nNd5fM9XicL5075lgLT4yrH2wqT/7nDwlWL+6lr94Sr/7geS5f912v9Bxv+plf+Jbf8zxP7g9f3Q8Pyah/uw5fnn6/KZzfKLxvG4pe7G0+FCpeBCnNyvwtWYsMl3gMiBnrxofrZgeKtTe6RHY57yp3z//3Gkz2z/62f/8mT//lv/8Ef/50L/5Tb/7in/+QD/6QB94v+G2/+B2/+B2v9g2f9q2P9y0/9j0/81vf8gvP/Bsf+5pv+5hf98Zf/x+v7P7/yVffx51Pmf4PiQ2/ccuPedjPZuuO2Jeu3b4Owzpetct+lTt+hMm+WXluDDr96Wfd7auNtaptY4w9Kqt9Kr1NDCrNA/k9BFms1xdsXBqMFZfr9ahb264Lt4jbhje7it27WZ1LX3yrDDqK6T0afm26HDpJz0sIr0r4nu2oSm0X7/8Xr/83jxnnDw2WvV2Vf/6E/x40//6E7/+kz23Ej//Dn/9zH/+hr/8hr/5BKLTGluAAAAB3RSTlMAgICAgICAIGX4wgAAA7ZJREFUSMfd1+VzE0EYBnC8XODhQoRIE4iHlhotVUqhaJ2WQo0KlLa4u7u7u7u7u7vzB7GbS5PcZfPhZvKB8sxkL5l3MvObvd1971q1ascx0q6VJ+07MtJeqHVQMNJBqLWJYKSNUGvdiZHWQq1tZ0baso1U6TeyldTIVrKNVOkzspXUyFZyIUL/1DFEaE0RIrQWESK01ilEaK1ziPxXyOWVUYCFhRygVquttnAia67WkPHOxb5ykWcANnIsaMpt4UPe2z5+27maRwf29R7RVxbyIQCTaWkwMhvQj+kOvJKFjPHKjqtwLK1XjBh5fvzACVt33LiindSbMJc0I3v06JHFZQJRWRyXSX4EI7sA15lrchzAKxTlGMNARhbp6EVXZJYgDao0j7EENDMMIuT9CbsGDhx0dOXKF3MmDd1PmF5kV6CC40YBSq4/gK5MZBcmcgBARjXUDOQpwEyoQJkEmQxVL3qFJyrxTF7YEhsb63iw5t3a93Nyhg0bOtSLVALoT6gEWQEgS4q0WCqBSotlOXMmn/IrACsDmZFipBdjSoYEmQrgcGmMF0m9fmS/3bGFhfbC+jX19Wsv5blcrmFeJPV19SApdyEnRcIbxppUdBdKvJw1mZaMgBhEyHk7Bw8eNOXxutWrv73J0+bkuE42I6ltbhSR0g8XEsk6J3mq1A+QdQSlIjCpgch+9sF2+0R7w7qGhh83e2q1Wle1b3cvgC8LgpEm00xgpsnEQPLW7OxxvG3F6yBkRnRkMy4yOkO8u/vAn6miI2j+IIfDsffJxq+ff35MSszN1U73H0HLRsGXTE7GxukOqK21IwFeipwNYzPSiNmSc7IUviQHIuuGOIYMccZ92bh+/a+7BXmJibnVfiTX36Ocu5COi2XtbiFqmwRpBnSR3onUAWYxcprPqEoLRM6fGBcXF/+8acOG39/d7vz8xOmiw3xZhYeXCSBKBlKRbQVQywetyWJEA7PKzOayWSBfi8XIGN8N7yXqOFP2OJ3O+E+bGxs3PZuclJSUXyXtOEolnVKlMksO0kY3zshg5KHoiHSd4NClRxQXSdpi6gyhVipui2edGo0m4W3Tn6bGbt3cbvcRGW2RhfQba/VEydzd6caUFGN60O42JPdRCZvGIOnddfOGazTxJ1Zt3vTyYE+SqrAgrSAdkdejXFbvNpQQ5bQS760WH+ajh2sSEq6tujy5G8mSsCA/6MeSkSdjuJ6CKDM+4Vbn6tMFBVX/8ENv3ejb9LJoUYt6Mm8RL2It4ZX2LxWYDH6Q4jGZAAAAAElFTkSuQmCC")
    0 0 no-repeat;
}

.soc-icon._vk {
  background-position: 0 0;
}
.soc-icon._facebook {
  background-position: -28px 0;
}
.soc-icon._odnoklasniki,
.soc-icon._ok {
  background-position: -56px 0 !important;
}
.soc-icon._myworld {
  background-position: -84px 0;
}
.soc-icon._twitter {
  background-position: -112px 0;
}
.soc-icon._spaces {
  background-position: -140px 0;
}
.soc-icon._mm {
  background: url("/images/landing/mm_96x96.png") 0 0 no-repeat !important;
  background-size: 24px 24px !important   ;
}

.substrate {
  padding: 0.7em 0;
}
.substrate-inner {
  font-size: 18px;
  font-weight: normal;
  color: #ffff33 !important;
}
.ship-name {
  padding-top: 7px;
}
.ship-info-title {
  padding-bottom: 7px;
}

.none-for-light {
  display: none;
}
.table_reward .entity.e-resource._enchanter .e-name {
  display: block !important;
  font-size: 11px !important;
}
.table_reward .entity.e-resource._enchanter .e-name:after {
  content: " (�� ���� �������)";
}
._tutorial-arrow:after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 14px;
  background: url("/images/icons/arr_left_an1.gif") 0 50% no-repeat;
  vertical-align: middle;
  margin-left: 3px;
}
.d-ib {
  display: inline-block !important;
}
.pr5 {
  padding-right: 5px !important;
}
.house {
  position: relative;
  max-width: 320px;
}
.house-img {
  width: 100%;
  height: auto;
}
.house-building {
  position: absolute;
  width: 33%;
  height: 33%;
  text-align: center;
}
.house-building._typography {
  top: 10.3%;
  left: 0.7%;
}
._typography._ready-product:after {
  content: "";
  position: absolute;
  z-index: 4;
  top: -9.8%;
  left: 54.1%;
  width: 25px;
  height: 25px;
  background: url("/images/house/buildings/typography-roll_light.png") 0 0
    no-repeat;
}
.house-building._monument {
  top: 33.3%;
  left: 26.7%;
}
.house-building._forge {
  top: 80%;
  left: 15.2%;
}
.house-building._gym {
  top: 12%;
  left: 62.1%;
}
.house-building._pond {
  top: 50.5%;
  left: 55.9%;
}
.house-building._tower {
  top: 55.9%;
  left: 0.2%;
}
.house-building._nonamed {
  top: 74.5%;
  left: 60%;
}
.house-building._academy {
   top: 78.5%;
   left: 55.9%;
}
.house-building._blacksource {
  top: 33%;
  left: 68%;
}
.house-building-title {
  text-decoration: underline;
  font-size: 11px;
  display: block;
  background: #000;
  padding: 2px 0 4px 0;
}
@media screen and (max-width: 310px) {
  .house-building-title {
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.house-building._building-lock .house-building-img {
  opacity: 0.5;
}
.house-building._building-lock .house-building-title:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  background: url("/images/icons/lock_gray.png") 0 0 no-repeat;
}

.donate-progress {
  height: 7px;
  background: url("/images/exp_b_310.png") no-repeat 0 0;
  position: relative;
  margin: 68px 0 35px 32px;
  width: 310px;
}
.donate-progress-fill {
  height: 7px;
  background: url("/images/exp_a_310.png") no-repeat 0 0;
}
.donate-progress-result {
  width: 100%;
  position: absolute;
  top: -54px;
  left: -30px;
  font-size: 18px;
  color: #ff6610;
}
.progress-tag {
  font-family: "Trajan", Arial;
  color: #bfc196;
  font-size: 12px;
  position: absolute;
  top: 10px;
  width: 29px;
  text-align: center;
}
.progress-tag._0 {
  left: 88px;
}
.progress-tag._1 {
  left: 188px;
}
.progress-tag._2 {
  left: 288px;
}
.progress-tag-icn {
  width: 32px;
  height: 32px;
  left: -30px;
  top: -12px;
  position: absolute;
}
@media screen and (max-width: 360px) {
  .donate-progress {
    width: 210px;
    background-size: 210px auto;
  }
  .donate-progress-fill {
    background-size: 210px auto;
  }
  .progress-tag._0 {
    left: 55px;
  }
  .progress-tag._1 {
    left: 125px;
  }
  .progress-tag._2 {
    left: 195px;
  }
  .progress-tag._3 {
    left: 265px;
  }
}
.wrap-custom-checkbox {
  padding-top: 5px;
}
.custom-checkbox {
  margin-right: 0;
}
.custom-checkbox-label {
  font-size: 12px;
}

/*...........................................
..................billboard..................
...........................................*/
.billboard {
  position: relative;
  text-align: left;
  padding: 0px 0px 5px 0;
}
.billboard._promo {
  text-align: left !important;
}
.billboard .go-btn:before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  width: 12px;
  height: 12px;
  background: url("/images/icons/tick.png") 0 0 no-repeat;
}
.billboard .popup-close:before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  width: 12px;
  height: 12px;
  background: url("/images/icons/cross.png") 0 0 no-repeat;
}
.i12.i12-money_gold {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-bottom: -3px;
  background: url("/images/icons/money_gold.png") 0 0 no-repeat;
}
.i12.i12-ap-2 {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-bottom: -3px;
  background: url("/images/icons/icon_ArenaStar_12.png") 0 0 no-repeat;
}
.billboard-bg-img {
  display: none !important;
}
.billboard-title {
  position: relative;
  width: 100%;
  font-size: 18px;
  color: #ff6600;
}
.billboard-items {
  position: relative;
  padding: 5px 0 10px 0;
}
.billboard-item {
  display: inline-block;
  max-width: 42px;
  max-height: 42px;
  margin: 0 3px;

  vertical-align: middle;
  position: relative;
}
.billboard-item-img {
  width: 100%;
  height: auto;
  max-width: 42px;
  max-height: 42px;
}
.billboard-item-label {
  position: absolute;
  bottom: -5px;
  right: -5px;
  background: #9e0700;
  border-radius: 50%;
  color: #ffe347;
  height: 24px;
  min-width: 24px;
  line-height: 24px;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}
.billboard-hint {
  position: relative;
  font-size: 14px;
}
.billboard-progress {
  position: relative;
  max-width: 324px;
  margin: 5px 0;
  width: 50%;
  height: 20px;
  background: rgba(0, 0, 0, 0.9);
  overflow: hidden;
  border: 1px solid #4c4c4c;
}

.billboard-progress-fill {
  height: 100%;
  position: absolute;
  left: 0;
  background: #0c40b7;
}
.billboard-progress-text {
  position: absolute;
  text-align: center;
  z-index: 10;
  top: 0%;
  left: 0;
  width: 100%;
  font-size: 14px;
}
.billboard-timer {
  position: relative;
}
.resources-table-list td {
  padding: 5px;
}
.resources-table-list tr:nth-child(2n + 1) td {
  background: rgba(142, 142, 142, 0.2);
}
/*..........................................
-............Progress Versus................
 ..........................................*/

.progress-versus {
  height: 20px;
  width: 70%;
  margin: 0;
  position: relative;
  box-sizing: border-box;
  background-color: #272525;
  border: 4px solid #594627;
}
.progress-versus-divider {
  position: absolute;
  top: 0%;
  width: 4px;
  height: 100%;
  background: #594627;
  z-index: 1;
}
.progress-versus-fill {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s linear;
  box-sizing: border-box;
}
.progress-versus ._flame {
  background: linear-gradient(
    to left,
    hsl(28.94, 100%, 50%) 0%,
    hsl(28.79, 100%, 49.94%) 8.1%,
    hsl(28.36, 100%, 49.77%) 15.5%,
    hsl(27.66, 100%, 49.51%) 22.5%,
    hsl(26.72, 100%, 49.18%) 29%,
    hsl(25.53, 100%, 48.78%) 35.3%,
    hsl(24.1, 100%, 48.33%) 41.2%,
    hsl(22.42, 100%, 47.86%) 47.1%,
    hsl(20.5, 100%, 47.37%) 52.9%,
    hsl(18.31, 100%, 46.88%) 58.8%,
    hsl(15.87, 100%, 46.42%) 64.7%,
    hsl(13.18, 100%, 46%) 71%,
    hsl(10.23, 100%, 45.63%) 77.5%,
    hsl(7.03, 100%, 45.35%) 84.5%,
    hsl(3.62, 100%, 45.16%) 91.9%,
    hsl(0, 100%, 45.1%) 100%
  );
}
.progress-versus ._green {
  background: linear-gradient(
    to left,
    hsl(140.87, 100%, 45.1%) 0%,
    hsl(140.84, 100%, 44.95%) 8.1%,
    hsl(140.73, 100%, 44.52%) 15.5%,
    hsl(140.57, 100%, 43.84%) 22.5%,
    hsl(140.34, 100%, 42.96%) 29%,
    hsl(140.04, 100%, 41.9%) 35.3%,
    hsl(139.67, 100%, 40.69%) 41.2%,
    hsl(139.21, 100%, 39.38%) 47.1%,
    hsl(138.67, 100%, 37.99%) 52.9%,
    hsl(138.02, 100%, 36.58%) 58.8%,
    hsl(137.29, 100%, 35.19%) 64.7%,
    hsl(136.47, 100%, 33.88%) 71%,
    hsl(135.63, 100%, 32.73%) 77.5%,
    hsl(134.86, 100%, 31.81%) 84.5%,
    hsl(134.27, 100%, 31.2%) 91.9%,
    hsl(134.05, 100%, 30.98%) 100%
  );
}
.progress-versus ._frost {
  background: linear-gradient(
    to left,
    hsl(192, 100%, 50%) 0%,
    hsl(192.31, 99.76%, 50.18%) 8.1%,
    hsl(193.09, 99.09%, 50.25%) 15.5%,
    hsl(194.32, 98.04%, 50.21%) 22.5%,
    hsl(195.98, 96.7%, 50.08%) 29%,
    hsl(198.06, 95.6%, 49.87%) 35.3%,
    hsl(200.57, 94.84%, 49.61%) 41.2%,
    hsl(203.52, 94.13%, 49.3%) 47.1%,
    hsl(206.92, 93.47%, 48.97%) 52.9%,
    hsl(210.77, 92.86%, 48.62%) 58.8%,
    hsl(215.08, 92.31%, 48.27%) 64.7%,
    hsl(219.84, 91.83%, 47.95%) 71%,
    hsl(225.05, 91.44%, 47.67%) 77.5%,
    hsl(230.69, 91.13%, 47.45%) 84.5%,
    hsl(236.69, 90.94%, 47.31%) 91.9%,
    hsl(242.87, 100%, 45.1%) 100%
  );
}
.versus-rewards {
  padding-bottom: 7.145%;
  width: 70%;
  margin: 0;
  position: relative;
  box-sizing: border-box;
}
.versus-reward {
  height: 100%;
  width: auto;
  position: absolute;
  box-sizing: border-box;
  top: 0;
  font-size: 10px;
  transform: translateX(-45%);
  -webkit-transform: translateX(-45%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.versus-reward-img {
  margin: 0 auto 2px auto;
  display: block;
  height: 100%;
  width: auto;
}
.versus-reward-title {
  width: 70px;
  word-break: break-word;
}
.versus-reward._1 {
  left: 33%;
}
.versus-reward._2 {
  left: 66%;
}
.versus-reward._3 {
  left: 100%;
}
/*..........................................
-............Progress Versus (end)..........
 ..........................................*/
.notice-img {
  width: 70%;
  height: auto;
  margin: 5px auto;
}
/*........................................
.................actions.................
........................................*/
.action-box,
.slot-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.action-box {
  flex-wrap: wrap;
}
._2-in-row .slot {
  width: 33%;
}
._2-in-row .slot-item-img {
  width: 38.69%;
}
._2-in-row ._no-qty .slot-item-img {
  width: 100%;
}
._3-in-row .slot {
  width: 26%;
}
._3-in-row .slot-item-img {
  width: 55%;
}
._3-in-row ._no-qty .slot-item-img {
  width: 100%;
}
.slot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 2%;
  margin: 2% 1%;
}
.slot span {
  display: inline-block;
  text-align: center;
  word-break: break-word;
}
.slot-item-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  text-align: center;
  margin: 5% 0;
  font-size: 14px;
  word-break: break-word;
}
.slot-item-text {
  font-size: 14px;
  margin: 2% auto;
}
.slot-item._small-img .slot-item-img img {
  width: 53.35%;
}
.slot-item._small-img._no-qty .slot-item-img img {
  width: 26.45%;
}
._2-in-row .slot-item._small-img._no-qty .slot-item-img img {
  width: 20.85%;
}
.slot-item-img-label {
  position: absolute;
  top: 0;
  right: -30%;
  background: #6d1313;
  padding: 4%;
  font-size: 12px;
  border-radius: 25px;
}
._free .slot-item-img-label {
  right: 10% !important;
}
.slot-item-qty {
  white-space: nowrap;
  font-size: 14px;
}
.slot-price {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-top: 6%;
  font-size: 22px;
}
._decor-gold {
  border: 2px solid #583200;
  border-top: 3px solid #ff9900;
}
._decor {
  border: 2px solid #583200;
  border-top-width: 3px;
}
@media screen and (max-width: 440px) {
  .slot-item-img,
  .slot-item-text,
  .slot-item-qty {
    font-size: calc(100vw / (440 / 14)) !important;
  }
  .slot-item-img-label {
    font-size: calc(100vw / (440 / 12)) !important;
  }
  .slot-price {
    font-size: calc(100vw / (440 / 22)) !important;
  }
}

.combat-environment-block._plain .combat-environment-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  background: url(../../images/icons/sprites/icons_environment_strip_32.png) 50% 0 /100% auto no-repeat;
}

.combat-environment-block._plain .combat-environment-icon._1 {
  background-position-y: 0;
}
.combat-environment-block._plain .combat-environment-icon._2 {
  background-position-y: 3.4482758621%;
}
.combat-environment-block._plain .combat-environment-icon._3 {
  background-position-y: 6.8965517241%;
}
.combat-environment-block._plain .combat-environment-icon._4 {
  background-position-y: 10.3448275862%;
}
.combat-environment-block._plain .combat-environment-icon._5 {
  background-position-y: 13.7931034483%;
}
.combat-environment-block._plain .combat-environment-icon._6 {
  background-position-y: 17.2413793103%;
}
.combat-environment-block._plain .combat-environment-icon._7 {
  background-position-y: 20.6896551724%;
}
.combat-environment-block._plain .combat-environment-icon._8 {
  background-position-y: 24.1379310345%;
}
.combat-environment-block._plain .combat-environment-icon._9 {
  background-position-y: 27.5862068966%;
}
.combat-environment-block._plain .combat-environment-icon._10 {
  background-position-y: 31.0344827586%;
}
.combat-environment-block._plain .combat-environment-icon._11 {
  background-position-y: 34.4827586207%;
}
.combat-environment-block._plain .combat-environment-icon._12 {
  background-position-y: 37.9310344828%;
}
.combat-environment-block._plain .combat-environment-icon._13 {
  background-position-y: 41.3793103448%;
}
.combat-environment-block._plain .combat-environment-icon._14 {
  background-position-y: 44.8275862069%;
}
.combat-environment-block._plain .combat-environment-icon._15 {
  background-position-y: 48.275862069%;
}
.combat-environment-block._plain .combat-environment-icon._16 {
  background-position-y: 51.724137931%;
}
.combat-environment-block._plain .combat-environment-icon._17 {
  background-position-y: 55.1724137931%;
}
.combat-environment-block._plain .combat-environment-icon._18 {
  background-position-y: 58.6206896552%;
}
.combat-environment-block._plain .combat-environment-icon._19 {
  background-position-y: 62.0689655172%;
}
.combat-environment-block._plain .combat-environment-icon._20 {
  background-position-y: 65.5172413793%;
}
.combat-environment-block._plain .combat-environment-icon._21 {
  background-position-y: 68.9655172414%;
}
.combat-environment-block._plain .combat-environment-icon._22 {
  background-position-y: 72.4137931034%;
}
.combat-environment-block._plain .combat-environment-icon._23 {
  background-position-y: 75.8620689655%;
}
.combat-environment-block._plain .combat-environment-icon._24 {
  background-position-y: 79.3103448276%;
}
.combat-environment-block._plain .combat-environment-icon._25 {
  background-position-y: 82.7586206897%;
}
.combat-environment-block._plain .combat-environment-icon._26 {
  background-position-y: 86.2068965517%;
}
.combat-environment-block._plain .combat-environment-icon._27 {
  background-position-y: 89.6551724138%;
}
.combat-environment-block._plain .combat-environment-icon._28 {
  background-position-y: 93.1034482759%;
}
.combat-environment-block._plain .combat-environment-icon._29 {
  background-position-y: 96.5517241379%;
}
.combat-environment-block._plain .combat-environment-icon._30 {
  background-position-y: 100%;
}

/* ����� ��� ����� */
.captcha-question {
    background: #000044;
    border: 1px solid #555555;
    padding: 8px;
    margin: 5px 0;
    border-radius: 3px;
    font-size: 14px;
    font-weight: bold;
    color: #ffff33;
    text-align: center;
}

input[type="number"] {
    background: #000033;
    border: 1px solid #555555;
    color: #ffffff;
    padding: 5px 8px;
    border-radius: 3px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    min-width: 150px;
}

input[type="number"]:focus {
    border-color: #ff6600;
    outline: none;
}

/* Support form styles */
.support-form {
    background: #1a1a1a;
    padding: 20px;
    border-radius: 5px;
    margin: 20px 0;
}

.support-form label {
    display: block;
    color: #ffff33;
    font-weight: bold;
    margin-bottom: 5px;
}

.support-form input,
.support-form select,
.support-form textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #444;
    background: #222;
    color: #fff;
    border-radius: 3px;
    font-family: inherit;
    box-sizing: border-box;
}

.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus {
    outline: none;
    border-color: #ffaa00;
    box-shadow: 0 0 5px rgba(255, 170, 0, 0.3);
}

.form-group {
    margin-bottom: 15px;
}

.button {
    background: linear-gradient(to bottom, #ffaa00, #ff8800);
    color: #000;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s ease;
}

.button:hover {
    background: linear-gradient(to bottom, #ffbb11, #ff9911);
}

.message-success {
    border-left: 4px solid #44ff44;
    background: rgba(68, 255, 68, 0.1);
    padding: 15px;
    margin: 15px 0;
}

.message-error {
    border-left: 4px solid #ff4444;
    background: rgba(255, 68, 68, 0.1);
    padding: 15px;
    margin: 15px 0;
}

/* FAQ styles */
.faq-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 8px;
}

.faq-answer {
    color: #ccc;
    line-height: 1.5;
}

/* ========================================
   ������� ������������
   ======================================== */

.comment-item {
    position: relative;
    padding: 10px 12px;
    margin-bottom: 12px;
    margin-left: 0;
    background: rgba(20, 20, 40, 0.4);
    border: 1px solid rgba(112, 208, 232, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.comment-item.comment-reply {
    margin-left: 0 !important;
    border-left: 3px solid rgba(112, 208, 232, 0.3);
    padding-left: 7px !important;
}

.comment-reply-info {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(112, 208, 232, 0.08);
    border-radius: 6px;
    font-size: 12px;
    border-left: 2px solid rgba(112, 208, 232, 0.4);
}

.comment-reply-info .reply-arrow {
    opacity: 0.7;
}

.comment-reply-info .reply-username {
    color: #70d0e8;
    margin-left: 5px;
    font-weight: 600;
}

.comment-number {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 11px;
    opacity: 0.4;
    font-weight: 500;
}

.comment-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-right: 50px;
}

.comment-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.comment-username {
    color: #ffd700;
    font-size: 16px;
    font-weight: 600;
}

.comment-username.comment-username-admin {
    color: #70d0e8;
}

.comment-date {
    opacity: 0.5;
    font-size: 12px;
}

.comment-text-display {
    line-height: 1.6;
    font-size: 14px;
    padding: 0;
    margin-bottom: 8px;
    /* white-space: pre-wrap; */
    word-wrap: break-word;
    text-align: left !important;
    color: #e0e0e0;
    max-height: none; /* ������ �� ����������� */
    overflow: visible; /* ���������� ���� ����� */
}

.comment-text-display.admin-text {
    color: #c9d1ff;
}

.comment-edited {
    opacity: 0.5;
    font-size: 11px;
    font-style: italic;
    margin-left: 8px;
}

.comment-edit-form {
    display: none;
    padding: 8px 0;
}

.comment-edit-textarea {
    width: 100%;
    max-width: 100%;
    min-height: 100px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(112, 208, 232, 0.3);
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}

.comment-edit-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.comment-actions {
    display: flex;
    gap: 8px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}

.comment-btn {
    cursor: pointer;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 6px;
    transition: all 0.2s;
    font-weight: 500;
    border: 1px solid;
}

.comment-btn-reply {
    background: rgba(112, 208, 232, 0.15);
    border-color: rgba(112, 208, 232, 0.3);
    color: #70d0e8;
}

.comment-btn-reply:hover {
    background: rgba(112, 208, 232, 0.25);
}

.comment-btn-edit {
    background: rgba(255, 200, 50, 0.15);
    border-color: rgba(255, 200, 50, 0.3);
    color: #ffc832;
}

.comment-btn-edit:hover {
    background: rgba(255, 200, 50, 0.25);
}

.comment-btn-delete {
    background: rgba(255, 100, 100, 0.15);
    border-color: rgba(255, 100, 100, 0.3);
    color: #ff6464;
}

.comment-btn-delete:hover {
    background: rgba(255, 100, 100, 0.25);
}

.comment-btn-save {
    padding: 8px 16px;
    background: rgba(80, 200, 80, 0.2);
    border: 1px solid rgba(80, 200, 80, 0.4);
    color: #50c850;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.comment-btn-cancel {
    padding: 8px 16px;
    background: rgba(150, 150, 150, 0.2);
    border: 1px solid rgba(150, 150, 150, 0.4);
    color: #b0b0b0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.reply-form-container {
    display: none;
    margin-top: 10px;
    padding: 12px;
    background: rgba(112, 208, 232, 0.05);
    border: 1px solid rgba(112, 208, 232, 0.2);
    border-radius: 8px;
}

.reply-form-title {
    color: #70d0e8;
    font-size: 13px;
    margin-bottom: 10px;
    font-weight: 600;
}

.reply-form-textarea {
    width: 100%;
    max-width: 100%;
    min-height: 80px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(112, 208, 232, 0.3);
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}

.reply-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
}

.reply-form-submit {
    padding: 8px 16px;
    background: rgba(112, 208, 232, 0.2);
    border: 1px solid rgba(112, 208, 232, 0.4);
    color: #70d0e8;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.reply-form-hint {
    font-size: 11px;
    opacity: 0.5;
    margin-left: auto;
}

/* ========================================
   ����� ��� �������� �������
   ======================================== */

.document-content {
    color: #e0e0e0;
}

.document-content p {
    margin: 0 0 15px 0;
    line-height: 1.8;
}

.document-content h1,
.document-content h2,
.document-content h3 {
    color: #ffd700;
    margin: 20px 0 12px 0;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.document-content h1 { font-size: 24px; }
.document-content h2 { font-size: 20px; }
.document-content h3 { font-size: 18px; }

.document-content ul,
.document-content ol {
    margin: 12px 0;
    padding-left: 25px;
}

.document-content li {
    margin: 8px 0;
    line-height: 1.6;
}

.document-content a {
    color: #50c850;
    text-decoration: none;
    border-bottom: 1px dotted #50c850;
}

.document-content a:hover {
    color: #70e870;
    border-bottom-style: solid;
}

.document-content strong {
    color: #fff;
    font-weight: 600;
}

.document-content blockquote {
    margin: 15px 0;
    padding: 12px 15px;
    border-left: 3px solid #ffd700;
    background: rgba(255, 215, 0, 0.05);
    font-style: italic;
}

.document-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 15px 0;
}

.document-content code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

/* === SERVER STATUS REALMS === */
.realm-header {
    transition: all 0.3s ease;
    user-select: none;
}

.realm-header:hover {
    opacity: 0.9;
}

.realm-header.collapsed::after {
    content: ' �';
    margin-left: 5px;
    font-size: 12px;
    opacity: 0.6;
}

.realm-content {
    transition: all 0.3s ease;
    overflow: hidden;
}

/* ============================================
   Security Logs Page Styles
   ============================================ */

.security-logs-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

/* ������� ������ */
.breadcrumbs {
    margin-bottom: 20px;
    padding: 10px 0;
    font-size: 14px;
    color: #b0b0b0;
}

.breadcrumbs a {
    color: #70d0e8;
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumbs a:hover {
    color: #fff;
}

.breadcrumbs .separator {
    margin: 0 8px;
    color: #666;
}

.breadcrumbs .current {
    color: #fff;
    font-weight: 600;
}

/* ��������� �������� */
.page-header {
    margin-bottom: 30px;
}

.page-header h1 {
    color: #70d0e8;
    font-size: 32px;
    margin-bottom: 10px;
    font-weight: 700;
}

.page-header .subtitle {
    color: #b0b0b0;
    font-size: 14px;
}

/* ������� ���������� */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.stat-widget {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s;
}

.stat-widget:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.stat-widget .stat-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.stat-widget .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}

.stat-widget .stat-label {
    font-size: 12px;
    color: #b0b0b0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-widget.widget-primary { border-left: 3px solid #70d0e8; }
.stat-widget.widget-success { border-left: 3px solid #43e97b; }
.stat-widget.widget-info { border-left: 3px solid #4facfe; }
.stat-widget.widget-danger { border-left: 3px solid #ff6b6b; }
.stat-widget.widget-warning { border-left: 3px solid #ff9800; }
.stat-widget.widget-purple { border-left: 3px solid #667eea; }
.stat-widget.widget-blue { border-left: 3px solid #70d0e8; }

.stat-widget.widget-export {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    cursor: pointer;
}

.stat-widget.widget-export:hover {
    opacity: 0.9;
}

.stat-widget .export-link {
    text-decoration: none;
    color: #fff;
    display: block;
}

/* ������ �������� */
.filters-panel {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
}

.filters-panel h3 {
    color: #70d0e8;
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 600;
}

.filters-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    color: #b0b0b0;
    font-size: 12px;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group input,
.filter-group select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: #70d0e8;
    background: rgba(0, 0, 0, 0.4);
}

.filter-group input::placeholder {
    color: #666;
}

.filter-actions {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-primary {
    background: linear-gradient(135deg, #70d0e8 0%, #4facfe 100%);
    color: #fff;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(112, 208, 232, 0.3);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ������� ����� */
.logs-table-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    margin-bottom: 30px;
}

.logs-table {
    width: 100%;
    border-collapse: collapse;
}

.logs-table thead {
    background: rgba(0, 0, 0, 0.3);
}

.logs-table th {
    color: #70d0e8;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 15px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logs-table tbody tr.log-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s;
}

.logs-table tbody tr.log-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.logs-table td {
    padding: 12px;
    font-size: 13px;
    color: #fff;
}

.logs-table .log-id {
    color: #b0b0b0;
    font-family: 'Courier New', monospace;
}

.logs-table .log-date {
    color: #b0b0b0;
    font-size: 12px;
}

.logs-table .log-admin {
    color: #70d0e8;
    font-weight: 600;
}

.logs-table .action-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.logs-table .log-target {
    color: #fff;
    font-weight: 500;
}

.logs-table .ip-badge {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #b0b0b0;
    cursor: help;
}

.logs-table .status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.logs-table .btn-details {
    background: rgba(112, 208, 232, 0.2);
    border: 1px solid #70d0e8;
    color: #70d0e8;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.logs-table .btn-details:hover {
    background: rgba(112, 208, 232, 0.3);
}

.logs-table .btn-details.active {
    background: #70d0e8;
    color: #1a1a2e;
}

.logs-table .no-results {
    text-align: center;
    padding: 40px;
    color: #b0b0b0;
    font-style: italic;
}

/* ������ ���� */
.details-row {
    background: rgba(0, 0, 0, 0.3);
}

.details-content {
    padding: 20px !important;
}

.details-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.detail-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 6px;
    border-left: 3px solid #70d0e8;
}

.detail-item strong {
    color: #70d0e8;
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-item code {
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 12px;
    border-radius: 4px;
    display: block;
    color: #43e97b;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    overflow-x: auto;
}

.detail-item pre {
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 12px;
    border-radius: 4px;
    color: #b0b0b0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.detail-item span {
    color: #fff;
    font-size: 13px;
}

/* ��������� */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
}

.pagination-info {
    color: #b0b0b0;
    font-size: 14px;
}

.pagination-links {
    display: flex;
    gap: 8px;
}

.page-link {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

.page-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #70d0e8;
    color: #70d0e8;
}

.page-link.active {
    background: #70d0e8;
    border-color: #70d0e8;
    color: #1a1a2e;
    font-weight: 600;
}

.page-ellipsis {
    padding: 8px 14px;
    color: #666;
    font-size: 14px;
}

/* ��������� ������� (���������) */
.page-navigation {
    display: flex;
    gap: 15px;
    justify-content: center;
    padding: 20px 0;
}

.page-nav-link {
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

.page-nav-link:hover {
    background: rgba(112, 208, 232, 0.2);
    border-color: #70d0e8;
    color: #70d0e8;
    transform: translateY(-2px);
}

/* ������������ */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    
    .filters-row {
        grid-template-columns: 1fr;
    }
    
    .logs-table {
        font-size: 12px;
    }
    
    .logs-table th,
    .logs-table td {
        padding: 8px 6px;
    }
    
    .pagination {
        flex-direction: column;
        gap: 15px;
    }
    
    .page-navigation {
        flex-direction: column;
    }
}

/* ================================================
   ����� ���������� ����� ��� LAYOUT ��� ������� ����
   ================================================ */

/* === �������� ��������� === */
.main-wrapper {
    width: 100%;
    background: #333333;
    padding: 0;
    margin: 0;
    /* min-height: calc(100vh - 200px); */
}

.content-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* === ���������� ����� === */

/* ����� 3 ������� */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* ����� 4 ������� */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ����� �������� (����-���������) */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* ����� ���/����������� */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

/* === ������������ ���������� === */

@media (max-width: 1400px) {
    .content-container {
        max-width: 100%;
        padding: 30px;
    }
}

@media (max-width: 1200px) {
    .content-container {
        padding: 25px;
    }
    
    /* ������ ����� �� ��������� */
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .content-container {
        padding: 15px;
    }
    
    /* �� ��������� - ���� ������� */
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
    }
    
    /* ���� �������� � 2 ������� */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .content-container {
        padding: 10px;
    }
    
    /* �� ����� ��������� ������� ���� ���� � 1 ������� */
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* === �������������� ������ BODY === */
body {
    max-width: none !important; /* ������� ������ ����������� 1190px */
}

/* ================================================
   �������������� ��������� (Header Navigation)
   
   �������� ��: ������� ���� ����� � ��������� � ����������
   ������������: ��� �������� (partials/navigation.html.php)
   
   �������� ������:
   - .main-navigation: ��������� ��������� (sticky)
   - .nav-logo: ������� Azeroth
   - .nav-menu: �������������� ����
   - .nav-link: ������ ����
   - .user-info: ���������� � ������������ (������, ���)
   - .hamburger-btn: ��������� ������ ����
   ================================================ */

/* === �������� ��������� === */
.main-navigation {
    background: transparent;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    transition: all 0.3s ease;
}

.nav-container {
    width: 1400px;
    max-width: 100%;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    background: linear-gradient(135deg, rgba(25, 25, 72, 0.95) 0%, rgba(0, 0, 51, 0.95) 100%);
    border: 2px solid #4a4a70;
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

/* ���������� ����� ��� ������� */
.main-navigation.scrolled .nav-container {
    height: 55px;
    padding: 0 30px;
    background: linear-gradient(135deg, rgba(25, 25, 72, 0.98) 0%, rgba(0, 0, 51, 0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.main-navigation.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* === ������� === */
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    flex-shrink: 0;
}

.nav-logo:hover {
    text-decoration: none !important;
}

.logo-name {
    font-family: 'Warcraft', sans-serif;
    font-size: 40px;
    font-weight: bold;
    color: #ffff33;
    text-shadow: 0 0 20px rgba(255, 255, 51, 0.2), 0 0 40px rgba(255, 255, 51, 0.2);
    letter-spacing: 0px;
    transition: all 0.3s ease;
    text-decoration: none !important;
    /* -webkit-text-stroke: 1px rgba(0, 0, 0, 0.5); */
}

/* ���������� ������� ��� ������� */
.main-navigation.scrolled .logo-name {
    font-size: 30px;
}

.nav-logo:hover .logo-name {
    text-shadow: 0 0 30px rgba(255, 255, 51, 1), 0 0 50px rgba(255, 255, 51, 0.7);
    transform: scale(1.05);
    text-decoration: none !important;
}

/* === ���� === */
.nav-menu {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.nav-link {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffd700;
    background: linear-gradient(135deg, rgba(25, 25, 72, 0.95) 0%, rgba(0, 0, 51, 0.95) 100%);
    border: 2px solid rgba(120, 140, 255, 0.7);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
}

.nav-link:hover,
.nav-link:focus,
.nav-link:active {
    text-decoration: none !important;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.nav-link:hover {
    background: linear-gradient(135deg, rgba(40, 40, 92, 0.98) 0%, rgba(15, 15, 71, 0.98) 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    color: #ffed4e;
}

.nav-link:hover::before {
    left: 100%;
}

.nav-link.active {
    background: linear-gradient(135deg, rgba(40, 40, 92, 0.98) 0%, rgba(15, 15, 71, 0.98) 100%);
    border-color: rgba(255, 215, 0, 0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    color: #ffed4e;
}

/* ��������� �������� (������ �� ��������) */
.mobile-only {
    display: none;
}

/* === ������������ === */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 10px;
}

.user-name {
    color: #ffd700;
    font-weight: 900;
    font-size: 16px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    letter-spacing: 0.5px;
}

.user-balance {
    color: #70d0e8;
    font-size: 14px;
    font-weight: 600;
}

/* === ������ ��������� === */
.btn-nav {
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-nav-primary {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    color: #000033;
    border: 2px solid #ffed4e;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.btn-nav-primary:hover {
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

.btn-nav-secondary {
    background: transparent;
    border: 2px solid #70d0e8;
    color: #70d0e8;
    box-shadow: 0 0 15px rgba(112, 208, 232, 0.3);
}

.btn-nav-secondary:hover {
    background: rgba(112, 208, 232, 0.2);
    border-color: #a0e0f8;
    color: #a0e0f8;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 0 25px rgba(112, 208, 232, 0.5);
}

/* === ��������� === */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #ffff33;
    border-radius: 2px;
    transition: 0.3s;
}

/* �������� ���������� � ������� */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

/* === OVERLAY === */
.nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

.nav-overlay.active {
    display: block;
}

/* ================================================
   �ר���� �������
   ================================================ */

.online-counter-section {
    background: transparent;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
}

.online-counter-container {
    max-width: 1400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.online-label {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #999999;
    margin: 0;
    text-transform: uppercase;
}

.online-number {
    font-size: 60px;
    font-weight: bold;
    color: #ffff33;
    line-height: 1;
    text-align: center;
    margin: 5px 0;
    text-shadow: 0 0 20px rgba(255, 255, 51, 0.2), 0 0 40px rgba(255, 255, 51, 0.2);
    letter-spacing: 0px;
    /* -webkit-text-stroke: 1px rgba(0, 0, 0, 0.5); */
}

@keyframes pulse-glow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(255, 255, 51, 0.5);
        transform: scale(1);
    }
    50% {
        text-shadow: 0 0 30px rgba(255, 255, 51, 0.8);
        transform: scale(1.05);
    }
}

/* ������ ������� �������� � ����� ���� */
.online-status-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffd700;
    background: linear-gradient(135deg, rgba(25, 25, 72, 0.95) 0%, rgba(0, 0, 51, 0.95) 100%);
    border: 2px solid rgba(120, 140, 255, 0.7);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.online-status-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.online-status-btn:hover {
    background: linear-gradient(135deg, rgba(40, 40, 92, 0.98) 0%, rgba(15, 15, 71, 0.98) 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    color: #ffed4e;
}

.online-status-btn:hover::before {
    left: 100%;
}

/* ================================================
   BETA NOTICE BANNER
   ================================================ */
.beta-notice-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, 
        rgba(255, 152, 0, 0.15) 0%, 
        rgba(255, 193, 7, 0.08) 100%);
    border: 2px solid #ff9800;
    border-left: 5px solid #ff9800;
    border-radius: 12px;
    padding: 20px 25px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(255, 152, 0, 0.2);
    transition: all 0.3s ease;
}

.beta-notice-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 152, 0, 0.1), 
        transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

.beta-notice-banner:hover {
    border-color: #ffb74d;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
    transform: translateY(-2px);
}

.beta-icon {
    font-size: 36px;
    line-height: 1;
    flex-shrink: 0;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.beta-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.beta-title {
    font-family: 'WarSans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffb74d;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.beta-description {
    color: #d0d0d0;
    font-size: 14px;
    line-height: 1.6;
}

.beta-description strong {
    color: #70d0e8;
    font-weight: 600;
}

.beta-link {
    color: #70d0e8;
    text-decoration: none;
    border-bottom: 1px dashed #70d0e8;
    transition: all 0.3s ease;
}

.beta-link:hover {
    color: #ffd700;
    border-bottom-color: #ffd700;
}

.beta-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.beta-badge {
    background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
    color: #000;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.4);
}

.beta-version {
    font-size: 13px;
    color: #999;
    font-family: 'Courier New', monospace;
}

/* Responsive Beta Notice */
@media (max-width: 768px) {
    .beta-notice-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 20px;
        gap: 15px;
    }
    
    .beta-icon {
        font-size: 32px;
    }
    
    .beta-title {
        font-size: 16px;
    }
    
    .beta-description {
        font-size: 13px;
    }
    
    .beta-status {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
}

/* ================================================
   3 �������� �������� ������
   ================================================ */

.quick-start-section {
    margin: 40px 0;
    padding: 0;
}

.quick-start-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* �������� */
.quick-start-card {
    background: linear-gradient(135deg, rgba(25, 25, 72, 0.95) 0%, rgba(0, 0, 51, 0.95) 100%);
    border: 2px solid #4a4a70;
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.quick-start-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: left 0.5s ease;
}

.quick-start-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 215, 0, 0.6);
}

.quick-start-card:hover::before {
    left: 100%;
}

/* ����������� �������� - ���������� */
.quick-start-card.card-featured {
    background: linear-gradient(135deg, rgba(40, 40, 92, 0.98) 0%, rgba(15, 15, 71, 0.98) 100%);
    border-color: #ffd700;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}

.quick-start-card.card-featured:hover {
    border-color: #ffed4e;
    box-shadow: 0 8px 35px rgba(255, 215, 0, 0.5);
}

/* Badge "�����������" */
.card-badge {
    position: absolute;
    top: 15px;
    right: -40px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #000;
    padding: 5px 50px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transform: rotate(45deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ������ */
.card-icon {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5));
}

/* ��� */
.card-step {
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* ��������� */
.card-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffd700;
    margin: 0 0 20px 0;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* ������ ��� */
.card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    text-align: left;
}

.card-features li {
    padding: 8px 0;
    color: #b0b0b0;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: color 0.2s ease;
}

.card-features li:last-child {
    border-bottom: none;
}

.quick-start-card:hover .card-features li {
    color: #e0e0e0;
}

/* ������ */
.card-button {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(135deg, rgba(25, 25, 72, 0.95) 0%, rgba(0, 0, 51, 0.95) 100%);
    border: 2px solid rgba(120, 140, 255, 0.7);
    border-radius: 12px;
    color: #ffd700;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.card-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.card-button:hover {
    background: linear-gradient(135deg, rgba(40, 40, 92, 0.98) 0%, rgba(15, 15, 71, 0.98) 100%);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    color: #ffed4e;
    border-color: rgba(255, 215, 0, 0.9);
}

.card-button:hover::before {
    left: 100%;
}

/* ������ ������ ��� ���������� �������� */
.card-featured .card-button {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #000;
    border-color: #ffd700;
}

.card-featured .card-button:hover {
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
    transform: scale(1.08);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.6);
}

/* ==================== NEWS SECTION ==================== */

.news-section {
    margin: 40px 0;
}

.news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #4a4a70;
}

.news-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.news-icon {
    filter: drop-shadow(0 0 8px rgba(112, 208, 232, 0.5));
}

.news-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin: 0;
}

.news-all-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #70d0e8;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
}

.news-all-link:hover {
    color: #ffd700;
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.news-card {
    background: linear-gradient(135deg, rgba(0, 26, 51, 0.8) 0%, rgba(0, 32, 64, 0.9) 100%);
    border: 2px solid #4a4a70;
    border-radius: 12px;
    padding: 0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.news-card:hover {
    transform: translateY(-5px);
    border-color: #70d0e8;
    box-shadow: 0 8px 25px rgba(112, 208, 232, 0.3);
}

.news-card:hover::before {
    left: 100%;
}

.news-card-image-link {
    display: block;
    overflow: hidden;
    position: relative;
}

.news-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

.news-card:hover .news-card-image {
    transform: scale(1.08);
}

.news-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 12px 18px;
}

.news-card-title-wrapper {
    flex: 1;
}

.news-card-title-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    display: block;
    transition: color 0.3s ease;
}

.news-card-title-link:hover {
    color: #70d0e8;
    text-shadow: 0 0 10px rgba(112, 208, 232, 0.5);
}

.news-card-category {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(112, 208, 232, 0.15);
    border: 1px solid rgba(112, 208, 232, 0.3);
    border-radius: 12px;
    font-size: 11px;
    color: #70d0e8;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-card-preview {
    color: #b0b0b0;
    font-size: 14px;
    line-height: 1.6;
    padding: 0 18px 15px 18px;
}

.news-card-footer {
    padding: 15px 18px 18px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}

.news-card-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #808080;
}

.news-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
}

.news-meta-item:hover {
    color: #b0b0b0;
}

.news-meta-likes {
    color: #50c850;
}

/* ==================================================
   SUPPORT & COMMUNITY SECTION
   ================================================== */
.support-community-section {
    margin: 40px 0 50px 0;
}

.support-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.support-card {
    background: linear-gradient(135deg, 
        rgba(0, 0, 51, 0.5) 0%, 
        rgba(74, 74, 112, 0.3) 100%);
    border: 2px solid #4a4a70;
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.support-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #70d0e8 0%, #4a9eff 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.support-card:hover::before {
    opacity: 1;
}

.support-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    border-color: #70d0e8;
}

.support-primary {
    border-color: #ff9800;
}

.support-primary::before {
    background: linear-gradient(90deg, #ff9800 0%, #ffb74d 100%);
}

.support-primary:hover {
    border-color: #ffb74d;
}

.support-telegram::before {
    background: linear-gradient(90deg, #0088cc 0%, #00aced 100%);
}

.support-telegram:hover {
    border-color: #0088cc;
}

.support-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

.support-icon img {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.3));
}

.telegram-big-icon {
    font-size: 48px;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(0, 136, 204, 0.5));
}

.support-title {
    font-family: 'WarSans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #ffd700;
    margin: 0 0 15px 0;
    letter-spacing: 0.5px;
}

.support-description {
    color: #d0d0d0;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.support-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.support-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    color: #d0d0d0;
    font-size: 14px;
    line-height: 1.6;
}

.support-list li:last-child {
    margin-bottom: 0;
}

.support-icon-text {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1.4;
}

.support-code {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.4);
    color: #70d0e8;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    border: 1px solid rgba(112, 208, 232, 0.3);
    border-radius: 4px;
}

.telegram-join-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #0088cc 0%, #00aced 100%);
    color: #ffffff;
    font-family: 'WarSans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid #0088cc;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.3);
}

.telegram-join-button:hover {
    background: linear-gradient(135deg, #00aced 0%, #0dcaf0 100%);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 136, 204, 0.5);
    border-color: #0dcaf0;
}

.telegram-button-icon {
    font-size: 20px;
    line-height: 1;
}

/* Responsive Support Section */
@media (max-width: 768px) {
    .support-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .support-card {
        padding: 25px 20px;
    }
    
    .support-title {
        font-size: 18px;
    }
    
    .support-description {
        font-size: 13px;
    }
    
    .support-list li {
        font-size: 13px;
    }
}

/* ==================================================
   FAQ SECTION
   ================================================== */
.faq-section {
    margin: 50px auto 60px auto;
    max-width: 1000px;
    padding: 0 20px;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: linear-gradient(135deg, 
        rgba(0, 0, 51, 0.4) 0%, 
        rgba(74, 74, 112, 0.2) 100%);
    border: 2px solid #4a4a70;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: #70d0e8;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(112, 208, 232, 0.15);
}

.faq-item.active {
    border-color: #ffd700;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.2);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 25px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: 'WarSans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: rgba(112, 208, 232, 0.05);
    color: #70d0e8;
}

.faq-item.active .faq-question {
    background: rgba(255, 215, 0, 0.05);
    color: #ffd700;
}

.faq-icon {
    flex-shrink: 0;
    font-size: 14px;
    color: #70d0e8;
    transition: transform 0.3s ease, color 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(90deg);
    color: #ffd700;
}

.faq-text {
    flex: 1;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 25px;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer {
    max-height: 1000px;
    padding: 0 25px 25px 25px;
}

.faq-answer p {
    margin: 0 0 12px 0;
    color: #d0d0d0;
    font-size: 14px;
    line-height: 1.7;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer strong {
    color: #ffd700;
    font-weight: 600;
}

.faq-steps {
    list-style: none;
    counter-reset: step-counter;
    padding: 0;
    margin: 15px 0 0 0;
}

.faq-steps li {
    counter-increment: step-counter;
    position: relative;
    padding-left: 45px;
    margin-bottom: 18px;
    color: #d0d0d0;
    font-size: 14px;
    line-height: 1.7;
}

.faq-steps li:last-child {
    margin-bottom: 0;
}

.faq-steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #000033;
    font-weight: bold;
    font-size: 14px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.faq-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.faq-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: #d0d0d0;
    font-size: 14px;
    line-height: 1.7;
}

.faq-list li:last-child {
    margin-bottom: 0;
}

.faq-list li::before {
    content: "�";
    position: absolute;
    left: 8px;
    color: #70d0e8;
    font-size: 18px;
    font-weight: bold;
}

.faq-link {
    color: #70d0e8;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px dashed #70d0e8;
    transition: all 0.3s ease;
}

.faq-link:hover {
    color: #ffd700;
    border-bottom-color: #ffd700;
}

.inline-code {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.4);
    color: #70d0e8;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    border: 1px solid rgba(112, 208, 232, 0.3);
    border-radius: 4px;
}

.faq-code-block {
    margin: 12px 0;
    padding: 15px 18px;
    background: rgba(0, 0, 0, 0.5);
    border-left: 3px solid #70d0e8;
    border-radius: 6px;
}

.faq-code-block code {
    display: block;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
}

/* Responsive FAQ */
@media (max-width: 768px) {
    .faq-section {
        margin: 30px auto 40px auto;
        padding: 0 15px;
    }
    
    .faq-question {
        padding: 15px 18px;
        font-size: 15px;
        gap: 12px;
    }
    
    .faq-answer {
        padding: 0 18px;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 18px 18px 18px;
    }
    
    .faq-steps li {
        padding-left: 40px;
        font-size: 13px;
    }
    
    .faq-list li {
        padding-left: 20px;
        font-size: 13px;
    }
}

.news-meta-dislikes {
    color: #ff6b6b;
}

/* ==================== ACTIVITY SECTION ==================== */

.activity-section {
    margin: 50px 0;
}

.activity-section .section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    margin: 0 0 35px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #4a4a70;
}

.activity-section .title-icon {
    font-size: 32px;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
}

.activity-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 25px;
}

.activity-category {
    background: linear-gradient(135deg, rgba(0, 26, 51, 0.85) 0%, rgba(0, 32, 64, 0.95) 100%);
    border: 2px solid #4a4a70;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.activity-category:hover {
    border-color: #70d0e8;
    box-shadow: 0 6px 25px rgba(112, 208, 232, 0.2);
}

.activity-category-featured {
    border-color: #ffd700;
}

.activity-category-featured:hover {
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.3);
}

.category-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #ffd700;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(74, 74, 112, 0.5);
}

.category-icon {
    font-size: 24px;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
}

.activity-list {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(74, 74, 112, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.activity-item:hover {
    background: rgba(0, 26, 51, 0.4);
    border-color: #70d0e8;
    transform: translateX(3px);
}

.activity-icon-link {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 6px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
}

.activity-icon-link:hover {
    border-color: #ffd700;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.activity-icon-placeholder {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 2px solid rgba(112, 208, 232, 0.3);
    font-family: 'Warcraft', serif;
    font-size: 20px;
    font-weight: 700;
    color: #70d0e8;
    background: rgba(0, 0, 0, 0.3);
}

.level-80-icon {
    background: linear-gradient(135deg, rgba(112, 208, 232, 0.1) 0%, rgba(70, 160, 200, 0.1) 100%);
}

.activity-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.activity-player {
    font-size: 14px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.activity-player strong {
    color: #ffffff;
    font-weight: 700;
}

.realm-badge {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(112, 208, 232, 0.15);
    border: 1px solid rgba(112, 208, 232, 0.3);
    border-radius: 4px;
    font-size: 10px;
    color: #70d0e8;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.activity-action {
    font-size: 13px;
    color: #c0c0c0;
    line-height: 1.5;
}

.activity-action a {
    color: #ffd700;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.activity-action a:hover {
    color: #ffed4e;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.activity-action .highlight {
    color: #ffd700;
    font-weight: 600;
}

.achievement-link,
.boss-link {
    color: #ffd700 !important;
}

.activity-time {
    font-size: 11px;
    color: #808080;
}

.bg-faction-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.3);
}

.bg-faction-icon.alliance {
    border: 2px solid rgba(0, 112, 221, 0.5);
    background: linear-gradient(135deg, rgba(0, 112, 221, 0.1) 0%, rgba(0, 70, 140, 0.1) 100%);
}

.bg-faction-icon.horde {
    border: 2px solid rgba(180, 0, 0, 0.5);
    background: linear-gradient(135deg, rgba(180, 0, 0, 0.1) 0%, rgba(140, 0, 0, 0.1) 100%);
}

.faction-alliance {
    color: #4a9eff !important;
}

.faction-horde {
    color: #ff4040 !important;
}

.bg-score {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 4px;
    color: #ffd700;
    font-weight: 700;
    font-size: 12px;
    margin-left: 6px;
}

.no-activity {
    text-align: center;
    padding: 30px 15px;
    color: #808080;
    font-size: 14px;
    margin: 0;
}

.activity-footer {
    text-align: center;
    padding: 20px;
    background: rgba(0, 26, 51, 0.3);
    border: 1px solid rgba(74, 74, 112, 0.5);
    border-radius: 10px;
}

.activity-note {
    margin: 0;
    font-size: 14px;
    color: #b0b0b0;
    line-height: 1.6;
}

/* ================================================
   ������������ ��������� � �ר�����
   ================================================ */

/* �������������� �����-������� ��� ��������� */
@media (max-width: 1200px) {
    .nav-container {
        padding: 0 30px;
    }
    
    .nav-menu {
        gap: 8px;
    }
    
    .nav-link {
        font-size: 12px;
        padding: 8px 14px;
    }
}

@media (max-width: 768px) {
    .nav-container {
        padding: 0 15px;
        height: 60px;
    }
    
    /* ������� ���������� */
    .logo-name {
        font-size: 20px;
    }
    
    .logo-version {
        font-size: 10px;
    }
    
    /* �������� desktop ���� � ���������� ��������� */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: #000033;
        flex-direction: column;
        padding: 80px 30px 30px;
        gap: 20px;
        transition: right 0.3s;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
        overflow-y: auto;
        align-items: stretch;
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    /* Quick-start ������������ */
    .quick-start-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-start-card {
        padding: 30px 20px;
    }
    
    .card-icon {
        font-size: 48px;
    }
    
    /* News ������������ */
    .news-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
    }
    
    .news-title {
        font-size: 20px;
    }
    
    /* Activity ������������ */
    .activity-categories {
        grid-template-columns: 1fr;
    }
    
    .activity-section .section-title {
        font-size: 22px;
    }
    
    .activity-section .title-icon {
        font-size: 26px;
    }
    
    .category-title {
        font-size: 16px;
        padding: 15px;
    }
    
    .activity-list {
        padding: 12px;
    }
    
    .nav-link {
        font-size: 14px;
        padding: 12px 16px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* ���������� ��������� �������� */
    .mobile-only {
        display: block;
    }
    
    .mobile-user-info {
        padding: 15px;
        background: rgba(51, 51, 102, 0.5);
        border-radius: 8px;
        margin-bottom: 10px;
    }
    
    .mobile-user-name {
        display: block;
        color: #ffff33;
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 5px;
    }
    
    .mobile-user-balance {
        display: block;
        color: #999999;
        font-size: 14px;
    }
    
    .nav-link-mobile {
        display: block;
        color: #ffff33;
        text-decoration: none;
        padding: 12px 0;
        font-size: 16px;
        border-bottom: 1px solid rgba(74, 122, 154, 0.3);
    }
    
    .btn-nav-mobile {
        display: block;
        text-align: center;
        padding: 12px;
        margin-top: 10px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
    }
    
    /* �������� desktop �������� */
    .nav-actions {
        display: none;
    }
    
    /* ���������� ��������� */
    .hamburger {
        display: flex;
    }
    
    /* ������� ������� - ���������� �� ��������� */
    .online-counter-section {
        padding: 20px 15px;
    }
    
    .online-label {
        font-size: 13px;
        letter-spacing: 1px;
    }
    
    .online-number {
        font-size: 48px;
    }
    
    .online-status-btn {
        font-size: 12px;
        padding: 8px 16px;
    }
    
    /* �������� �������� ������ - ���� ������� */
    .quick-start-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .quick-start-card {
        padding: 30px 20px;
    }
    
    .card-icon {
        font-size: 48px;
    }
    
    .card-title {
        font-size: 20px;
    }
}

@media (max-width: 400px) {
    .logo-text {
        display: none;
    }
    
    .online-number {
        font-size: 40px;
    }
    
    /* �������� ��� ����� ��������� */
    .quick-start-card {
        padding: 25px 15px;
    }
    
    .card-icon {
        font-size: 40px;
    }
    
    .card-title {
        font-size: 18px;
    }
    
    .card-features li {
        font-size: 13px;
        padding: 6px 0;
    }
    
    .card-button {
        padding: 10px 20px;
        font-size: 14px;
    }
}
/* ==================================================
   FOOTER CTA SECTION
   ================================================== */
.footer-cta-section {
    margin: 60px 0 40px 0;
    padding: 60px 30px;
    background: linear-gradient(135deg, rgba(0, 0, 51, 0.8) 0%, rgba(25, 25, 72, 0.9) 50%, rgba(0, 0, 51, 0.8) 100%);
    border: 2px solid #4a4a70;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.footer-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #ffd700 25%, #70d0e8 50%, #ffd700 75%, transparent 100%);
}

.footer-cta-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
    opacity: 0.5;
    animation: rotate-gradient 20s linear infinite;
}

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

.cta-container {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.cta-icon {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.cta-title {
    font-family: 'WarSans', sans-serif;
    font-size: 38px;
    font-weight: 700;
    color: #ffd700;
    margin: 0 0 15px 0;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.cta-subtitle {
    font-size: 18px;
    color: #d0d0d0;
    margin: 0 0 35px 0;
    line-height: 1.6;
}

.cta-subtitle .highlight {
    color: #70d0e8;
    font-weight: 700;
    font-size: 22px;
}

.cta-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.cta-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(112, 208, 232, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.cta-feature:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: #70d0e8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(112, 208, 232, 0.3);
}

.cta-feature-icon {
    font-size: 24px;
    line-height: 1;
}

.cta-feature-text {
    color: #e0e0e0;
    font-size: 14px;
    font-weight: 600;
}

.cta-buttons-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.cta-btn-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 40px;
    font-family: 'WarSans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    min-width: 280px;
}

.cta-btn-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.cta-btn-large:hover::before {
    left: 100%;
}

.cta-primary {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #000 !important;
    border: 3px solid #ffd700;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.3);
}

.cta-primary:hover {
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.6), 0 0 50px rgba(255, 215, 0, 0.5);
}

.cta-secondary {
    background: linear-gradient(135deg, rgba(25, 25, 72, 0.95) 0%, rgba(0, 0, 51, 0.95) 100%);
    color: #70d0e8 !important;
    border: 3px solid rgba(112, 208, 232, 0.7);
    box-shadow: 0 6px 20px rgba(112, 208, 232, 0.3);
}

.cta-secondary:hover {
    background: linear-gradient(135deg, rgba(40, 40, 92, 0.98) 0%, rgba(15, 15, 71, 0.98) 100%);
    color: #ffd700 !important;
    border-color: rgba(255, 215, 0, 0.9);
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 10px 30px rgba(112, 208, 232, 0.5);
}

.btn-icon {
    font-size: 24px;
    line-height: 1;
}

.btn-text {
    line-height: 1;
}

.cta-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: #999;
    margin-top: 20px;
}

.cta-note-icon {
    font-size: 18px;
    line-height: 1;
}

@media (max-width: 768px) {
    .footer-cta-section {
        padding: 40px 20px;
        margin: 40px 0 30px 0;
    }
    .cta-icon { font-size: 48px; }
    .cta-title { font-size: 28px; }
    .cta-subtitle { font-size: 16px; margin-bottom: 25px; }
    .cta-features { gap: 15px; }
    .cta-feature { padding: 8px 14px; }
    .cta-feature-icon { font-size: 20px; }
    .cta-feature-text { font-size: 13px; }
    .cta-buttons-group { flex-direction: column; gap: 15px; }
    .cta-btn-large { width: 100%; min-width: auto; padding: 16px 30px; font-size: 16px; }
    .btn-icon { font-size: 20px; }
    .cta-note { font-size: 13px; }
}

@media (max-width: 480px) {
    .cta-title { font-size: 24px; }
    .cta-subtitle { font-size: 14px; }
    .cta-features { flex-direction: column; gap: 10px; }
    .cta-feature { width: 100%; justify-content: center; }
}


/* ========================================
   ���� ���������� (Achievements)
   IMPORTED FROM: achievements-style.css
   
   �������� ��: ����������� ���������� �������
   ������������: ������� �������� (������ "��������� ����������")
   
   �������� ������:
   - .achievement-item: �������� ����������
   - .achievement-icon-link: ������ ���������� � WoWhead ��������
   - .realm-badge: ����� ������ (x1/x5)
   - .character-name: ��� ��������� � ������ ������
   ======================================== */

/* ========================================
   БЛОК ДОСТИЖЕНИЙ - УЛУЧШЕННЫЕ СТИЛИ
   ======================================== */

/* Основной контейнер достижения */
.achievement-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 20, 0.5);
    border-left: 3px solid #ffd700;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.achievement-item:hover {
    background: rgba(0, 0, 40, 0.7);
    border-left-color: #70d0e8;
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(112, 208, 232, 0.2);
}

/* Иконка достижения */
.achievement-icon-link {
    flex-shrink: 0;
    display: block;
    position: relative;
}

.achievement-icon-img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    border: 2px solid rgba(255, 215, 0, 0.5);
    display: block;
}

/* WoWhead иконки - только одна рамка */
.achievement-icon-link .iconsmall {
    display: inline-block !important;
    width: 48px !important;
    height: 48px !important;
    vertical-align: middle !important;
}

.achievement-icon-link .iconsmall ins {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 6px !important;
    border: 2px solid rgba(255, 215, 0, 0.5) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.achievement-icon-link .iconsmall del {
    display: none !important;
}

/* Детали достижения */
.activity-details {
    flex: 1;
    min-width: 0;
}

/* Информация об игроке */
.activity-player {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.character-name {
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0 0 10px currentColor;
}

.character-info {
    font-size: 12px;
    color: #999;
}

/* Бейджи реалмов */
.realm-badge {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.realm-badge-x5 {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
}

.realm-badge-x1 {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
}

/* Действие (текст достижения) */
.activity-action {
    font-size: 14px;
    color: #ccc;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.action-verb {
    color: #999;
    font-size: 13px;
}

.achievement-link {
    color: #70d0e8;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.achievement-link.achievement-name {
    font-size: 15px;
    line-height: 1.3;
}

.achievement-link:hover {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Время получения */
.activity-time {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    font-style: italic;
}

.activity-time::before {
    content: "🕐 ";
}

/* Адаптивность */
@media (max-width: 768px) {
    .achievement-item {
        padding: 10px;
        gap: 10px;
    }
    
    .achievement-icon-img,
    .achievement-icon-link .iconsmall,
    .achievement-icon-link .iconsmall ins {
        width: 40px !important;
        height: 40px !important;
    }
    
    .character-name {
        font-size: 14px;
    }
    
    .activity-action {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .achievement-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .achievement-icon-img,
    .achievement-icon-link .iconsmall,
    .achievement-icon-link .iconsmall ins {
        width: 36px !important;
        height: 36px !important;
    }
    
    .activity-player {
        gap: 6px;
    }
}

/* ========================================
    � 80 
   ======================================== */

.level80-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 20, 0.5);
    border-left: 3px solid #9d5cd0;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.level80-item:hover {
    background: rgba(0, 0, 40, 0.7);
    border-left-color: #d19fe8;
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(157, 92, 208, 0.2);
}

/* ����������� ��� level80 */
@media (max-width: 768px) {
    .level80-item {
        padding: 10px;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .level80-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================  � � ======================================== */

.guild-item { display: flex; align-items: center; gap: 15px; padding: 12px; background: rgba(0, 0, 20, 0.5); border-left: 3px solid #f39c12; border-radius: 8px; transition: all 0.3s ease; margin-bottom: 10px; }

.guild-item:hover { background: rgba(0, 0, 40, 0.7); border-left-color: #f1c40f; transform: translateX(5px); box-shadow: 0 4px 12px rgba(243, 156, 18, 0.2); }

.guild-rank { font-size: 24px; font-weight: 700; color: #f39c12; min-width: 40px; text-align: center; text-shadow: 0 0 10px rgba(243, 156, 18, 0.5); }

.guild-name { font-size: 16px; font-weight: 600; color: #f1c40f; text-shadow: 0 0 8px rgba(241, 196, 15, 0.3); }

.guild-members { font-size: 13px; color: #999; margin-left: 8px; }



/* ========================================
   �����-������ ������� (Reviews Admin)
   IMPORTED FROM: reviews-admin.css
   
   �������� ��: ��������� ������� ���������������
   ������������: /admin/reviews
   
   �������� ������:
   - .reviews-admin-page: ����� ���������
   - .review-card: �������� ������
   - .status-badge: ����� ������� (�� ���������/�������/��������)
   - .admin-actions: ������ �������� ������
   ======================================== */

/* public/css/reviews-admin.css */
/* Стили для административной панели отзывов */

/* === ОБЩИЕ СТИЛИ === */
.admin-page {
    padding: 30px 0;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.breadcrumbs {
    margin-bottom: 20px;
    font-size: 14px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
}

.breadcrumbs a {
    color: #60a5fa;
    text-decoration: none;
    transition: color 0.3s;
    white-space: nowrap;
}

.breadcrumbs a:hover {
    color: #93c5fd;
}

.breadcrumb-separator {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.3);
}

.breadcrumb-item {
    color: #9ca3af;
    display: inline;
    white-space: nowrap;
}

.breadcrumb-item.active {
    color: #fff;
    font-weight: 600;
}

/* === СПИСКИ ОТЗЫВОВ === */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-header h1 {
    margin: 0;
    font-size: 28px;
    color: #fff;
}

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

/* Карточки статистики */
.stats-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.stat-icon {
    font-size: 36px;
    line-height: 1;
}

.stat-content {
    flex: 1;
}

.stat-value {
    display: block;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
}

.stat-label {
    display: block;
    font-size: 14px;
    color: #9ca3af;
    margin-top: 5px;
}

/* Цветовые варианты карточек */
.stat-pending {
    border-left: 4px solid #fbbf24;
}

.stat-approved {
    border-left: 4px solid #10b981;
}

.stat-rejected {
    border-left: 4px solid #ef4444;
}

/* Панель фильтров */
.filters-panel {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
}

.filters-panel h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: #fff;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group label {
    font-size: 14px;
    color: #9ca3af;
    font-weight: 500;
}

.filter-group select {
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s;
}

.filter-group select:hover {
    border-color: rgba(96, 165, 250, 0.5);
}

.filter-group select:focus {
    outline: none;
    border-color: #60a5fa;
}

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

/* Таблица отзывов */
.reviews-table-wrapper {
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.reviews-table {
    width: 100%;
    border-collapse: collapse;
}

.reviews-table thead {
    background: rgba(0, 0, 0, 0.3);
}

.reviews-table th {
    padding: 15px;
    text-align: left;
    font-weight: 600;
    color: #9ca3af;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reviews-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s;
}

.reviews-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.reviews-table td {
    padding: 15px;
    color: #e5e7eb;
    font-size: 14px;
}

/* Специфичные колонки */
.td-id {
    font-weight: 600;
    color: #60a5fa;
}

.td-date {
    font-size: 13px;
}

.td-date small {
    display: block;
    color: #9ca3af;
    font-size: 11px;
}

.td-user {
    font-weight: 600;
}

.td-character small {
    display: block;
    color: #9ca3af;
    font-size: 12px;
}

.td-rating {
    white-space: nowrap;
}

.td-rating .rating-number {
    display: inline-block;
    margin-right: 5px;
    font-weight: 600;
}

.td-rating .rating-stars {
    font-size: 12px;
}

/* Бейджи */
.status-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.status-pending {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.status-badge.status-approved {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.status-rejected {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.realm-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.realm-badge.realm-x5 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.realm-badge.realm-x1 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
}

/* Статус наград */
.rewards-status {
    display: flex;
    gap: 10px;
    font-size: 18px;
}

.reward-icon {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.reward-icon.sent {
    opacity: 1;
}

.reward-icon.pending {
    opacity: 0.3;
}

/* Кнопки действий */
.td-actions {
    white-space: nowrap;
}

.action-btn {
    padding: 8px 12px;
    margin-right: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.action-btn.btn-view {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.3);
}

.action-btn.btn-approve {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.3);
}

.action-btn.btn-reject {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}

.action-btn.btn-delete {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.4);
}

/* Пагинация */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    padding: 20px;
}

.pagination-btn {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s;
}

.pagination-btn:hover:not(.disabled) {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.5);
}

.pagination-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pagination-info {
    color: #9ca3af;
    font-size: 14px;
}

/* === ДЕТАЛЬНЫЙ ПРОСМОТР === */
.review-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.status-section h1 {
    margin: 0;
    font-size: 28px;
    color: #fff;
}

.status-badge-large {
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
}

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

.detail-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
}

/* Информационные карточки */
.info-card {
    padding: 25px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

.info-card h2 {
    margin: 0 0 20px 0;
    font-size: 20px;
    color: #fff;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-label {
    font-size: 13px;
    color: #9ca3af;
    font-weight: 500;
}

.info-value {
    font-size: 15px;
    color: #fff;
    font-weight: 600;
}

/* Оценки детально */
.ratings-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.rating-row.rating-overall {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    font-size: 18px;
    padding: 15px;
}

.rating-label {
    flex: 0 0 150px;
    font-size: 14px;
    color: #9ca3af;
}

.rating-stars {
    flex: 1;
    font-size: 16px;
}

.rating-number {
    flex: 0 0 50px;
    text-align: right;
    font-weight: 600;
    color: #fff;
}

/* Текст отзыва */
.review-text-content {
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border-left: 4px solid #60a5fa;
    color: #e5e7eb;
    line-height: 1.8;
    font-size: 15px;
}

.text-stats {
    margin-top: 10px;
    font-size: 13px;
    color: #9ca3af;
}

/* Скриншоты */
.screenshots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.screenshot-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s;
}

.screenshot-thumb:hover {
    border-color: #60a5fa;
    transform: scale(1.05);
}

.screenshot-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.screenshot-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 12px;
    text-align: center;
}

/* Ответ администрации */
.admin-reply-box {
    padding: 20px;
    background: rgba(96, 165, 250, 0.1);
    border-radius: 10px;
    border-left: 4px solid #60a5fa;
}

.reply-meta {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 10px;
}

.reply-text {
    color: #e5e7eb;
    line-height: 1.6;
}

.reply-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-textarea {
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.3s;
}

.form-textarea:focus {
    outline: none;
    border-color: #60a5fa;
}

/* Сайдбар детального просмотра */
.detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-card {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-card h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #fff;
}

.rewards-card {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
}

.rewards-status-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.reward-item.sent {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.reward-item.pending {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.reward-icon {
    font-size: 24px;
}

.reward-label {
    flex: 1;
    font-size: 14px;
    color: #e5e7eb;
}

.reward-status {
    font-size: 13px;
    font-weight: 600;
}

/* Списки статистики */
.stats-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.stat-text {
    flex: 1;
    font-size: 14px;
    color: #9ca3af;
}

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

.timestamp-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.timestamp-label {
    font-size: 12px;
    color: #9ca3af;
}

.timestamp-value {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
}

.reject-reason-card {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.reject-reason-card p {
    color: #e5e7eb;
    line-height: 1.6;
    margin: 0;
}

.danger-card {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

/* === НАСТРОЙКИ === */
.settings-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 30px;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.settings-card {
    padding: 30px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-card h2 {
    margin: 0 0 25px 0;
    font-size: 20px;
    color: #fff;
}

.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #e5e7eb;
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    transition: border-color 0.3s;
}

.form-input:focus {
    outline: none;
    border-color: #60a5fa;
}

.form-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.help-text {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: #9ca3af;
}

/* Toggle switch */
.toggle-switch {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.toggle-switch input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 60px;
    height: 30px;
    background: rgba(239, 68, 68, 0.3);
    border-radius: 15px;
    transition: background-color 0.3s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
    background: rgba(16, 185, 129, 0.5);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider::before {
    transform: translateX(30px);
}

.toggle-label {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #e5e7eb;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* График тренда */
.trend-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trend-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trend-bar {
    flex: 1;
    height: 25px;
    background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%);
    border-radius: 5px;
    position: relative;
    min-width: 30px;
}

.trend-count {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #fff;
    font-weight: 600;
}

.trend-date {
    flex: 0 0 40px;
    font-size: 11px;
    color: #9ca3af;
}

/* Распределение рейтингов */
.rating-distribution {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rating-dist-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rating-dist-row .rating-stars {
    flex: 0 0 80px;
    font-size: 12px;
}

.rating-bar {
    flex: 1;
    height: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

.rating-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    transition: width 0.5s;
}

.rating-count {
    flex: 0 0 30px;
    text-align: right;
    font-size: 12px;
    color: #9ca3af;
}

.last-updated, .updated-by {
    margin: 0;
    font-size: 14px;
    color: #e5e7eb;
}

.updated-by {
    margin-top: 5px;
    font-size: 13px;
    color: #9ca3af;
}

.no-data {
    text-align: center;
    padding: 20px;
    color: #9ca3af;
    font-size: 14px;
}

/* Кнопки форм */
.form-actions {
    display: flex;
    gap: 15px;
    padding-top: 10px;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    color: #fff;
}

.btn-primary:hover {
    box-shadow: 0 5px 20px rgba(96, 165, 250, 0.4);
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
}

.btn-success:hover {
    box-shadow: 0 5px 20px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px);
}

.btn-warning {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #000;
}

.btn-warning:hover {
    box-shadow: 0 5px 20px rgba(251, 191, 36, 0.4);
    transform: translateY(-2px);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

.btn-danger:hover {
    box-shadow: 0 5px 20px rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
}

.btn-large {
    padding: 15px 30px;
    font-size: 16px;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* Алерты */
.alert {
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.alert-success {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Пустое состояние */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.empty-state-text {
    font-size: 18px;
    color: #9ca3af;
}

/* === АДАПТИВНОСТЬ === */
@media (max-width: 1200px) {
    .detail-layout,
    .settings-layout {
        grid-template-columns: 1fr;
    }
    
    .detail-sidebar,
    .settings-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .admin-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .stats-dashboard {
        grid-template-columns: 1fr;
    }
    
    .filters-grid {
        grid-template-columns: 1fr;
    }
    
    .review-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .reviews-table {
        font-size: 12px;
    }
    
    .reviews-table th,
    .reviews-table td {
        padding: 10px;
    }
}


/* ========================================
   ����� ���������� ������ (Reviews Form)
   IMPORTED FROM: reviews-form.css
   
   �������� ��: ����� ���������� ������ � �������
   ������������: /reviews/add
   
   �������� ������:
   - .review-form-container: ����� ��������� �����
   - .form-group: ������ ����� �����
   - .rating-stars: ������ ��������
   - .character-select: ����� ���������
   ======================================== */

/* public/css/reviews-form.css */
/* Стили для формы добавления отзыва */

.add-review-page {
    padding: 60px 0 100px;
}

.page-header {
    text-align: center;
    margin-bottom: 40px;
}

.page-header h1 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 10px;
}

.page-header .subtitle {
    font-size: 1.2rem;
    color: #a0aec0;
}

/* Баннер с наградами */
.rewards-info-banner {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    gap: 25px;
    align-items: center;
    margin-bottom: 30px;
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.3);
}

.rewards-icon {
    font-size: 4rem;
    flex-shrink: 0;
}

.rewards-content h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 15px;
}

.rewards-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rewards-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    color: #fff;
}

.reward-icon {
    font-size: 1.5rem;
}

/* Требования */
.requirements-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 40px;
}

.requirements-card h3 {
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 20px;
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.requirement-item {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.req-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.req-label {
    font-size: 0.85rem;
    color: #a0aec0;
    margin-bottom: 3px;
}

.req-value {
    font-size: 1rem;
    color: #fff;
    font-weight: 600;
}

/* Форма */
.review-form {
    position: relative;
}

.form-section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 35px;
    margin-bottom: 30px;
}

.form-section h2 {
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 10px;
}

.section-description {
    color: #a0aec0;
    margin-bottom: 25px;
}

/* Выбор персонажа */
.character-selection {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.character-card {
    position: relative;
    cursor: pointer;
}

.character-card input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.character-card-content {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.character-card:hover .character-card-content {
    background: rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
}

.character-card input[type="radio"]:checked ~ .character-card-content {
    background: rgba(251, 191, 36, 0.1);
    border-color: #fbbf24;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.character-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.character-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}

.character-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    margin-bottom: 5px;
}

.character-level,
.character-class {
    color: #a0aec0;
}

.character-playtime {
    font-size: 0.85rem;
    color: #6b7280;
}

.character-checkmark {
    margin-left: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.character-card input[type="radio"]:checked ~ .character-card-content .character-checkmark {
    opacity: 1;
}

.checkmark {
    color: #10b981;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Проверка требований */
.eligibility-result {
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
}

.eligibility-loading {
    text-align: center;
    color: #fbbf24;
    font-size: 1.1rem;
}

.eligibility-success {
    background: rgba(16, 185, 129, 0.1);
    border: 2px solid #10b981;
    color: #fff;
}

.eligibility-error {
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid #ef4444;
    color: #fff;
}

.eligibility-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.eligibility-errors {
    list-style: none;
    padding: 0;
}

.eligibility-errors li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.eligibility-errors li:last-child {
    border-bottom: none;
}

/* Звездные рейтинги */
.ratings-section {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.rating-category {
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.category-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}

.category-icon {
    font-size: 1.5rem;
}

.star-rating {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.star {
    font-size: 2.5rem;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.star:hover,
.star.active {
    color: #fbbf24;
    transform: scale(1.2);
}

.star.active {
    animation: starPulse 0.3s ease;
}

@keyframes starPulse {
    0%, 100% { transform: scale(1.2); }
    50% { transform: scale(1.4); }
}

.rating-description {
    font-size: 0.9rem;
    color: #a0aec0;
    font-style: italic;
}

/* Общий рейтинг */
.overall-rating {
    margin-top: 30px;
    padding: 25px;
    background: rgba(251, 191, 36, 0.1);
    border: 2px solid #fbbf24;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.overall-rating-label {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
}

.overall-rating-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: #fbbf24;
}

.overall-rating-stars {
    font-size: 2rem;
}

/* Текстовое поле */
.form-group {
    position: relative;
}

.form-textarea {
    width: 100%;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.form-textarea:focus {
    outline: none;
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

.character-counter {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.9rem;
    color: #a0aec0;
}

.char-status {
    font-weight: 600;
}

.char-status.valid {
    color: #10b981;
}

.char-status.invalid {
    color: #ef4444;
}

/* Загрузка скриншотов */
.screenshots-upload {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.upload-area {
    border: 3px dashed rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 60px 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-area:hover {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.05);
}

.upload-area.dragover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.upload-icon {
    font-size: 4rem;
    margin-bottom: 15px;
}

.upload-text {
    font-size: 1.1rem;
    color: #a0aec0;
}

.screenshots-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.screenshot-preview {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.screenshot-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.screenshot-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.screenshot-remove:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* Предпросмотр */
.review-preview-card {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    min-height: 200px;
}

.preview-placeholder {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 60px 20px;
}

/* Действия формы */
.form-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
}

.btn-large {
    padding: 18px 40px;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.btn-icon {
    font-size: 1.5rem;
}

/* Лоадер */
.form-loader {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loader-spinner {
    width: 80px;
    height: 80px;
    border: 6px solid rgba(255, 255, 255, 0.1);
    border-top-color: #fbbf24;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.loader-text {
    margin-top: 20px;
    font-size: 1.3rem;
    color: #fff;
    font-weight: 600;
}

/* Алерты */
.alert {
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 1rem;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 2px solid #f59e0b;
    color: #fbbf24;
}

/* Адаптивность */
@media (max-width: 992px) {
    .rewards-info-banner {
        flex-direction: column;
        text-align: center;
    }

    .requirements-grid {
        grid-template-columns: 1fr;
    }

    .character-selection {
        grid-template-columns: 1fr;
    }

    .overall-rating {
        flex-direction: column;
        gap: 15px;
    }

    .form-actions {
        flex-direction: column;
    }

    .btn-large {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .page-header h1 {
        font-size: 2rem;
    }

    .star {
        font-size: 2rem;
    }

    .overall-rating-value {
        font-size: 2rem;
    }
}


/* ========================================
   ������ ������� (Reviews List)
   IMPORTED FROM: reviews.css
   
   �������� ��: ����������� ������ �������
   ������������: /reviews
   
   �������� ������:
   - .reviews-page: ����� ��������� ��������
   - .review-card: �������� ������
   - .review-rating: ����������� �������� (������)
   - .campaign-banner: ������ ����� �� ������
   ======================================== */

/* public/css/reviews.css */
/* Стили для системы отзывов */

.reviews-page {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    min-height: 100vh;
    padding: 40px 0;
}

.reviews-header {
    margin-bottom: 40px;
}

.reviews-title-section {
    text-align: center;
    margin-bottom: 30px;
}

.reviews-title-section h1 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 10px;
}

.reviews-title-section .subtitle {
    font-size: 1.1rem;
    color: #a0aec0;
}

/* Карточки статистики */
.reviews-stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #fbbf24;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 0.9rem;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Баннер акции */
.campaign-banner {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 15px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
}

.banner-icon {
    font-size: 3rem;
}

.banner-content h3 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    color: #fff;
}

.banner-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

.banner-content strong {
    color: #fff;
    font-weight: 700;
}

.campaign-banner .btn {
    margin-left: auto;
    white-space: nowrap;
}

/* Лейаут: сайдбар + контент */
.reviews-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
}

@media (max-width: 992px) {
    .reviews-layout {
        grid-template-columns: 1fr;
    }
}

/* Сайдбар с фильтрами */
.reviews-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.filter-card,
.stats-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 25px;
}

.filter-card h3,
.stats-card h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: #fff;
}

.filter-group {
    margin-bottom: 20px;
}

.filter-group label {
    display: block;
    margin-bottom: 8px;
    color: #a0aec0;
    font-size: 0.9rem;
    font-weight: 600;
}

.form-control {
    width: 100%;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
}

.form-control:focus {
    outline: none;
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

/* Фильтр рейтинга */
.rating-filter {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rating-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.rating-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.rating-option input[type="radio"] {
    margin: 0;
}

.rating-option .stars {
    font-size: 1rem;
}

.rating-option .rating-text {
    color: #a0aec0;
    font-size: 0.9rem;
}

/* Статистика категорий */
.category-stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.category-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.category-name {
    color: #a0aec0;
    font-size: 0.9rem;
}

.category-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stars-small {
    font-size: 0.8rem;
}

.category-rating span {
    color: #fbbf24;
    font-weight: 600;
}

/* Карточка отзыва */
.review-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Заголовок отзыва */
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.reviewer-info {
    display: flex;
    gap: 15px;
}

.reviewer-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
}

.reviewer-details h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
    color: #fff;
}

.reviewer-meta {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.character-info {
    color: #a0aec0;
}

.character-info .level {
    color: #fbbf24;
}

.realm-badge {
    padding: 3px 10px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.8rem;
}

.realm-x5 {
    background: #3b82f6;
    color: #fff;
}

.realm-x1 {
    background: #8b5cf6;
    color: #fff;
}

.date {
    color: #6b7280;
}

/* Рейтинг */
.review-rating {
    text-align: center;
}

.rating-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #fbbf24;
    line-height: 1;
}

.rating-stars {
    font-size: 1.2rem;
}

/* Детальные оценки */
.review-ratings-detail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.rating-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #a0aec0;
}

/* Текст отзыва */
.review-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #e5e7eb;
    margin-bottom: 20px;
}

/* Скриншоты */
.review-screenshots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.screenshot-thumbnail {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    aspect-ratio: 16 / 9;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.screenshot-thumbnail:hover {
    transform: scale(1.05);
}

.screenshot-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ответ администрации */
.admin-reply {
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid #3b82f6;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.admin-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #3b82f6;
    color: #fff;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.9rem;
}

.reply-date {
    color: #6b7280;
    font-size: 0.85rem;
}

.admin-reply-text {
    color: #e5e7eb;
    line-height: 1.6;
}

/* Футер отзыва */
.review-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-helpful {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    color: #fbbf24;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-helpful:hover {
    background: rgba(251, 191, 36, 0.2);
    transform: translateY(-2px);
}

.views {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #6b7280;
    font-size: 0.9rem;
}

/* Пустое состояние */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
}

.empty-icon {
    font-size: 5rem;
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 10px;
}

.empty-state p {
    color: #a0aec0;
    margin-bottom: 30px;
}

/* Пагинация */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
}

.page-info {
    color: #a0aec0;
    font-weight: 600;
}

/* Кнопки */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(251, 191, 36, 0.3);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.btn-block {
    display: block;
    width: 100%;
}

/* Адаптивность */
@media (max-width: 768px) {
    .reviews-title-section h1 {
        font-size: 2rem;
    }

    .campaign-banner {
        flex-direction: column;
        text-align: center;
    }

    .campaign-banner .btn {
        margin-left: 0;
    }

    .review-header {
        flex-direction: column;
        gap: 15px;
    }

    .review-rating {
        align-self: flex-start;
    }

    .review-ratings-detail {
        grid-template-columns: 1fr;
    }

    .review-screenshots {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}


/* ========================================
   �������� ��������� (Support)
   IMPORTED FROM: support-style.css
   
   �������� ��: ����� ��������� � ���������
   ������������: /support
   
   �������� ������:
   - .support-status-banner: ������ ������� ���������
   - .spam-protection-info: ���������� � ������ �� �����
   - .support-form: ����� ���������
   - .message-category: ����� ��������� ���������
   ======================================== */

/* Support page styles */

/* Status Banner */
.support-status-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(77, 163, 255, 0.1), rgba(77, 163, 255, 0.05));
    border: 1px solid rgba(77, 163, 255, 0.2);
    border-radius: 8px;
    margin-bottom: 20px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-dot.status-online {
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80;
}

.status-dot.status-offline {
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-text {
    font-weight: 600;
    color: #d1d5db;
}

.status-response-time {
    color: #9ca3af;
    font-size: 14px;
}

/* Spam Protection Info */
.spam-protection-info {
    padding: 12px 16px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
    margin-bottom: 20px;
}

.protection-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #4ade80;
    font-size: 14px;
}

.shield-icon {
    font-size: 18px;
}

.protection-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 4px;
    font-size: 12px;
    color: #4ade80;
    cursor: help;
    transition: all 0.3s;
}

.badge:hover {
    background: rgba(34, 197, 94, 0.25);
    transform: translateY(-2px);
}

/* Form Enhancements */
.support-intro {
    margin-bottom: 20px;
}

.support-intro p {
    margin-bottom: 10px;
}

.support-tip {
    padding: 12px;
    background: rgba(255, 193, 7, 0.1);
    border-left: 3px solid #ffc107;
    border-radius: 4px;
    color: #ffc107 !important;
}

.support-form-card {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.input-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

.char-counter {
    float: right;
    font-size: 12px;
    color: #6b7280;
    font-weight: normal;
}

/* Captcha */
.captcha-group {
    background: rgba(255, 255, 255, 0.02);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.captcha-question-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(77, 163, 255, 0.1), rgba(77, 163, 255, 0.05));
    border: 2px solid rgba(77, 163, 255, 0.3);
    border-radius: 8px;
}

.captcha-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.captcha-question {
    flex: 1;
    font-size: 20px;
    font-weight: 700;
    color: #4da3ff;
    font-family: monospace;
    letter-spacing: 2px;
}

.captcha-refresh {
    padding: 8px 12px;
    background: rgba(77, 163, 255, 0.1);
    border: 1px solid rgba(77, 163, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.captcha-refresh:hover {
    background: rgba(77, 163, 255, 0.2);
    transform: rotate(180deg);
}

#captcha_text {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 2px;
}

/* File Upload */
.file-upload-area {
    position: relative;
    margin-bottom: 12px;
}

.file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed rgba(77, 163, 255, 0.3);
    border-radius: 8px;
    transition: all 0.3s;
    cursor: pointer;
}

.file-upload-area:hover .file-upload-label {
    background: rgba(77, 163, 255, 0.05);
    border-color: rgba(77, 163, 255, 0.5);
}

.upload-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.upload-text {
    font-size: 16px;
    color: #d1d5db;
    margin-bottom: 8px;
}

.upload-hint {
    font-size: 12px;
    color: #6b7280;
}

.file-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(77, 163, 255, 0.3);
    background: rgba(0, 0, 0, 0.3);
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.preview-remove:hover {
    background: #ef4444;
    transform: scale(1.1);
}

.preview-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px;
    background: rgba(0, 0, 0, 0.7);
    font-size: 10px;
    color: white;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Submit Button Enhanced */
.support-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #4da3ff 0%, #357abd 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(77, 163, 255, 0.3);
    width: 100%;
}

.support-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(77, 163, 255, 0.5);
    background: linear-gradient(135deg, #357abd 0%, #2563eb 100%);
}

.support-submit-btn:active {
    transform: translateY(0);
}

.support-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-icon {
    font-size: 20px;
}

.btn-text {
    flex: 1;
}

.btn-arrow {
    font-size: 20px;
    transition: transform 0.3s;
}

.support-submit-btn:hover .btn-arrow {
    transform: translateX(4px);
}

.submit-info {
    text-align: center;
    margin-top: 10px;
    color: #6b7280;
}

/* Messages */
.support-message {
    margin-bottom: 20px;
    animation: slideIn 0.3s ease-out;
}

.message-success {
    border-left: 3px solid #4ade80 !important;
    background: rgba(74, 222, 128, 0.1);
}

.message-error {
    border-left: 3px solid #ef4444 !important;
    background: rgba(239, 68, 68, 0.1);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Contact Cards */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.contact-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s;
}

.contact-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.contact-icon {
    font-size: 32px;
    line-height: 1;
}

.contact-info h4 {
    margin: 0 0 8px 0;
    color: #d1d5db;
    font-size: 16px;
}

.contact-info p {
    margin: 0 0 8px 0;
    color: #6b7280;
    font-size: 14px;
}

.contact-link {
    color: #4da3ff !important;
    text-decoration: none;
    font-weight: 500;
}

.contact-link:hover {
    text-decoration: underline;
}

.support-tips {
    margin-top: 20px;
    padding: 16px;
    background: rgba(77, 163, 255, 0.05);
    border-left: 3px solid #4da3ff;
    border-radius: 4px;
}

.tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #d1d5db;
}

.tips-icon {
    font-size: 20px;
}

.tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tips-list li {
    padding: 6px 0;
    color: #9ca3af;
}

/* FAQ */
.faq-search {
    margin-bottom: 20px;
}

.faq-search-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #d1d5db;
    font-size: 14px;
    transition: all 0.3s;
}

.faq-search-input:focus {
    outline: none;
    border-color: #4da3ff;
    background: rgba(255, 255, 255, 0.05);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
}

.faq-item:hover {
    border-color: rgba(77, 163, 255, 0.3);
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.05);
}

.faq-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.faq-text {
    flex: 1;
    font-weight: 600;
    color: #d1d5db;
}

.faq-toggle {
    color: #4da3ff;
    transition: transform 0.3s;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 16px;
}

.faq-item.active .faq-answer {
    max-height: 1000px;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.faq-answer p {
    margin: 0 0 12px 0;
    color: #9ca3af;
}

.faq-answer ul, .faq-answer ol {
    margin: 12px 0;
    padding-left: 24px;
    color: #9ca3af;
}

.faq-answer li {
    margin: 6px 0;
}

.faq-answer code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    color: #4da3ff;
    font-family: monospace;
    font-size: 13px;
}

.faq-footer {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.faq-footer p {
    color: #9ca3af;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .support-status-banner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .contact-cards {
        grid-template-columns: 1fr;
    }
    
    .status-info {
        text-align: center;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Shop Styles
   ============================================ */

/* Shop Navigation Grid */
.shop-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.shop-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    text-decoration: none;
    color: #ffff99;
    background: linear-gradient(135deg, rgba(25, 25, 72, 0.95) 0%, rgba(0, 0, 51, 0.95) 100%);
    border: 2px solid #4a4a70;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.shop-nav-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    transition: left 0.5s ease;
}

.shop-nav-card:hover {
    border-color: #6666aa;
    box-shadow: 0 5px 15px rgba(102, 102, 170, 0.5);
    transform: translateY(-3px);
}

.shop-nav-card:hover::before {
    left: 100%;
}

.shop-nav-card.active {
    border-color: #70d0e8;
    background: linear-gradient(135deg, rgba(112, 208, 232, 0.2) 0%, rgba(25, 25, 72, 0.95) 100%);
    box-shadow: 0 5px 15px rgba(112, 208, 232, 0.4);
}

.shop-nav-card.active span {
    color: #70d0e8;
}

.shop-nav-card img {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.shop-nav-card:hover img {
    transform: scale(1.1);
}

.shop-nav-card span {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Shop Categories */
.shop-categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shop-categories li {
    margin-bottom: 16px;
}

.shop-category-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    text-decoration: none;
    color: #ffff99;
    background: linear-gradient(135deg, #2a5a7a 0%, #1a3a5a 100%);
    border: 2px solid #4a7a9a;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.shop-category-toggle:hover {
    background: linear-gradient(135deg, #3a6a8a 0%, #2a4a6a 100%);
    border-color: #5a8aaa;
    box-shadow: 0 4px 12px rgba(90, 138, 170, 0.5);
    transform: translateY(-2px);
}

.shop-category-toggle img {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.shop-category-content {
    margin-top: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(15, 15, 40, 0.6) 0%, rgba(5, 5, 25, 0.6) 100%);
    border: 1px solid rgba(74, 74, 112, 0.5);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.shop-category-content.hidden {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .shop-nav-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .shop-nav-card {
        padding: 16px;
    }
    
    .shop-nav-card img {
        width: 40px;
        height: 40px;
    }
    
    .shop-nav-card span {
        font-size: 14px;
    }
}