:root {
    color-scheme: dark;

    --bg: #131311;
    --bg-soft: #191916;

    --panel: #24231f;
    --panel-soft: #2b2a25;
    --panel-raised: #34332d;
    --panel-hover: #3b3932;

    --line: rgba(255, 255, 255, .085);
    --line-strong: rgba(255, 255, 255, .15);

    --text: #f1eee6;
    --muted: #aaa69a;
    --muted-dark: #77746b;

    --rust: #d34b37;
    --rust-dark: #a9372a;
    --rust-soft: rgba(211, 75, 55, .14);

    --green: #78913f;
    --green-bright: #9ab956;
    --green-dark: #53662e;
    --green-soft: rgba(120, 145, 63, .14);

    --yellow: #d0a03d;
    --blue: #397ca8;

    --shadow:
        0 26px 80px rgba(0, 0, 0, .35);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 0 100%,
            rgba(123, 37, 25, .27),
            transparent 36%
        ),
        radial-gradient(
            circle at 100% 0,
            rgba(67, 81, 45, .13),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #0e0e0c,
            var(--bg)
        );
    color: var(--text);
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

body.modalOpen {
    overflow: hidden;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
select {
    -webkit-tap-highlight-color: transparent;
}

button {
    border-radius: 0;
}

img {
    max-width: 100%;
}

.hidden {
    display: none !important;
}

/* HEADER */

.siteHeader {
    position: sticky;
    z-index: 100;
    top: 0;

    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 0 34px;

    border-bottom: 1px solid var(--line);
    background: rgba(18, 18, 15, .95);
    backdrop-filter: blur(14px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;

    color: var(--text);
    text-decoration: none;
}

.brandMark {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            145deg,
            #e25b43,
            var(--rust-dark)
        );

    box-shadow:
        inset 0 -4px 0 rgba(0, 0, 0, .2);

    font-size: 19px;
    font-weight: 900;
}

.brandCopy strong {
    display: block;

    font-size: 22px;
    line-height: 1;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

.brandCopy span {
    display: block;

    margin-top: 5px;

    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.headerRight {
    display: flex;
    align-items: center;
    gap: 10px;
}

.languageSelect {
    min-height: 42px;
    padding: 0 36px 0 13px;

    border: 1px solid var(--line);
    border-radius: 0;
    outline: none;

    background: var(--panel);
    color: var(--text);

    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
}

.headerLink,
.headerButton {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 16px;

    border: 1px solid var(--line);
    background: var(--panel);

    color: var(--text);
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;
}

.headerButtonPrimary {
    border-color: rgba(211, 75, 55, .45);
    background:
        linear-gradient(
            145deg,
            var(--rust),
            var(--rust-dark)
        );
}

.accountBox {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 48px;
    padding: 5px 7px 5px 5px;

    border: 1px solid var(--line);
    background: var(--panel);
}

.accountAvatar {
    width: 36px;
    height: 36px;

    object-fit: cover;

    border: 2px solid var(--green);
    background: var(--panel-raised);
}

.accountAvatarFallback {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border: 2px solid var(--green);
    background: var(--panel-raised);

    font-weight: 900;
}

.accountName {
    max-width: 160px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 12px;
    font-weight: 900;
}

.logoutForm {
    margin: 0;
}

/* PAGE */

.page {
    width: min(1480px, calc(100% - 38px));
    margin: 0 auto;
    padding: 34px 0 80px;
}

.marketIntro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 28px;
}

.marketIntroCopy {
    min-width: 0;
}

.marketEyebrow {
    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--green-bright);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.marketEyebrowDot {
    width: 8px;
    height: 8px;

    background: var(--green);
    box-shadow:
        0 0 16px rgba(120, 145, 63, .8);
}

.marketTitle {
    margin: 13px 0 0;

    font-size: clamp(38px, 5vw, 70px);
    line-height: .93;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

.marketSubtitle {
    max-width: 720px;

    margin: 14px 0 0;

    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.createListingButton {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 23px;

    border: 1px solid rgba(120, 145, 63, .55);
    background:
        linear-gradient(
            145deg,
            var(--green),
            var(--green-dark)
        );

    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;

    cursor: pointer;
    white-space: nowrap;
}

.createListingButton::before {
    content: "+";

    font-size: 21px;
    line-height: 1;
}

/* MARKET PANEL */

.marketPanel {
    border: 1px solid var(--line);
    background: rgba(36, 35, 31, .96);
    box-shadow: var(--shadow);
}

.marketPanelTop {
    height: 6px;
    background:
        linear-gradient(
            90deg,
            var(--rust),
            #9d3327
        );
}

.marketTabs {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-bottom: 1px solid var(--line);
}

.marketTab {
    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border: 0;
    border-right: 1px solid var(--line);

    background: var(--panel-soft);
    color: var(--muted);

    cursor: pointer;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.marketTab:last-child {
    border-right: 0;
}

.marketTab small {
    color: var(--muted-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.marketTab.active {
    background:
        linear-gradient(
            180deg,
            rgba(211, 75, 55, .13),
            var(--panel)
        );
    color: var(--text);
    box-shadow:
        inset 0 -4px 0 var(--rust);
}

.marketFilters {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.2fr)
        minmax(200px, 1fr)
        200px
        auto
        48px;
    gap: 10px;

    padding: 16px;

    border-bottom: 1px solid var(--line);
    background: rgba(0, 0, 0, .09);
}

.fieldInput,
.fieldSelect,
.fieldTextarea {
    width: 100%;

    border: 1px solid var(--line);
    border-radius: 0;
    outline: none;

    background: var(--panel-soft);
    color: var(--text);
}

.fieldInput,
.fieldSelect {
    min-height: 48px;
    padding: 0 14px;
}

.fieldTextarea {
    min-height: 94px;
    padding: 13px 14px;

    resize: vertical;
}

.fieldInput::placeholder,
.fieldTextarea::placeholder {
    color: #77746c;
}

.fieldInput:focus,
.fieldSelect:focus,
.fieldTextarea:focus {
    border-color: rgba(211, 75, 55, .72);
}

.onlineFilter {
    min-height: 48px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 0 14px;

    border: 1px solid var(--line);
    background: var(--panel-soft);

    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;

    cursor: pointer;
    white-space: nowrap;
}

.onlineFilter input {
    width: 17px;
    height: 17px;

    accent-color: var(--green);
}

.refreshButton {
    width: 48px;
    min-height: 48px;

    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--text);

    cursor: pointer;
    font-size: 20px;
}

.refreshButton.loading {
    animation: rotate .7s linear infinite;
}

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

/* AUTOCOMPLETE */

.itemSearch {
    position: relative;
    min-width: 0;
}

.itemDropdown {
    position: absolute;
    z-index: 130;
    top: calc(100% + 5px);
    right: 0;
    left: 0;

    max-height: 390px;
    overflow-y: auto;

    border: 1px solid var(--line-strong);
    background: #201f1b;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .5);
}

.itemResult {
    width: 100%;

    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;

    padding: 9px 11px;

    border: 0;
    border-bottom: 1px solid var(--line);

    background: transparent;
    color: var(--text);

    cursor: pointer;
    text-align: left;
}

.itemResult:last-child {
    border-bottom: 0;
}

.itemResult:hover,
.itemResult:focus {
    background: var(--panel-raised);
}

.itemResultImage {
    width: 52px;
    height: 52px;

    object-fit: contain;

    border: 1px solid var(--line);
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .08),
            rgba(0, 0, 0, .2)
        );
}

.itemResultName {
    min-width: 0;
}

.itemResultName strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
}

.itemResultName span {
    display: block;

    margin-top: 5px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--muted);
    font-size: 10px;
}

.itemResultStack {
    color: var(--green-bright);
    font-size: 10px;
    font-weight: 900;
}

.itemDropdownMessage {
    padding: 20px;

    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.selectedItem {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-top: 9px;
    padding: 9px;

    border: 1px solid rgba(120, 145, 63, .35);
    background: var(--green-soft);
}

.selectedItem img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.selectedItem strong {
    display: block;
    font-size: 13px;
}

.selectedItem span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}

/* LISTINGS */

.marketStatus {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 0 17px;

    border-bottom: 1px solid var(--line);

    color: var(--muted);
    font-size: 11px;
}

.marketStatusLive {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--green-bright);
    font-weight: 900;
    text-transform: uppercase;
}

.marketStatusLive::before {
    content: "";

    width: 7px;
    height: 7px;

    background: var(--green);
    box-shadow:
        0 0 12px rgba(120, 145, 63, .9);
}

.listHeader,
.listingRow {
    display: grid;
    grid-template-columns:
        minmax(190px, 1.05fr)
        minmax(210px, 1.15fr)
        minmax(180px, .95fr)
        minmax(155px, .75fr)
        minmax(125px, .65fr)
        128px;
    align-items: center;
}

.listHeader {
    min-height: 45px;

    border-bottom: 1px solid var(--line);
    background: rgba(0, 0, 0, .13);

    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.listHeader > div,
.listingRow > div {
    min-width: 0;
    padding: 0 15px;
}

.listingRow {
    min-height: 102px;

    border-bottom: 1px solid var(--line);
    background: var(--panel);

    transition:
        background .13s ease,
        transform .13s ease;
}

.listingRow:last-child {
    border-bottom: 0;
}

.listingRow:hover {
    position: relative;
    z-index: 2;

    background: var(--panel-hover);
}

.traderCell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.traderAvatar {
    position: relative;
    flex: 0 0 auto;

    width: 46px;
    height: 46px;
}

.traderAvatar img,
.traderAvatarFallback {
    width: 46px;
    height: 46px;

    object-fit: cover;

    border: 1px solid var(--line-strong);
    background: var(--panel-raised);
}

.traderAvatarFallback {
    display: grid;
    place-items: center;

    font-size: 16px;
    font-weight: 900;
}

.presenceDot {
    position: absolute;
    right: -2px;
    bottom: -2px;

    width: 12px;
    height: 12px;

    border: 2px solid var(--panel);
    background: #67645c;
}

.presenceDot.online {
    background: var(--green-bright);
    box-shadow:
        0 0 10px rgba(154, 185, 86, .7);
}

.traderInfo {
    min-width: 0;
}

.traderName {
    display: flex;
    align-items: center;
    gap: 6px;

    min-width: 0;

    font-size: 13px;
    font-weight: 900;
}

.traderNameText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.verifiedBadge {
    color: var(--yellow);
    font-size: 11px;
}

.traderMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 6px;

    color: var(--muted);
    font-size: 10px;
}

.onlineText {
    color: var(--green-bright);
}

.resourceCell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.resourceIcon {
    flex: 0 0 auto;

    width: 64px;
    height: 64px;

    object-fit: contain;

    border: 1px solid var(--line);
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .075),
            rgba(0, 0, 0, .2)
        );
}

.resourceInfo {
    min-width: 0;
}

.resourceName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
    font-weight: 900;
}

.resourceShortname {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    margin-top: 5px;

    color: var(--muted);
    font-size: 10px;
}

.serverAddress {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 12px;
    font-weight: 900;
}

.serverMeta {
    margin-top: 7px;

    color: var(--muted);
    font-size: 10px;
}

.quantityValue {
    font-size: 14px;
    font-weight: 900;
}

.quantityMeta {
    margin-top: 6px;

    color: var(--muted);
    font-size: 10px;
}

.priceValue {
    color: var(--green-bright);
    font-size: 16px;
    font-weight: 900;
}

.priceMeta {
    margin-top: 6px;

    color: var(--muted);
    font-size: 10px;
}

.listingAction {
    width: 100%;
    min-height: 42px;

    border: 1px solid rgba(211, 75, 55, .45);
    background:
        linear-gradient(
            145deg,
            var(--rust),
            var(--rust-dark)
        );

    color: #fff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;

    cursor: pointer;
}

.listingActionSell {
    border-color: rgba(120, 145, 63, .5);
    background:
        linear-gradient(
            145deg,
            var(--green),
            var(--green-dark)
        );
}

.listingAction:disabled {
    border-color: var(--line);
    background: var(--panel-raised);
    color: var(--muted);

    cursor: default;
}

.marketEmpty,
.marketError,
.marketLoading {
    padding: 65px 25px;

    color: var(--muted);
    text-align: center;
}

.marketEmpty strong,
.marketError strong {
    display: block;

    color: var(--text);
    font-size: 18px;
    text-transform: uppercase;
}

.marketEmpty span,
.marketError span {
    display: block;

    max-width: 520px;

    margin: 10px auto 0;

    font-size: 12px;
    line-height: 1.6;
}

/* MODALS */

.modalBackdrop {
    position: fixed;
    z-index: 500;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(7, 7, 6, .83);
    backdrop-filter: blur(6px);
}

.modalBackdrop.open {
    display: flex;
}

.modal {
    width: min(780px, 100%);
    max-height: min(900px, calc(100vh - 40px));

    overflow-y: auto;

    border: 1px solid var(--line-strong);
    background: var(--panel);
    box-shadow:
        0 34px 110px rgba(0, 0, 0, .62);
}

.modalWide {
    width: min(940px, 100%);
}

.modalBar {
    height: 6px;
    background: var(--rust);
}

.modalHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 21px 23px;

    border-bottom: 1px solid var(--line);
}

.modalTitle {
    margin: 0;

    font-size: 21px;
    letter-spacing: -.025em;
    text-transform: uppercase;
}

.modalClose {
    width: 38px;
    height: 38px;

    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--text);

    cursor: pointer;
    font-size: 20px;
}

.modalBody {
    padding: 23px;
}

.modalFooter {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    padding: 17px 23px;

    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, .1);
}

.modalButton {
    min-height: 47px;

    padding: 0 21px;

    border: 1px solid var(--line);
    background: var(--panel-raised);
    color: var(--text);

    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.modalButtonPrimary {
    border-color: rgba(120, 145, 63, .5);
    background:
        linear-gradient(
            145deg,
            var(--green),
            var(--green-dark)
        );
}

.modalButtonRust {
    border-color: rgba(211, 75, 55, .5);
    background:
        linear-gradient(
            145deg,
            var(--rust),
            var(--rust-dark)
        );
}

.modalButton:disabled {
    opacity: .55;
    cursor: wait;
}

/* FORM */

.createSideGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    margin-bottom: 21px;
}

.createSideOption {
    position: relative;
}

.createSideOption input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.createSideCard {
    min-height: 100px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 17px;

    border: 1px solid var(--line);
    background: var(--panel-soft);

    cursor: pointer;
}

.createSideCard strong {
    font-size: 14px;
    text-transform: uppercase;
}

.createSideCard span {
    margin-top: 7px;

    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.createSideOption input:checked + .createSideCard {
    border-color: rgba(211, 75, 55, .65);
    background: var(--rust-soft);
    box-shadow:
        inset 0 -3px 0 var(--rust);
}

.formGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.formField {
    min-width: 0;
}

.formFieldFull {
    grid-column: 1 / -1;
}

.formLabel {
    display: block;

    margin-bottom: 8px;

    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fieldHint {
    margin-top: 6px;

    color: var(--muted-dark);
    font-size: 10px;
    line-height: 1.45;
}

/* DEAL PREVIEW */

.dealGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 18px;
}

.dealMain,
.dealTrader {
    border: 1px solid var(--line);
    background: var(--panel-soft);
}

.dealItem {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 18px;

    border-bottom: 1px solid var(--line);
}

.dealItem img {
    width: 78px;
    height: 78px;
    object-fit: contain;
}

.dealItem strong {
    display: block;
    font-size: 18px;
}

.dealItem span {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px;
}

.dealFields {
    padding: 18px;
}

.dealTotal {
    margin-top: 15px;
    padding: 17px;

    border: 1px solid rgba(120, 145, 63, .38);
    background: var(--green-soft);
}

.dealTotal span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}

.dealTotal strong {
    display: block;
    margin-top: 7px;
    color: var(--green-bright);
    font-size: 24px;
}

.dealTrader {
    padding: 18px;
}

.dealTraderHead {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dealTraderHead img,
.dealTraderAvatarFallback {
    width: 56px;
    height: 56px;
    object-fit: cover;
}

.dealTraderAvatarFallback {
    display: grid;
    place-items: center;
    background: var(--panel-raised);
    font-weight: 900;
}

.dealTraderName {
    min-width: 0;
}

.dealTraderName strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dealTraderName span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
}

.dealInfoRows {
    margin-top: 18px;
}

.dealInfoRow {
    display: flex;
    justify-content: space-between;
    gap: 14px;

    padding: 11px 0;

    border-bottom: 1px solid var(--line);

    font-size: 11px;
}

.dealInfoRow:last-child {
    border-bottom: 0;
}

.dealInfoRow span {
    color: var(--muted);
}

