@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .style {background: #F00;}
}

/* ===========================================================
   Современные кнопки + / − в редакторе натуральных статов.
   =========================================================== */
:root {
    --bg-header: #f0f0f0;
    --bg-header-hover: #e4e4e4;
    --bg-header-press: #d6d6d6;
    --text-on-header: #333;
    --border: #c4c4c4;
    --accent-tertiary: #5b9bd5;
    --text: #222;
    --text-muted: #777;
    --success: #2e7d32;
}

.stat-row {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 0;
}
.stat-row label,
.stat-row > span {
    font-size: 12px;
    color: var(--text);
    margin-left: 4px;
}

.stat-input {
    width: 38px;
    padding: 2px 4px;
    text-align: center;
    font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    border: 1px solid #d3d3d3;
    background: rgba(255,255,255,0.6);
    border-radius: 3px;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.stat-input::-webkit-outer-spin-button,
.stat-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stat-row:hover .stat-input,
.stat-row:focus-within .stat-input {
    background: rgba(255,255,255,0.85);
    border-color: var(--border);
    cursor: text;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.stat-input:focus {
    outline: none;
    border-color: var(--accent-tertiary);
    cursor: text;
}
.stat-row-readonly:hover .stat-input,
.stat-row-readonly:focus-within .stat-input {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.stat-btn {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 3px;
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.stat-btn .inner {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    font-family: Arial, sans-serif;
    border-radius: 7px;
    background: var(--bg-header);
    color: var(--text-on-header);
    border: 1px solid var(--border);
    transition: background 0.12s, transform 0.1s;
}
.stat-btn .inner:hover { background: var(--bg-header-hover); }
.stat-btn:hover:not(:disabled) .inner { background: var(--bg-header-press); transform: scale(1.15); }
.stat-btn:disabled .inner { opacity: 0.2; cursor: default; }

/* ===========================================================
   Полировка инфо-панели — без жёстких карточек, чтобы не было
   пустых белых полос между секциями.
   =========================================================== */
[id^="infopane"] {
    font-size: 12px;
    color: var(--text);
}

/* Не превращаем каждую tcontent в отдельную карточку — иначе появляются
   «пустые полосы» там, где данных в секции нет. Просто чуть отступ. */
[id^="infopane"] table.tcontent {
    margin: 2px 0;
}

/* Скрываем tcontent-таблицы, у которых внутри только пустые ячейки. */
[id^="infopane"] table.tcontent:empty { display: none; }

/* Жирные заголовки секций (Удар с помощью, Свойства, Дополнительно...) —
   акцентная полоса слева, без рамок и фонов. */
[id^="infopane"] table.tcontent td > b:not(:empty) {
    display: inline-block;
    padding-left: 6px;
    border-left: 3px solid var(--accent-tertiary);
    margin: 6px 0 2px;
    font-weight: 700;
}

/* Зебра-строки и ховер только если строка содержит реальные ячейки. */
[id^="infopane"] table.tcontent tr:hover td { background: rgba(91,155,213,0.08); }

/* Разделитель секций — приглушённый. */
[id^="infopane"] hr.dashed,
[id^="infopane"] hr {
    border: none;
    border-top: 1px dashed var(--border);
    margin: 4px 2px;
    height: 0;
}

/* Таблица брони (Голова/Корпус/...) — заметный заголовок. */
[id^="infopane"] table.tcontent th {
    background: var(--bg-header);
    color: var(--text-on-header);
    font-weight: 600;
    padding: 4px 6px;
}

/* Цвета — мягче. */
[id^="infopane"] font[color="darkgreen"] { color: var(--success) !important; }
[id^="infopane"] font[color="red"] { color: #c62828 !important; }

/* ----------------------------------------------------------
   Подсказки требований («Нажмите здесь...») — компактнее,
   мельче шрифт. Раньше блоки занимали по пол-экрана.
   ---------------------------------------------------------- */
[id^="infopane"] .hintview,
[id^="infopane"] .reqinfo,
[id^="infopane"] .reqinfo td,
[id^="infopane"] .hintview td {
    font-size: 10px !important;
    line-height: 1.3;
    padding: 3px 5px !important;
}
[id^="infopane"] table.reqinfo {
    border: 0;
    margin: 0;
}
[id^="infopane"] table.reqinfo td:first-child {
    width: 38%;
    color: var(--text);
    font-weight: 600;
}
[id^="infopane"] .hintview {
    background: #fff8e6;
    border: 1px solid #f0d27a;
    border-radius: 4px;
    margin: 2px 0;
    box-shadow: none !important;
}
/* Только сами цифры требований красные, заголовок и слова — обычные. */
[id^="infopane"] .hintview font[color="red"] {
    color: inherit !important;
}
[id^="infopane"] .hintview font[color="red"] b {
    color: #c62828;
}

/* Редактор натуральных статов — лёгкая зебра. */
[id^="editpane"] table.tcontent tr:hover td {
    background: rgba(91,155,213,0.08);
}

/* ----------------------------------------------------------
   Кастомный тултип для конечных значений статов — оформлен в
   том же стиле, что и тултипы предметов (#popupDiv): бежевый
   фон, тёмный текст, мягкая тень.
   ---------------------------------------------------------- */
.dr-stat-value:hover {
    background: rgba(91,155,213,0.10);
    border-radius: 3px;
}

/* Заголовок стат-тултипа («Сила») — выделяющийся, как caption у предмета. */
.dr-stat-tip-title {
    font-weight: 700;
    font-size: 12px;
    color: #111;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid #d8c79a;
}

.dr-stat-tip-rows {
    width: 100%;
    border-collapse: collapse;
}
.dr-stat-tip-rows td {
    padding: 2px 0;
    vertical-align: top;
    font-size: 11px;
    color: #333;
}
.dr-stat-tip-rows td:first-child {
    color: #666;
    padding-right: 12px;
    white-space: nowrap;
}
.dr-stat-tip-rows td:last-child {
    text-align: right;
    color: #111;
}
.dr-stat-tip-rows tr.dr-stat-tip-total td {
    border-top: 1px dashed #c8b89a;
    padding-top: 4px;
    color: #111;
    font-size: 12px;
}
.dr-stat-tip-rows tr.dr-stat-tip-total td:first-child {
    color: #666;
}

/* Scoped base styles: do not touch the shared site header/footer. */
main.dressroom-full-page {
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    text-align: left;
    background-image: url(/images/back_lib.png);
    background-repeat: repeat;
}
main.dressroom-full-page a { color: #0056A3; background: inherit; text-decoration: none; }
main.dressroom-full-page h1 { font: bold 120% Arial, sans-serif; color: #8a6000; }
main.dressroom-full-page h2 { font: bold 110% Arial, sans-serif; padding:0; margin:0; }

fieldset#logon {
    font: 9px TrebuchetMS,Arial,sans-serif;
    text-align: right;
    margin-right: 2px;
    padding-right: 2px;
}
fieldset#logon input {
    font: 9px TrebuchetMS,Arial,sans-serif;
    width: 120px;
    border: 1px inset #ccc;
}

/* =============================================
   DRESSROOM PAGE WRAPPER
   ============================================= */
main.dressroom-full-page {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
}

/* =============================================
   Спец. образ — фон рамки персонажа.
   Применяется к div#persWrap_<id> через JS.
   Внимание: НЕ используем overflow:hidden и position:relative — иначе они
   обрезают/контейнерят всплывающие подменю слотов (заточка, руны, эликсиры),
   которые позиционируются абсолютно от слотов экипа.
   Затемнение делаем через linear-gradient overlay прямо в background-image —
   без отдельного ::before и без position-trick'ов.
   ============================================= */
.pers-special-shadow {
    /* background задаётся через JS как: linear-gradient(...), url(...) */
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 0;
}

.dressroom-site {
    width: 100%;
    box-sizing: border-box;
}
.dressroom-site-body {
    width: 100%;
    box-sizing: border-box;
}
.dressroom-site-error {
    background: #fff3cd;
    border: 1px solid #e8a800;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 11px;
    color: #5a4000;
}

/* =============================================
   LOADING STATE
   ============================================= */
.dressroom-site-loading {
    padding: 20px 16px;
    font-size: 12px;
    color: #555;
    background: #e2e0e0;
    border: 1px dashed #aaaaaa;
    border-radius: 4px;
    margin: 8px 0;
    overflow: hidden;
}
.dressroom-site-loading img {
    float: right;
    margin-left: 10px;
}

/* =============================================
   NAVIGATION TABS — отполированный «папочный» вид
   в светло-бежевой палитре примерочной.
   ============================================= */
#dressroom-work-nav {
    background: #d7d7d7 !important;
    border: 0;
    border-bottom: 1px solid #9a9a9a;
    border-radius: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    box-shadow: none;
    height: 32px;
    line-height: 1;
}
#dressroom-work-nav ul#nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    align-items: flex-end;
    justify-content: flex-start;
    background: transparent !important;
    height: 32px;
    width: auto !important;
}
#dressroom-work-nav ul#nav li {
    list-style: none;
    padding: 0;
    margin: 0;
    float: none;
    position: relative;
    min-width: 0;
    width: auto !important;
    flex: 0 0 auto !important;
    text-align: center;
    background: transparent !important;
}
#dressroom-work-nav ul#nav li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: auto;
    min-height: 32px;
    height: 32px;
    padding: 8px 32px 7px 18px;
    font-size: 12px;
    font-family: Verdana, Arial, sans-serif;
    font-weight: normal;
    color: #333;
    text-decoration: none;
    background: #d7dbe0 !important;
    border: 1px solid #8f989f;
    border-left-color: #8f989f;
    border-bottom-color: #8f989f;
    border-radius: 0;
    white-space: nowrap;
    box-sizing: border-box;
    position: relative;
    top: 0;
    transition: none;
    text-shadow: none;
}
#dressroom-work-nav ul#nav li a:hover {
    background: #e4e7ea !important;
    color: #000;
    box-shadow: none;
}
#dressroom-work-nav ul#nav li.activeLink a,
#dressroom-work-nav ul#nav li.activeLink a:hover {
    background: #ffffff !important;
    background-image: none;
    color: #14315e !important;
    border: 1px solid #5a7d00 !important;
    border-top: 3px solid #8ab404 !important;
    border-bottom: 1px solid #ffffff !important;
    font-weight: 700;
    padding: 6px 32px 7px 18px;
    min-height: 32px;
    height: 32px;
    margin: 0 0 -1px;
    z-index: 3;
    box-shadow: 0 2px 0 0 #ffffff, 0 -1px 4px rgba(0,0,0,0.08);
    text-shadow: none;
}
/* Подсветка названия активной кабинки. */
#dressroom-work-nav ul#nav li.activeLink a > nobr {
    color: #14315e;
}
/* Спец-табы (Новая кабинка / Сводная / Опыта) — без места под крестик. */
#dressroom-work-nav ul#nav li#tabx_newcab a,
#dressroom-work-nav ul#nav li#tabx_summary a,
#dressroom-work-nav ul#nav li#tabx_exptable a,
#dressroom-work-nav ul#nav li#tabx_znahar a {
    padding: 8px 18px 7px 18px;
}
/* «Новая кабинка» / «Сводная таблица» / «Таблица опыта» / «Комната Знахаря»
   — служебные/спец-табы, тонко подкрашенные оливковым. */
