:root {
    --woi-void: #060304;
    --woi-ink: #0c0708;
    --woi-panel: rgba(16, 8, 10, .91);
    --woi-panel-strong: rgba(23, 10, 12, .96);
    --woi-line: rgba(255, 210, 122, .22);
    --woi-line-soft: rgba(255, 255, 255, .09);
    --woi-red: #b91d2f;
    --woi-red-dark: #67101b;
    --woi-ember: #f1792a;
    --woi-gold: #ffd47a;
    --woi-gold-dim: #b99146;
    --woi-green: #8ff0ac;
    --woi-blue: #8bd8ff;
    --woi-text: #fff6e8;
    --woi-muted: #cdbda6;
    --woi-faint: #8d7e68;
    --woi-shadow: 0 24px 70px rgba(0, 0, 0, .58);
}

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

html {
    min-height: 100%;
    scroll-behavior: smooth;
    background: var(--woi-void);
}

body.auction-body {
    margin: 0;
    min-height: 100vh;
    color: var(--woi-text);
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .86), rgba(30, 8, 11, .72) 48%, rgba(0, 0, 0, .92)),
        linear-gradient(180deg, rgba(20, 4, 7, .40), rgba(3, 3, 5, .96) 70%),
        url("images/calamity-hero-v2.jpg") center top / cover no-repeat fixed;
    font-family: Rajdhani, Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.45;
    overflow-x: hidden;
}

body.auction-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 210, 122, .035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 210, 122, .025) 1px, transparent 1px),
        linear-gradient(180deg, transparent, rgba(0, 0, 0, .38));
    background-size: 64px 64px, 64px 64px, auto;
    opacity: .72;
}

body.auction-body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .78), transparent 22%, transparent 78%, rgba(0, 0, 0, .80)),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 4px);
}

button,
input,
select {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

.fa {
    display: none !important;
}

button:disabled {
    cursor: not-allowed;
    opacity: .48;
    filter: grayscale(.28);
}

a {
    color: inherit;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

.auction-shell {
    width: min(1540px, calc(100% - 32px));
    margin: 0 auto;
    padding: 18px 0 42px;
}

.auction-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 84px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 210, 122, .26);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(91, 16, 25, .50), rgba(9, 6, 8, .88) 44%, rgba(0, 0, 0, .74)),
        rgba(8, 5, 6, .94);
    box-shadow: var(--woi-shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
    overflow: hidden;
}

.auction-brand {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    color: #fff;
    text-decoration: none;
}

.auction-brand:hover,
.auction-brand:focus {
    color: #fff;
    text-decoration: none;
}

.auction-brand img {
    display: block;
    width: 86px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .64));
}

.auction-brand span,
.auction-brand small,
.auction-brand strong {
    display: block;
    min-width: 0;
}

.auction-brand small,
.auction-top-badge,
.kicker,
label span,
.auction-status span {
    color: var(--woi-gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.05;
    text-transform: uppercase;
}

.auction-brand strong {
    margin-top: 4px;
    font-family: Orbitron, Rajdhani, Arial, sans-serif;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0 24px rgba(185, 29, 47, .45);
}

.auction-topnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    min-width: 0;
}

.auction-topnav a,
.auction-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(255, 210, 122, .18);
    border-radius: 6px;
    color: #f2e5d0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)),
        rgba(0, 0, 0, .24);
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
}

.auction-topnav a:hover,
.auction-tabs a:hover {
    color: #fff;
    border-color: rgba(255, 210, 122, .42);
    background:
        linear-gradient(135deg, rgba(185, 29, 47, .34), rgba(241, 121, 42, .14)),
        rgba(0, 0, 0, .24);
    text-decoration: none;
}

.auction-topnav a.is-active,
.auction-tabs a.is-active {
    color: #fff;
    border-color: rgba(143, 240, 172, .54);
    background:
        linear-gradient(135deg, rgba(24, 93, 56, .28), rgba(185, 29, 47, .20)),
        rgba(0, 0, 0, .28);
    box-shadow: inset 0 -2px 0 rgba(143, 240, 172, .62), 0 10px 24px rgba(0, 0, 0, .20);
}

.auction-topnav i,
.auction-tabs i,
.kicker i {
    color: var(--woi-gold);
}

.auction-user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.auction-user strong {
    color: #ffe7af;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.auction-top-badge {
    justify-self: end;
    padding: 9px 12px;
    border: 1px solid rgba(255, 210, 122, .24);
    border-radius: 6px;
    background: rgba(0, 0, 0, .28);
}

.auction-user button,
.login-card button,
.auction-listing button,
.history-list button,
.auction-submit,
.stash-swap-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    min-width: 0;
    padding: 0 15px;
    border: 1px solid rgba(255, 210, 122, .44);
    border-radius: 6px;
    color: #fff;
    background: linear-gradient(135deg, var(--woi-red-dark), var(--woi-red) 48%, var(--woi-ember));
    box-shadow: 0 12px 28px rgba(185, 29, 47, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.auction-user button:hover,
.login-card button:hover,
.auction-listing button:hover,
.history-list button:hover,
.auction-submit:hover,
.stash-swap-form button:hover {
    border-color: rgba(255, 226, 154, .74);
    box-shadow: 0 16px 34px rgba(185, 29, 47, .30), 0 0 24px rgba(255, 210, 122, .12);
}

.ghost {
    color: #ffe0a3 !important;
    border: 1px solid rgba(255, 210, 122, .30) !important;
    background:
        linear-gradient(180deg, rgba(255, 210, 122, .09), rgba(0, 0, 0, .10)),
        rgba(0, 0, 0, .25) !important;
    box-shadow: none !important;
}

.notice {
    position: relative;
    margin: 12px 0;
    padding: 13px 16px 13px 54px;
    border: 1px solid rgba(255, 210, 122, .18);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(22, 10, 12, .94), rgba(7, 6, 8, .96));
    color: #e8dcc8;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .30);
    font-weight: 800;
}