.dealTerms {
    margin-top: 17px;
    padding: 14px;

    border: 1px solid var(--line);
    background: rgba(0, 0, 0, .13);

    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

/* TOAST */

.toastContainer {
    position: fixed;
    z-index: 800;
    right: 20px;
    bottom: 20px;

    width: min(380px, calc(100% - 40px));
}

.toast {
    margin-top: 10px;
    padding: 15px 17px;

    border: 1px solid var(--line-strong);
    background: #282721;
    box-shadow:
        0 18px 55px rgba(0, 0, 0, .45);

    font-size: 12px;
    line-height: 1.5;

    animation: toastIn .18s ease-out;
}

.toastSuccess {
    border-color: rgba(120, 145, 63, .6);
}

.toastError {
    border-color: rgba(211, 75, 55, .65);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE */

@media (max-width: 1180px) {
    .marketFilters {
        grid-template-columns:
            minmax(210px, 1fr)
            minmax(190px, 1fr)
            190px
            auto
            48px;
    }

    .listHeader,
    .listingRow {
        grid-template-columns:
            minmax(180px, 1fr)
            minmax(190px, 1.1fr)
            minmax(160px, .85fr)
            145px
            115px
            112px;
    }

    .listHeader > div,
    .listingRow > div {
        padding: 0 10px;
    }
}

@media (max-width: 950px) {
    .siteHeader {
        padding: 11px 17px;
    }

    .brandCopy span,
    .accountName {
        display: none;
    }

    .page {
        width: min(100% - 22px, 1480px);
        padding-top: 23px;
    }

    .marketIntro {
        align-items: flex-start;
        flex-direction: column;
    }

    .marketFilters {
        grid-template-columns: 1fr 1fr;
    }

    .marketFilters > :nth-child(5) {
        width: 100%;
    }

    .listHeader {
        display: none;
    }

    .listingRow {
        grid-template-columns: 1fr 1fr;
        gap: 17px;

        margin: 11px;
        padding: 17px 0;

        border: 1px solid var(--line);
    }

    .listingRow > div {
        padding: 0 17px;
    }

    .listingRowAction {
        grid-column: 1 / -1;
    }

    .dealGrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .siteHeader {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .headerRight {
        width: 100%;
        justify-content: space-between;
    }

    .headerLink {
        display: none;
    }

    .languageSelect {
        flex: 1;
    }

    .marketTitle {
        font-size: 42px;
    }

    .createListingButton {
        width: 100%;
    }

    .marketTab {
        min-height: 61px;
        flex-direction: column;
        gap: 4px;
    }

    .marketTab small {
        max-width: 135px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .marketFilters {
        grid-template-columns: 1fr;
    }

    .onlineFilter {
        justify-content: center;
    }

    .refreshButton {
        width: 100%;
    }

    .listingRow {
        grid-template-columns: 1fr;
    }

    .listingRowAction {
        grid-column: auto;
    }

    .createSideGrid,
    .formGrid {
        grid-template-columns: 1fr;
    }

    .formFieldFull {
        grid-column: auto;
    }

    .modalBackdrop {
        align-items: flex-end;
        padding: 0;
    }

    .modal {
        width: 100%;
        max-height: 94vh;
    }

    .modalBody {
        padding: 17px;
    }

    .modalFooter {
        position: sticky;
        bottom: 0;
        background: var(--panel);
    }

    .modalButton {
        flex: 1;
        padding: 0 10px;
    }
}

/* EASYLOOT — seller, server, item, price, total */

/*
 * Исходный HTML:
 * 1. Игрок
 * 2. Предмет
 * 3. Сервер
 * 4. Количество
 * 5. Цена
 * 6. Действие
 *
 * Визуальный порядок:
 * 1. Игрок
 * 2. Сервер
 * 3. Предмет
 * 4. Цена
 * 5. Всего
 * 6. Действие
 */

.listingRow > :nth-child(1) {
    order: 1;
}

.listingRow > :nth-child(2) {
    order: 3;
}

.listingRow > :nth-child(3) {
    order: 2;
}

.listingRow > :nth-child(4) {
    order: 5;
}

.listingRow > :nth-child(5) {
    order: 4;
}

.listingRow > :nth-child(6) {
    order: 6;
}

.fieldInput[readonly] {
    color: var(--green-bright);
    cursor: default;
}

#createQuantityHint,
#dealQuantityHint {
    min-height: 15px;
}


/* EASYLOOT STEP 8D CSS */

.sellerCard{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.sellerAvatarWrap{
    position:relative;
    width:42px;
    height:42px;
    flex:0 0 42px;
}

.sellerAvatarImg{
    width:42px;
    height:42px;
    border-radius:12px;
    object-fit:cover;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
}

.sellerPresence{
    position:absolute;
    right:-2px;
    bottom:-2px;
    width:11px;
    height:11px;
    border-radius:50%;
    border:2px solid rgba(19,22,28,.98);
}

.sellerPresence.isOnline{
    background:#8ed95b;
}

.sellerPresence.isOffline{
    background:#6d7682;
}

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

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

.sellerNameText{
    font-weight:700;
    letter-spacing:.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sellerNewBadge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:3px 8px;
    border-radius:999px;
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
    color:#171311;
    background:linear-gradient(180deg,#ffcc59,#ffb129);
    box-shadow:0 0 0 1px rgba(255,177,41,.25) inset;
}

.sellerMetaLine{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    color:rgba(225,232,240,.7);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sellerMetaDot.online{
    color:#96e66d;
}

.sellerMetaDot.offline{
    color:#8892a0;
}

.serverCard{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}

.serverCopyPill{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    max-width:100%;
    padding:8px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.03);
    color:#f4f7fa;
    font:inherit;
    cursor:pointer;
    transition:.18s ease;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.serverCopyPill:hover{
    border-color:rgba(255,177,41,.42);
    background:rgba(255,177,41,.08);
    transform:translateY(-1px);
}

.serverBadgeRow{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.serverMiniBadge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    line-height:1;
    font-weight:700;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    color:#dfe7ef;
}

.serverMiniBadge.rate{
    color:#ffc04b;
    border-color:rgba(255,192,75,.18);
    background:rgba(255,192,75,.08);
}

.serverMiniBadge.wipe{
    color:#bfe1ff;
}

.serverMiniBadge.location{
    min-width:28px;
    font-size:13px;
    padding:4px 7px;
}

.serverMiniBadge.verified{
    color:#90e16e;
    border-color:rgba(144,225,110,.18);
    background:rgba(144,225,110,.08);
}

.listingActionStack{
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:flex-end;
}

.bundleToggleButton{
    width:34px;
    height:34px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    color:#f3f7fb;
    font-size:16px;
    cursor:pointer;
    transition:.18s ease;
}

.bundleToggleButton:hover{
    border-color:rgba(255,177,41,.42);
    color:#ffbf4b;
}

.bundleToggleButton.isOpen{
    transform:rotate(180deg);
}

.sellerBundlePanel{
    order:7;
    grid-column:1 / -1;
    margin-top:10px;
    border-top:1px solid rgba(255,255,255,.06);
    padding-top:14px;
}

.sellerBundleInner{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    gap:16px;
    align-items:start;
}

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

.bundleItem{
    width:190px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    border-radius:16px;
    overflow:hidden;
    transition:.18s ease;
}

.bundleItem.isActive{
    border-color:rgba(255,190,63,.48);
    box-shadow:0 0 0 1px rgba(255,190,63,.15) inset;
    background:rgba(255,190,63,.07);
}

.bundleSelectButton{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding:12px;
    border:0;
    background:transparent;
    color:#f3f7fb;
    cursor:pointer;
    text-align:left;
}

.bundleItemTop{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    width:100%;
}

.bundleItemIcon{
    width:32px;
    height:32px;
    border-radius:10px;
    object-fit:cover;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    flex:0 0 32px;
}

.bundleItemName{
    font-weight:700;
    font-size:13px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.bundleItemMeta{
    font-size:11px;
    color:rgba(223,231,239,.76);
}

.bundleQtyWrap{
    padding:0 12px 12px;
}

.bundleQtyInput{
    width:100%;
    height:36px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(14,17,22,.92);
    color:#f5f8fb;
    padding:0 10px;
    font:inherit;
}

.bundleQtyInput:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.sellerBundleSummary{
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    border-radius:18px;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:14px;
    position:sticky;
    top:10px;
}

.bundleSummaryTitle{
    font-weight:800;
    letter-spacing:.02em;
}

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

.bundleSummaryRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:rgba(223,231,239,.82);
    font-size:13px;
}

.bundleOrderButton{
    height:42px;
    border-radius:12px;
    border:0;
    background:linear-gradient(180deg,#ffc95d,#ffb129);
    color:#19130f;
    font:inherit;
    font-weight:800;
    cursor:pointer;
    transition:.18s ease;
}

.bundleOrderButton:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.bundleDraftModal{
    position:fixed;
    inset:0;
    z-index:9999;
}

.bundleDraftBackdrop{
    position:absolute;
    inset:0;
    background:rgba(7,9,12,.7);
    backdrop-filter:blur(3px);
}

.bundleDraftDialog{
    position:relative;
    z-index:1;
    width:min(560px,calc(100vw - 32px));
    margin:8vh auto 0;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg,rgba(22,25,31,.98),rgba(16,19,24,.98));
    box-shadow:0 30px 80px rgba(0,0,0,.45);
    padding:20px;
}

.bundleDraftClose{
    position:absolute;
    right:14px;
    top:10px;
    width:34px;
    height:34px;
    border:0;
    background:transparent;
    color:#eef3f8;
    font-size:28px;
    cursor:pointer;
}

.bundleDraftTitle{
    font-size:20px;
    font-weight:800;
    margin-bottom:14px;
}

.bundleDraftBody{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.bundleDraftSeller{
    font-size:16px;
}

.bundleDraftServer{
    color:rgba(223,231,239,.72);
    font-size:13px;
}

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

.bundleDraftLine{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid rgba(255,255,255,.06);
    background:rgba(255,255,255,.03);
    border-radius:12px;
    padding:10px 12px;
}

.bundleDraftLineTitle{
    font-weight:700;
}

.bundleDraftLineMeta{
    color:rgba(223,231,239,.76);
    font-size:13px;
}

.bundleDraftTotal{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:4px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:16px;
}

.bundleDraftHint{
    font-size:12px;
    line-height:1.45;
    color:rgba(223,231,239,.68);
    background:rgba(255,255,255,.03);
    border-radius:12px;
    padding:12px;
}

.bundleDraftFooter{
    margin-top:16px;
    display:flex;
    justify-content:flex-end;
}

.bundleDraftCloseBtn{
    height:40px;
    padding:0 18px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    color:#f1f5f9;
    font:inherit;
    cursor:pointer;
}

@media (max-width: 1100px){
    .sellerBundleInner{
        grid-template-columns:1fr;
    }

    .sellerBundleSummary{
        position:relative;
        top:auto;
    }
}

@media (max-width: 760px){
    .bundleItem{
        width:100%;
    }

    .listingActionStack{
        justify-content:flex-start;
    }
}



/* EASYLOOT STEP 8D.1 CSS */

/*
 * Никаких скруглений у элементов
 * списка и раскрывающейся панели.
 */
.sellerAvatarImg,
.sellerNewBadge,
.serverCopyPill,
.serverMiniBadge,
.bundleToggleButton,
.bundleItem,
.bundleQtyInput,
.sellerBundleSummary,
.bundleOrderButton,
.bundleDraftDialog,
.bundleDraftLine,
.bundleDraftHint,
.bundleDraftCloseBtn {
    border-radius: 0 !important;
}

.listingRow.hasSellerBundle {
    cursor: pointer;
}

.listingRow.hasSellerBundle:hover {
    background:
        rgba(255,255,255,.025);
}

.listingRow.bundleExpanded {
    background:
        rgba(255,255,255,.025);
}

/*
 * Раскрытый блок больше не прилипает
 * к краям объявления.
 */
.sellerBundlePanel {
    width:
        calc(100% - 36px);

    margin:
        18px 18px 22px !important;

    padding:
        20px !important;

    border:
        1px solid
        rgba(255,255,255,.09) !important;

    border-top:
        1px solid
        rgba(255,255,255,.09) !important;

    background:
        rgba(10,12,15,.38);
}

.sellerBundleInner {
    gap:
        24px !important;
}

.sellerBundleItems {
    gap:
        14px !important;
}

.bundleItem {
    width:
        200px;

    border:
        1px solid
        rgba(255,255,255,.09);

    background:
        rgba(255,255,255,.025);
}

/*
 * Выбранный ресурс —
 * зелёная рамка и зелёный фон.
 */
.bundleItem.isActive {
    border-color:
        rgba(119,190,82,.78)
        !important;

    background:
        rgba(91,154,58,.15)
        !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(119,190,82,.22)
        !important;
}

.bundleItem.isActive
.bundleItemName {
    color:
        #b9ed9e;
}

.bundleItem.isActive
.bundleQtyInput {
    border-color:
        rgba(119,190,82,.62);

    background:
        rgba(43,76,30,.3);
}

.bundleQtyInput {
    opacity:
        .72;

    transition:
        border-color .15s ease,
        background .15s ease,
        opacity .15s ease;
}

.bundleQtyInput:hover,
.bundleQtyInput:focus {
    opacity:
        1;

    border-color:
        rgba(119,190,82,.7);

    outline:
        none;
}

/*
 * Правая колонка с итогом.
 */
.sellerBundleSummary {
    padding:
        20px;

    border-color:
        rgba(255,255,255,.09);

    background:
        rgba(255,255,255,.025);
}

/*
 * Зелёная кнопка заказа.
 */
.bundleOrderButton {
    min-height:
        44px;

    border:
        1px solid
        rgba(119,190,82,.58);

    background:
        linear-gradient(
            180deg,
            #729f48,
            #567b34
        ) !important;

    color:
        #f4faef !important;

    box-shadow:
        inset 0 -2px 0
        rgba(0,0,0,.18);

    text-transform:
        uppercase;

    letter-spacing:
        .04em;
}

.bundleOrderButton:not(:disabled):hover {
    background:
        linear-gradient(
            180deg,
            #82b455,
            #648f3d
        ) !important;
}

.bundleOrderButton:disabled {
    border-color:
        rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.05)
        !important;

    color:
        rgba(255,255,255,.4)
        !important;
}

/*
 * Стрелка также без скруглений.
 */
.bundleToggleButton {
    border-color:
        rgba(255,255,255,.1);
}

.bundleToggleButton.isOpen {
    color:
        #9cdb79;

    border-color:
        rgba(119,190,82,.55);
}

@media (max-width: 760px) {
    .sellerBundlePanel {
        width:
            calc(100% - 20px);

        margin:
            12px 10px 16px !important;

        padding:
            14px !important;
    }

    .sellerBundleInner {
        gap:
            16px !important;
    }

    .sellerBundleItems {
        gap:
            10px !important;
    }
}



/* EASYLOOT STEP 8D.2 CSS */

/*
 * IP больше не растягивается
 * на всю ширину серверной колонки.
 */
.serverCopyPill {
    width: max-content !important;
    max-width: 100% !important;
    align-self: flex-start !important;

    padding:
        7px 11px !important;
}

/*
 * Запрещаем браузеру автоматически
 * двигать страницу при раскрытии панели.
 */
.listingRow.hasSellerBundle,
.sellerBundlePanel {
    overflow-anchor: none !important;
}

/*
 * Основная строка остаётся на месте,
 * панель растёт только вниз.
 */
.listingRow.hasSellerBundle {
    align-content: start;
}

/*
 * Область сопутствующих товаров
 * занимает свободную ширину,
 * а карточки центрируются.
 */
.sellerBundleItems {
    display: grid !important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 200px)
        );

    justify-content:
        center !important;

    align-content:
        center !important;

    align-items:
        center !important;

    gap:
        16px !important;

    min-height:
        150px;

    padding:
        16px 12px !important;
}

/*
 * Карточки больше не приклеены
 * к левому верхнему углу.
 */
.bundleItem {
    width:
        100% !important;

    min-height:
        126px;

    align-self:
        center;
}

/*
 * Вся внутренняя часть
 * выровнена по высоте.
 */
.sellerBundleInner {
    align-items:
        stretch !important;
}

/*
 * При небольшом количестве товаров
 * блок выглядит собранным,
 * а не пустым и растянутым.
 */
.sellerBundlePanel {
    box-sizing:
        border-box;

    padding:
        22px 24px !important;
}

@media (max-width: 760px) {
    .sellerBundleItems {
        grid-template-columns:
            1fr;

        min-height:
            0;

        padding:
            8px 0 !important;
    }

    .serverCopyPill {
        width:
            max-content !important;
    }
}



/* EASYLOOT STEP 8D.3 CSS */

/*
 * Основная часть объявления снова имеет
 * прежнюю высоту и вертикальное выравнивание.
 */
.listingRow.hasSellerBundle {
    grid-template-rows:
        minmax(102px, auto)
        auto !important;

    align-content:
        stretch !important;

    row-gap:
        0 !important;
}

.listingRow.hasSellerBundle
> :not(.sellerBundlePanel) {
    grid-row:
        1 !important;

    align-self:
        center !important;
}

.listingRow.hasSellerBundle
> .sellerBundlePanel {
    grid-row:
        2 !important;
}

/*
 * У основной строки остаются нормальные
 * верхний и нижний отступы.
 */
.listingRow.hasSellerBundle
> :not(.sellerBundlePanel) {
    padding-top:
        16px !important;

    padding-bottom:
        16px !important;
}

/*
 * Карточки выровнены по высоте,
 * но список начинается слева.
 */
.sellerBundleItems {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(180px, 200px)
        ) !important;

    justify-content:
        start !important;

    justify-items:
        stretch !important;

    align-content:
        center !important;

    align-items:
        center !important;

    min-height:
        150px;

    padding:
        16px 18px !important;
}

/*
 * Слева остаётся визуальный воздух,
 * но нет огромного пустого центрирования.
 */
.sellerBundlePanel {
    padding:
        22px 24px !important;
}

.bundleItem {
    width:
        100% !important;

    align-self:
        center !important;
}

/*
 * Зелёное выделение имеет приоритет
 * над всеми предыдущими стилями.
 */
.bundleItem[data-active="1"],
.bundleItem.isActive {
    border-color:
        rgba(119,190,82,.82)
        !important;

    background:
        rgba(91,154,58,.18)
        !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(119,190,82,.28)
        !important;
}

.bundleItem[data-active="1"]
.bundleItemName,
.bundleItem.isActive
.bundleItemName {
    color:
        #bff1a5 !important;
}

.bundleItem[data-active="1"]
.bundleQtyInput,
.bundleItem.isActive
.bundleQtyInput {
    border-color:
        rgba(119,190,82,.72)
        !important;

    background:
        rgba(43,76,30,.38)
        !important;

    opacity:
        1 !important;
}

@media (max-width: 950px) {
    .listingRow.hasSellerBundle {
        grid-template-rows:
            auto !important;
    }

    .listingRow.hasSellerBundle
    > :not(.sellerBundlePanel) {
        grid-row:
            auto !important;
    }

    .listingRow.hasSellerBundle
    > .sellerBundlePanel {
        grid-row:
            auto !important;
    }
}

@media (max-width: 760px) {
    .sellerBundleItems {
        grid-template-columns:
            1fr !important;

        justify-content:
            start !important;

        min-height:
            0;

        padding:
            8px 0 !important;
    }
}


/* EASYLOOT STEP 8D.4 CSS */

/*
 * Даже до выполнения JavaScript
 * показываем только первую стрелку.
 */
.listingActionStack
.bundleToggleButton
~ .bundleToggleButton {
    display: none !important;
}

.listingActionStack
.listingActionStack
.bundleToggleButton {
    display: none !important;
}

/*
 * Одна компактная стрелка справа.
 */
.listingActionStack {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.listingActionStack
> .bundleToggleButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 34px;
    width: 34px !important;
    height: 34px !important;
}

/* EASYLOOT STEP 8D.5 CSS */

.sellerNameLink {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
}

.sellerNameLink:hover {
    color: #a7df83 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.dealBundlePreview {
    padding: 18px;
}

.dealBundleHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding-bottom: 14px;
    margin-bottom: 14px;

    border-bottom:
        1px solid var(--line);
}

.dealBundleHeader strong {
    font-size: 16px;
    text-transform: uppercase;
}

.dealBundleHeader span {
    color: var(--green-bright);
    font-weight: 900;
}

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

.dealBundleRow {
    display: grid;
    grid-template-columns:
        54px
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 13px;

    min-height: 68px;
    padding: 7px 10px;

    border:
        1px solid var(--line);

    background:
        rgba(0, 0, 0, .1);
}

.dealBundleIcon {
    width: 54px;
    height: 54px;

    object-fit: contain;

    border:
        1px solid var(--line);

    background:
        rgba(255, 255, 255, .035);
}

.dealBundleInfo {
    min-width: 0;
}

.dealBundleInfo strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
}

.dealBundleInfo span {
    display: block;

    margin-top: 6px;

    color: var(--muted);
    font-size: 11px;
}

.dealBundleLineTotal {
    color: var(--green-bright);
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.dealBundleTotal {
    margin-top: 16px;
}

/* EASYLOOT STEP 8D.5.1 CSS */

.listingActionStack,
.listingAction,
.sellerNameLink {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}

.dealBundleEditableRow {
    grid-template-columns:
        58px
        minmax(0, 1fr)
        minmax(110px, auto)
        !important;

    min-height: 96px;
    padding: 11px 12px;
}

.dealBundleEditableRow.isInvalid {
    border-color:
        rgba(205, 73, 56, .75);
}

.dealBundleQtyControl {
    display: inline-grid;

    grid-template-columns:
        34px
        minmax(88px, 124px)
        34px;

    align-items: center;

    margin-top: 10px;

    border:
        1px solid var(--line);
}

.dealBundleQtyButton {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;

    background:
        rgba(255,255,255,.045);

    color:
        var(--text);

    cursor: pointer;

    font-size: 17px;
    font-weight: 900;
}

.dealBundleQtyButton:hover {
    background:
        rgba(103,151,65,.23);

    color:
        #b9ed9e;
}

.dealBundleQtyInput {
    width: 100%;
    height: 34px;

    padding: 0 8px;

    border-top: 0;
    border-bottom: 0;
    border-right:
        1px solid var(--line);
    border-left:
        1px solid var(--line);

    outline: none;

    background:
        rgba(0,0,0,.24);

    color:
        var(--text);

    text-align: center;
    font-weight: 900;
}

.dealBundleQtyInput.isInvalid {
    background:
        rgba(205,73,56,.15);

    color:
        #ff9b8d;
}

.dealBundleRowRight {
    min-height: 70px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;

    gap: 10px;
}

.dealBundleRemoveButton {
    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(205,73,56,.4);

    background:
        rgba(205,73,56,.08);

    color:
        #d2cec7;

    cursor: pointer;

    font-size: 18px;
    line-height: 1;
}

.dealBundleRemoveButton:hover {
    border-color:
        rgba(205,73,56,.8);

    background:
        rgba(205,73,56,.2);

    color:
        #fff;
}

.dealBundleEmpty {
    padding: 38px 20px;

    border:
        1px dashed var(--line);

    color:
        var(--muted);

    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
}

.dealBundleQtyButton,
.dealBundleQtyInput,
.dealBundleRemoveButton {
    border-radius: 0 !important;
}

@media (max-width: 650px) {
    .dealBundleEditableRow {
        grid-template-columns:
            50px
            minmax(0, 1fr)
            auto
            !important;
    }

    .dealBundleQtyControl {
        grid-template-columns:
            32px
            minmax(66px, 1fr)
            32px;

        width: 100%;
    }
}

/* EASYLOOT STEP 8D.5.2 CSS */

/*
 * Кнопка действия всегда выше
 * кликабельной области объявления.
 */
.listingRow
.listingActionStack,
.listingRow
[data-open-listing] {
    position: relative !important;
    z-index: 250 !important;
    pointer-events: auto !important;
    isolation: isolate;
}

.listingRow
[data-open-listing]:not(:disabled) {
    cursor: pointer !important;
}

/* EASYLOOT STEP 8D.5.4 CSS */

/*
 * Псевдоэлементы строки не могут
 * перекрывать кнопки.
 */
.listingRow::before,
.listingRow::after {
    pointer-events: none !important;
}

/*
 * Все ячейки строки находятся
 * над фоном кликабельной области.
 */
.listingRow > * {
    position: relative;
}

/*
 * Действия имеют наивысший приоритет.
 */
.listingRow [data-open-listing],
.listingRow .listingAction,
.listingRow .listingActionStack,
.listingRow .bundleToggleButton,
.listingRow .bundleOrderButton,
.listingRow .sellerNameLink {
    position: relative !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
}

.listingRow [data-open-listing]:not(:disabled),
.listingRow .bundleOrderButton:not(:disabled) {
    cursor: pointer !important;
}

/* EASYLOOT STEP 8D.5.5 CSS */

/*
 * Правая ячейка объявления всегда
 * находится выше кликабельного фона строки.
 */
.listingRow
> :nth-child(6) {
    position: relative !important;
    z-index: 5000 !important;
    pointer-events: auto !important;
}

.listingRow
> :nth-child(6)
[data-open-listing] {
    position: relative !important;
    z-index: 5001 !important;
    pointer-events: auto !important;
}

.listingRow
> :nth-child(6)
[data-open-listing]:not(:disabled) {
    cursor: pointer !important;
}

.dealBundleMaximumLine {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 8px;
}

.dealBundleMaximumText {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.dealBundleMaximumButton {
    min-height: 29px;
    padding: 0 11px;

    border:
        1px solid
        rgba(119,190,82,.58);

    border-radius: 0 !important;

    background:
        rgba(91,154,58,.15);

    color:
        #bff1a5;

    cursor: pointer;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

.dealBundleMaximumButton:hover {
    border-color:
        rgba(119,190,82,.9);

    background:
        rgba(91,154,58,.3);

    color:
        #fff;
}

/* EASYLOOT STEP 8D.5.8 CSS */

.listingRow::before,
.listingRow::after {
    pointer-events: none !important;
}

.listingRow
[data-open-listing],
.listingRow
.listingAction,
.listingRow
.listingActionStack {
    position: relative !important;
    z-index: 20000 !important;
    pointer-events: auto !important;
}

.listingRow
[data-open-listing]:not(:disabled) {
    cursor: pointer !important;
}

/* EASYLOOT STEP 8D.6.1 CSS */

/*
 * Оставляем только красивые кнопки − и +.
 * Стандартные стрелки браузера убираем.
 */
.dealBundleQtyInput::-webkit-inner-spin-button,
.dealBundleQtyInput::-webkit-outer-spin-button,
.bundleQtyInput::-webkit-inner-spin-button,
.bundleQtyInput::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
    margin: 0 !important;
}

.dealBundleQtyInput[type="number"],
.bundleQtyInput[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/*
 * Кнопка остаётся выше фона строки
 * и со стрелкой, и без стрелки.
 */
.listingRow [data-open-listing],
.listingRow .listingAction,
.listingRow .listingActionStack {
    position: relative !important;
    z-index: 30000 !important;
    pointer-events: auto !important;
}

.listingRow [data-open-listing]:not(:disabled) {
    cursor: pointer !important;
}

/* EASYLOOT STEP 8D.6.2 MODAL LAYER FIX */

/*
 * Ранее кнопкам объявления был установлен
 * высокий z-index для защиты от кликабельной строки.
 *
 * Теперь затемнение и модальное окно находятся
 * гарантированно выше всех элементов маркетплейса.
 */
.modalBackdrop {
    z-index: 2147483000 !important;
    isolation: isolate !important;
}

/*
 * Само окно находится выше собственного
 * затемняющего фона.
 */
.modalBackdrop > .modal,
.modalBackdrop .modal {
    position: relative !important;
    z-index: 2 !important;
}

/*
 * Никакие кнопки, ники, стрелки или строки
 * объявлений не могут проступить через затемнение.
 */
.modalBackdrop ~ *,
body > .modalBackdrop {
    transform: translateZ(0);
}

/*
 * Уведомления оставляем выше модального окна.
 */
.toastContainer {
    z-index: 2147483600 !important;
}

/*
 * При открытом окне элементы позади визуально
 * остаются полностью под затемняющим слоем.
 */
body:has(.modalBackdrop[aria-hidden="false"])
.listingRow [data-open-listing],

body:has(.modalBackdrop[aria-hidden="false"])
.listingRow .sellerNameLink,

body:has(.modalBackdrop[aria-hidden="false"])
.listingRow .listingActionStack,

body:has(.modalBackdrop[aria-hidden="false"])
.listingRow .bundleToggleButton,

body:has(.modalBackdrop.open)
.listingRow [data-open-listing],

body:has(.modalBackdrop.open)
.listingRow .sellerNameLink {
    z-index: 1 !important;
}



/* EASYLOOT STEP 9A MINIMAL HEADER */

/*
 * HERO
 */

.marketIntro {
    align-items: center !important;
    gap: 34px !important;

    margin-bottom: 24px !important;
}

.marketIntroCopy {
    flex: 1 1 auto;
    min-width: 0;
}

.marketEyebrow {
    gap: 10px !important;
}

.marketEyebrowDot {
    flex: 0 0 8px;

    animation:
        easylootLiveBlink
        1.05s
        ease-in-out
        infinite !important;
}

@keyframes easylootLiveBlink {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 15px
            rgba(120, 145, 63, .95);
    }

    50% {
        opacity: .18;
        transform: scale(.78);
        box-shadow:
            0 0 4px
            rgba(120, 145, 63, .25);
    }
}

.marketTitle {
    margin-top: 12px !important;

    font-size:
        clamp(
            42px,
            4.5vw,
            68px
        ) !important;

    line-height:
        .94 !important;
}

.marketSubtitle {
    width: max-content;
    max-width: 100% !important;

    margin-top: 15px !important;

    white-space: nowrap;

    line-height:
        1.55 !important;
}

.createListingButton {
    min-height: 50px !important;

    padding:
        0 22px !important;

    background:
        var(--green) !important;

    box-shadow:
        none !important;
}

.createListingButton:hover {
    background:
        #869f45 !important;
}

/*
 * MARKET PANEL
 */

.marketPanelTop {
    display: none !important;
}

.marketPanel {
    border-top:
        1px solid
        var(--line) !important;
}

/*
 * ПОКУПКА / ПРОДАЖА
 */

.marketTabs {
    gap: 0;

    border-bottom:
        1px solid
        var(--line) !important;

    background:
        rgba(0, 0, 0, .08);
}

.marketTab {
    position: relative;

    min-height:
        58px !important;

    gap:
        10px !important;

    border:
        0 !important;

    border-right:
        1px solid
        var(--line) !important;

    background:
        rgba(42, 41, 37, .72)
        !important;

    box-shadow:
        none !important;

    color:
        var(--muted) !important;

    transition:
        background .14s ease,
        color .14s ease;
}

.marketTab:last-child {
    border-right:
        0 !important;
}

.marketTab:hover {
    background:
        rgba(52, 50, 45, .86)
        !important;

    color:
        var(--text) !important;
}

.marketTab.active {
    background:
        rgba(48, 46, 41, .96)
        !important;

    color:
        var(--text) !important;

    box-shadow:
        inset 0 -3px 0
        var(--rust) !important;
}

.marketTab small {
    opacity:
        .72;

    font-size:
        9px !important;
}

/*
 * FILTERS
 */

.marketFilters {
    grid-template-columns:
        minmax(250px, 1.3fr)
        minmax(230px, 1.1fr)
        minmax(180px, 200px)
        auto
        44px
        !important;

    gap:
        8px !important;

    padding:
        12px !important;

    background:
        rgba(0, 0, 0, .07)
        !important;
}

.marketFilters .fieldInput,
.marketFilters .fieldSelect {
    min-height:
        44px !important;

    height:
        44px !important;

    padding:
        0 14px !important;

    background:
        rgba(39, 38, 34, .94)
        !important;

    box-shadow:
        none !important;
}

.marketFilters .fieldInput:hover,
.marketFilters .fieldSelect:hover,
.onlineFilter:hover,
.refreshButton:hover {
    border-color:
        var(--line-strong)
        !important;
}

.marketFilters .fieldInput:focus,
.marketFilters .fieldSelect:focus {
    border-color:
        rgba(211, 75, 55, .72)
        !important;
}

/*
 * Аккуратная стрелка сортировки.
 */

#filterSort {
    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    padding-right:
        45px !important;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #b9b3a8 50%
        ),
        linear-gradient(
            135deg,
            #b9b3a8 50%,
            transparent 50%
        ) !important;

    background-position:
        calc(100% - 20px) 19px,
        calc(100% - 15px) 19px
        !important;

    background-size:
        5px 5px,
        5px 5px
        !important;

    background-repeat:
        no-repeat !important;

    cursor:
        pointer;
}

.onlineFilter {
    min-height:
        44px !important;

    height:
        44px;

    padding:
        0 14px !important;

    background:
        rgba(39, 38, 34, .94)
        !important;
}

.refreshButton {
    width:
        44px !important;

    min-height:
        44px !important;

    height:
        44px !important;

    background:
        rgba(39, 38, 34, .94)
        !important;

    font-size:
        18px !important;
}

/*
 * Лишняя полоса:
 * «Маркетплейс в прямом эфире / Объявлений».
 *
 * Сам DOM оставляем, потому что market.js
 * обновляет скрытый listingCount.
 */

.marketStatus {
    display:
        none !important;
}

/*
 * Заголовок таблицы начинается сразу
 * после фильтров. Сами объявления не меняем.
 */

.listHeader {
    min-height:
        43px !important;
}

/*
 * AUTOCOMPLETE ПРЕДМЕТОВ
 */

#filterItemDropdown {
    top:
        calc(100% + 4px)
        !important;

    max-height:
        420px !important;

    border:
        1px solid
        var(--line-strong)
        !important;

    background:
        #1d1c19 !important;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .38)
        !important;
}