#dressroom-work-nav ul#nav li#tabx_newcab a,
#dressroom-work-nav ul#nav li#tabx_summary a,
#dressroom-work-nav ul#nav li#tabx_exptable a,
#dressroom-work-nav ul#nav li#tabx_znahar a {
    color: #333;
    background: #d7dbe0 !important;
    border-color: #8f989f;
    font-weight: normal;
}
#dressroom-work-nav ul#nav li#tabx_newcab a:hover,
#dressroom-work-nav ul#nav li#tabx_summary a:hover,
#dressroom-work-nav ul#nav li#tabx_exptable a:hover,
#dressroom-work-nav ul#nav li#tabx_znahar a:hover {
    background: #e4e7ea !important;
    color: #000;
}

.dressroom-exp-table-frame-wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    background: rgba(226, 224, 224, 0.72);
    border: 1px solid #8f989f;
}
.dressroom-exp-table-frame {
    display: block;
    width: 100%;
    height: 76vh;
    min-height: 560px;
    border: 0;
    background: transparent;
}

/* Крестик закрытия кабинки. */
#dressroom-work-nav ul#nav li .dr-cab-close,
#dressroom-work-nav ul#nav li.activeLink .dr-cab-close,
#dressroom-work-nav ul#nav li .dr-cab-close:hover,
#dressroom-work-nav ul#nav li.activeLink .dr-cab-close:hover {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 1 !important;
    padding: 0 !important;
    border: 1px solid #b08a3a !important;
    font-size: 13px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border-radius: 3px !important;
    transition: background 0.1s, color 0.1s, border-color 0.1s !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    z-index: 5 !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
