html {
    min-height: 100%;
    background: #080d0d;
}

body {
    min-height: 100%;
    margin: 0;
    background: #080d0d;
    color: #fff;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.market-page,
.market-page * {
    box-sizing: border-box;
}

.market-page {
    min-height: calc(100vh - 68px);
    padding: 24px 48px 52px;
    background: #080d0d;
}

.market-shell {
    width: min(100%, 1451px);
    margin: 0 auto;
}

.market-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 46px;
    margin: 0 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    box-shadow: none;
    padding: 0 0 14px;
    animation: marketPanelIn 260ms ease both;
}

.market-head::after {
    display: none;
}

.market-head__copy,
.market-head__stats {
    position: relative;
    z-index: 1;
}

.market-head__copy {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

.market-head__copy span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.market-head__copy span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #58f28a;
    box-shadow: none;
}

.market-head__copy h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: 0;
}

.market-head__stats {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    width: auto;
}

.market-head__stats div {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.market-head__stats strong,
.market-head__stats span {
    display: inline;
}

.market-head__stats strong {
    font-size: 15px;
    line-height: 1;
}

.market-head__stats span {
    margin-top: 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 12px;
    font-weight: 800;
    text-transform: none;
}

.market-toolbar {
    display: grid;
    grid-template-columns: auto minmax(360px, 1fr) 240px;
    gap: 16px;
    align-items: end;
    margin-bottom: 18px;
    padding-top: 16px;
}

.market-toolbar__left {
    display: flex;
    gap: 8px;
}

.market-icon-button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: #161b20;
    color: #fff;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease;
}

.market-icon-button:hover {
    background: #20272e;
    transform: translateY(-1px);
}

.market-icon-button svg,
.market-search svg,
.market-filter__trigger svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.market-search {
    position: relative;
    display: block;
}

.market-search svg {
    position: absolute;
    left: 13px;
    top: 50%;
    color: #a7b4c7;
    transform: translateY(-50%);
}

.market-search input,
.market-sort select,
.market-filter select,
.market-price-range input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #1a2026;
    color: #fff;
    outline: none;
    font: 700 14px/1 Inter, "Segoe UI", Arial, sans-serif;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.market-search input:focus,
.market-sort select:focus,
.market-filter select:focus,
.market-price-range input:focus {
    border-color: rgba(86, 242, 138, 0.55);
    box-shadow: 0 0 0 3px rgba(86, 242, 138, 0.1);
}

.market-search input {
    height: 38px;
    border-radius: 8px;
    padding: 0 14px 0 42px;
}

.market-sort {
    display: grid;
    gap: 6px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 800;
}

.market-sort span {
    color: rgba(255, 255, 255, 0.74);
    line-height: 1;
}

.market-sort select {
    height: 38px;
    border-radius: 8px;
    padding: 0 10px;
}

.market-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 18px;
}

.market-active-filters[hidden] {
    display: none;
}

.market-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    border: 1px solid rgba(86, 242, 138, 0.28);
    border-radius: 999px;
    background: rgba(86, 242, 138, 0.08);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font: 800 12px/1 Inter, "Segoe UI", Arial, sans-serif;
    padding: 0 12px;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.market-chip:hover {
    border-color: rgba(86, 242, 138, 0.72);
    background: rgba(86, 242, 138, 0.14);
    transform: translateY(-1px);
}

.market-chip--clear {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.045);
}

.market-chip span {
    color: #58f28a;
}

.market-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 22px;
    align-items: start;
}

.market-content {
    min-width: 0;
}

.market-status {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    min-height: 24px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 700;
}

.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 12px;
}

.market-card {
    position: relative;
    min-height: 190px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background: #181d1f;
    color: #fff;
    cursor: pointer;
    padding: 12px;
    animation: marketCardIn 260ms ease both;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.market-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--rarity-color, #7d8cff);
    opacity: 0.85;
}

.market-card::after {
    display: none;
}