.notice::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 8px;
    height: 28px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--woi-gold);
    box-shadow: 0 0 18px rgba(255, 210, 122, .18);
}

.notice.success {
    border-color: rgba(143, 240, 172, .28);
    color: #ddffe8;
}

.notice.success::before {
    background: var(--woi-green);
    box-shadow: 0 0 18px rgba(143, 240, 172, .18);
}

.notice.danger {
    border-color: rgba(255, 119, 105, .32);
    color: #ffe1df;
}

.notice.danger::before {
    background: #ff8f82;
    box-shadow: 0 0 18px rgba(255, 143, 130, .18);
}

.notice.info {
    border-color: rgba(139, 216, 255, .28);
    color: #e0f5ff;
}

.notice.info::before {
    background: var(--woi-blue);
    box-shadow: 0 0 18px rgba(139, 216, 255, .18);
}

.good {
    color: var(--woi-green) !important;
}

.bad {
    color: #ff9588 !important;
}

.login-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
    gap: 22px;
    align-items: stretch;
    margin-top: 14px;
    padding: 22px;
    border: 1px solid rgba(255, 210, 122, .24);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(99, 16, 25, .56), rgba(9, 6, 8, .88)),
        url("images/calamity-gallery-rewards-v1.jpg") center / cover no-repeat;
    box-shadow: var(--woi-shadow);
    overflow: hidden;
}

.login-copy {
    display: grid;
    align-content: end;
    min-height: 320px;
    max-width: 560px;
}

.login-card h2,
.panel-head h2 {
    margin: 4px 0 0;
    color: #fff9ef;
    font-family: Orbitron, Rajdhani, Arial, sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.08;
    text-transform: uppercase;
}

.login-card p {
    margin-bottom: 0;
    color: var(--woi-muted);
}

.login-card form,
.sell-form,
.auction-listing form {
    display: grid;
    gap: 10px;
}

label span {
    display: block;
    margin-bottom: 6px;
}

input,
select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    color: #fff8ec;
    border: 1px solid rgba(255, 210, 122, .24);
    border-radius: 6px;
    background: rgba(4, 3, 5, .72);
    outline: none;
}

input:focus,
select:focus {
    border-color: rgba(143, 240, 172, .70);
    box-shadow: 0 0 0 3px rgba(143, 240, 172, .12);
}

select option {
    background: #0a0608;
    color: #fff;
}

.auction-status {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.status-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 11px;
    align-items: center;
    min-width: 0;
    min-height: 82px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 210, 122, .16);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 210, 122, .075), rgba(255, 255, 255, .018)),
        rgba(6, 5, 7, .72);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

.status-card span {
    display: block;
    min-width: 0;
    color: #d9bb70;
}

.status-card strong {
    display: block;
    min-width: 0;
    color: #fff;
    font-family: Orbitron, Rajdhani, Arial, sans-serif;
    font-size: 22px;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.auction-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 14px;
    align-items: start;
}

.auction-main {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.auction-panel,
.auction-action-card {
    border: 1px solid rgba(255, 210, 122, .18);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(23, 10, 12, .94), rgba(7, 6, 8, .88)),
        rgba(8, 5, 6, .92);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.auction-panel {
    padding: 14px;
    scroll-margin-top: 16px;
    overflow: hidden;
}

.auction-action-rail {
    position: sticky;
    top: 14px;
    display: grid;
    gap: 12px;
    min-width: 0;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin-bottom: 12px;
}

.panel-head > div {
    min-width: 0;
}

.panel-head > span {
    flex: 0 0 auto;
    color: #fff2c7;
    font-family: Orbitron, Rajdhani, Arial, sans-serif;
    font-weight: 800;
}

.compact-head {
    margin-bottom: 10px;
}

.stash-head {
    padding: 4px 2px 0;
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}

.character-select {
    flex: 0 0 min(320px, 42%);
    min-width: 230px;
}

.state-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(143, 240, 172, .20);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(24, 93, 56, .22), rgba(0, 0, 0, .18));
    font-weight: 900;
}

.state-line.bad {
    border-color: rgba(255, 119, 105, .34);
    background: linear-gradient(135deg, rgba(105, 16, 25, .32), rgba(0, 0, 0, .18));
}

.state-line i {
    flex: 0 0 auto;
}

.state-line span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.empty {
    padding: 18px;
    color: var(--woi-muted);
    text-align: center;
    border: 1px dashed rgba(255, 210, 122, .22);
    border-radius: 8px;
    background: rgba(0, 0, 0, .20);
}

.auction-stash-stage {
    min-width: 0;
    padding: 14px;
    overflow-x: auto;
    border: 1px solid rgba(255, 210, 122, .14);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 210, 122, .065), transparent 34%),
        linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .18));
}

.auction-stash-grid {
    display: grid;
    grid-template-columns: repeat(10, 52px);
    gap: 5px;
    justify-content: center;
    width: max-content;
    min-width: max-content;
    margin: 0 auto;
    padding: 12px;
    border: 1px solid rgba(175, 137, 78, .30);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(47, 35, 22, .48), rgba(6, 5, 5, .88)),
        rgba(0, 0, 0, .34);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), inset 0 0 36px rgba(0, 0, 0, .54);
}

.auction-slot {
    position: relative;
    display: grid;
    width: 52px;
    height: 52px;
    min-width: 0;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(175, 137, 78, .42);
    border-radius: 5px;
    color: #f9e9d1;
    background:
        linear-gradient(135deg, rgba(255, 226, 154, .09), rgba(0, 0, 0, .16)),
        rgba(12, 10, 8, .84);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .72), inset 0 0 12px rgba(0, 0, 0, .58);
    overflow: hidden;
}