#dressroom-work-nav ul#nav li .dr-cab-close,
#dressroom-work-nav ul#nav li.activeLink .dr-cab-close {
    background: #f1e6b6 !important;
    color: #5a3a00 !important;
    border-color: #b08a3a !important;
}
#dressroom-work-nav ul#nav li .dr-cab-close:hover,
#dressroom-work-nav ul#nav li.activeLink .dr-cab-close:hover {
    background: #ffd9d9 !important;
    color: #c62828 !important;
    border-color: #c62828 !important;
}

/* =============================================
   ACTIONS BAR — узкая бежевая полоска меню действий.
   ============================================= */
#dressroom-actions {
    background: #f4eddc;
    border-left: 1px solid #c7bd9e;
    border-right: 1px solid #c7bd9e;
    border-bottom: 1px solid #c7bd9e;
    padding: 4px 12px;
    font-size: 11px;
    min-height: 0;
    line-height: 1.55;
    color: #3a3325;
}
/* Если в полоске нет ссылок — полностью схлопываем её, чтобы не было пустого отступа под табами. */
#dressroom-actions:empty {
    display: none;
    padding: 0;
    border: 0;
    min-height: 0;
    height: 0;
}
#dressroom-actions a {
    color: #2a4a85;
    text-decoration: none;
    padding: 2px 7px;
    border-radius: 3px;
    transition: background 0.1s, color 0.1s;
    display: inline-block;
    margin: 0 1px;
}
#dressroom-actions a:hover {
    background: #e3d9b8;
    color: #14315e;
    text-decoration: none;
}
/* Красные ссылки (Звери, Рабочий) сохраняют акцент. */
#dressroom-actions font[color="red"] {
    color: #b13a1f !important;
    font-weight: 600;
}
#dressroom-actions a font[color="red"] {
    color: inherit !important;
}
#dressroom-actions a:hover font[color="red"] {
    color: #7d1e0a !important;
}

/* =============================================
   MAIN WORK PANEL
   ============================================= */
#right {
    float: none;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin: 0;
    background: #e2e0e0;
    border: 1px solid #999999;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    text-align: left;
    position: relative;
    font-size: 11px;
    line-height: 1.3;
}

#right table,
#right td,
#right th {
    font-size: inherit;
}
#separator { display: none; }
#left { display: none; }

/* =============================================
   CONTENT WRAPPER
   ============================================= */
#content {
    font: 11px Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background: #e2e0e0;
}



/* =============================================
   INNER TABS  (ul.dtab)
   ============================================= */
div.dtab { width:100%; overflow:hidden; margin-bottom: 4px; }

main.dressroom-full-page ul.dtab,
main.dressroom-full-page ul.dtab li { list-style-type:none; margin:0; padding:0; }
main.dressroom-full-page ul.dtab {
    font-size: 11px;
    border-bottom: 2px solid #cbd5e1;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
main.dressroom-full-page ul.dtab li { float: none; margin: 0; }
main.dressroom-full-page ul.dtab a {
    display: block;
    padding: 5px 12px;
    background: #f1f5f9;
    text-decoration: none;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    font-size: 11px;
    font-weight: 500;
    transition: background-color .12s, color .12s;
}
main.dressroom-full-page ul.dtab a:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}
main.dressroom-full-page ul.dtab li.activeLink a,
main.dressroom-full-page ul.dtab li.activeLink a:hover {
    background: #fff;
    color: #0f172a;
    border-color: #cbd5e1;
    font-weight: 700;
}

main.dressroom-full-page ul { padding: 0; margin: 0; }
main.dressroom-full-page li { list-style-type: none; padding-bottom: 2px; }