.market-card--red { --rarity-color: #ff4e68; }
.market-card--orange { --rarity-color: #ffa64e; }
.market-card--violet { --rarity-color: #b06cff; }
.market-card--blue { --rarity-color: #4e9cff; }
.market-card--gray { --rarity-color: #b8c0cc; }

.market-card--skeleton {
    cursor: default;
    animation: marketCardIn 300ms ease both;
}

.market-card--skeleton .market-skeleton {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.market-card--skeleton .market-skeleton::after {
    content: "";
    display: block;
    width: 42%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    animation: marketSkeleton 1150ms ease-in-out infinite;
}

.market-card:hover,
.market-card.is-selected {
    border-color: rgba(86, 242, 138, 0.8);
    box-shadow: inset 0 0 0 1px rgba(86, 242, 138, 0.12);
    transform: translateY(-2px);
}

.market-card__name {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    overflow: hidden;
    min-height: 33px;
    margin: 0 18px 0 0;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.market-card__meta {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.market-card__meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-card__quality {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    max-width: 100%;
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.64);
    font-size: 10px;
    font-weight: 900;
    padding: 0 9px;
}

.market-card__quality--empty {
    border-color: transparent;
    background: transparent;
    color: transparent;
}

.market-card__image {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    height: 82px;
    margin: 4px 0 8px;
}

.market-card__image img {
    max-width: 132px;
    max-height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.35));
    transition: transform 180ms ease;
}

.market-card:hover .market-card__image img {
    transform: scale(1.06) rotate(-1deg);
}

.market-card__bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.market-card__pricebox {
    min-width: 0;
}

.market-card__price {
    display: block;
    color: #58f28a;
    font-size: 14px;
    font-weight: 900;
}

.market-card__source {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 10px;
    font-weight: 800;
}

.market-card__add {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #58f28a;
    color: #07100e;
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.market-card__add:hover {
    box-shadow: 0 0 0 6px rgba(86, 242, 138, 0.12);
    transform: scale(1.05);
}

.market-card__badge {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 3;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rarity-color, #7d8cff);
    box-shadow: 0 0 12px currentColor;
}

.market-filters {
    position: sticky;
    top: 86px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: #151a1b;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
    animation: marketPanelIn 260ms ease 60ms both;
}

.market-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 62px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(86, 242, 138, 0.16);
    background: rgba(255, 255, 255, 0.025);
}

.market-filters__head h1 {
    margin: 0;
    font-size: 21px;
    line-height: 1;
}

.market-filters__head button,
.market-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 999px;
    background: rgba(86, 242, 138, 0.14);
    color: #58f28a;
    cursor: pointer;
    font-weight: 900;
    padding: 8px 12px;
    transition: transform 150ms ease, background 150ms ease, color 150ms ease;
}

.market-filters__head button svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.market-filters__head button:hover,
.market-load-more:hover {
    background: #58f28a;
    color: #07100e;
    transform: translateY(-1px);
}

.market-filter__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
    background: transparent;
    color: #fff;
    cursor: pointer;
    font: 850 16px/1 Inter, "Segoe UI", Arial, sans-serif;
    padding: 0 16px;
    transition: background 150ms ease, color 150ms ease;
}

.market-filter__trigger:hover,
.market-filter__trigger.is-open {
    background: rgba(255, 255, 255, 0.035);
}

.market-filter__trigger svg {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.045);
    padding: 5px;
    color: rgba(255, 255, 255, 0.74);
    transition: transform 160ms ease;
}

.market-filter__trigger.is-open svg {
    transform: rotate(180deg);
}

.market-filter__body {
    display: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
    background: rgba(255, 255, 255, 0.018);
    padding: 12px 14px 16px;
}

.market-filter__body.is-open {
    display: block;
}

.market-filter select,
.market-price-range input {
    height: 42px;
    border-radius: 10px;
    background-color: #191f22;
    padding: 0 12px;
}

.market-filter select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.74) 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.74) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 17px,
        calc(100% - 13px) 17px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

.market-filter select:hover,
.market-price-range input:hover {
    border-color: rgba(255, 255, 255, 0.14);
    background-color: #1c2327;
}

.market-price-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.market-price-slider {
    display: grid;
    gap: 13px;
}

.market-price-slider__values {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 900;
}

.market-price-slider__track {
    position: relative;
    height: 26px;
}

.market-price-slider__track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 11px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.market-price-slider__track input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 26px;
    margin: 0;
    pointer-events: none;
    appearance: none;
    background: transparent;
}

.market-price-slider__track input::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    border: 3px solid #151a1b;
    border-radius: 50%;
    background: #58f28a;
    box-shadow: 0 0 0 1px rgba(86, 242, 138, 0.55);
    cursor: pointer;
    pointer-events: auto;
    appearance: none;
}

.market-price-slider__track input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 3px solid #151a1b;
    border-radius: 50%;
    background: #58f28a;
    box-shadow: 0 0 0 1px rgba(86, 242, 138, 0.55);
    cursor: pointer;
    pointer-events: auto;
}