button.auction-slot {
    appearance: none;
}

.auction-slot.is-empty {
    background:
        linear-gradient(135deg, rgba(255, 226, 154, .045), rgba(0, 0, 0, .20)),
        rgba(8, 7, 7, .78);
}

.auction-slot.has-item {
    border-color: rgba(255, 214, 124, .54);
    background:
        linear-gradient(135deg, rgba(96, 70, 36, .26), rgba(0, 0, 0, .18)),
        rgba(6, 5, 5, .90);
}

.auction-slot.is-tradeable {
    cursor: pointer;
}

.auction-slot.is-tradeable::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(143, 240, 172, .12);
    border-radius: 4px;
    pointer-events: none;
}

.auction-slot.is-locked {
    opacity: .58;
}

.auction-slot.is-locked::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(135deg, transparent 0 46%, rgba(255, 96, 74, .72) 47% 52%, transparent 53%),
        rgba(0, 0, 0, .08);
    pointer-events: none;
}

.auction-slot.is-selected {
    z-index: 12;
    border-color: rgba(143, 240, 172, .96);
    box-shadow:
        0 0 0 1px rgba(143, 240, 172, .24),
        0 0 18px rgba(143, 240, 172, .24),
        inset 0 0 0 1px rgba(0, 0, 0, .72);
}

.auction-slot:hover,
.auction-slot:focus {
    z-index: 13;
    border-color: rgba(143, 240, 172, .82);
    outline: none;
    box-shadow:
        0 0 0 1px rgba(143, 240, 172, .18),
        0 0 14px rgba(143, 240, 172, .18),
        inset 0 0 0 1px rgba(0, 0, 0, .72);
}

.auction-slot img,
.auction-listing-icon img,
.selected-icon img {
    display: block;
    width: 88%;
    height: 88%;
    object-fit: contain;
}

.auction-slot > span,
.auction-listing-icon > span,
.selected-icon > span {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: #171008;
    background: linear-gradient(135deg, #ffd47a, #8ff0ac);
    font-size: 20px;
    font-weight: 900;
}

.auction-slot small {
    position: absolute;
    left: 3px;
    top: 2px;
    z-index: 4;
    color: rgba(255, 255, 255, .48);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 1px 1px 0 #000;
}

.auction-slot em {
    position: absolute;
    right: 3px;
    bottom: 2px;
    z-index: 4;
    min-width: 18px;
    padding: 1px 4px;
    color: #120d08;
    border: 1px solid rgba(0, 0, 0, .34);
    border-radius: 999px;
    background: var(--woi-gold);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .42);
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
}

.q-common {
    border-color: rgba(175, 137, 78, .42);
}

.q-rare {
    border-color: rgba(139, 216, 255, .52);
}

.q-epic {
    border-color: rgba(204, 126, 255, .58);
}

.q-legend {
    border-color: rgba(255, 212, 122, .80);
    box-shadow:
        0 0 0 1px rgba(255, 212, 122, .10),
        inset 0 0 0 1px rgba(0, 0, 0, .72),
        inset 0 0 14px rgba(255, 212, 122, .10);
}

.auction-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.auction-tabs a {
    min-height: 40px;
    padding: 0 10px;
}

.auction-action-card {
    padding: 14px;
}

.stash-swap-card {
    scroll-margin-top: 16px;
}

.stash-swap-list {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.stash-swap-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    align-items: center;
    min-width: 0;
    min-height: 58px;
    padding: 10px 11px;
    border: 1px solid rgba(255, 210, 122, .14);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 210, 122, .065), rgba(0, 0, 0, .12)),
        rgba(0, 0, 0, .20);
}

.stash-swap-row.is-live {
    border-color: rgba(143, 240, 172, .26);
    background:
        linear-gradient(135deg, rgba(24, 93, 56, .20), rgba(0, 0, 0, .14)),
        rgba(0, 0, 0, .20);
}

.stash-swap-row span,
.stash-swap-row strong,
.stash-swap-row small {
    min-width: 0;
}

.stash-swap-row span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff8eb;
    font-weight: 900;
}

.stash-swap-row i {
    color: var(--woi-gold);
}

.stash-swap-row.is-live i {
    color: var(--woi-green);
}

.stash-swap-row strong {
    color: var(--woi-gold);
    font-family: Orbitron, Rajdhani, Arial, sans-serif;
    white-space: nowrap;
}

.stash-swap-row small {
    grid-column: 1 / -1;
    color: var(--woi-muted);
    font-size: 12px;
    font-weight: 700;
}

.stash-swap-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.stash-swap-form button {
    display: grid;
    height: auto;
    min-height: 58px;
    gap: 3px;
    align-content: center;
    justify-items: start;
    text-align: left;
}

.stash-swap-form button span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.stash-swap-form button small {
    display: block;
    color: rgba(255, 246, 232, .78);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
}

.stash-swap-note {
    margin: 9px 0 0;
    color: var(--woi-muted);
    font-size: 13px;
    line-height: 1.35;
}

.selected-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 74px;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid rgba(143, 240, 172, .18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(24, 93, 56, .16), rgba(0, 0, 0, .12)),
        rgba(0, 0, 0, .20);
}

.selected-icon,
.auction-listing-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(255, 210, 122, .18);
    border-radius: 6px;
    background: rgba(0, 0, 0, .36);
    overflow: hidden;
}

.selected-item strong,
.auction-listing strong,
.history-list strong {
    display: block;
    min-width: 0;
    color: #fff8eb;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.selected-item small,
.auction-listing small,
.history-list p {
    display: block;
    margin: 3px 0 0;
    color: var(--woi-muted);
    line-height: 1.25;
}

.auction-market-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.auction-market-panel {
    display: grid;
    gap: 14px;
}

.auction-market-panel .panel-head {
    margin-bottom: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 210, 122, .14);
}