hr.dashed { border: 1px dashed #cccccc; height: 1px; }

main.dressroom-full-page A.TLink { COLOR: #333333; TEXT-DECORATION: underline; }
main.dressroom-full-page A.TLink:visited { COLOR: #333333; TEXT-DECORATION: underline; }
main.dressroom-full-page A.TLink:hover { COLOR: #555555; TEXT-DECORATION: underline; }

.td_heading { padding: 3px 3px 3px 10px; color: #999; border-bottom: 1px dashed #ccc; }
.td_text { padding: 10px; }
.tab-on  { border: 1px solid #ccc; border-bottom: none; width: 120px; cursor: default; color: #000; padding: 2px; background: #fff; }
.tab-off { border: 1px solid #ccc; width: 120px; cursor: pointer; color: #666; padding: 2px; background: #f6f6f6; }
.tab-none { border-bottom: 1px solid #ccc; padding: 2px; }
.tab-content { padding: 5px; border: 1px solid #ccc; text-align: left; width: 100%; }
.td-bottom { padding: 6px 8px; background-color: rgba(255, 248, 238, 0.96); border-top: 1px solid #ddd; }
.show-table { display: block; }
.hide-table { display: none; }

.tcontent { font-size: 11px; width: 100%; }
.reqinfo  { font-size: 10px; }

.savefav  { behavior: url(#default#savefavorite); }
.userdata { behavior: url(#default#userdata); }

.hintview {
    font-size: 9px;
    color: #111;
    border: 1px solid #c8b89a;
    padding: 4px 6px;
    background: rgba(255, 248, 238, 0.96);
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

td.ABLink2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #e2e0e0;
    color: #222;
    padding: 3px 6px;
    cursor: pointer;
    white-space: nowrap;
}
td.ABLinkH2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #c8c4c0;
    color: #000;
    border: 1px solid #999;
    padding: 2px 5px;
    cursor: pointer;
    white-space: nowrap;
}
main.dressroom-full-page a.ABLink,
main.dressroom-full-page a.ABLink:visited,
main.dressroom-full-page a.ABLink:active,
main.dressroom-full-page a.ABLink:link {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #222;
    padding: 2px;
    cursor: pointer;
    text-decoration: none;
}
main.dressroom-full-page a.ABLink:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #b0c878;
    color: #111;
    border: 1px solid #8ab404;
    padding: 1px;
    cursor: pointer;
    text-decoration: none;
}
div.ABLink {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: white;
    color: black;
    padding: 2px;
    cursor: pointer;
    text-align: center;
    width: 90%;
}
div.ABLinkH {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: cornflowerblue;
    color: black;
    border: 1px solid blue;
    padding: 1px;
    cursor: pointer;
    text-align: center;
    width: 90%;
}

.tdr {
    background-color: #ffffff;
    color: #000000;
    font-size: 11px;
    font-family: Arial;
    cursor: default;
    text-align: center;
    vertical-align: text-top;
}
.tdr_hov {
    background-color: #e2e0e0;
    color: #000000;
    font-size: 11px;
    font-family: Arial;
    cursor: default;
    text-align: center;
    border: 1px dotted black;
    vertical-align: text-top;
}

/* =============================================
   INFO TABLE
   ============================================= */
table.info {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    border: 1px solid #555;
    border-collapse: collapse;
}
table.info th {
    background: linear-gradient(to bottom, #3a3a3a 0%, #222 100%);
    color: #e8f090;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
    padding: 3px 6px;
    border: 1px solid #555;
    font-size: 10px;
}
table.info th.infoseparator {
    background: #2e2e2e;
    color: #888;
    font-weight: normal;
    text-align: center;
    vertical-align: top;
    font-size: 8px;
    padding: 1px 4px;
    border: 1px solid #444;
}
table.info th.infoleftth {
    background: #2e2e2e;
    color: #ccc;
    font-weight: normal;
    text-align: right;
    vertical-align: top;
    padding: 2px 6px;
    border: 1px solid #444;
}
table.info td {
    background-color: #e2e0e0;
    color: #222;
    font-weight: normal;
    text-align: center;
    vertical-align: top;
    border: 1px solid #ccc;
    padding: 2px 5px;
}
table.info td.infolighttd {
    background-color: #cccccc;
    color: #222;
    font-weight: normal;
    text-align: center;
    vertical-align: top;
    border: 1px solid #ccc;
    padding: 2px 5px;
}
table.info tr:hover td,
table.info tr:hover td.infolighttd {
    background-color: #c0c0c0;
}

main.dressroom-full-page a.ISLink,
main.dressroom-full-page a.ISLink:visited { color: black; text-decoration: underline; }

/* =============================================
   SPRITE MENU ICONS
   ============================================= */
main.dressroom-full-page a.petmenu,
main.dressroom-full-page a.petmenu:visited {
    background: transparent url(/i/items/cat4.gif) no-repeat 0 0;
    display: block; height: 51px; width: 80px;
}
main.dressroom-full-page a.petmenu:hover { background-position: 0 -51px; }

main.dressroom-full-page a.elixmenu,
main.dressroom-full-page a.elixmenu:visited {
    background: transparent url(/i/items/bottle4.gif) no-repeat 0 0;
    display: block; height: 51px; width: 80px;
}
main.dressroom-full-page a.elixmenu:hover { background-position: 0 -51px; }

/* Продукты (waddMenu) — иконка-спрайт /i/items/wadd4.gif (80×102: верх — normal, низ — hover) */
main.dressroom-full-page a.waddmenu,
main.dressroom-full-page a.waddmenu:visited {
    background: transparent url(/i/items/wadd4.gif) no-repeat 0 0;
    display: block; height: 51px; width: 80px;
}
main.dressroom-full-page a.waddmenu:hover { background-position: 0 -51px; }

main.dressroom-full-page a.spellmenu,
main.dressroom-full-page a.spellmenu:visited {
    background: transparent url(/i/items/hands4.gif) no-repeat 0 0;
    display: block; height: 51px; width: 80px;
}
main.dressroom-full-page a.spellmenu:hover { background-position: 0 -51px; }

main.dressroom-full-page a.dropitems,
main.dressroom-full-page a.dropitems:visited {
    background: transparent url(/i/items/nude4.gif) no-repeat 0 0;
    display: block; height: 51px; width: 80px;
}
main.dressroom-full-page a.dropitems:hover { background-position: 0 -51px; }

main.dressroom-full-page a.dressset,
main.dressroom-full-page a.dressset:visited {
    background: transparent url(/i/items/armored4.gif) no-repeat 0 0;
    display: block; height: 51px; width: 80px;
}
main.dressroom-full-page a.dressset:hover { background-position: 0 -51px; }

/* =============================================
   FORM INPUTS
   ============================================= */
input.ABTextR {
    border: 1px solid #b0c4de;
    font-size: 12px;
    text-align: right;
    cursor: text;
}
input.ABText80 {
    width: 80%;
    border: 1px solid #b0c4de;
    font-size: 14px;
    cursor: text;
}
input.ABTextAA {
    border: none;
    font-size: 12px;
    width: 22px;
    height: 16px;
}

table.tabZ tr td { font-size: 13px; }

/* =============================================
   INFO BADGE (i-в-квадратике рядом с ником)
   Копия стилей с therebk.com (.online_list a.inf)
   ============================================= */
a.inf,
main.dressroom-full-page a.inf {
    color: #fff;
    background: #369;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    line-height: 12px;
    font-size: 11px;
    text-align: center;
    font-weight: bold;
    vertical-align: top;
    margin-top: 2px;
    margin-left: 4px;
    font-family: Georgia, "Times New Roman", serif;
    text-decoration: none;
}
a.inf:hover,
main.dressroom-full-page a.inf:hover {
    background: #25517d;
    color: #fff;
    text-decoration: none;
}

/* =============================================
   BUTTONS
   ============================================= */
.inpButton {
    border: 1px solid #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    height: 24px;
    padding: 0 12px;
    background: #ffffff;
    color: #1f2937;
    border-radius: 4px;
    cursor: pointer;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    box-shadow: 0 1px 0 rgba(15,23,42,.04);
    transition: background-color .12s, border-color .12s, color .12s;
}
.inpButton:hover {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border-color: #94a3b8;
    color: #0f172a;
}
.inpButton:active {
    box-shadow: inset 0 1px 2px rgba(15,23,42,.12);
}

span.magic_caption { color: rgb(128, 0, 0); }

/* =============================================
   CHARACTER IMAGE LAYERS
   ============================================= */
div .persimage_container {
    position: relative;
    width: 120px;
    height: 220px;
}
div .persimage_layer {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
div .buffs   { z-index: 2; }
div .visible { visibility: visible; }
div .hidden  { visibility: hidden; }
div .pet { height: 100%; z-index: 1; }
div .pet > img { position: absolute; bottom: 0; right: 0; }

.dr-special-layout {
    /* Точная копия структуры обычной раскладки:
         <td 320 valign=top>{топ-слоты + рамка-с-рубахой + приёмы}</td>
         <td 80  valign=bottom>{shortcuts 80×51}</td>
       Так шорткаты живут в ОТДЕЛЬНОЙ внешней колонке, не растягивают
       строку с рамкой персонажа и не давят на размеры. Координаты
       рубахи (x=240) и шорткатов (x=320) совпадают со стандартом. */
    width: 400px;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
    padding: 0;
    border-spacing: 0;
    line-height: 0;
    font-size: 0;
}

.dr-special-layout tr,
.dr-special-layout td {
    margin: 0;
    padding: 0;
}

.dr-special-col-content { width: 320px; }
.dr-special-col-tools   { width: 80px; }

.dr-special-content-cell {
    width: 320px;
    padding: 0;
    margin: 0;
    vertical-align: top;
    line-height: 0;
    font-size: 0;
}

/* Ник персонажа сверху — копирует <td align="center" style="font-size:12px">
   из стандартной раскладки. Высота этой строки (~14-16px) важна, потому что
   shortcuts-колонка справа стоит valign=bottom и любой пропуск контента слева
   приводит к её сдвигу вверх. */
.dr-special-nick {
    text-align: center;
    font-size: 12px;
    line-height: normal;
    width: 320px;
    padding: 0;
    margin: 0;
}

/* Внутренняя строка «рамка + рубаха» — как 3-я строка в стандартной
   inner-table персонажа: рамка (240) + рубаха (60) = 300, плюс 20px
   пустоты справа в пределах content-cell (320). */
.dr-special-pers-row {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}
.dr-special-pers-row tr,
.dr-special-pers-row td {
    margin: 0;
    padding: 0;
}

.dr-special-top-cell {
    width: 240px;
    height: 50px;
    padding: 0;
    margin: 0;
    line-height: 0;
    font-size: 0;
}

.dr-special-main-cell {
    width: 240px;
    padding: 0;
    margin: 0;
    line-height: 0;
    vertical-align: top;
    font-size: 0;
}

.dr-special-meters {
    position: relative;
    top: 0;
    left: 0;
    z-index: 7;
}

.dr-game-pers {
    /* Спец-образ занимает ту же рабочую высоту, что слоты слева/справа:
       60 + 40 + 60 + 80 + 40 = 280px. Большая высота давала пустой зазор
       между рамкой персонажа и нижними слотами приёмов. */
    width: 240px;
    height: 280px;
    overflow: visible;
    cursor: pointer;
    position: relative;
}

.dr-special-image-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 240px;
    height: 280px;
    z-index: 4;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 240px 280px;
    background-position: 0 0;
}

.dr-game-left-col,
.dr-game-middle-col,
.dr-game-right-col {
    float: left;
}

.dr-game-left-col,
.dr-game-right-col {
    width: 60px;
}

.dr-game-middle-col {
    width: 120px;
    height: 280px;
}

.dr-game-left-col table,
.dr-game-left-col tr,
.dr-game-left-col td,
.dr-game-right-col table,
.dr-game-right-col tr,
.dr-game-right-col td,
.dr-game-ring-row table,
.dr-game-ring-row tr,
.dr-game-ring-row td {
    margin: 0;
    padding: 0;
    border-spacing: 0;
    line-height: 0;
    font-size: 0;
}

.dr-game-left-col img,
.dr-game-right-col img,
.dr-game-ring-row img {
    display: block;
    vertical-align: bottom;
}

.dr-slot-cell:hover,
.dr-special-slot:hover {
    z-index: 8;
    overflow: visible !important;
}

.dr-slot-cell:hover::after,
.dr-special-slot:hover::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow: 0 0 0 1px rgba(67,197,255,0.75), 0 0 8px rgba(67,197,255,0.95);
}

.dr-game-pers:hover::after {
    content: "";
    position: absolute;
    left: 60px;
    top: 0;
    width: 120px;
    height: 280px;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 7;
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: inset 0 0 12px rgba(67,197,255,0.55), 0 0 10px rgba(67,197,255,0.95);
}

.dr-game-effects,
.dr-game-user-shadow {
    width: 120px;
}

.dr-game-user-shadow {
    height: 250px;
}

.clear {
    clear: both;
}

.dr-special-side-slots,
.dr-special-shortcuts {
    box-sizing: border-box;
    padding-left: 0;
}

.dr-special-side-slots {
    width: 60px;
    padding: 0;
    margin: 0;
    /* В обычной раскладке side-slots-td имеет valign="bottom" — копируем,
       чтобы рубаха/венок/плащ стояли на той же высоте при переключении
       на спец-образ и не «прыгали» вверх. */
    vertical-align: bottom;
    line-height: 0;
    font-size: 0;
}

.dr-special-shortcuts {
    width: 80px;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    line-height: 0;
    font-size: 0;
}

.dr-special-top-slots {
    position: relative;
    width: 240px;
    height: 0;
    pointer-events: auto;
}

.dr-special-top-slots .dr-special-slot {
    opacity: 0.72;
}

.dr-special-slot {
    position: absolute;
    opacity: 0.62;
    background: rgba(255,255,255,0.22);
}

.dr-special-side-slots,
.dr-special-shortcuts,
.dr-special-tricks-cell {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dr-special-side-slots > table,
.dr-special-side-slots tr,
.dr-special-side-slots td {
    margin: 0;
    padding: 0;
    border-spacing: 0;
    line-height: 0;
    font-size: 0;
}

.dr-special-side-slots td img,
.dr-special-shortcuts img {
    display: block;
    vertical-align: bottom;
}

.dr-special-shortcuts a {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}

/* Шорткаты в спец-раскладке — НЕ компрессируем (оставляем нативные
   80×51 кнопки). Колонка вынесена во внешний td valign=bottom, не
   распирает строку с рамкой и не давит на размеры — точно как в
   стандартной раскладке. */
.dr-special-shortcuts hr.dashed {
    margin: 2px 0;
    padding: 0;
    border: none;
    border-top: 1px dashed #aaa;
    height: 0;
    line-height: 0;
}

.dr-special-slot:hover {
    opacity: 1;
}

.dr-special-slot img {
    display: block;
}

.dr-special-slot.slot-w100 { left: 0; top: 0; }
.dr-special-slot.slot-w101 { left: 40px; top: 0; }
.dr-special-slot.slot-w102 { left: 80px; top: 0; }
.dr-special-slot.slot-w103 { left: 120px; top: 0; }
.dr-special-slot.slot-w104 { left: 160px; top: 0; }
.dr-special-slot.slot-wbook { left: 200px; top: 0; }
.dr-special-slot.slot-w105 { left: 0; top: 25px; }
.dr-special-slot.slot-w106 { left: 40px; top: 25px; }
.dr-special-slot.slot-w107 { left: 80px; top: 25px; }
.dr-special-slot.slot-w108 { left: 120px; top: 25px; }
.dr-special-slot.slot-w109 { left: 160px; top: 25px; }
.dr-special-slot.slot-w9 { left: 0; top: 56px; }
.dr-special-slot.slot-w13 { left: 0; top: 116px; }
.dr-special-slot.slot-w3 { left: 0; top: 156px; }
.dr-special-slot.slot-w4 { left: 0; top: 216px; }
.dr-special-slot.slot-w5 { left: 60px; top: 240px; }
.dr-special-slot.slot-w1 { right: 0; top: 0; }
.dr-special-slot.slot-w2 { right: 0; top: 20px; }
.dr-special-slot.slot-w6 { right: 40px; top: 40px; }
.dr-special-slot.slot-w7 { right: 20px; top: 40px; }
.dr-special-slot.slot-w8 { right: 0; top: 40px; }
.dr-special-slot.slot-w11 { right: 0; top: 60px; }
.dr-special-slot.slot-w10 { right: 0; top: 100px; }
.dr-special-slot.slot-w19 { right: 0; top: 160px; }
.dr-special-slot.slot-w12 { right: 0; top: 240px; }
.dr-special-slot.slot-w14 { left: 60px; top: 241px; }
.dr-special-slot.slot-w15 { left: 140px; top: 241px; }
.dr-special-top-slots table,
.dr-special-top-slots tr,
.dr-special-top-slots td {
    margin: 0;
    padding: 0;
}

.dr-special-tricks-cell {
    padding: 0;
    margin: 0;
    line-height: 0;
    vertical-align: top;
    font-size: 0;
}

.dr-special-tricks {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
}

.dr-special-tricks tr,
.dr-special-tricks td {
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}

.dr-special-tricks td img {
    display: block;
    vertical-align: bottom;
}

/* =============================================
   HP/MANA BARS
   ============================================= */
.hpmp-anchor {
    display: block;
    width: 120px;
    overflow: hidden;
    box-sizing: border-box;
}
.hpmp-bar {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 120px;
    box-sizing: border-box;
    font-size: 0;
    line-height: 0;
}
.hpmp-bar__row {
    position: relative;
    width: 120px;
    height: 10px;
    line-height: 0;
    font-size: 0;
}
.hpmp-bar__track {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    overflow: hidden;
}
.hpmp-bar__fill {
    height: 100%;
    width: 0;
    transition: width 0.1s linear;
}
.hpmp-bar__fill--hp                                        { background: #2ea832; }
.hpmp-bar__row--hp[data-state="warning"] .hpmp-bar__fill--hp { background: #c8a820; }
.hpmp-bar__row--hp[data-state="danger"]  .hpmp-bar__fill--hp { background: #c82020; }
.hpmp-bar__fill--mana { background: #2050c8; }
.hpmp-bar__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
    font-family: Verdana, Arial, sans-serif;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 0 2px rgba(0,0,0,0.9);
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

.hp_none{} .hp_1{} .hp_2{} .hp_3{} .hp_mp{} .seehp{} .senohp{} .seemp{} .hpborder{}

/* =============================================
   TOOLTIP  (#popupDiv + inner content)
   Classic Windows infotip style
   ============================================= */
#popupDiv {
    position: absolute !important;
    background: #fff8ee !important;
    color: #111111 !important;
    border: 1px solid #888888 !important;
    border-radius: 4px !important;
    font-family: Verdana, Arial, sans-serif !important;
    font-size: 11px !important;
    line-height: 1.28 !important;
    padding: 3px 6px 4px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18) !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: min(320px, calc(100vw - 40px)) !important;
    min-width: 190px !important;
    z-index: 9999 !important;
}

#popupDiv .dr-elix-popup {
    font-family: Verdana, Arial, sans-serif !important;
    font-size: 11px !important;
    line-height: 1.28 !important;
    color: #111111 !important;
    max-width: 310px;
}

#popupDiv .dr-elix-title {
    font-weight: 700;
    margin: 0 0 1px;
}

#popupDiv .dr-elix-addinfo {
    margin-top: 4px;
    color: #555555;
    font-style: italic;
}

#popupDiv .dr-elix-desc {
    margin-top: 2px;
    color: #333333;
    font-style: italic;
}

#popupDiv .dr-elix-flag {
    margin-top: 2px;
}

#popupDiv .dr-elix-legend {
    margin-top: 4px;
    color: #475569;
}

/* Уровневая плашка комплекта (плашка остаётся — она нужна для отображения уровня) */
.dr-set-level {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 5px;
    background: #f1f5f9;
    color: #1f2937;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
}

/* =============================================
   МЕНЮ «ВСЕ БОЕВЫЕ КОМПЛЕКТЫ» — модалка
   ============================================= */
/* Перехватываем позиционирование menuDiv: превращаем его в fullscreen
   флекс-контейнер с подложкой, чтобы саму панель можно было центрировать
   и при этом отодвигать от верхнего меню сайта. */
#menuDiv.dr-menu-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 140px 16px 24px !important; /* отступ сверху, чтобы не лезть под верхнюю навигацию сайта */
    border: none !important;
    background: rgba(15, 23, 42, 0.5) !important;
    box-shadow: none !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    z-index: 10000;
}

@media (max-width: 900px) {
    #menuDiv.dr-menu-modal {
        padding-top: 90px !important;
    }
}

.dr-sets-modal {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .25);
    overflow: hidden;
    width: 100%;
    max-width: min(95vw, 760px);
    max-height: calc(100vh - 170px);
    display: flex;
    flex-direction: column;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    color: #1f2937;
}

.dr-sets-modal-head {
    background: #ffffff;
    color: #0f172a;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dr-sets-modal-counter {
    background: #f1f5f9;
    color: #1f2937;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
    min-width: 22px;
    text-align: center;
    font-weight: 600;
}

.dr-sets-modal-body {
    padding: 12px 14px;
    overflow: auto;
    background: #ffffff;
}

.dr-sets-modal-foot {
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 10px 14px;
    text-align: center;
}
.dr-sets-modal-close {
    display: inline-block;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color .12s, border-color .12s, color .12s;
}
.dr-sets-modal-close:hover {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #0f172a;
    border-color: #94a3b8;
}

/* =============================================
   Сохранение комплекта
   ============================================= */
.dr-save-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 16px 24px;
    background: rgba(20, 14, 4, 0.52);
    box-sizing: border-box;
}
.dr-save-modal {
    width: min(430px, 94vw);
    max-height: min(420px, 88vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .25);
    font: 12px Tahoma, Verdana, Arial, sans-serif;
}
.dr-save-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    color: #0f172a;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}
.dr-save-modal-head span {
    display: block;
    font-size: 14px;
    font-weight: 700;
}
.dr-save-modal-head small {
    display: none;
}
.dr-save-modal-x {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    color: #475569;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font: bold 18px/22px Arial, sans-serif;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}
.dr-save-modal-x:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}
.dr-save-modal-body {
    padding: 12px 14px;
    overflow: auto;
    background: #ffffff;
}
.dr-save-state {
    display: block;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
}
.dr-save-state b {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
    color: #0f172a;
}
.dr-save-state span {
    color: #475569;
    text-align: left;
}
.dr-save-state-loading {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.dr-save-state-ready {
    border-color: #d8b87a;
    background: #fffaf0;
}
.dr-save-state-success {
    border-color: #86efac;
    background: #f0fdf4;
}
.dr-save-state-success b { color: #14532d; }
.dr-save-state-error {
    border-color: #fecaca;
    background: #fef2f2;
}
.dr-save-state-error b { color: #991b1b; }
.dr-save-label {
    display: block;
    margin: 0 0 5px;
    color: #475569;
    font-weight: 700;
}
.dr-save-result {
    margin-top: 10px;
}
#drSaveSetUrl {
    width: 100%;
    box-sizing: border-box;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 8px 10px;
    font: 12px Tahoma, Verdana, Arial, sans-serif;
}
#drSaveSetUrl:focus {
    outline: none;
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .18);
}
.dr-save-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}
.dr-save-btn {
    min-height: 30px;
    padding: 5px 14px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font: 600 12px Tahoma, Verdana, Arial, sans-serif;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}
.dr-save-btn:hover {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border-color: #94a3b8;
    color: #0f172a;
}
.dr-save-btn-secondary {
    color: #475569;
    background: #ffffff;
    border-color: #cbd5e1;
}
.dr-save-btn-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

/* Группы комплектов внутри модалки */
.dr-sets-group {
    margin-bottom: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
}
.dr-sets-group:last-child { margin-bottom: 0; }
.dr-sets-group-head {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #1f2937;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid #cbd5e1;
}
.dr-sets-group-body {
    background: #ffffff;
}

/* Строка одного комплекта */
.dr-set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: #1f2937;
    cursor: pointer;
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.12s;
}
.dr-set-row:last-child { border-bottom: none; }
.dr-set-row:hover {
    background: #f8fafc;
}
.dr-set-row-disabled {
    color: #94a3b8;
    cursor: not-allowed;
    background: #f1f5f9;
}
.dr-set-row-disabled:hover {
    background: #f1f5f9;
}
.dr-set-row-caption {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dr-set-row-meta {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    align-items: center;
}
.dr-set-row-level {
    display: inline-block;
    background: #f1f5f9;
    color: #1f2937;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 7px;
    letter-spacing: 0.02em;
}
.dr-set-row-level-any {
    background: #f8fafc;
    color: #64748b;
    border-color: #cbd5e1;
}
.dr-set-row-count {
    display: inline-block;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 7px;
    letter-spacing: 0.02em;
}
.dr-set-row-count-ok {
    background: #f0fdf4;
    color: #14532d;
    border: 1px solid #86efac;
}
.dr-set-row-count-low {
    background: #fffbeb;
    color: #78350f;
    border: 1px solid #fcd34d;
}
.dr-set-row-count-empty {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.dr-sets-empty {
    padding: 24px 12px;
    text-align: center;
    color: #94a3b8;
    font-size: 11px;
    font-style: italic;
}

/* Меню «Все боевые комплекты» — старый табличный вариант больше не используется */
.dr-sets-menu {
    background: transparent;
}

.dr-sets-menu .dr-sets-col {
    padding: 0 4px;
}

.dr-sets-menu-col-head {
    padding: 6px 8px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1f2937;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    margin: 4px 0 6px;
    text-align: center;
}

.dr-sets-menu td {
    vertical-align: top;
}

/* Подкрашивание уровневых плашек прямо в строках меню */
.dr-sets-menu .dr-set-level {
    background: #f1f5f9;
    color: #1f2937;
    border-color: #cbd5e1;
    font-size: 9px;
    padding: 0 5px;
}

/* item name */
#popupDiv b {
    color: #000000 !important;
    font-size: 11px !important;
    display: inline !important;
    margin: 0 !important;
}

/* italic / secondary text */
#popupDiv i {
    color: #333333 !important;
    font-style: italic !important;
    font-size: 10px !important;
}

/* magic item caption */
#popupDiv .magic_caption { color: #cc2200 !important; }

/* dashed separator inside tooltip */
#popupDiv hr.dashed {
    border: none !important;
    border-top: 1px dashed #aaaaaa !important;
    margin: 3px 0 !important;
}

/* ── Loading bar ─────────────────────────────────────────── */
.dressroom-site-loading {
    padding: 28px 20px;
    text-align: center;
}
.dr-loader-bar {
    width: 80%;
    max-width: 320px;
    height: 6px;
    background: #2a2e1e;
    border-radius: 3px;
    margin: 0 auto 10px;
    overflow: hidden;
}
.dr-loader-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6a9000, #8ab404);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.dr-loader-text {
    font-size: 11px;
    color: #7a8a60;
    letter-spacing: 0.03em;
}

/* ── Trick/skill slot rows — remove baseline gap ── */
#dressCabs table[border="0"][cellspacing="0"][cellpadding="0"] td img {
    display: block;
    vertical-align: bottom;
    line-height: 0;
    font-size: 0;
}