.market-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.market-filter__chips button {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.74);
    cursor: pointer;
    font-weight: 800;
    padding: 9px 11px;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.market-filter__chips button:hover {
    border-color: rgba(86, 242, 138, 0.38);
    background: rgba(86, 242, 138, 0.08);
}

.market-filter__chips button.is-active {
    border-color: #58f28a;
    color: #58f28a;
}

.market-more {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

.market-load-more {
    min-width: 160px;
    color: #06110b;
    background: #58f28a;
}

.market-empty,
.market-error {
    grid-column: 1 / -1;
    min-height: 260px;
    border: 1px dashed rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    color: rgba(255, 255, 255, 0.7);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 24px;
}

.market-cart {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: center;
    margin-top: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px 14px 0 0;
    background: rgba(10, 15, 15, 0.96);
    backdrop-filter: blur(16px);
    padding: 14px 16px;
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.24);
    transition: border-color 160ms ease, transform 160ms ease;
}

.market-cart.is-pop {
    animation: marketCartPop 360ms ease;
}

.market-cart > div:first-child strong {
    display: block;
    color: #58f28a;
    font-size: 21px;
    line-height: 1;
}

.market-cart span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 11px;
    font-weight: 700;
}

.market-cart__items {
    display: flex;
    gap: 10px;
    min-height: 72px;
    overflow-x: auto;
}

.market-cart__item {
    position: relative;
    overflow: hidden;
    flex: 0 0 132px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    padding: 6px;
    text-align: center;
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, opacity 150ms ease, max-width 180ms ease, flex-basis 180ms ease, padding 180ms ease, margin 180ms ease;
}

.market-cart__item::before {
    content: "Remove";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    background: linear-gradient(180deg, rgba(255, 78, 104, 0.94), rgba(255, 78, 104, 0));
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 150ms ease, transform 150ms ease;
}

.market-cart__item:hover {
    border-color: rgba(255, 78, 104, 0.65);
    transform: translateY(-1px);
}

.market-cart__item:hover::before {
    opacity: 1;
    transform: translateY(0);
}

.market-cart__item.is-removing {
    flex-basis: 0;
    max-width: 0;
    margin: 0;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    transform: scale(0.96);
}

.market-cart__item img {
    width: 66px;
    height: 42px;
    object-fit: contain;
}

.market-cart__item span {
    display: block;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.72);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-cart__item strong {
    display: block;
    margin-top: 2px;
    color: #58f28a;
    font-size: 11px;
}

.market-cart__actions {
    display: grid;
    gap: 10px;
}

.market-order,
.market-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}

.market-order svg,
.market-clear svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.market-order {
    background: linear-gradient(180deg, #58f28a, #11975a);
    color: #06110b;
}

.market-clear {
    background: linear-gradient(180deg, #332526, #9d242b);
}

.market-order:not(:disabled):hover,
.market-clear:not(:disabled):hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 20px rgba(0, 0, 0, 0.2);
}

.market-order:disabled,
.market-clear:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.market-checkout {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.68);
    padding: 20px;
}

.market-checkout[hidden] {
    display: none;
}

.market-checkout__dialog {
    width: min(100%, 760px);
    max-height: min(92vh, 820px);
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: #111718;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
    padding: 0;
}

.market-checkout__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.market-checkout__head span {
    display: block;
    margin-bottom: 5px;
    color: #58f28a;
    font-size: 12px;
    font-weight: 900;
}

.market-checkout__head h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1;
}

.market-checkout__head button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
}

.market-checkout__summary {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
}

.market-checkout__summary > div:first-child span,
.market-checkout__item span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 800;
}

.market-checkout__summary > div:first-child strong {
    display: block;
    margin-top: 8px;
    color: #58f28a;
    font-size: 26px;
    line-height: 1;
}

.market-checkout__items {
    display: grid;
    gap: 8px;
}

.market-checkout__item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.market-checkout__item img {
    width: 44px;
    height: 32px;
    object-fit: contain;
}

.market-checkout__item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-checkout__item strong {
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
}

.market-checkout__dialog label {
    display: grid;
    gap: 8px;
    font-weight: 800;
}

.market-checkout__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 20px 24px 0;
}

.market-checkout__trade {
    margin: 14px 24px 0;
}

.market-checkout__dialog label span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
}

.market-checkout__dialog input,
.market-checkout__dialog textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: #1a2124;
    color: #fff;
    font: 700 14px/1.4 Inter, "Segoe UI", Arial, sans-serif;
    padding: 12px;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.market-checkout__dialog input:focus,