#filterItemDropdown .itemResult {
    min-height:
        60px;

    padding:
        8px 10px !important;
}

#filterItemDropdown .itemResult:hover,
#filterItemDropdown .itemResult:focus {
    background:
        rgba(120, 145, 63, .12)
        !important;
}

/*
 * ADAPTIVE
 */

@media (max-width: 1180px) {
    .marketSubtitle {
        width:
            auto;

        white-space:
            normal;
    }

    .marketFilters {
        grid-template-columns:
            minmax(220px, 1fr)
            minmax(210px, 1fr)
            180px
            auto
            44px
            !important;
    }
}

@media (max-width: 950px) {
    .marketIntro {
        align-items:
            flex-start !important;
    }

    .marketFilters {
        grid-template-columns:
            1fr
            1fr
            !important;
    }

    .marketFilters
    > :nth-child(5) {
        width:
            100% !important;
    }
}

@media (max-width: 650px) {
    .marketTitle {
        font-size:
            clamp(
                34px,
                11vw,
                48px
            ) !important;
    }

    .marketTabs {
        grid-template-columns:
            1fr
            1fr !important;
    }

    .marketTab {
        min-height:
            54px !important;

        padding:
            0 10px !important;
    }

    .marketTab small {
        display:
            none;
    }

    .marketFilters {
        grid-template-columns:
            1fr !important;
    }

    .refreshButton {
        width:
            100% !important;
    }
}


/* EASYLOOT STEP 9C V2 MEGA CATALOGS */

.marketFilters {
    position: relative;
    overflow: visible !important;
}

#filterItemDropdown {
    display: none !important;
}