/* ============================================
   Меню действий примерочной (.bk-dr-menu)
   В одной палитре с вкладками «Расчётные данные / Урон / Показатели»
   Скоупит ABLink2 / ABLinkH2 только внутри блока
   ============================================ */
.bk-dr-menu {
    margin: 8px 0 12px;
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.bk-dr-menu-row {
    width: auto;
    margin: 0;
}

/* пункт меню — компактная «таблетка» */
.bk-dr-menu td.ABLink2,
.bk-dr-menu td.ABLinkH2 {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1px;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 5px 11px;
    margin: 0 1px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(15,23,42,.04);
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

/* hover — слейт-голубой, как у эликсиров */
.bk-dr-menu td.ABLinkH2 {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #0f172a;
    border-color: #94a3b8;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.6),
        0 1px 3px rgba(15,23,42,.08);
}

/* активное нажатие */
.bk-dr-menu td.ABLinkH2:active,
.bk-dr-menu td.ABLink2:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}

/* разделитель между кнопками — тонкая точка вместо "|" */
.bk-dr-menu td.ABLink2:not([id]) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 5px !important;
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
    cursor: default !important;
    position: relative;
}
.bk-dr-menu td.ABLink2:not([id])::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #cbd5e1;
    vertical-align: middle;
}

/* перекрашиваем кричащие <font color="red"> внутри меток */
.bk-dr-menu td.ABLink2 font[color="red"],
.bk-dr-menu td.ABLinkH2 font[color="red"] {
    color: #c2410c !important;
    margin-right: 2px;
}
.bk-dr-menu td.ABLink2 font[color="#003300"],
.bk-dr-menu td.ABLinkH2 font[color="#003300"] {
    color: inherit !important;
}