.market-checkout__dialog textarea:focus {
    border-color: rgba(86, 242, 138, 0.55);
    box-shadow: 0 0 0 3px rgba(86, 242, 138, 0.1);
}

.market-checkout__status {
    min-height: 20px;
    margin: 14px 24px 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 800;
}

.market-checkout__actions {
    display: flex;
    justify-content: end;
    gap: 10px;
    padding: 20px 24px 24px;
}

.market-checkout__actions button {
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 900;
    min-height: 44px;
    padding: 0 20px;
}

.market-checkout__submit {
    background: #58f28a;
    color: #07100e;
}

.market-checkout__actions button:not(.market-checkout__submit) {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.market-detail {
    position: fixed;
    inset: 0;
    z-index: 48;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.62);
    padding: 20px;
}

.market-detail__dialog {
    position: relative;
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 24px;
    width: min(100%, 720px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: #111718;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
    padding: 22px;
}

.market-detail__dialog:has(.market-detail__similar) {
    width: min(100%, 820px);
}

.market-detail__close {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    cursor: pointer;
    font-weight: 900;
}

.market-detail__media {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 250px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: #181d1f;
}

.market-detail__media::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--rarity-color, #7d8cff);
}

.market-detail__media img {
    max-width: 240px;
    max-height: 190px;
    object-fit: contain;
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.36));
}

.market-detail__content {
    min-width: 0;
    padding: 12px 10px 4px 0;
}

.market-detail__eyebrow {
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.market-detail__content h2 {
    margin: 8px 0 14px;
    padding-right: 34px;
    font-size: 28px;
    line-height: 1.08;
}

.market-detail__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.market-detail__facts span {
    min-height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 900;
    padding: 6px 10px;
}

.market-detail__description {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

.market-detail__price {
    margin-top: 28px;
}

.market-detail__price span {
    display: block;
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    font-weight: 900;
}

.market-detail__price strong {
    display: block;
    margin-top: 5px;
    color: #58f28a;
    font-size: 30px;
    line-height: 1;
}

.market-detail__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}

.market-detail__actions button {
    min-height: 46px;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 900;
}

.market-detail__add {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.market-detail__buy {
    background: #58f28a;
    color: #06110b;
}

.market-detail__similar {
    grid-column: 1 / -1;
    margin-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 18px;
}

.market-detail__similar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.market-detail__similar-head h3 {
    margin: 0;
    font-size: 18px;
}

.market-detail__similar-head span,
.market-detail__similar-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 800;
}

.market-detail__similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 10px;
}

.market-detail__similar-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: 62px 34px 16px;
    gap: 6px;
    min-height: 148px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: #181d1f;
    color: #fff;
    cursor: pointer;
    padding: 9px;
    text-align: left;
    transition: transform 150ms ease, border-color 150ms ease;
}

.market-detail__similar-card:hover {
    border-color: rgba(86, 242, 138, 0.58);
    transform: translateY(-2px);
}

.market-detail__similar-card span {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--rarity-color, #7d8cff);
}

.market-detail__similar-card img {
    align-self: center;
    justify-self: center;
    max-width: 82px;
    max-height: 60px;
    object-fit: contain;
}

.market-detail__similar-card strong {
    display: -webkit-box;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    min-height: 27px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.market-detail__similar-card em {
    display: block;
    overflow: hidden;
    align-self: end;
    max-width: 100%;
    color: #58f28a;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes marketCardIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@keyframes marketPanelIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

@keyframes marketSkeleton {
    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(260%);
    }
}

@keyframes marketCartPop {
    0% {
        transform: translateY(0) scale(1);
    }

    46% {
        transform: translateY(-5px) scale(1.006);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 980px) {
    .market-page {
        padding: 24px 18px 42px;
    }

    .market-head,
    .market-toolbar,
    .market-layout,
    .market-cart {
        grid-template-columns: 1fr;
    }

    .market-head {
        align-items: stretch;
    }

    .market-head__stats {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .market-toolbar__left {
        order: 2;
    }

    .market-filters {
        position: static;
        display: none;
    }

    .market-filters.is-open {
        display: block;
    }

    .market-cart__actions {
        grid-template-columns: 1fr 1fr;
    }

    .market-checkout__summary,
    .market-checkout__grid,
    .market-detail__dialog,
    .market-detail__actions {
        grid-template-columns: 1fr;
    }

    .market-detail__media {
        min-height: 210px;
    }

    .market-detail__similar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}