.megaServerSearch,
.megaSort {
    position: relative;
    min-width: 0;
}

.megaCatalogPanel {
    position: absolute;

    z-index: 260;

    top: calc(100% + 5px);
    right: 12px;
    left: 12px;

    max-height: min(76vh, 820px);

    overflow: hidden;

    border: 1px solid var(--line-strong);

    background: #191b1c;

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, .68);
}

.megaCatalogPanel.hidden {
    display: none !important;
}

.megaCatalogHeader {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 0 14px 0 18px;

    border-bottom: 1px solid var(--line);

    background: #202220;
}

.megaCatalogHeader > div:first-child {
    display: flex;
    align-items: center;

    gap: 12px;
}

.megaCatalogHeader strong {
    color: var(--text);

    font-size: 13px;
    font-weight: 900;

    letter-spacing: .045em;
}

.megaCatalogHeader > div:first-child span {
    color: var(--green-bright);

    font-size: 10px;
    font-weight: 900;
}

.megaCatalogActions {
    display: flex;
    align-items: center;

    gap: 7px;
}

.megaCatalogActions button {
    min-height: 34px;

    border: 1px solid var(--line);

    background: rgba(255, 255, 255, .025);

    color: var(--muted);

    cursor: pointer;

    font-size: 9px;
    font-weight: 900;
}

.megaCatalogActions button:hover {
    border-color: var(--line-strong);
    color: var(--text);
}

.megaCatalogActions button:not(.megaCatalogClose) {
    padding: 0 12px;
}

.megaCatalogClose {
    width: 34px;
    padding: 0;

    font-size: 17px !important;
}

.megaCatalogContent {
    max-height: calc(min(76vh, 820px) - 59px);

    overflow-x: hidden;
    overflow-y: auto;

    padding: 21px 18px 27px;
}

.megaCatalogContent::-webkit-scrollbar {
    width: 9px;
}

.megaCatalogContent::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .18);
}

.megaCatalogContent::-webkit-scrollbar-thumb {
    background: #55534c;
}

.megaCatalogCategory + .megaCatalogCategory {
    margin-top: 27px;
}

.megaCatalogCategory h3 {
    margin: 0 0 10px;

    color: #d9d5cc;

    font-size: 14px;
    font-weight: 900;

    letter-spacing: .025em;
    text-transform: uppercase;
}

.megaCatalogGrid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 2px;
}

.megaCatalogCard {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 58px;

    display: grid;

    grid-template-columns:
        44px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 10px;

    padding: 6px 11px;

    border:
        1px solid
        rgba(74, 71, 66, .34);

    background:
        rgba(42, 38, 46, .88);

    color: var(--text);

    cursor: pointer;

    text-align: left;

    transition:
        background .12s ease,
        border-color .12s ease,
        box-shadow .12s ease;
}

.megaCatalogCard:hover,
.megaCatalogCard:focus {
    z-index: 2;

    border-color:
        rgba(120, 145, 63, .72);

    background:
        rgba(53, 49, 55, .98);

    outline: none;
}

.megaCatalogCard.selected {
    z-index: 3;

    border-color: var(--green);

    background:
        rgba(120, 145, 63, .17);

    box-shadow:
        inset 3px 0 0 var(--green),
        0 0 0 1px
        rgba(120, 145, 63, .24);
}

.megaCatalogIcon {
    position: relative;

    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        rgba(255, 255, 255, .025);
}

.megaCatalogFallback {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #858177;

    font-size: 13px;
    font-weight: 900;
}

.megaCatalogIcon img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}

.megaServerLogo img {
    object-fit: cover;
}

.megaCatalogCardText {
    min-width: 0;
}

.megaCatalogCardText strong,
.megaCatalogCardText small {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.megaCatalogCardText strong {
    color: #e4dfe7;

    font-size: 11px;
    font-weight: 700;
}

.megaCatalogCard:hover
.megaCatalogCardText strong {
    color: var(--green-bright);
}

.megaCatalogCardText small {
    margin-top: 4px;

    color: #77736d;

    font-size: 8px;
}

.megaCatalogNumber {
    min-width: 20px;

    color: #77736d;

    font-size: 8px;
    font-weight: 900;

    text-align: right;
}

.megaCatalogCard.selected
.megaCatalogNumber {
    color: var(--green-bright);
}

.megaCatalogEmpty,
.megaCatalogLoading {
    min-height: 180px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    color: var(--muted);

    font-size: 11px;

    text-align: center;
}

.megaCatalogEmpty strong {
    color: var(--text);
}

.megaSortNative {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;
    overflow: hidden !important;

    pointer-events: none !important;
}

.megaSortButton {
    width: 100%;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 0 16px;

    border: 1px solid var(--line);

    background:
        rgba(39, 38, 34, .94);

    color: var(--text);

    cursor: pointer;

    font-size: 12px;

    text-align: left;
}

.megaSortButton:hover,
.megaSortButton[aria-expanded="true"] {
    border-color: var(--line-strong);
}

.megaSortChevron {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    margin-right: 2px;

    border-right:
        2px solid #aaa49a;

    border-bottom:
        2px solid #aaa49a;

    transform:
        rotate(45deg)
        translateY(-2px);
}

.megaSortButton[aria-expanded="true"]
.megaSortChevron {
    transform:
        rotate(225deg)
        translate(-2px, -2px);
}

.megaSortMenu {
    position: absolute;

    z-index: 280;

    top: calc(100% + 4px);
    right: 0;
    left: 0;

    padding: 5px;

    border: 1px solid var(--line-strong);

    background: #1d1c19;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .46);
}

.megaSortMenu.hidden {
    display: none !important;
}

.megaSortMenu button {
    width: 100%;
    min-height: 41px;

    display: flex;
    align-items: center;

    padding: 0 12px;

    border: 0;

    background: transparent;

    color: var(--muted);

    cursor: pointer;

    font-size: 11px;

    text-align: left;
}

.megaSortMenu button:hover {
    background:
        rgba(255, 255, 255, .045);

    color: var(--text);
}

.megaSortMenu button.selected {
    background:
        rgba(120, 145, 63, .14);

    color: var(--green-bright);

    box-shadow:
        inset 3px 0 0
        var(--green);
}

@media (max-width: 1180px) {
    .megaCatalogGrid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 850px) {
    .megaCatalogGrid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .megaCatalogContent {
        padding: 17px 12px 22px;
    }
}

@media (max-width: 560px) {
    .megaCatalogGrid {
        grid-template-columns: 1fr;
    }

    .megaCatalogPanel {
        right: 5px;
        left: 5px;
    }

    .megaCatalogHeader {
        padding: 0 9px 0 12px;
    }

    .megaCatalogHeader strong {
        font-size: 10px;
    }
}

/* EASYLOOT STEP 9C.2 CATALOG LAYER FIX */

/*
 * Полноразмерный каталог должен находиться
 * выше абсолютно всех элементов объявлений,
 * но ниже окна оформления покупки.
 */

.marketPanel {
    position: relative !important;
    overflow: visible !important;
}

.marketFilters {
    position: relative !important;
    overflow: visible !important;
}

/*
 * Создаём высокий stacking context,
 * только пока один из каталогов открыт.
 */
.marketPanel:has(
    .megaCatalogPanel:not(.hidden)
) {
    z-index: 2147482400 !important;
}

.marketFilters:has(
    .megaCatalogPanel:not(.hidden)
) {
    z-index: 2147482450 !important;
}

.megaCatalogPanel {
    z-index: 2147482500 !important;
    isolation: isolate !important;

    background: #191b1c !important;
}

/*
 * Ники, кнопки, стрелки и раскрывающиеся
 * элементы объявлений принудительно уходят
 * под каталог.
 */
body:has(
    .megaCatalogPanel:not(.hidden)
)
#listingResults {
    position: relative !important;
    z-index: 1 !important;
}

body:has(
    .megaCatalogPanel:not(.hidden)
)
.listingRow,

body:has(
    .megaCatalogPanel:not(.hidden)
)
.listingRow > *,

body:has(
    .megaCatalogPanel:not(.hidden)
)
.listingRow .traderName,

body:has(
    .megaCatalogPanel:not(.hidden)
)
.listingRow .sellerNameLink,

body:has(
    .megaCatalogPanel:not(.hidden)
)
.listingRow .listingAction,

body:has(
    .megaCatalogPanel:not(.hidden)
)
.listingRow .listingActionStack,

body:has(
    .megaCatalogPanel:not(.hidden)
)
.listingRow [data-open-listing],

body:has(
    .megaCatalogPanel:not(.hidden)
)
.listingRow .bundleToggleButton,

body:has(
    .megaCatalogPanel:not(.hidden)
)
.listingRow .sellerBundleToggle,

body:has(
    .megaCatalogPanel:not(.hidden)
)
.listingRow .bundleOrderButton {
    z-index: 1 !important;
}

/*
 * Каталог получает полностью непрозрачное
 * содержимое, чтобы строки объявлений
 * визуально не просвечивали.
 */
.megaCatalogHeader {
    position: relative !important;
    z-index: 3 !important;

    background: #202220 !important;
}

.megaCatalogContent {
    position: relative !important;
    z-index: 2 !important;

    background: #191b1c !important;
}

/*
 * Карточки каталога находятся внутри
 * собственного слоя.
 */
.megaCatalogCategory,
.megaCatalogGrid,
.megaCatalogCard {
    position: relative;
}

/*
 * Сортировка выше обычных фильтров,
 * но ниже полноразмерного каталога.
 */
.megaSortMenu {
    z-index: 2147482300 !important;
}

/* EASYLOOT STEP 9C.4 ITEM MULTISELECT */

/*
 * Несколько выбранных карточек одновременно
 * остаются зелёными.
 */
.megaCatalogCard[aria-pressed="true"],
.megaCatalogCard.selected {
    z-index: 3;

    border-color:
        var(--green) !important;

    background:
        rgba(120, 145, 63, .18)
        !important;

    box-shadow:
        inset 3px 0 0
        var(--green),
        0 0 0 1px
        rgba(120, 145, 63, .25)
        !important;
}

.megaCatalogCard[aria-pressed="true"]
.megaCatalogCardText strong,

.megaCatalogCard.selected
.megaCatalogCardText strong {
    color:
        var(--green-bright)
        !important;
}

.megaCatalogCard[aria-pressed="true"]
.megaCatalogNumber,

.megaCatalogCard.selected
.megaCatalogNumber {
    color:
        var(--green-bright)
        !important;
}

/*
 * Строки, исключённые мультифильтром,
 * не занимают место.
 */
.listingRow.megaMultiFilteredOut {
    display: none !important;
}

.megaMultiFilterEmpty {
    min-height: 170px;
}

/*
 * Каталог остаётся активным и кликабельным
 * во время обновления биржи под ним.
 */
.megaCatalogPanel:not(.hidden) {
    pointer-events: auto !important;
}

.megaCatalogPanel:not(.hidden)
.megaCatalogCard {
    pointer-events: auto !important;
}

/* EASYLOOT STEP 9C.5 SERVER MULTISELECT */

/*
 * Несколько выбранных серверов
 * одновременно остаются зелёными.
 */
.megaServerCard[aria-pressed="true"],
.megaServerCard.selected {
    z-index: 3;

    border-color:
        var(--green) !important;

    background:
        rgba(120, 145, 63, .18)
        !important;

    box-shadow:
        inset 3px 0 0
        var(--green),
        0 0 0 1px
        rgba(120, 145, 63, .25)
        !important;
}

.megaServerCard[aria-pressed="true"]
.megaCatalogCardText strong,

.megaServerCard.selected
.megaCatalogCardText strong {
    color:
        var(--green-bright)
        !important;
}

.megaServerCard[aria-pressed="true"]
.megaCatalogNumber,

.megaServerCard.selected
.megaCatalogNumber {
    color:
        var(--green-bright)
        !important;
}

/*
 * Строка скрывается, если она не проходит
 * серверный мультифильтр.
 *
 * При активном выборе предметов итоговое
 * условие становится:
 *
 * выбранный предмет И выбранный сервер.
 */
.listingRow.megaServerMultiFilteredOut {
    display: none !important;
}

.megaServerMultiFilterEmpty {
    min-height: 170px;
}

/*
 * Каталог серверов остаётся открытым
 * и кликабельным во время обновления рынка.
 */
#megaServerPanel:not(.hidden) {
    pointer-events: auto !important;
}

#megaServerPanel:not(.hidden)
.megaServerCard {
    pointer-events: auto !important;
}

/* EASYLOOT STEP 9C.8 FILTER SELECTION BADGES */

.itemSearch,
.megaServerSearch {
    position: relative !important;
}

/*
 * Когда выбор активен, оставляем справа
 * место под красную надпись и крестик.
 */
.itemSearch.hasMegaSelection
#filterItemInput,

.megaServerSearch.hasMegaSelection
#filterServer {
    padding-right: 158px !important;
}

.megaFilterSelection {
    position: absolute;

    z-index: 35;

    top: 50%;
    right: 9px;

    display: flex;
    align-items: center;

    gap: 7px;

    transform: translateY(-50%);

    pointer-events: none;
}

.megaFilterSelection.hidden {
    display: none !important;
}

.megaFilterSelectionText {
    color: #e5534b;

    font-size: 9px;
    font-weight: 900;

    line-height: 1;

    letter-spacing: .025em;
    white-space: nowrap;

    text-transform: uppercase;

    text-shadow:
        0 0 14px
        rgba(229, 83, 75, .15);
}

.megaFilterSelectionText b {
    color: #ff6259;

    font: inherit;
}

.megaFilterSelectionClear {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(229, 83, 75, .52);

    background:
        rgba(229, 83, 75, .09);

    color: #ff6259;

    cursor: pointer;

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;

    line-height: 1;

    pointer-events: auto;

    transition:
        color .12s ease,
        border-color .12s ease,
        background .12s ease;
}

.megaFilterSelectionClear:hover,
.megaFilterSelectionClear:focus-visible {
    border-color: #ff6259;

    background:
        rgba(229, 83, 75, .19);

    color: #ffffff;

    outline: none;
}

.megaFilterSelectionClear:active {
    transform: scale(.94);
}

@media (max-width: 720px) {
    .itemSearch.hasMegaSelection
    #filterItemInput,

    .megaServerSearch.hasMegaSelection
    #filterServer {
        padding-right: 140px !important;
    }

    .megaFilterSelectionText {
        font-size: 8px;
    }

    .megaFilterSelectionClear {
        width: 22px;
        height: 22px;

        flex-basis: 22px;
    }
}

/* EASYLOOT STEP 10 SELLER RATING + SERVER HOVER */

/* =========================================================
   ПРОДАВЕЦ
   ========================================================= */

.sellerTrustCell {
    overflow: visible !important;
}

.sellerTrustCard {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;
}

.sellerTrustAvatar {
    position: relative;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    overflow: visible;
}

.sellerTrustAvatar img {
    width: 42px;
    height: 42px;

    display: block;

    object-fit: cover;

    border:
        1px solid
        rgba(255, 255, 255, .09);

    background: #252522;
}

.sellerTrustPresence {
    position: absolute;

    right: -2px;
    bottom: -2px;

    width: 10px;
    height: 10px;

    border:
        2px solid
        #1c1c19;

    border-radius: 50%;

    background: #696963;
}

.sellerTrustPresence.online {
    background: #7da033;

    box-shadow:
        0 0 9px
        rgba(125, 160, 51, .62);
}

.sellerTrustInfo {
    min-width: 0;
}

.sellerTrustTop {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 8px;
}