/* убираем подчёркивания у любых <a> внутри */
.bk-dr-menu a, .bk-dr-menu a:hover, .bk-dr-menu a:visited {
    color: inherit;
    text-decoration: none;
}

/* тонкая полоска прокрутки для меню (если не помещается) */
.bk-dr-menu::-webkit-scrollbar { height: 6px; }
.bk-dr-menu::-webkit-scrollbar-track { background: transparent; }
.bk-dr-menu::-webkit-scrollbar-thumb {
    background: #c8b988;
    border-radius: 3px;
}

/* =============================================================
   Единый дизайн всплывающих меню примерочной — «как у эликсиров»
   Натягивает палитру #fff / #f1f5f9 / #cbd5e1 / #1f2937 на
   #menuDiv и #pmenuDiv, чтобы все меню (onPersMenu, onSpellMenu,
   onWAddMenu, onPetMenu, onSharpeningMenu и т.д.) выглядели
   одинаково, без правок самих функций.
   ============================================================= */
#menuDiv,
#pmenuDiv {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    padding: 8px 10px 10px !important;
    font: 12px Tahoma, Verdana, Arial, sans-serif !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08) !important;
}

/* Внутренние таблицы меню — без рамок и спейсингов */
#menuDiv table,
#pmenuDiv table {
    border-collapse: collapse;
    border-spacing: 0;
}
#menuDiv td,
#pmenuDiv td {
    padding: 0;
}