.market-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.market-summary article {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(255, 210, 122, .14);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 210, 122, .06), rgba(0, 0, 0, .10)),
        rgba(0, 0, 0, .22);
}

.market-summary span {
    display: block;
    color: var(--woi-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.market-summary strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-family: Orbitron, Rajdhani, Arial, sans-serif;
    font-size: 22px;
    line-height: 1;
    overflow-wrap: anywhere;
}

.auction-market-list {
    display: grid;
    gap: 9px;
}

.auction-listing,
.history-list article {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(255, 210, 122, .14);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 210, 122, .055), rgba(0, 0, 0, .08)),
        rgba(0, 0, 0, .20);
}

.auction-listing {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
}

.market-row {
    grid-template-columns: 62px minmax(220px, 1fr) minmax(150px, 190px) minmax(180px, 220px);
    min-height: 82px;
    padding: 12px;
}

.market-row .auction-listing-icon {
    width: 56px;
    height: 56px;
}

.market-item-main,
.market-price,
.market-action {
    min-width: 0;
}

.market-price {
    display: grid;
    gap: 4px;
    justify-items: end;
    align-content: center;
}

.market-price span {
    color: var(--woi-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.market-price b {
    color: var(--woi-gold);
    font-family: Orbitron, Rajdhani, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: right;
}

.market-action {
    grid-column: auto;
    align-self: center;
    grid-template-columns: 1fr;
    gap: 8px;
}

.market-action button,
.market-action select {
    width: 100%;
    min-width: 0;
}

.auction-listing:hover,
.history-list article:hover {
    border-color: rgba(255, 210, 122, .30);
    background:
        linear-gradient(135deg, rgba(185, 29, 47, .14), rgba(255, 210, 122, .06)),
        rgba(0, 0, 0, .24);
}

.auction-listing b {
    color: var(--woi-gold);
    font-family: Orbitron, Rajdhani, Arial, sans-serif;
    font-size: 15px;
    white-space: nowrap;
}

.auction-listing form {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
}

.auction-listing form select {
    min-width: 0;
}

.auction-listing form.market-action {
    grid-column: auto;
    grid-template-columns: 1fr;
}

.market-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    padding-top: 2px;
}

.market-pager a,
.market-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(255, 210, 122, .18);
    border-radius: 6px;
    color: #f2e5d0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)),
        rgba(0, 0, 0, .26);
    font-weight: 900;
    text-decoration: none;
}

.market-pager a:hover {
    color: #fff;
    border-color: rgba(255, 210, 122, .44);
    background:
        linear-gradient(135deg, rgba(185, 29, 47, .30), rgba(241, 121, 42, .12)),
        rgba(0, 0, 0, .28);
}

.market-pager a.is-current {
    color: #fff;
    border-color: rgba(143, 240, 172, .56);
    background:
        linear-gradient(135deg, rgba(24, 93, 56, .32), rgba(185, 29, 47, .18)),
        rgba(0, 0, 0, .30);
}

.market-pager a.is-disabled {
    pointer-events: none;
    opacity: .42;
}

.history-list {
    display: grid;
    gap: 9px;
}

.history-sections {
    display: grid;
    gap: 14px;
}

.history-card {
    min-width: 0;
    border: 1px solid rgba(255, 210, 122, .14);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 210, 122, .045), rgba(0, 0, 0, .10)),
        rgba(0, 0, 0, .18);
    overflow: hidden;
}

.history-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    border-bottom: 1px solid rgba(255, 210, 122, .10);
    background: rgba(255, 210, 122, .035);
}