.sellerTrustName {
    min-width: 0;
    max-width: 140px;

    display: inline-block;

    overflow: hidden;

    color: #eeeae2;

    font-size: 13px;
    font-weight: 900;

    line-height: 1.15;

    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sellerTrustName:hover {
    color: #ffffff;
}

.sellerTrustRating {
    min-width: 43px;

    display: inline-flex;
    align-items: center;

    gap: 3px;

    color: #d4a62d;

    font-size: 10px;
    font-weight: 900;

    line-height: 1;

    white-space: nowrap;
}

.sellerTrustRating span {
    color: #efbc35;

    font-size: 12px;

    text-shadow:
        0 0 11px
        rgba(239, 188, 53, .22);
}

.sellerTrustBottom {
    margin-top: 6px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 4px;

    color: #85817a;

    font-size: 9px;
    font-weight: 700;

    line-height: 1.15;
}

.sellerTrustOnline.online {
    color: #7da033;
}

.sellerTrustPercent {
    color: #b5b1aa;
}

.sellerTrustDivider {
    color: #575550;
}

/* =========================================================
   СЕРВЕР
   ========================================================= */

.listingRow,
.serverHoverCell,
.serverHoverCard {
    overflow: visible !important;
}

.serverHoverCell {
    position: relative !important;
    z-index: 20;
}

.serverHoverCard {
    position: relative;

    width: fit-content;
    max-width: 100%;
}

.serverHoverIp {
    max-width: 210px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.serverHoverTooltip {
    position: absolute;

    z-index: 800;

    top: calc(100% + 9px);
    left: 0;

    width: 250px;

    padding: 12px;

    border:
        1px solid
        rgba(102, 99, 91, .8);

    background:
        rgba(25, 25, 22, .985);

    box-shadow:
        0 20px 48px
        rgba(0, 0, 0, .62);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: translateY(-4px);

    transition:
        opacity .12s ease,
        visibility .12s ease,
        transform .12s ease;
}

.serverHoverCard:hover
.serverHoverTooltip,

.serverHoverCard:focus-within
.serverHoverTooltip {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.serverHoverTooltip::before {
    content: "";

    position: absolute;

    top: -5px;
    left: 18px;

    width: 8px;
    height: 8px;

    border-top:
        1px solid
        rgba(102, 99, 91, .8);

    border-left:
        1px solid
        rgba(102, 99, 91, .8);

    background: #191916;

    transform: rotate(45deg);
}

.serverHoverTooltipHead {
    margin-bottom: 9px;
    padding-bottom: 9px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .07);

    color: #e0dcd3;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .055em;
}

.serverHoverTooltipRow {
    min-height: 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .035);
}

.serverHoverTooltipRow span {
    color: #77746d;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .04em;
}

.serverHoverTooltipRow strong {
    overflow: hidden;

    color: #d8d4cb;

    font-size: 9px;
    font-weight: 800;

    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.serverHoverVerified {
    margin-top: 9px;

    color: #83a83a;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .04em;
}

.serverHoverCopyHint {
    margin-top: 10px;

    color: #625f59;

    font-size: 8px;
    line-height: 1.35;
}

#listingResults,
.marketPanel {
    overflow: visible !important;
}

@media (max-width: 850px) {
    .serverHoverTooltip {
        right: 0;
        left: auto;

        width: min(250px, 76vw);
    }

    .serverHoverTooltip::before {
        right: 18px;
        left: auto;
    }

    .sellerTrustName {
        max-width: 110px;
    }
}

/* EASYLOOT STEP 10.3 V2 SOLID TOOLTIP */

.serverHoverTooltip {
    background:
        #10100e !important;

    background-color:
        #10100e !important;

    background-image:
        none !important;

    opacity: 0;

    isolation: isolate;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    mix-blend-mode:
        normal !important;

    box-shadow:
        0 0 0 1000px
        #10100e inset,
        0 24px 60px
        #000000 !important;
}

.serverHoverCard:hover
.serverHoverTooltip,

.serverHoverCard:focus-within
.serverHoverTooltip {
    opacity: 1 !important;
    visibility: visible !important;

    background:
        #10100e !important;

    background-color:
        #10100e !important;

    background-image:
        none !important;
}

.serverHoverTooltip::before {
    background:
        #10100e !important;

    background-color:
        #10100e !important;

    background-image:
        none !important;
}

.serverHoverTooltipHead,
.serverHoverTooltipRow,
.serverHoverVerified,
.serverHoverCopyHint {
    position: relative;
    z-index: 2;

    opacity: 1 !important;
}

.serverBadgeRow,
.newBadge,
.sellerNewBadge,
.traderNewBadge {
    display: none !important;
}

.sellerTrustRatingValue,
.sellerTrustDealsValue,
.sellerTrustPercentValue {
    font: inherit;
    color: inherit;
}

/* EASYLOOT STEP 10.4 SELLER METRICS STYLE */

.sellerTrustBottom.sellerTrustMetrics {
    margin-top: 8px;

    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    gap: 7px;

    color: #96928b;

    font-size: 10px;
    font-weight: 700;

    line-height: 1;

    white-space: nowrap;
}

.sellerTrustMetric {
    display: inline-flex;
    align-items: center;

    gap: 3px;
}

.sellerTrustMetric b {
    color: #b5b9c0;

    font: inherit;
    font-weight: 700;
}

.sellerTrustCompleted {
    color: #96928b;
}

.sellerTrustPercent {
    color: #8d99ab;
}

.sellerTrustPercent b {
    color: #9da9bc;
}

.sellerTrustTime {
    color: #96928b;
}

.sellerTrustTime b {
    color: #a9a59e;
}

.sellerTrustMetricDivider {
    color: #5e5c57;

    font-size: 9px;
    font-weight: 400;
}

/*
 * Минималистичная иконка часов
 * без использования emoji.
 */
.sellerTrustClock {
    position: relative;

    width: 11px;
    height: 11px;

    flex: 0 0 11px;

    display: inline-block;

    border:
        1px solid
        #7f858e;

    border-radius: 50%;
}

.sellerTrustClock::before {
    content: "";

    position: absolute;

    top: 2px;
    left: 4px;

    width: 1px;
    height: 3px;

    background: #8e949d;
}

.sellerTrustClock::after {
    content: "";

    position: absolute;

    top: 5px;
    left: 4px;

    width: 3px;
    height: 1px;

    background: #8e949d;

    transform-origin: left center;
    transform: rotate(18deg);
}

@media (max-width: 1100px) {
    .sellerTrustBottom.sellerTrustMetrics {
        gap: 5px;

        font-size: 9px;
    }

    .sellerTrustMetricDivider {
        font-size: 8px;
    }
}

/* EASYLOOT STEP 10.4.2 BIGGER ONLINE DOT START */
.sellerTrustPresence{
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
    min-height:14px !important;
    right:-3px !important;
    bottom:-3px !important;
    border:2px solid #23211d !important;
    border-radius:999px !important;
    box-shadow:0 0 0 1px rgba(0,0,0,.18) !important;
}

.sellerTrustPresence.online{
    background:#8fcb4c !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.18),
        0 0 10px rgba(143,203,76,.24) !important;
}
/* EASYLOOT STEP 10.4.2 BIGGER ONLINE DOT END */


/* EASYLOOT STEP 10.5 SERVER IDENTITY STYLE */

.serverDisplayButton {
    width: auto;
    max-width: 230px;

    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;

    gap: 9px;

    padding:
        6px 10px 6px 7px !important;

    text-align: left;
}

.serverDisplayLogoWrap {
    position: relative;

    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .09);

    background:
        #292822;
}

.serverDisplayLogoFallback {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    color: #d9d4c9;

    font-size: 13px;
    font-weight: 900;

    line-height: 1;
}

.serverDisplayLogo {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    background:
        #292822;
}

.serverDisplayLogo.isMissing {
    display: none !important;
}

.serverDisplayName {
    min-width: 0;
    max-width: 170px;

    display: block;

    overflow: hidden;

    color: #dedad1;

    font-size: 11px;
    font-weight: 900;

    line-height: 1.15;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.serverDisplayButton:hover
.serverDisplayName,

.serverDisplayButton:focus-visible
.serverDisplayName {
    color: #ffffff;
}

@media (max-width: 1000px) {
    .serverDisplayButton {
        max-width: 195px;
    }

    .serverDisplayName {
        max-width: 135px;

        font-size: 10px;
    }

    .serverDisplayLogoWrap {
        width: 28px;
        height: 28px;

        flex-basis: 28px;
    }
}

/* EASYLOOT STEP 10.6.3 CLEAN MODAL AND BUNDLE FIX */

/*
 * Основные колонки:
 * продавец → предмет → количество →
 * цена → сервер → действие.
 */
.listHeader,
.listingRow {
    grid-template-columns:
        minmax(185px, 1fr)
        minmax(205px, 1.08fr)
        minmax(150px, .78fr)
        minmax(115px, .64fr)
        minmax(180px, .92fr)
        minmax(112px, .58fr);
}

.marketColSeller {
    order: 1;
}

.marketColItem {
    order: 2;
}

.marketColQuantity {
    order: 3;
}

.marketColPrice {
    order: 4;
}

.marketColServer {
    order: 5;
}

.marketColAction {
    order: 6;
}


/* Основное количество */

.listingMainQuantityCell {
    overflow:
        visible !important;
}

.listingMainQuantity {
    min-width:
        118px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        6px;
}

.listingMainQtyStepper {
    width:
        max-content;

    display:
        grid;

    grid-template-columns:
        29px
        minmax(68px, 88px)
        29px;

    align-items:
        stretch;

    border:
        1px solid
        rgba(255,255,255,.12);

    background:
        #1b1b18;
}

.listingMainQtyButton {
    min-width:
        29px;

    height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        0;

    background:
        #292822;

    color:
        #d9d5cb;

    cursor:
        pointer;

    font-size:
        17px;

    font-weight:
        800;

    line-height:
        1;
}

.listingMainQtyButton:first-child {
    border-right:
        1px solid
        rgba(255,255,255,.08);
}

.listingMainQtyButton:last-child {
    border-left:
        1px solid
        rgba(255,255,255,.08);
}

.listingMainQtyButton:hover,
.listingMainQtyButton:focus-visible {
    background:
        #3a3831;

    color:
        #ffffff;

    outline:
        none;
}

.listingMainQtyInput {
    width:
        100%;

    min-width:
        0;

    height:
        34px;

    padding:
        0 5px;

    border:
        0;

    outline:
        none;

    background:
        #20201c;

    color:
        #f2eee5;

    font-size:
        12px;

    font-weight:
        900;

    text-align:
        center;

    appearance:
        textfield;

    -moz-appearance:
        textfield;
}

.listingMainQtyInput::-webkit-inner-spin-button,
.listingMainQtyInput::-webkit-outer-spin-button {
    margin:
        0;

    -webkit-appearance:
        none;
}

.listingMainQtyAvailable {
    color:
        #77736b;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    text-transform:
        lowercase;

    white-space:
        nowrap;
}


/* Зелёная динамическая цена */

.listingDynamicPriceCell {
    overflow:
        visible !important;
}

.listingDynamicPrice {
    color:
        #91ad4d !important;

    font-size:
        17px;

    font-weight:
        900;

    line-height:
        1;

    white-space:
        nowrap;

    text-shadow:
        0 0 16px
        rgba(120,147,62,.16);
}


/*
 * Раскрытая карточка.
 *
 * Родитель .bundleQtyWrap сохраняет
 * свою нормальную ширину и отступы.
 */
.bundleQtyWrap {
    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    gap:
        6px !important;

    margin:
        0 !important;

    padding:
        0 12px 12px !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}

/*
 * Верхнее “10 RUB — за 1 000”
 * больше не показываем.
 */
.bundleItemMeta {
    display:
        none !important;
}

.bundleQtyEditorV3 {
    width:
        100%;

    min-width:
        0;

    display:
        grid;

    grid-template-columns:
        30px
        minmax(0, 1fr)
        30px;

    align-items:
        stretch;

    margin:
        0;

    border:
        1px solid
        rgba(255,255,255,.11);

    background:
        #1c1c19;
}

.bundleQtyStep {
    width:
        30px;

    min-width:
        30px;

    height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        0;

    background:
        #282722;

    color:
        #d9d5cb;

    cursor:
        pointer;

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        1;
}

.bundleQtyMinus {
    border-right:
        1px solid
        rgba(255,255,255,.08);
}

.bundleQtyPlus {
    border-left:
        1px solid
        rgba(255,255,255,.08);
}

.bundleQtyStep:hover,
.bundleQtyStep:focus-visible {
    background:
        #37352f;

    color:
        #ffffff;

    outline:
        none;
}

.bundleQtyEditorV3
.bundleQtyInput {
    width:
        100% !important;

    min-width:
        0 !important;

    height:
        34px !important;

    margin:
        0 !important;

    padding:
        0 5px !important;

    border:
        0 !important;

    outline:
        none !important;

    background:
        #20201c !important;

    color:
        #f0ece3 !important;

    font-size:
        12px !important;

    font-weight:
        900 !important;

    text-align:
        center !important;

    appearance:
        textfield !important;

    -moz-appearance:
        textfield !important;
}

.bundleQtyEditorV3
.bundleQtyInput::-webkit-inner-spin-button,

.bundleQtyEditorV3
.bundleQtyInput::-webkit-outer-spin-button {
    margin:
        0;

    -webkit-appearance:
        none;
}

.bundleQtyLivePrice {
    width:
        100%;

    min-height:
        12px;

    margin:
        0;

    color:
        #91ad4d;

    font-size:
        10px;

    font-weight:
        900;

    line-height:
        1.15;

    text-align:
        center;

    white-space:
        nowrap;
}


/*
 * В окне покупки пользователь видит
 * количество лотов.
 *
 * Реальное количество ресурса остаётся
 * в скрытом штатном поле.
 */
#dealQuantity.dealQuantityRawStep10_6_3 {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    min-height:
        1px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    opacity:
        0 !important;

    pointer-events:
        none !important;

    overflow:
        hidden !important;
}

#dealQuantityLots {
    width:
        100%;
}


/* Адаптация */

@media (max-width: 1180px) {
    .listHeader,
    .listingRow {
        grid-template-columns:
            minmax(170px, 1fr)
            minmax(185px, 1fr)
            minmax(138px, .76fr)
            minmax(105px, .62fr)
            minmax(160px, .86fr)
            108px;
    }

    .listingMainQtyStepper {
        grid-template-columns:
            27px
            minmax(60px, 76px)
            27px;
    }

    .listingMainQtyButton {
        min-width:
            27px;
    }

    .listingDynamicPrice {
        font-size:
            15px;
    }
}

@media (max-width: 760px) {
    .bundleQtyWrap {
        width:
            100% !important;
    }
}

/* EASYLOOT STEP 10.6.5.2 SWAP SERVER PRICE START */

/*
 * Меняются местами только:
 * ЦЕНА и СЕРВЕР.
 *
 * Финальный порядок:
 * ПРОДАВЕЦ
 * ПРЕДМЕТ
 * КОЛИЧЕСТВО
 * СЕРВЕР
 * ЦЕНА
 * ДЕЙСТВИЕ
 */

.listHeader,
.listingRow {
    grid-template-columns:
        minmax(185px, 1fr)
        minmax(205px, 1.08fr)
        minmax(150px, .78fr)
        minmax(180px, .92fr)
        minmax(115px, .64fr)
        minmax(112px, .58fr) !important;
}

.marketColSeller {
    order: 1 !important;
}

.marketColItem {
    order: 2 !important;
}

.marketColQuantity {
    order: 3 !important;
}

.marketColServer {
    order: 4 !important;
}

.marketColPrice {
    order: 5 !important;
}

.marketColAction {
    order: 6 !important;
}

@media (max-width: 1180px) {
    .listHeader,
    .listingRow {
        grid-template-columns:
            minmax(170px, 1fr)
            minmax(185px, 1fr)
            minmax(138px, .76fr)
            minmax(160px, .86fr)
            minmax(105px, .62fr)
            108px !important;
    }
}

/* EASYLOOT STEP 10.6.5.2 SWAP SERVER PRICE END */

/* EASYLOOT STEP 10.6.5.3 SERVER AFTER SELLER START */

/*
 * Финальный порядок:
 * ПРОДАВЕЦ | СЕРВЕР | ПРЕДМЕТ | КОЛИЧЕСТВО | ЦЕНА | ДЕЙСТВИЕ
 */

.listHeader,
.listingRow {
    grid-template-columns:
        minmax(185px, 1fr)
        minmax(185px, .92fr)
        minmax(230px, 1.12fr)
        minmax(150px, .78fr)
        minmax(115px, .64fr)
        minmax(112px, .58fr) !important;
}

.marketColSeller {
    order: 1 !important;
}

.marketColServer {
    order: 2 !important;
}

.marketColItem {
    order: 3 !important;
}

.marketColQuantity {
    order: 4 !important;
}

.marketColPrice {
    order: 5 !important;
}

.marketColAction {
    order: 6 !important;
}

@media (max-width: 1180px) {
    .listHeader,
    .listingRow {
        grid-template-columns:
            minmax(170px, 1fr)
            minmax(165px, .88fr)
            minmax(205px, 1fr)
            minmax(138px, .76fr)
            minmax(105px, .62fr)
            108px !important;
    }
}

/* EASYLOOT STEP 10.6.5.3 SERVER AFTER SELLER END */

/* EASYLOOT STEP 10.6.5.4 QUANTITY LEFT START */

/*
 * Меняется только положение формы количества
 * внутри её существующего столбца.
 */

.listingRow > .marketColQuantity {
    justify-content:
        flex-start !important;

    justify-items:
        start !important;

    text-align:
        left !important;
}

.marketColQuantity
.listingMainQuantity {
    width:
        max-content !important;

    margin-left:
        0 !important;

    margin-right:
        auto !important;

    align-items:
        flex-start !important;

    justify-self:
        start !important;
}

.marketColQuantity
.listingMainQtyStepper {
    margin-left:
        0 !important;

    margin-right:
        0 !important;
}

.marketColQuantity
.listingMainQtyAvailable {
    width:
        100% !important;

    padding-left:
        0 !important;

    text-align:
        center !important;
}

/* EASYLOOT STEP 10.6.5.4 QUANTITY LEFT END */


/* EASYLOOT STEP 10.6.6 CLEAN FILTERS */

/*
 * Верхняя панель состоит только из:
 *
 * 50% — сервер
 * 50% — предмет
 */

.easylootFiltersTwoOnly {
    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    align-items:
        stretch !important;

    gap:
        8px !important;
}

.easylootFiltersTwoOnly
> .easylootFilterServerHalf {
    grid-column:
        1 !important;

    width:
        100% !important;

    min-width:
        0 !important;

    display:
        block !important;
}

.easylootFiltersTwoOnly
> .easylootFilterItemHalf {
    grid-column:
        2 !important;

    width:
        100% !important;

    min-width:
        0 !important;

    display:
        block !important;
}

.easylootFiltersTwoOnly
> .easylootFilterExtraControl {
    display:
        none !important;

    width:
        0 !important;

    min-width:
        0 !important;

    height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    overflow:
        hidden !important;

    pointer-events:
        none !important;

    visibility:
        hidden !important;
}

.easylootFilterServerHalf
#filterServer,

.easylootFilterItemHalf
#filterItemInput {
    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    height:
        44px !important;

    box-sizing:
        border-box !important;
}


/*
 * Переключатель языка в дорогом стиле
 * старого выпадающего фильтра.
 */