/* Пункт меню — одинаковая геометрия у .ABLink и .ABLinkH (JS на hover
   меняет класс; разные padding/border давали мерцание из-за прыжков размера). */
#menuDiv div.ABLink,
#menuDiv div.ABLinkH,
#pmenuDiv div.ABLink,
#pmenuDiv div.ABLinkH {
    width: auto;
    margin: 2px 0;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: left;
    font: 12px Tahoma, Verdana, Arial, sans-serif;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .12s, border-color .12s, color .12s;
}
/* Покой — белый */
#menuDiv div.ABLink,
#pmenuDiv div.ABLink {
    background: #ffffff;
    color: #1f2937;
}
/* Hover: либо CSS :hover, либо JS-класс ABLinkH */
#menuDiv div.ABLink:hover,
#pmenuDiv div.ABLink:hover,
#menuDiv div.ABLinkH,
#pmenuDiv div.ABLinkH {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #0f172a;
    border-color: #cbd5e1;
}

/* Разделитель строк */
#menuDiv hr.dashed,
#pmenuDiv hr.dashed,
#menuDiv hr,
#pmenuDiv hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 6px 2px;
    height: 0;
}

/* Кнопка «Закрыть меню» (последний ABLink в таблице) — нормальная кнопка.
   Селекторы покрывают и .ABLink, и .ABLinkH, чтобы JS-смена класса
   на hover не сбрасывала геометрию (иначе кнопка мигала). */