.history-card-head h3 {
    margin: 3px 0 0;
    color: #fff9ef;
    font-family: Orbitron, Rajdhani, Arial, sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.history-card-head > span {
    color: #ffe0a3;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.history-card .history-list {
    padding: 11px;
}

.history-card .empty {
    margin: 11px;
}

.history-list article {
    grid-template-columns: 46px minmax(0, 1fr) auto auto;
    align-items: center;
}

.history-main {
    min-width: 0;
}

.history-main small {
    display: block;
    margin-top: 3px;
    color: #a8957b;
    font-size: 12px;
    font-weight: 800;
}

.auction-listing-icon.compact {
    width: 42px;
    height: 42px;
}

.status {
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: #c9b7a3;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.status.active {
    color: var(--woi-green);
    border-color: rgba(143, 240, 172, .18);
}

.status.sold {
    color: var(--woi-blue);
    border-color: rgba(139, 216, 255, .18);
}

.status.bought {
    color: #8ff0ac;
    border-color: rgba(143, 240, 172, .18);
}

.status.cancelled {
    color: #ffcf8b;
    border-color: rgba(255, 207, 139, .18);
}

@media (max-width: 1240px) {
    .auction-top {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .auction-user {
        grid-column: 2;
    }

    .auction-topnav {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .auction-workbench {
        grid-template-columns: 1fr;
    }

    .auction-action-rail {
        position: static;
    }

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

    .market-row {
        grid-template-columns: 58px minmax(0, 1fr) minmax(138px, 170px);
    }

    .market-price {
        justify-items: end;
    }

    .auction-listing form.market-action {
        grid-column: 2 / -1;
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 760px) {
    body.auction-body {
        font-size: 16px;
        background-attachment: scroll;
    }

    .auction-shell {
        width: min(100% - 16px, 1540px);
        padding-top: 8px;
    }

    .auction-top {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }

    .auction-brand {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .auction-brand img {
        width: 72px;
        height: 48px;
    }

    .auction-brand strong {
        font-size: 22px;
    }

    .auction-topnav,
    .auction-user,
    .auction-top-badge {
        grid-column: auto;
        justify-content: stretch;
        justify-self: stretch;
    }

    .auction-topnav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .auction-user {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .login-card {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .login-copy {
        min-height: 180px;
    }

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

    .status-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 74px;
        padding: 11px;
    }

    .status-card strong {
        font-size: 19px;
    }

    .panel-head,
    .auction-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .character-select {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
    }

    .auction-stash-stage {
        padding: 10px;
    }

    .auction-stash-grid {
        grid-template-columns: repeat(10, 43px);
        gap: 4px;
        padding: 8px;
    }

    .auction-slot {
        width: 43px;
        height: 43px;
    }

    .auction-listing,
    .history-list article {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .history-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .auction-listing b,
    .auction-listing form,
    .history-list article .status,
    .history-list article form {
        grid-column: 1 / -1;
    }

    .auction-listing form {
        grid-template-columns: 1fr;
    }

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

    .market-row {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 0;
    }

    .market-row .auction-listing-icon {
        width: 46px;
        height: 46px;
    }

    .market-price,
    .market-action {
        grid-column: 1 / -1;
    }

    .market-price {
        justify-items: start;
    }

    .market-price b {
        text-align: left;
    }

    .auction-listing form.market-action {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
    }

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

@media (max-width: 430px) {
    .auction-shell {
        width: min(100% - 10px, 1540px);
    }

    .auction-topnav,
    .auction-status,
    .auction-tabs {
        grid-template-columns: 1fr;
    }

    .auction-user {
        grid-template-columns: 1fr;
    }

    .auction-panel,
    .auction-action-card {
        padding: 10px;
    }

    .market-pager a,
    .market-pager span {
        min-width: 34px;
        min-height: 36px;
        padding: 0 9px;
    }

    .auction-stash-stage {
        padding: 6px;
    }

    .auction-stash-grid {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: 3px;
        width: 100%;
        min-width: 0;
        padding: 5px;
    }

    .auction-slot {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .auction-slot small {
        font-size: 9px;
    }

    .auction-slot em {
        right: 1px;
        bottom: 1px;
        min-width: 14px;
        padding: 1px 2px;
        font-size: 8px;
    }

    .panel-head h2,
    .login-card h2 {
        font-size: 22px;
    }
}

/* Modern auction UI pass */
:root {
    --woi-void: #050609;
    --woi-ink: #090b10;
    --woi-panel: rgba(9, 11, 16, .78);
    --woi-panel-strong: rgba(12, 14, 20, .88);
    --woi-line: rgba(255, 255, 255, .12);
    --woi-line-soft: rgba(255, 255, 255, .08);
    --woi-red: #d83a45;
    --woi-red-dark: #8f1724;
    --woi-ember: #f26430;
    --woi-gold: #f4c86a;
    --woi-gold-dim: #9f8347;
    --woi-green: #74f2a4;
    --woi-blue: #7fd6ff;
    --woi-text: #f8f4ed;
    --woi-muted: #b9b0a4;
    --woi-faint: #7d766c;
    --woi-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

body.auction-body {
    color: var(--woi-text);
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .90), rgba(18, 7, 10, .66) 42%, rgba(0, 0, 0, .94)),
        linear-gradient(180deg, rgba(4, 5, 8, .28), rgba(4, 5, 8, .94) 76%),
        url("images/calamity-hero-v2.jpg") center top / cover no-repeat fixed;
    font-family: Inter, Rajdhani, Arial, Helvetica, sans-serif;
    font-size: 15px;
}

body.auction-body::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .035), transparent 18%, transparent 82%, rgba(255, 255, 255, .025)),
        linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 220px);
    background-size: auto;
    opacity: 1;
}

body.auction-body::after {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .44));
}

.auction-shell {
    width: min(1600px, calc(100% - 48px));
    padding: 18px 0 56px;
}

.auction-top {
    grid-template-columns: minmax(290px, auto) minmax(0, 1fr) auto;
    min-height: 76px;
    padding: 10px 14px;
    border-color: var(--woi-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)),
        rgba(6, 7, 10, .76);
    box-shadow: var(--woi-shadow);
    backdrop-filter: blur(18px);
}

.auction-brand {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
}

.auction-brand img {
    width: 74px;
    height: 50px;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
}

.auction-brand small,
.auction-top-badge,
.kicker,
label span,
.auction-status span,
.market-summary span,
.market-price span {
    color: var(--woi-gold);
    font-family: Rajdhani, Inter, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
}

.auction-brand strong {
    margin-top: 2px;
    font-family: Inter, Rajdhani, Arial, sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.05;
    text-transform: none;
    text-shadow: none;
}

.auction-topnav {
    justify-self: center;
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(96px, auto));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--woi-line-soft);
    border-radius: 8px;
    background: rgba(0, 0, 0, .24);
}

.auction-topnav a,
.auction-tabs a {
    min-height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    color: #d9d0c3;
    background: transparent;
    box-shadow: none;
    font-family: Inter, Rajdhani, Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
}

.auction-topnav a:hover,
.auction-tabs a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.auction-topnav a.is-active,
.auction-tabs a.is-active {
    color: #fff;
    background:
        linear-gradient(135deg, rgba(116, 242, 164, .20), rgba(216, 58, 69, .16)),
        rgba(255, 255, 255, .055);
    box-shadow: inset 0 0 0 1px rgba(116, 242, 164, .26);
}

.auction-user {
    gap: 12px;
}

.auction-user strong {
    color: #f4e5c9;
    font-size: 14px;
}

.auction-user button,
.login-card button,
.auction-listing button,
.history-list button,
.auction-submit,
.stash-swap-form button {
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(135deg, var(--woi-red-dark), var(--woi-red) 54%, var(--woi-ember)),
        rgba(216, 58, 69, .85);
    box-shadow: 0 16px 32px rgba(216, 58, 69, .18);
    font-family: Inter, Rajdhani, Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
    clip-path: none;
}