.easylootLanguageSelectFrame {
    position:
        relative;

    min-width:
        158px;

    height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    flex:
        0 0 auto;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .11);

    background:
        #25241f;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .025);

    transition:
        border-color .14s ease,
        background .14s ease,
        box-shadow .14s ease;
}

.easylootLanguageSelectFrame::after {
    content:
        "";

    position:
        absolute;

    top:
        50%;

    right:
        15px;

    width:
        7px;

    height:
        7px;

    border-right:
        2px solid
        #a9a59b;

    border-bottom:
        2px solid
        #a9a59b;

    transform:
        translateY(-70%)
        rotate(45deg);

    pointer-events:
        none;

    transition:
        border-color .14s ease;
}

.easylootLanguageSelectFrame:hover {
    border-color:
        rgba(145, 173, 77, .48);

    background:
        #2a2923;
}

.easylootLanguageSelectFrame:focus-within {
    border-color:
        #91ad4d;

    box-shadow:
        0 0 0 2px
        rgba(145, 173, 77, .12);
}

.easylootLanguageSelectFrame:hover::after,

.easylootLanguageSelectFrame:focus-within::after {
    border-color:
        #dce9b4;
}

#languageSelect.easylootLanguageSelectStyled {
    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 43px 0 15px !important;

    border:
        0 !important;

    outline:
        0 !important;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    background:
        transparent !important;

    color:
        #e4e0d7 !important;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        11px !important;

    font-weight:
        900 !important;

    line-height:
        1;

    letter-spacing:
        .035em;

    text-transform:
        uppercase;
}

#languageSelect.easylootLanguageSelectStyled
option {
    background:
        #23221e;

    color:
        #f0ece3;
}


/* Мобильный экран */

@media (max-width: 680px) {
    .easylootFiltersTwoOnly {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            8px !important;
    }

    .easylootFiltersTwoOnly
    > .easylootFilterServerHalf,

    .easylootFiltersTwoOnly
    > .easylootFilterItemHalf {
        grid-column:
            1 !important;
    }

    .easylootLanguageSelectFrame {
        min-width:
            132px;
    }
}

/* EASYLOOT STEP 10.6.7 HEADER SORTING */

.listHeader
> .easylootSortableHeader {
    position:
        relative;

    padding-right:
        24px !important;

    cursor:
        pointer;

    user-select:
        none;

    transition:
        color .14s ease,
        background .14s ease;
}

.listHeader
> .easylootSortableHeader:hover {
    color:
        #d9e9a9 !important;

    background:
        rgba(145, 173, 77, .045);
}

.listHeader
> .easylootSortableHeader:focus-visible {
    color:
        #d9e9a9 !important;

    outline:
        1px solid
        rgba(145, 173, 77, .44);

    outline-offset:
        -1px;
}

.listHeader
> .easylootSortableHeader::after {
    content:
        "↕";

    position:
        absolute;

    top:
        50%;

    right:
        8px;

    color:
        #5f5c54;

    font-size:
        10px;

    font-weight:
        900;

    line-height:
        1;

    transform:
        translateY(-50%);

    opacity:
        .65;

    transition:
        color .14s ease,
        opacity .14s ease;
}

.listHeader
> .easylootSortableHeader:hover::after {
    color:
        #9db85c;

    opacity:
        1;
}

.listHeader
> .easylootSortableHeader.easylootSortActive {
    color:
        #b3ce6a !important;

    background:
        rgba(145, 173, 77, .055);
}

.listHeader
> .easylootSortableHeader.easylootSortActive::after {
    color:
        #a9c861;

    opacity:
        1;
}

.listHeader
> .easylootSortableHeader.easylootSortAsc::after {
    content:
        "↑";
}

.listHeader
> .easylootSortableHeader.easylootSortDesc::after {
    content:
        "↓";
}

/* EASYLOOT STEP 10.6.7.3 REAL TALL SORT HIGHLIGHT */

/*
 * Используются настоящие классы,
 * которые устанавливает Step 10.6.7.
 */

.listHeader {
    align-items:
        stretch !important;

    min-height:
        52px !important;
}

.listHeader
> .easylootSortableHeader {
    min-height:
        52px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    box-sizing:
        border-box !important;

    margin:
        0 !important;

    padding:
        0 42px 0 14px !important;

    border-left:
        3px solid
        transparent !important;

    background:
        transparent !important;

    color:
        #8f8b80 !important;

    cursor:
        pointer !important;

    overflow:
        hidden !important;

    transition:
        background .16s ease,
        color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}


/* Большое зелёное выделение при наведении */

.listHeader
> .easylootSortableHeader:hover {
    border-left-color:
        rgba(155, 190, 75, .62) !important;

    background:
        linear-gradient(
            90deg,
            rgba(117, 147, 53, .22) 0%,
            rgba(91, 112, 43, .12) 72%,
            rgba(91, 112, 43, .035) 100%
        ) !important;

    color:
        #d7e9a7 !important;

    box-shadow:
        inset 0 1px 0
        rgba(178, 210, 105, .08),
        inset 0 -1px 0
        rgba(178, 210, 105, .15),
        inset 0 0 0 1px
        rgba(145, 173, 77, .07) !important;
}


/* Большое постоянное выделение активной сортировки */

.listHeader
> .easylootSortableHeader.easylootSortActive {
    border-left-color:
        #9cbc4f !important;

    background:
        linear-gradient(
            90deg,
            rgba(117, 151, 48, .31) 0%,
            rgba(91, 119, 39, .17) 72%,
            rgba(91, 119, 39, .055) 100%
        ) !important;

    color:
        #c9e57e !important;

    box-shadow:
        inset 0 1px 0
        rgba(198, 225, 128, .12),
        inset 0 -2px 0
        rgba(151, 184, 75, .55),
        inset 0 0 0 1px
        rgba(151, 184, 75, .11),
        0 0 18px
        rgba(104, 136, 43, .07) !important;

    text-shadow:
        0 0 12px
        rgba(155, 190, 75, .18);
}


/* Аккуратная квадратная кнопка направления */

.listHeader
> .easylootSortableHeader::after {
    position:
        absolute !important;

    top:
        50% !important;

    right:
        11px !important;

    width:
        22px !important;

    height:
        22px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    box-sizing:
        border-box !important;

    border:
        1px solid
        rgba(126, 125, 115, .28) !important;

    border-radius:
        3px !important;

    background:
        rgba(20, 21, 18, .74) !important;

    color:
        #706d64 !important;

    font-size:
        11px !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

    transform:
        translateY(-50%) !important;

    opacity:
        1 !important;

    transition:
        color .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.listHeader
> .easylootSortableHeader:hover::after {
    border-color:
        rgba(155, 190, 75, .42) !important;

    background:
        rgba(61, 75, 32, .48) !important;

    color:
        #b9d66f !important;
}

.listHeader
> .easylootSortableHeader.easylootSortActive::after {
    border-color:
        rgba(165, 199, 81, .62) !important;

    background:
        rgba(75, 98, 34, .72) !important;

    color:
        #ddf3a4 !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(196, 221, 125, .09),
        0 0 10px
        rgba(127, 159, 57, .12) !important;
}


/* Убираем прежнюю узкую полоску */

.listHeader
> .easylootSortableHeader.easylootSortActive::before {
    display:
        none !important;
}

/* EASYLOOT STEP 10.6.7.4 ALIGN STATIC HEADERS START */

/*
 * КОЛИЧЕСТВО и ДЕЙСТВИЕ не участвуют
 * в сортировке, но визуально получают
 * ту же высоту и вертикальное положение,
 * что сортируемые заголовки.
 */

.listHeader
> .marketColQuantity,

.listHeader
> .marketColAction {
    min-height:
        52px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    box-sizing:
        border-box !important;

    margin:
        0 !important;

    padding:
        0 14px !important;

    border-left:
        3px solid
        transparent !important;

    background:
        transparent !important;

    color:
        #8f8b80 !important;

    line-height:
        1 !important;

    overflow:
        hidden !important;
}


/*
 * Эти два заголовка не должны получать
 * стрелку, зелёный hover или курсор кнопки.
 */

.listHeader
> .marketColQuantity::before,

.listHeader
> .marketColQuantity::after,

.listHeader
> .marketColAction::before,

.listHeader
> .marketColAction::after {
    display:
        none !important;

    content:
        none !important;
}

.listHeader
> .marketColQuantity,

.listHeader
> .marketColAction {
    cursor:
        default !important;

    user-select:
        none !important;
}

/* EASYLOOT STEP 10.6.7.4 ALIGN STATIC HEADERS END */


/* EASYLOOT STEP 10.6.6.1 RESTORE FILTER CATALOGS */

.easylootFiltersTwoOnly {
    overflow:
        visible !important;
}

.easylootFilterServerHalf,
.easylootFilterItemHalf {
    position:
        relative !important;

    overflow:
        visible !important;
}

.easylootFilterServerHalf {
    z-index:
        32 !important;
}

.easylootFilterItemHalf {
    z-index:
        31 !important;
}

/*
 * Панели каталогов остаются поверх
 * объявлений и соседних элементов.
 * Состояние hidden не переопределяем.
 */

.easylootFiltersTwoOnly
[class*="catalog"],

.easylootFiltersTwoOnly
[id*="catalog"],

.easylootFiltersTwoOnly
[class*="dropdown"],

.easylootFiltersTwoOnly
[id*="dropdown"],

.easylootFiltersTwoOnly
[class*="popover"],

.easylootFiltersTwoOnly
[class*="suggest"],

.easylootFiltersTwoOnly
[role="listbox"],

.easylootFiltersTwoOnly
[role="menu"] {
    z-index:
        500 !important;
}

/* EASYLOOT STEP 10.6.6.2 HIDE SORT AND REFRESH ONLY */

/*
 * Скрываются исключительно:
 * 1. выпадающая сортировка;
 * 2. кнопка обновления.
 */

.easylootHideSortControlOnly,
.easylootHideRefreshControlOnly {
    display:
        none !important;

    width:
        0 !important;

    min-width:
        0 !important;

    max-width:
        0 !important;

    height:
        0 !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    overflow:
        hidden !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;
}

/* EASYLOOT STEP 11.1 CATALOG FAVORITES */

/*
 * Строки быстрых иконок над полями.
 */

.megaServerSearch,
.itemSearch {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0 !important;
}

.easylootQuickStrip {
    min-height: 42px;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.easylootQuickStrip::-webkit-scrollbar {
    display: none;
}

.easylootQuickStrip.isEmpty {
    display: none;
}

.easylootQuickIcon,
.easylootQuickSkeleton {
    width: 38px;
    height: 38px;
    min-width: 38px;
    flex: 0 0 38px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(121, 119, 108, .28);
    border-radius: 3px;
    background:
        linear-gradient(
            180deg,
            rgba(42, 43, 38, .98),
            rgba(27, 28, 25, .98)
        );
}

.easylootQuickSkeleton {
    opacity: .42;
    animation:
        easylootQuickPulse
        1.2s ease-in-out infinite;
}

@keyframes easylootQuickPulse {
    0%,
    100% {
        opacity: .28;
    }

    50% {
        opacity: .58;
    }
}

.easylootQuickIcon {
    padding: 0;
    cursor: pointer;
    color: #d8d5c8;
    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.easylootQuickIcon:hover,
.easylootQuickIcon:focus-visible {
    border-color: rgba(155, 188, 76, .62);
    background:
        linear-gradient(
            180deg,
            rgba(73, 87, 42, .98),
            rgba(40, 48, 28, .98)
        );
    box-shadow:
        0 0 14px rgba(130, 163, 57, .12);
    transform: translateY(-1px);
    outline: none;
}

.easylootQuickIcon.isSelected {
    border-color: #9dbc4f;
    background:
        linear-gradient(
            180deg,
            rgba(83, 104, 39, .98),
            rgba(47, 59, 29, .98)
        );
    box-shadow:
        inset 0 0 0 1px rgba(202, 228, 125, .11),
        0 0 14px rgba(139, 173, 61, .15);
}

.easylootQuickIcon img {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 2;
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
}

.easylootQuickFallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    color: #b8b4a7;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}


/*
 * Заголовок больше не занимает отдельную строку.
 * Название и счётчик скрыты.
 * СБРОСИТЬ и × расположены поверх общего фона.
 */

.megaCatalogPanel {
    position: relative !important;
}

.megaCatalogHeader {
    position: absolute !important;
    top: 11px !important;
    right: 11px !important;
    left: auto !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 80 !important;
    pointer-events: none !important;
}

.megaCatalogHeader > div:first-child {
    display: none !important;
}

.megaCatalogActions {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    pointer-events: auto !important;
}

.megaCatalogContent {
    padding-top: 15px !important;
}

.megaCatalogContent
> .megaCatalogCategory:first-child
> h3 {
    min-height: 34px;
    padding-right: 160px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}


/*
 * Звезда внутри каждой карточки.
 */

.megaCatalogCard {
    position: relative !important;
    padding-right: 48px !important;
}

.easylootFavoriteStar {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 50%;
    right: 9px;
    z-index: 12;
    display: grid;
    place-items: center;
    border: 1px solid rgba(122, 119, 107, .24);
    border-radius: 3px;
    background: rgba(19, 20, 18, .78);
    color: #65645c;
    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1;
    text-shadow: none;
    transform: translateY(-50%);
    transition:
        color .15s ease,
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.easylootFavoriteStar:hover {
    color: #d3b85a;
    border-color: rgba(211, 184, 90, .52);
    background: rgba(72, 62, 30, .82);
    box-shadow:
        0 0 12px rgba(211, 184, 90, .12);
    transform:
        translateY(-50%)
        scale(1.05);
}

.easylootFavoriteStar.isActive {
    color: #f0cb4d;
    border-color: rgba(240, 203, 77, .72);
    background:
        linear-gradient(
            180deg,
            rgba(92, 74, 25, .95),
            rgba(56, 46, 22, .95)
        );
    box-shadow:
        inset 0 0 0 1px rgba(255, 226, 119, .09),
        0 0 13px rgba(240, 203, 77, .16);
}


/*
 * Избранные карточки выводятся первым разделом.
 * Оригиналы в нижних категориях скрываются,
 * чтобы карточки не дублировались.
 */

.easylootFavoriteSection {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(156, 188, 79, .18);
}

.easylootFavoriteSection > h3 {
    color: #d9c268 !important;
    letter-spacing: .1em !important;
}

.easylootFavoriteOriginalHidden,
.easylootCategoryEmpty {
    display: none !important;
}

.easylootFavoriteClone {
    border-color: rgba(208, 180, 78, .25) !important;
}

.easylootFavoriteClone:hover {
    border-color: rgba(220, 193, 91, .48) !important;
}


/*
 * Во время быстрого применения фильтра
 * каталог работает, но визуально не всплывает.
 */

.megaCatalogPanel.easylootQuickSilent {
    position: fixed !important;
    top: -10000px !important;
    left: -10000px !important;
    width: 2px !important;
    height: 2px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* Мобильная версия */

@media (max-width: 680px) {
    .easylootQuickStrip {
        min-height: 38px;
        gap: 5px;
    }

    .easylootQuickIcon,
    .easylootQuickSkeleton {
        width: 34px;
        height: 34px;
        min-width: 34px;
        flex-basis: 34px;
    }

    .megaCatalogContent
    > .megaCatalogCategory:first-child
    > h3 {
        padding-right: 132px;
    }

    .megaCatalogCard {
        padding-right: 43px !important;
    }

    .easylootFavoriteStar {
        width: 25px;
        height: 25px;
        right: 7px;
        font-size: 15px;
    }
}

/* EASYLOOT STEP 11.1.1 CATALOG UI FIXES */

/*
 * Каталог становится настоящим выпадающим блоком:
 * появляется сразу под поисковыми полями и больше
 * не создаёт огромную пустоту внутри marketFilters.
 */

.marketPanel,
.marketFilters {
    overflow:
        visible !important;
}

.marketFilters {
    position:
        relative !important;

    padding-bottom:
        0 !important;

    margin-bottom:
        0 !important;

    min-height:
        0 !important;
}

.marketFilters:has(
    > .megaCatalogPanel:not(.hidden)
) {
    padding-bottom:
        0 !important;

    margin-bottom:
        0 !important;

    min-height:
        0 !important;
}

#megaItemPanel,
#megaServerPanel {
    position:
        absolute !important;

    top:
        calc(100% + 8px) !important;

    left:
        0 !important;

    right:
        0 !important;

    width:
        auto !important;

    max-width:
        none !important;

    margin:
        0 !important;

    grid-column:
        auto !important;

    grid-row:
        auto !important;

    z-index:
        1200 !important;

    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, .52) !important;
}

#megaItemPanel.hidden,
#megaServerPanel.hidden {
    display:
        none !important;
}

#megaItemPanel
.megaCatalogContent,

#megaServerPanel
.megaCatalogContent {
    max-height:
        min(56vh, 570px) !important;

    overflow-y:
        auto !important;
}


/*
 * ВЫБРАНО: N и крестик снова располагаются
 * внутри поля ввода, справа и вертикально по центру.
 */

.megaServerSearch,
.itemSearch {
    position:
        relative !important;
}

#megaServerSelectionIndicator,
#megaItemSelectionIndicator {
    position:
        absolute !important;

    top:
        auto !important;

    right:
        8px !important;

    bottom:
        6px !important;

    left:
        auto !important;

    width:
        auto !important;

    max-width:
        calc(100% - 24px) !important;

    min-height:
        28px !important;

    margin:
        0 !important;

    transform:
        none !important;

    z-index:
        45 !important;
}

#megaServerSelectionIndicator.hidden,
#megaItemSelectionIndicator.hidden {
    display:
        none !important;
}