#menuDiv tr:last-child td,
#pmenuDiv tr:last-child td {
    padding-top: 8px !important;
    text-align: center !important;
    border-top: 1px solid #e2e8f0;
}
#menuDiv tr:last-child div.ABLink,
#menuDiv tr:last-child div.ABLinkH,
#pmenuDiv tr:last-child div.ABLink,
#pmenuDiv tr:last-child div.ABLinkH {
    display: inline-block;
    width: auto;
    min-width: 120px;
    padding: 7px 22px;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    margin: 4px auto 0;
    box-shadow: 0 1px 2px rgba(15,23,42,.08);
    box-sizing: border-box;
    transition: background-color .12s, border-color .12s, color .12s;
}
/* Покой кнопки */
#menuDiv tr:last-child div.ABLink,
#pmenuDiv tr:last-child div.ABLink {
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    color: #1f2937;
}
/* Hover: либо CSS :hover, либо JS-класс ABLinkH */
#menuDiv tr:last-child div.ABLink:hover,
#pmenuDiv tr:last-child div.ABLink:hover,
#menuDiv tr:last-child div.ABLinkH,
#pmenuDiv tr:last-child div.ABLinkH {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    color: #0f172a;
    border-color: #64748b;
}

/* Любые <img> в меню — выровнены по тексту */
#menuDiv div.ABLink img,
#pmenuDiv div.ABLink img {
    vertical-align: middle;
    margin-right: 4px;
}

/* «Сеточные» меню эликсиров уже имеют свой inline-дизайн —
   их inline-стили перебивают наш CSS, и менять их не нужно. */