.auction-user button:hover,
.login-card button:hover,
.auction-listing button:hover,
.history-list button:hover,
.auction-submit:hover,
.stash-swap-form button:hover {
    border-color: rgba(255, 255, 255, .24);
    box-shadow: 0 18px 36px rgba(216, 58, 69, .24);
}

.ghost {
    color: #f7dfb3 !important;
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .055) !important;
    box-shadow: none !important;
}

input,
select {
    min-height: 42px;
    color: #f8f4ed;
    border-color: rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(0, 0, 0, .28);
}

input:focus,
select:focus {
    border-color: rgba(116, 242, 164, .54);
    box-shadow: 0 0 0 3px rgba(116, 242, 164, .11);
}

.auction-status {
    gap: 10px;
    margin: 14px 0;
}

.status-card {
    min-height: 74px;
    padding: 13px 14px;
    border-color: var(--woi-line-soft);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012)),
        rgba(8, 10, 14, .62);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
    backdrop-filter: blur(14px);
}

.status-card span {
    color: #b8a266;
}

.status-card strong,
.panel-head > span,
.market-summary strong,
.stash-swap-row strong,
.auction-listing b {
    font-family: Inter, Rajdhani, Arial, sans-serif;
}

.status-card strong {
    font-size: 22px;
    font-weight: 800;
}

.auction-workbench {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 14px;
}

.auction-panel,
.auction-action-card {
    border-color: var(--woi-line-soft);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012)),
        rgba(8, 10, 14, .76);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    backdrop-filter: blur(16px);
}

.auction-panel {
    padding: 14px;
}

.auction-action-card {
    padding: 14px;
}

.panel-head {
    margin-bottom: 12px;
}

.panel-head h2,
.login-card h2 {
    font-family: Inter, Rajdhani, Arial, sans-serif;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.05;
    text-transform: none;
}

.state-line {
    min-height: 40px;
    margin-bottom: 12px;
    border-color: rgba(116, 242, 164, .20);
    border-radius: 8px;
    background: rgba(116, 242, 164, .075);
    color: var(--woi-green);
}

.state-line.bad {
    border-color: rgba(255, 119, 105, .24);
    background: rgba(216, 58, 69, .10);
}

.auction-stash-stage {
    padding: 16px;
    border-color: rgba(255, 255, 255, .10);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .040), rgba(255, 255, 255, .012)),
        rgba(0, 0, 0, .22);
}

.auction-stash-grid {
    gap: 5px;
    padding: 10px;
    border-color: rgba(255, 255, 255, .10);
    border-radius: 8px;
    background: rgba(4, 5, 8, .72);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .44), inset 0 18px 54px rgba(0, 0, 0, .34);
}

.auction-slot {
    border-color: rgba(255, 255, 255, .14);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)),
        rgba(10, 11, 14, .92);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .46);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.auction-slot.has-item {
    border-color: rgba(244, 200, 106, .42);
    background:
        linear-gradient(180deg, rgba(244, 200, 106, .10), rgba(255, 255, 255, .018)),
        rgba(8, 9, 12, .95);
}

.auction-slot.is-tradeable:hover,
.auction-slot.is-tradeable:focus {
    transform: translateY(-1px);
    border-color: rgba(116, 242, 164, .74);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .28), 0 0 0 1px rgba(116, 242, 164, .18);
}

.auction-slot.is-selected {
    border-color: rgba(116, 242, 164, .95);
    box-shadow: 0 0 0 1px rgba(116, 242, 164, .34), 0 14px 30px rgba(0, 0, 0, .30);
}

.auction-slot.is-empty {
    background: rgba(255, 255, 255, .025);
}