.megaServerSearch:has(
    #megaServerSelectionIndicator:not(.hidden)
)
#filterServer,

.itemSearch:has(
    #megaItemSelectionIndicator:not(.hidden)
)
#filterItemInput {
    padding-right:
        154px !important;
}


/*
 * Во время быстрого выбора не показываем
 * повторные hover/active-анимации.
 */

.easylootQuickApplying
.easylootQuickIcon {
    pointer-events:
        none !important;

    transition:
        none !important;

    animation:
        none !important;

    transform:
        none !important;
}

.easylootQuickApplying
.easylootQuickIcon:hover,

.easylootQuickApplying
.easylootQuickIcon:focus,

.easylootQuickApplying
.easylootQuickIcon:active {
    transform:
        none !important;

    box-shadow:
        none !important;
}


/*
 * Если у быстрой кнопки есть настоящая картинка,
 * запасная буква под прозрачными пикселями
 * полностью скрывается.
 */

.easylootQuickIcon:has(> img)
.easylootQuickFallback {
    display:
        none !important;
}


/*
 * Дополнительно убираем active-прыжок кнопки.
 */

.easylootQuickIcon:active {
    transform:
        none !important;
}


/* Мобильная версия */

@media (max-width: 680px) {
    #megaItemPanel,
    #megaServerPanel {
        top:
            calc(100% + 6px) !important;

        max-height:
            68vh !important;
    }

    #megaServerSelectionIndicator,
    #megaItemSelectionIndicator {
        right:
            6px !important;

        bottom:
            5px !important;
    }

    .megaServerSearch:has(
        #megaServerSelectionIndicator:not(.hidden)
    )
    #filterServer,

    .itemSearch:has(
        #megaItemSelectionIndicator:not(.hidden)
    )
    #filterItemInput {
        padding-right:
            132px !important;
    }
}

/* EASYLOOT STEP 11.2 FAVORITES FIRST INLINE SEARCH */

/*
 * В каждой половине:
 * [ 10 быстрых иконок ][ короткий поиск ]
 */

.megaServerSearch,
.itemSearch {
    display:
        grid !important;

    grid-template-columns:
        minmax(0, 434px)
        minmax(180px, 1fr) !important;

    grid-template-rows:
        44px !important;

    align-items:
        center !important;

    gap:
        8px !important;

    min-height:
        44px !important;
}

.megaServerSearch
> .easylootQuickStrip,

.itemSearch
> .easylootQuickStrip {
    grid-column:
        1 !important;

    grid-row:
        1 !important;

    width:
        434px !important;

    max-width:
        100% !important;

    height:
        44px !important;

    min-height:
        44px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        6px !important;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;
}

#filterServer,
#filterItemInput {
    grid-column:
        2 !important;

    grid-row:
        1 !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        44px !important;

    min-height:
        44px !important;

    margin:
        0 !important;
}


/*
 * Избранная быстрая иконка:
 * лёгкая жёлтая рамка и мягкое свечение.
 */

.easylootQuickIcon.isFavorite {
    border-color:
        rgba(226, 193, 76, .72) !important;

    background:
        linear-gradient(
            180deg,
            rgba(70, 61, 30, .96),
            rgba(39, 36, 25, .98)
        ) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 226, 115, .08),
        0 0 10px
        rgba(226, 193, 76, .10) !important;
}

.easylootQuickIcon.isFavorite:hover,
.easylootQuickIcon.isFavorite:focus-visible {
    border-color:
        rgba(241, 210, 91, .92) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 231, 132, .12),
        0 0 14px
        rgba(231, 198, 77, .17) !important;
}

.easylootQuickIcon.isFavorite.isSelected {
    border-color:
        #edcc58 !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(157, 188, 79, .75),
        0 0 15px
        rgba(230, 198, 78, .18) !important;
}


/*
 * ВЫБРАНО: N × остаётся внутри
 * короткого поля справа.
 */

#megaServerSelectionIndicator,
#megaItemSelectionIndicator {
    top:
        50% !important;

    right:
        8px !important;

    bottom:
        auto !important;

    transform:
        translateY(-50%) !important;

    margin:
        0 !important;

    z-index:
        50 !important;
}

.megaServerSearch:has(
    #megaServerSelectionIndicator:not(.hidden)
)
#filterServer,

.itemSearch:has(
    #megaItemSelectionIndicator:not(.hidden)
)
#filterItemInput {
    padding-right:
        154px !important;
}


/*
 * Каталог по-прежнему открывается
 * сразу под общей строкой иконок и поиска.
 */

#megaItemPanel,
#megaServerPanel {
    top:
        calc(100% + 8px) !important;
}


/*
 * На немного более узких мониторах
 * область иконок прокручивается горизонтально,
 * а поиск остаётся пригодным для ввода.
 */

@media (max-width: 1280px) {
    .megaServerSearch,
    .itemSearch {
        grid-template-columns:
            minmax(0, 330px)
            minmax(150px, 1fr) !important;
    }

    .megaServerSearch
    > .easylootQuickStrip,

    .itemSearch
    > .easylootQuickStrip {
        width:
            330px !important;
    }
}


/*
 * На мобильном экране элементы остаются
 * удобными и не сжимают поле до нескольких пикселей.
 */

@media (max-width: 760px) {
    .megaServerSearch,
    .itemSearch {
        grid-template-columns:
            minmax(0, 1fr) !important;

        grid-template-rows:
            40px
            42px !important;

        gap:
            6px !important;
    }

    .megaServerSearch
    > .easylootQuickStrip,

    .itemSearch
    > .easylootQuickStrip {
        grid-column:
            1 !important;

        grid-row:
            1 !important;

        width:
            100% !important;

        height:
            40px !important;

        min-height:
            40px !important;
    }

    #filterServer,
    #filterItemInput {
        grid-column:
            1 !important;

        grid-row:
            2 !important;

        height:
            42px !important;

        min-height:
            42px !important;
    }

    #megaServerSelectionIndicator,
    #megaItemSelectionIndicator {
        top:
            auto !important;

        bottom:
            7px !important;

        transform:
            none !important;
    }
}

/* EASYLOOT STEP 11.2.1 FORCE SINGLE ROW */

/*
 * Жёстко фиксируем компоновку:
 *
 * [ 10 ИКОНОК СЛЕВА ][ ПОИСК СПРАВА ]
 *
 * Grid из прошлого этапа заменяется обычным flex,
 * чтобы поле больше никогда не переносилось вниз.
 */

.marketFilters
> .megaServerSearch,

.marketFilters
> .itemSearch {
    position:
        relative !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        44px !important;

    min-height:
        44px !important;

    max-height:
        44px !important;

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    gap:
        8px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    grid-template-columns:
        none !important;

    grid-template-rows:
        none !important;
}


/*
 * Быстрые иконки всегда находятся слева.
 *
 * Полная ширина десяти иконок:
 * 10 × 38px + промежутки.
 *
 * При нехватке места область уменьшается,
 * но не переносится вниз — внутри появляется
 * горизонтальная прокрутка.
 */

.marketFilters
> .megaServerSearch
> .easylootQuickStrip,

.marketFilters
> .itemSearch
> .easylootQuickStrip {
    order:
        1 !important;

    flex:
        0 1 434px !important;

    width:
        434px !important;

    max-width:
        calc(100% - 188px) !important;

    min-width:
        0 !important;

    height:
        44px !important;

    min-height:
        44px !important;

    max-height:
        44px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    gap:
        6px !important;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    grid-column:
        auto !important;

    grid-row:
        auto !important;

    scrollbar-width:
        none !important;
}

.marketFilters
> .megaServerSearch
> .easylootQuickStrip::-webkit-scrollbar,

.marketFilters
> .itemSearch
> .easylootQuickStrip::-webkit-scrollbar {
    display:
        none !important;
}


/*
 * Поля поиска всегда располагаются справа.
 */

.marketFilters
> .megaServerSearch
> #filterServer,

.marketFilters
> .itemSearch
> #filterItemInput {
    order:
        2 !important;

    flex:
        1 1 180px !important;

    width:
        auto !important;

    min-width:
        180px !important;

    max-width:
        none !important;

    height:
        44px !important;

    min-height:
        44px !important;

    max-height:
        44px !important;

    margin:
        0 0 0 auto !important;

    grid-column:
        auto !important;

    grid-row:
        auto !important;

    align-self:
        center !important;
}


/*
 * Скрытые технические элементы не должны
 * занимать место внутри flex-строки.
 */

.marketFilters
> .itemSearch
> #filterResourceId,

.marketFilters
> .itemSearch
> #filterItemDropdown {
    position:
        absolute !important;
}


/*
 * Индикатор выбора остаётся внутри
 * короткого поля справа.
 */

#megaServerSelectionIndicator,
#megaItemSelectionIndicator {
    position:
        absolute !important;

    top:
        50% !important;

    right:
        8px !important;

    bottom:
        auto !important;

    left:
        auto !important;

    width:
        auto !important;

    max-width:
        148px !important;

    min-height:
        28px !important;

    margin:
        0 !important;

    transform:
        translateY(-50%) !important;

    z-index:
        60 !important;
}

.megaServerSearch:has(
    #megaServerSelectionIndicator:not(.hidden)
)
#filterServer,

.itemSearch:has(
    #megaItemSelectionIndicator:not(.hidden)
)
#filterItemInput {
    padding-right:
        154px !important;
}


/*
 * Обычный выбранный быстрый элемент —
 * зелёный.
 */

.easylootQuickIcon.isSelected {
    background:
        linear-gradient(
            180deg,
            rgba(112, 144, 49, .98) 0%,
            rgba(58, 78, 29, .98) 100%
        ) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(199, 229, 119, .17),
        inset 0 -3px 0
        rgba(157, 197, 73, .88),
        0 0 14px
        rgba(129, 169, 55, .17) !important;
}


/*
 * Выбранное ИЗБРАННОЕ:
 *
 * - внутри зелёное;
 * - внешняя рамка остаётся золотой.
 */

.easylootQuickIcon.isFavorite.isSelected {
    border-color:
        #edca50 !important;

    background:
        linear-gradient(
            180deg,
            rgba(119, 151, 52, .99) 0%,
            rgba(57, 79, 29, .99) 100%
        ) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 227, 118, .25),
        inset 0 -3px 0
        rgba(163, 205, 77, .95),
        0 0 15px
        rgba(224, 190, 67, .16),
        0 0 18px
        rgba(127, 170, 53, .13) !important;
}

.easylootQuickIcon.isFavorite.isSelected:hover,
.easylootQuickIcon.isFavorite.isSelected:focus-visible {
    border-color:
        #f4d361 !important;

    background:
        linear-gradient(
            180deg,
            rgba(130, 165, 57, .99) 0%,
            rgba(62, 85, 31, .99) 100%
        ) !important;
}


/*
 * Даже на более узких экранах всё остаётся
 * в одной строке. Иконки просто получают
 * меньшую видимую область с прокруткой.
 */

@media (max-width: 1280px) {
    .marketFilters
    > .megaServerSearch
    > .easylootQuickStrip,

    .marketFilters
    > .itemSearch
    > .easylootQuickStrip {
        flex-basis:
            330px !important;

        width:
            330px !important;

        max-width:
            calc(100% - 168px) !important;
    }

    .marketFilters
    > .megaServerSearch
    > #filterServer,

    .marketFilters
    > .itemSearch
    > #filterItemInput {
        flex-basis:
            160px !important;

        min-width:
            160px !important;
    }
}

@media (max-width: 760px) {
    .marketFilters
    > .megaServerSearch,

    .marketFilters
    > .itemSearch {
        height:
            42px !important;

        min-height:
            42px !important;

        max-height:
            42px !important;

        flex-direction:
            row !important;

        flex-wrap:
            nowrap !important;

        gap:
            6px !important;
    }

    .marketFilters
    > .megaServerSearch
    > .easylootQuickStrip,

    .marketFilters
    > .itemSearch
    > .easylootQuickStrip {
        flex:
            1 1 auto !important;

        width:
            auto !important;

        max-width:
            calc(100% - 146px) !important;

        height:
            42px !important;

        min-height:
            42px !important;
    }

    .marketFilters
    > .megaServerSearch
    > #filterServer,

    .marketFilters
    > .itemSearch
    > #filterItemInput {
        flex:
            0 0 140px !important;

        width:
            140px !important;

        min-width:
            140px !important;

        height:
            42px !important;

        min-height:
            42px !important;
    }

    #megaServerSelectionIndicator,
    #megaItemSelectionIndicator {
        top:
            50% !important;

        right:
            5px !important;

        bottom:
            auto !important;

        transform:
            translateY(-50%) !important;
    }
}

/* EASYLOOT STEP 11.2.2 SEARCH BOTTOM SPACING */

/*
 * Воздух между строкой быстрых иконок/поиска
 * и заголовками таблицы объявлений.
 */

.marketPanel > .marketFilters {
    margin-bottom:
        16px !important;
}

/*
 * Выпадающий каталог остаётся привязан
 * непосредственно к строке поиска.
 */

#megaItemPanel,
#megaServerPanel {
    top:
        calc(100% + 8px) !important;
}

@media (max-width: 760px) {
    .marketPanel > .marketFilters {
        margin-bottom:
            12px !important;
    }
}

/* EASYLOOT STEP 11.2.3 SEAMLESS SEARCH SPACING */

/*
 * Создаём полноценное пространство под строкой поиска,
 * но продолжаем фон marketFilters вниз, чтобы не было
 * чужой полосы между поиском и заголовками таблицы.
 */

.marketPanel > .marketFilters {
    position:
        relative !important;

    margin-bottom:
        20px !important;

    border-bottom:
        0 !important;

    box-shadow:
        none !important;
}

.marketPanel > .marketFilters::after {
    content:
        "" !important;

    position:
        absolute !important;

    left:
        0 !important;

    right:
        0 !important;

    bottom:
        -20px !important;

    height:
        20px !important;

    display:
        block !important;

    background:
        inherit !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    pointer-events:
        none !important;

    z-index:
        0 !important;
}


/*
 * Убираем старую линию непосредственно
 * над заголовками колонок.
 */

.marketPanel > .listHeader {
    margin-top:
        0 !important;

    border-top:
        0 !important;

    box-shadow:
        none !important;
}


/*
 * Выпадающие каталоги остаются выше декоративного
 * продолжения фона.
 */

#megaItemPanel,
#megaServerPanel {
    z-index:
        1200 !important;
}


/* Мобильная версия */

@media (max-width: 760px) {
    .marketPanel > .marketFilters {
        margin-bottom:
            15px !important;
    }

    .marketPanel > .marketFilters::after {
        bottom:
            -15px !important;

        height:
            15px !important;
    }
}

/* EASYLOOT STEP 11.2.4 COMPACT GAP HEADER LINE */

/*
 * Более компактное пространство между поиском
 * и заголовками таблицы.
 */

.marketPanel > .marketFilters {
    margin-bottom:
        10px !important;
}

.marketPanel > .marketFilters::after {
    bottom:
        -10px !important;

    height:
        10px !important;
}


/*
 * Верхняя линия у заголовков таблицы —
 * визуально такая же спокойная, как нижняя.
 */

.marketPanel > .listHeader {
    border-top:
        1px solid
        rgba(121, 119, 108, .18) !important;

    box-shadow:
        none !important;
}


/* Мобильная версия */

@media (max-width: 760px) {
    .marketPanel > .marketFilters {
        margin-bottom:
            8px !important;
    }

    .marketPanel > .marketFilters::after {
        bottom:
            -8px !important;

        height:
            8px !important;
    }
}

/* EASYLOOT STEP 11.2.5 QUICK FILTER NO LAYOUT JUMP */

/*
 * При быстром выборе существующий JavaScript
 * на мгновение открывает каталог в скрытом режиме.
 *
 * Старое правило для открытого каталога временно
 * сбрасывало margin-bottom до 0, из-за чего таблица
 * подскакивала вверх и сразу возвращалась обратно.
 *
 * Фиксируем геометрию фильтров во всех состояниях.
 */

.marketPanel
> .marketFilters,

.marketPanel
> .marketFilters:has(
    > .megaCatalogPanel:not(.hidden)
),

html.easylootQuickApplying
.marketPanel
> .marketFilters {
    margin-bottom:
        10px !important;

    min-height:
        44px !important;

    padding-bottom:
        0 !important;
}


/*
 * Декоративное продолжение фона тоже сохраняет
 * постоянную высоту во время быстрого выбора.
 */

.marketPanel
> .marketFilters::after,

.marketPanel
> .marketFilters:has(
    > .megaCatalogPanel:not(.hidden)
)::after,

html.easylootQuickApplying
.marketPanel
> .marketFilters::after {
    bottom:
        -10px !important;

    height:
        10px !important;
}


/*
 * Заголовок таблицы не должен получать
 * временные сдвиги или переходы.
 */

html.easylootQuickApplying
.marketPanel
> .listHeader {
    margin-top:
        0 !important;

    transform:
        none !important;

    transition:
        none !important;
}


/* Мобильная версия */