.auction-slot > span,
.auction-listing-icon > span,
.selected-icon > span {
    color: #090b10;
    background: linear-gradient(135deg, #f4c86a, #74f2a4);
}

.stash-swap-card,
.auction-action-card {
    border-color: rgba(255, 255, 255, .10);
}

.stash-swap-row {
    min-height: 56px;
    border-color: rgba(255, 255, 255, .10);
    border-radius: 8px;
    background: rgba(255, 255, 255, .040);
}

.stash-swap-row.is-live {
    border-color: rgba(116, 242, 164, .22);
    background: rgba(116, 242, 164, .075);
}

.stash-swap-row span {
    color: #f8f4ed;
    font-family: Inter, Rajdhani, Arial, sans-serif;
    font-size: 14px;
}

.stash-swap-form {
    gap: 9px;
}

.stash-swap-form button {
    min-height: 54px;
    justify-items: center;
    text-align: center;
}

.stash-swap-form button small {
    color: rgba(255, 255, 255, .70);
    font-family: Inter, Rajdhani, Arial, sans-serif;
    font-size: 11px;
    text-transform: none;
}

.selected-item {
    border-color: rgba(116, 242, 164, .16);
    border-radius: 8px;
    background: rgba(116, 242, 164, .055);
}

.selected-icon,
.auction-listing-icon {
    border-color: rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(0, 0, 0, .32);
}

.auction-market-panel .panel-head {
    border-bottom-color: rgba(255, 255, 255, .10);
}

.market-summary {
    gap: 9px;
}

.market-summary article {
    border-color: rgba(255, 255, 255, .10);
    border-radius: 8px;
    background: rgba(255, 255, 255, .040);
}

.auction-listing,
.history-list article {
    border-color: rgba(255, 255, 255, .10);
    border-radius: 8px;
    background: rgba(255, 255, 255, .040);
}

.auction-listing:hover,
.history-list article:hover {
    border-color: rgba(244, 200, 106, .24);
    background: rgba(255, 255, 255, .060);
}

.market-row {
    min-height: 82px;
}

.market-price b {
    color: var(--woi-gold);
    font-size: 15px;
}

.market-pager a,
.market-pager span {
    border-color: rgba(255, 255, 255, .10);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
}

.market-pager a.is-current {
    border-color: rgba(116, 242, 164, .36);
    background: rgba(116, 242, 164, .12);
}

@media (max-width: 1240px) {
    .auction-top {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .auction-topnav {
        justify-self: start;
    }

    .auction-workbench {
        grid-template-columns: 1fr;
    }

    .auction-action-rail {
        position: static;
    }
}

@media (max-width: 760px) {
    .auction-shell {
        width: min(100% - 16px, 1600px);
    }

    .auction-top {
        grid-template-columns: 1fr;
    }

    .auction-brand {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .auction-brand img {
        width: 68px;
        height: 46px;
    }

    .auction-brand strong {
        font-size: 22px;
    }

    .auction-topnav {
        justify-self: stretch;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .panel-head h2,
    .login-card h2 {
        font-size: 22px;
    }
}

@media (max-width: 430px) {
    .auction-shell {
        width: min(100% - 10px, 1600px);
    }

    .auction-topnav,
    .auction-status {
        grid-template-columns: 1fr;
    }
}

/* Auction login redesign */
body.auction-body.is-guest .auction-shell {
    width: min(1360px, calc(100% - 52px));
    min-height: 100vh;
    padding: 20px 0 48px;
}

body.auction-body.is-guest .auction-top {
    min-height: 78px;
    background:
        linear-gradient(135deg, rgba(76, 13, 20, .50), rgba(10, 9, 12, .92) 45%, rgba(4, 5, 8, .84)),
        rgba(8, 5, 7, .92);
}

body.auction-body.is-guest .auction-top-badge {
    background:
        linear-gradient(180deg, rgba(255, 212, 122, .08), rgba(0, 0, 0, .22)),
        rgba(0, 0, 0, .30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.login-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 460px);
    gap: 0;
    width: min(1240px, 100%);
    min-height: 560px;
    margin: clamp(30px, 5.2vh, 70px) auto 0;
    padding: 0;
    border: 1px solid rgba(255, 220, 150, .18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018) 52%, rgba(143, 240, 172, .045)),
        rgba(5, 6, 9, .88);
    box-shadow:
        0 34px 100px rgba(0, 0, 0, .56),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(22px);
    overflow: hidden;
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 0 460px 0 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(5, 6, 9, .16), rgba(5, 6, 9, .58) 68%, rgba(5, 6, 9, .96)),
        linear-gradient(180deg, rgba(95, 18, 29, .18), rgba(0, 0, 0, .46)),
        url("images/calamity-gallery-combat-v1.jpg") 42% center / cover no-repeat;
    opacity: .96;
}

.login-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 30%, rgba(0, 0, 0, .36)),
        linear-gradient(90deg, rgba(255, 212, 122, .12), transparent 22%, transparent 74%, rgba(143, 240, 172, .08)),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 5px);
}

.login-copy,
.login-panel {
    position: relative;
    z-index: 1;
}

.login-copy {
    display: grid;
    align-content: end;
    min-height: 560px;
    max-width: none;
    padding: clamp(38px, 4vw, 60px);
}

.login-copy::before {
    content: "";
    position: absolute;
    left: clamp(38px, 4vw, 60px);
    right: 82px;
    bottom: 136px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 212, 122, .72), rgba(255, 212, 122, .08), transparent);
}

.login-copy::after {
    content: "";
    position: absolute;
    left: clamp(38px, 4vw, 60px);
    bottom: 52px;
    width: 230px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--woi-red), var(--woi-ember), var(--woi-gold));
    box-shadow: 0 0 28px rgba(241, 121, 42, .38);
}

.login-copy .kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 12px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 212, 122, .28);
    border-radius: 5px;
    color: #ffe1a2;
    background: rgba(0, 0, 0, .32);
}

.login-card h2 {
    max-width: 560px;
    margin: 0;
    color: #fffaf0;
    font-family: Rajdhani, Inter, Arial, sans-serif;
    font-size: clamp(46px, 5vw, 68px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: .94;
    text-shadow: 0 18px 40px rgba(0, 0, 0, .54);
}

.login-card p {
    max-width: 420px;
    margin: 14px 0 0;
    color: rgba(248, 244, 237, .78);
    font-family: Inter, Rajdhani, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.login-panel {
    display: grid;
    align-content: center;
    min-height: 560px;
    padding: clamp(34px, 3.2vw, 48px);
    border-left: 1px solid rgba(255, 255, 255, .12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018)),
        linear-gradient(135deg, rgba(20, 25, 28, .78), rgba(5, 6, 9, .80) 54%, rgba(15, 6, 9, .74));
}

.login-panel::before {
    content: "";
    position: absolute;
    inset: 22px;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 6px;
}

.login-panel::after {
    content: "";
    position: absolute;
    top: 22px;
    right: 22px;
    width: 112px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(143, 240, 172, .72), rgba(255, 212, 122, .60));
}

.login-panel-head {
    display: grid;
    gap: 9px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.login-panel-head span {
    display: inline-flex;
    width: fit-content;
    padding: 6px 9px;
    border: 1px solid rgba(143, 240, 172, .22);
    border-radius: 5px;
    color: var(--woi-green);
    background: rgba(143, 240, 172, .075);
    font-family: Rajdhani, Inter, Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.login-panel-head h3 {
    margin: 0;
    color: #fffaf0;
    font-family: Inter, Rajdhani, Arial, sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.04;
}

.login-form {
    display: grid;
    gap: 18px;
}

.login-form label {
    display: grid;
    gap: 9px;
}

.login-form label span {
    margin: 0;
    color: #f4c86a;
    font-size: 12px;
}

.login-form input {
    min-height: 56px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 7px;
    color: #fff8ed;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .010)),
        rgba(0, 0, 0, .38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 10px 28px rgba(0, 0, 0, .20);
    outline: 0;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.login-form input:hover {
    border-color: rgba(255, 212, 122, .30);
}

.login-form input:focus {
    border-color: rgba(143, 240, 172, .68);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .060), rgba(255, 255, 255, .016)),
        rgba(0, 0, 0, .42);
    box-shadow:
        0 0 0 3px rgba(143, 240, 172, .13),
        0 16px 36px rgba(0, 0, 0, .24);
}

.login-card button {
    width: 100%;
    min-height: 56px;
    margin-top: 6px;
    border-radius: 7px;
    color: #fff;
    background:
        linear-gradient(135deg, #b91d2f, #ef493d 54%, #f1792a),
        var(--woi-red);
    font-family: Inter, Rajdhani, Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;
    box-shadow:
        0 16px 36px rgba(185, 29, 47, .32),
        inset 0 1px 0 rgba(255, 255, 255, .20);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.login-card button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow:
        0 20px 44px rgba(185, 29, 47, .40),
        inset 0 1px 0 rgba(255, 255, 255, .24);
}

.login-secondary {
    display: grid;
    margin-top: 12px;
}

.login-secondary button.ghost {
    color: #e7dccb !important;
    border: 1px solid rgba(255, 255, 255, .13);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)),
        rgba(0, 0, 0, .26) !important;
    box-shadow: none;
}

.login-card.is-twofa {
    width: min(1060px, 100%);
    grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
}

.login-card.is-twofa::before {
    inset: 0 440px 0 0;
}

@media (max-width: 980px) {
    body.auction-body.is-guest .auction-shell {
        width: min(720px, calc(100% - 32px));
    }

    .login-card,
    .login-card.is-twofa {
        grid-template-columns: 1fr;
        width: 100%;
        min-height: 0;
        margin-top: 22px;
        padding: 0;
    }

    .login-card::before,
    .login-card.is-twofa::before {
        inset: 0 0 auto 0;
        height: 250px;
        background:
            linear-gradient(180deg, rgba(6, 7, 10, .10), rgba(6, 7, 10, .82)),
            linear-gradient(90deg, rgba(95, 18, 29, .22), rgba(0, 0, 0, .14)),
            url("images/calamity-gallery-combat-v1.jpg") center 42% / cover no-repeat;
    }

    .login-copy {
        min-height: 250px;
        padding: 28px;
    }

    .login-copy::before {
        right: 28px;
        bottom: 112px;
    }

    .login-copy::after {
        bottom: 28px;
        width: 190px;
    }

    .login-card h2 {
        font-size: 42px;
    }

    .login-panel {
        min-height: 0;
        padding: 30px 28px;
        border-top: 1px solid rgba(255, 255, 255, .10);
        border-left: 0;
    }
}

@media (max-width: 520px) {
    body.auction-body.is-guest .auction-shell {
        width: min(100% - 20px, 480px);
        padding-top: 10px;
    }

    body.auction-body.is-guest .auction-top {
        min-height: 74px;
    }

    .login-card {
        margin-top: 14px;
    }

    .login-copy {
        min-height: 208px;
        padding: 22px;
    }

    .login-card::before,
    .login-card.is-twofa::before {
        height: 208px;
    }

    .login-copy::before {
        left: 22px;
        right: 22px;
        bottom: 96px;
    }

    .login-copy::after {
        left: 22px;
        bottom: 22px;
        width: 150px;
    }

    .login-panel {
        padding: 24px 20px;
    }

    .login-panel::before {
        inset: 14px;
    }

    .login-card h2 {
        font-size: 32px;
    }

    .login-panel-head h3 {
        font-size: 27px;
    }
}

/* Compact auction history */
.auction-listings-panel {
    max-width: 1320px;
    margin: 0 auto;
}

.history-sections {
    gap: 12px;
}

.history-card {
    border-color: rgba(255, 255, 255, .10);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .040), rgba(255, 255, 255, .012)),
        rgba(8, 10, 14, .68);
}

.history-card-head {
    min-height: 58px;
    padding: 11px 13px;
    border-bottom-color: rgba(255, 255, 255, .08);
}

.history-card-head h3 {
    font-size: 16px;
    text-transform: none;
}

.history-card .history-list {
    gap: 7px;
    padding: 9px;
}

.history-list article {
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    gap: 9px;
    min-height: 62px;
    padding: 8px 10px;
}

.auction-listing-icon.compact {
    width: 38px;
    height: 38px;
    border-radius: 7px;
}

.history-main strong {
    display: block;
    color: #fff7e8;
    font-size: 14px;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
}

.history-main p {
    margin: 2px 0 0;
    color: #d7c8af;
    font-size: 13px;
    line-height: 1.18;
}

.history-main small {
    margin-top: 2px;
    color: #9f927f;
    font-size: 12px;
    line-height: 1.18;
}

.history-list .status {
    min-width: 86px;
    justify-content: center;
    padding: 6px 9px;
    text-align: center;
}

.history-pager {
    display: grid;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr) minmax(96px, auto);
    gap: 8px;
    align-items: center;
    padding: 0 9px 9px;
}

.history-pager a,
.history-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 8px;
    color: #f4e5c9;
    background: rgba(255, 255, 255, .045);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.history-pager span {
    color: #ffe0a3;
    background: rgba(255, 210, 122, .075);
}

.history-pager a:hover {
    color: #fff;
    border-color: rgba(255, 210, 122, .28);
    background: rgba(255, 255, 255, .075);
}

.history-pager a.is-disabled {
    pointer-events: none;
    opacity: .42;
}

@media (max-width: 760px) {
    .history-list article {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .history-list article .status,
    .history-list article form {
        grid-column: 1 / -1;
    }

    .history-pager {
        grid-template-columns: 1fr;
    }
}