@media (max-width: 760px) {
    .marketPanel
    > .marketFilters,

    .marketPanel
    > .marketFilters:has(
        > .megaCatalogPanel:not(.hidden)
    ),

    html.easylootQuickApplying
    .marketPanel
    > .marketFilters {
        margin-bottom:
            8px !important;

        min-height:
            42px !important;
    }

    .marketPanel
    > .marketFilters::after,

    .marketPanel
    > .marketFilters:has(
        > .megaCatalogPanel:not(.hidden)
    )::after,

    html.easylootQuickApplying
    .marketPanel
    > .marketFilters::after {
        bottom:
            -8px !important;

        height:
            8px !important;
    }
}

/* EASYLOOT STEP 11.2.6 WIDER SEARCH FIELDS */

/*
 * Поле поиска получает достаточную ширину,
 * а быстрые иконки занимают оставшееся место слева.
 */

.marketFilters
> .megaServerSearch
> .easylootQuickStrip,

.marketFilters
> .itemSearch
> .easylootQuickStrip {
    flex:
        1 1 auto !important;

    width:
        auto !important;

    max-width:
        calc(100% - 308px) !important;

    min-width:
        0 !important;
}

.marketFilters
> .megaServerSearch
> #filterServer,

.marketFilters
> .itemSearch
> #filterItemInput {
    flex:
        0 0 300px !important;

    width:
        300px !important;

    min-width:
        300px !important;

    max-width:
        300px !important;

    padding-left:
        16px !important;

    box-sizing:
        border-box !important;

    text-overflow:
        clip !important;
}


/*
 * Под индикатор выбора резервируем только
 * фактически необходимое пространство.
 */

.megaServerSearch:has(
    #megaServerSelectionIndicator:not(.hidden)
)
#filterServer,

.itemSearch:has(
    #megaItemSelectionIndicator:not(.hidden)
)
#filterItemInput {
    padding-right:
        126px !important;
}

#megaServerSelectionIndicator,
#megaItemSelectionIndicator {
    max-width:
        118px !important;

    right:
        7px !important;
}


/*
 * На средних экранах поиск всё равно остаётся
 * достаточно широким для полного названия.
 */

@media (max-width: 1280px) and (min-width: 761px) {
    .marketFilters
    > .megaServerSearch
    > .easylootQuickStrip,

    .marketFilters
    > .itemSearch
    > .easylootQuickStrip {
        max-width:
            calc(100% - 248px) !important;
    }

    .marketFilters
    > .megaServerSearch
    > #filterServer,

    .marketFilters
    > .itemSearch
    > #filterItemInput {
        flex-basis:
            240px !important;

        width:
            240px !important;

        min-width:
            240px !important;

        max-width:
            240px !important;
    }

    .megaServerSearch:has(
        #megaServerSelectionIndicator:not(.hidden)
    )
    #filterServer,

    .itemSearch:has(
        #megaItemSelectionIndicator:not(.hidden)
    )
    #filterItemInput {
        padding-right:
            120px !important;
    }
}


/*
 * Мобильную компоновку оставляем компактной,
 * но увеличиваем полезную ширину поля.
 */

@media (max-width: 760px) {
    .marketFilters
    > .megaServerSearch
    > .easylootQuickStrip,

    .marketFilters
    > .itemSearch
    > .easylootQuickStrip {
        max-width:
            calc(100% - 156px) !important;
    }

    .marketFilters
    > .megaServerSearch
    > #filterServer,

    .marketFilters
    > .itemSearch
    > #filterItemInput {
        flex:
            0 0 150px !important;

        width:
            150px !important;

        min-width:
            150px !important;

        max-width:
            150px !important;

        padding-left:
            10px !important;
    }

    .megaServerSearch:has(
        #megaServerSelectionIndicator:not(.hidden)
    )
    #filterServer,

    .itemSearch:has(
        #megaItemSelectionIndicator:not(.hidden)
    )
    #filterItemInput {
        padding-right:
            105px !important;
    }

    #megaServerSelectionIndicator,
    #megaItemSelectionIndicator {
        max-width:
            100px !important;
    }
}

/* EASYLOOT STEP 11.2.8 FIT TEN QUICK ICONS */

/*
 * Поля поиска становятся на 20 px компактнее.
 * Их правая граница остаётся на месте,
 * а левая сдвигается вправо, освобождая место
 * для полной десятой быстрой иконки.
 *
 * Правило одинаково для серверов и предметов.
 */

@media (min-width: 1281px) {
    .marketFilters
    > .megaServerSearch
    > .easylootQuickStrip,

    .marketFilters
    > .itemSearch
    > .easylootQuickStrip {
        max-width:
            calc(100% - 288px) !important;
    }

    .marketFilters
    > .megaServerSearch
    > #filterServer,

    .marketFilters
    > .itemSearch
    > #filterItemInput {
        flex:
            0 0 280px !important;

        width:
            280px !important;

        min-width:
            280px !important;

        max-width:
            280px !important;
    }
}


/*
 * При выбранном фильтре текст ВЫБРАНО и крестик
 * остаются внутри справа, а название поиска
 * продолжает помещаться полностью.
 */

@media (min-width: 1281px) {
    .megaServerSearch:has(
        #megaServerSelectionIndicator:not(.hidden)
    )
    #filterServer,

    .itemSearch:has(
        #megaItemSelectionIndicator:not(.hidden)
    )
    #filterItemInput {
        padding-right:
            122px !important;
    }

    #megaServerSelectionIndicator,
    #megaItemSelectionIndicator {
        max-width:
            114px !important;
    }
}

/* EASYLOOT STEP 12.1 MAGICRUST GLOBAL SERVER CATALOG */

.easylootServerProject {
    margin-top: 12px;
}

.easylootServerProject:first-of-type {
    margin-top: 8px;
}

.easylootServerProjectTitle {
    margin: 0 0 8px;
    color: rgba(238, 236, 228, .68);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    line-height: 1;
    text-transform: uppercase;
}

.easylootNoListingSection {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.easylootNoListingTitle {
    margin-bottom: 14px;
    color: rgba(238, 236, 228, .48);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
}

.easylootNoListingSection .megaServerCard {
    opacity: .76;
}

.easylootNoListingSection .megaServerCard:hover,
.easylootNoListingSection .megaServerCard:focus,
.easylootNoListingSection .megaServerCard.selected,
.easylootNoListingSection
.megaServerCard[aria-pressed="true"] {
    opacity: 1;
}

@media (max-width: 760px) {
    .easylootNoListingSection {
        margin-top: 14px;
        padding-top: 13px;
    }
}

/* EASYLOOT STEP 12.7 SERVER ORDER UNIFORM LOGOS */

.megaServerCard
.easylootServerLogoSlot {
    width:
        36px !important;

    min-width:
        36px !important;

    max-width:
        36px !important;

    height:
        36px !important;

    min-height:
        36px !important;

    max-height:
        36px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex:
        0 0 36px !important;

    overflow:
        hidden !important;

    box-sizing:
        border-box !important;
}

.megaServerCard
.easylootNormalizedServerLogo {
    width:
        28px !important;

    min-width:
        28px !important;

    max-width:
        28px !important;

    height:
        28px !important;

    min-height:
        28px !important;

    max-height:
        28px !important;

    display:
        block !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    margin:
        0 !important;

    padding:
        0 !important;
}

.megaServerSearch
.easylootQuickIcon
.easylootNormalizedServerLogo {
    width:
        26px !important;

    min-width:
        26px !important;

    max-width:
        26px !important;

    height:
        26px !important;

    min-height:
        26px !important;

    max-height:
        26px !important;

    display:
        block !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    margin:
        auto !important;

    padding:
        0 !important;
}

.easylootHasServerLogo
[data-easyloot-logo-fallback-hidden="1"] {
    display:
        none !important;
}

.easylootHasServerLogo
.easylootServerLogoSlot::before,

.easylootHasServerLogo
.easylootServerLogoSlot::after {
    content:
        none !important;

    display:
        none !important;
}

.easylootHasServerLogo
.easylootNormalizedServerLogo {
    position:
        relative !important;

    z-index:
        3 !important;

    opacity:
        1 !important;

    visibility:
        visible !important;
}

/* EASYLOOT STEP 12.7.1 LOGO SIZE FAVORITES FIX */

/*
 * Каталог серверов: одинаковая область,
 * одинаковый визуальный размер логотипа.
 */

.megaServerCard
.easylootServerLogoSlot {
    width:
        40px !important;

    min-width:
        40px !important;

    max-width:
        40px !important;

    height:
        40px !important;

    min-height:
        40px !important;

    max-height:
        40px !important;

    flex:
        0 0 40px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    overflow:
        hidden !important;
}

.megaServerCard
.easylootServerLogoSlot
> img.easylootNormalizedServerLogo {
    width:
        32px !important;

    min-width:
        32px !important;

    max-width:
        32px !important;

    height:
        32px !important;

    min-height:
        32px !important;

    max-height:
        32px !important;

    display:
        block !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    transform:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/*
 * Быстрые серверы возле поиска.
 */

.megaServerSearch
.easylootQuickIcon
img.easylootNormalizedServerLogo {
    width:
        28px !important;

    min-width:
        28px !important;

    max-width:
        28px !important;

    height:
        28px !important;

    min-height:
        28px !important;

    max-height:
        28px !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    transform:
        none !important;

    margin:
        auto !important;
}


/*
 * Есть рабочая картинка — буква не нужна.
 * Нет картинки или загрузка сломалась —
 * буквенная заглушка остаётся.
 */

.easylootHasServerLogo
[data-easyloot-logo-fallback-hidden="1"] {
    display:
        none !important;
}


/*
 * Кнопка звезды всегда остаётся поверх
 * декоративных элементов карточки.
 */

.megaServerCard
.easylootFavoriteStar {
    position:
        relative !important;

    z-index:
        20 !important;

    pointer-events:
        auto !important;
}

/* EASYLOOT STEP 12.7.2 SERVER STAR POSITION */

/*
 * Step 12.7.1 случайно сделал серверную звезду
 * обычным элементом потока через position: relative,
 * из-за чего она переносилась вниз карточки.
 */

.megaServerCard {
    position:
        relative !important;
}

.megaServerCard
.easylootFavoriteStar {
    position:
        absolute !important;

    top:
        50% !important;

    right:
        10px !important;

    bottom:
        auto !important;

    left:
        auto !important;

    width:
        28px !important;

    min-width:
        28px !important;

    max-width:
        28px !important;

    height:
        28px !important;

    min-height:
        28px !important;

    max-height:
        28px !important;

    margin:
        0 !important;

    transform:
        translateY(-50%) !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    z-index:
        30 !important;

    pointer-events:
        auto !important;
}


/*
 * Оставляем справа место под счётчик и звезду,
 * чтобы они не пересекались с названием сервера.
 */

.megaServerCard {
    padding-right:
        70px !important;

    box-sizing:
        border-box !important;
}


/*
 * На узких экранах положение остаётся тем же.
 */

@media (max-width: 760px) {
    .megaServerCard
    .easylootFavoriteStar {
        right:
            8px !important;
    }

    .megaServerCard {
        padding-right:
            64px !important;
    }
}

/* EASYLOOT STEP 12.7.3 SERVER COUNT NEAR STAR */

/*
 * У серверов число объявлений ставится
 * непосредственно слева от звезды —
 * как в карточках предметов.
 */

.megaServerCard
.megaCatalogNumber {
    position:
        absolute !important;

    top:
        50% !important;

    right:
        48px !important;

    bottom:
        auto !important;

    left:
        auto !important;

    width:
        auto !important;

    min-width:
        14px !important;

    max-width:
        28px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    text-align:
        right !important;

    transform:
        translateY(-50%) !important;

    line-height:
        1 !important;

    z-index:
        25 !important;

    pointer-events:
        none !important;
}


/*
 * Справа остаётся ровно столько места,
 * сколько нужно для числа и звезды.
 */

.megaServerCard {
    padding-right:
        70px !important;
}


/* Мобильная версия */

@media (max-width: 760px) {
    .megaServerCard
    .megaCatalogNumber {
        right:
            46px !important;
    }

    .megaServerCard {
        padding-right:
            66px !important;
    }
}

/* EASYLOOT STEP 12.8 SERVER QUICK FAVORITES */

/*
 * Используется тот же визуальный язык,
 * что и у быстрых иконок предметов.
 */

.megaServerSearch
.easylootQuickIcon
> img {
    width:
        28px !important;

    min-width:
        28px !important;

    max-width:
        28px !important;

    height:
        28px !important;

    min-height:
        28px !important;

    max-height:
        28px !important;

    display:
        block !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    margin:
        auto !important;

    padding:
        0 !important;

    position:
        relative !important;

    z-index:
        3 !important;
}

.megaServerSearch
.easylootQuickIcon:has(> img)
.easylootQuickFallback {
    display:
        none !important;
}

.megaServerSearch
.easylootQuickIcon.isFavorite {
    border-color:
        #edca50 !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(237, 202, 80, .18) !important;
}

.megaServerSearch
.easylootQuickIcon.isSelected {
    background:
        rgba(115, 151, 42, .92) !important;

    color:
        #ffffff !important;
}

.megaServerSearch
.easylootQuickIcon.isFavorite.isSelected {
    border-color:
        #edca50 !important;

    background:
        rgba(115, 151, 42, .96) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(237, 202, 80, .28) !important;
}

.megaServerSearch
.easylootServerQuickIconV2 {
    cursor:
        pointer !important;

    pointer-events:
        auto !important;
}

/* EASYLOOT STEP 12.8.1 SERVER QUICK INTERACTION */

.megaServerSearch
.easylootServerQuickIconV2 {
    cursor:
        pointer !important;

    pointer-events:
        auto !important;

    transition:
        background-color .14s ease,
        border-color .14s ease,
        box-shadow .14s ease,
        transform .14s ease !important;
}

.megaServerSearch
.easylootServerQuickIconV2:hover {
    background:
        rgba(115, 151, 42, .18) !important;

    border-color:
        #91bd3e !important;

    box-shadow:
        0 0 0 1px
        rgba(145, 189, 62, .22),
        0 4px 12px
        rgba(0, 0, 0, .22) !important;

    transform:
        translateY(-1px) !important;
}

.megaServerSearch
.easylootServerQuickIconV2
> img {
    transition:
        transform .14s ease,
        filter .14s ease !important;
}

.megaServerSearch
.easylootServerQuickIconV2:hover
> img {
    transform:
        scale(1.06) !important;

    filter:
        brightness(1.08) !important;
}

.megaServerSearch
.easylootServerQuickIconV2:active {
    transform:
        translateY(0)
        scale(.96) !important;
}

.megaServerSearch
.easylootServerQuickIconV2.isFavorite:hover {
    border-color:
        #edca50 !important;

    box-shadow:
        0 0 0 1px
        rgba(237, 202, 80, .26),
        0 4px 12px
        rgba(0, 0, 0, .22) !important;
}

.megaServerSearch
.easylootServerQuickIconV2.isSelected,
.megaServerSearch
.easylootServerQuickIconV2.isSelected:hover {
    background:
        rgba(115, 151, 42, .96) !important;

    color:
        #ffffff !important;
}

.megaServerSearch
.easylootServerQuickIconV2:focus-visible {
    outline:
        2px solid
        rgba(145, 189, 62, .92) !important;

    outline-offset:
        2px !important;
}

/* EASYLOOT STEP 12.8.11 UNIFIED SERVER MULTISELECT */

/*
 * Step 12.8.9 может временно пересчитать
 * класс isSelected через текстовое поле.
 *
 * Штатный мультивыбор хранит серверы отдельно,
 * поэтому окончательное состояние отмечается
 * data-easyloot-multi-selected.
 */

.megaServerSearch
.easylootQuickStrip
.easylootQuickIcon[
    data-easyloot-multi-selected="1"
] {
    border-color:
        #9dbc4f !important;

    background:
        linear-gradient(
            180deg,
            rgba(112, 144, 49, .98),
            rgba(58, 78, 29, .98)
        ) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(199, 229, 119, .17),
        inset 0 -3px 0
        rgba(157, 197, 73, .88),
        0 0 14px
        rgba(129, 169, 55, .17) !important;
}

.megaServerSearch
.easylootQuickStrip
.easylootQuickIcon.isFavorite[
    data-easyloot-multi-selected="1"
] {
    border-color:
        #edca50 !important;

    background:
        linear-gradient(
            180deg,
            rgba(119, 151, 52, .99),
            rgba(57, 79, 29, .99)
        ) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 227, 118, .25),
        inset 0 -3px 0
        rgba(163, 205, 77, .95),
        0 0 15px
        rgba(224, 190, 67, .16) !important;
}

/* EASYLOOT STEP 12.8.13 SERVER QUICK FINAL BRIDGE */

.megaServerSearch
> .easylootQuickStrip
> button.easylootQuickIcon[
    data-easyloot-unified-selected="1"
] {
    border-color:
        #9dbc4f !important;

    background:
        linear-gradient(
            180deg,
            rgba(112, 144, 49, .98) 0%,
            rgba(58, 78, 29, .98) 100%
        ) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(199, 229, 119, .17),
        inset 0 -3px 0
        rgba(157, 197, 73, .88),
        0 0 14px
        rgba(129, 169, 55, .17) !important;

    color:
        #ffffff !important;
}

.megaServerSearch
> .easylootQuickStrip
> button.easylootQuickIcon.isFavorite[
    data-easyloot-unified-selected="1"
] {
    border-color:
        #edca50 !important;

    background:
        linear-gradient(
            180deg,
            rgba(119, 151, 52, .99) 0%,
            rgba(57, 79, 29, .99) 100%
        ) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 227, 118, .25),
        inset 0 -3px 0
        rgba(163, 205, 77, .95),
        0 0 15px
        rgba(224, 190, 67, .16) !important;
}