/* ============================================================
   SHADOWSKINGS - GLOBAL EXCHANGE
   MARKET COMMAND INTERFACE
   ============================================================ */

#market-panel.market-exchange {
    position: fixed;
    inset: 0;
    z-index: 9000;

    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
    overflow: hidden;

    border: 0;
    border-radius: 0;

    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(104, 42, 145, 0.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 86% 100%,
            rgba(112, 74, 20, 0.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #100b16 0%,
            #09070e 45%,
            #07060b 100%
        );

    color: #eee7f7;
}


/* ============================================================
   MASTER SHELL
   ============================================================ */

#market-panel .exchange-shell {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* ============================================================
   COMMAND HEADER
   ============================================================ */

#market-panel .exchange-header {
    flex: 0 0 auto;

    min-height: 92px;

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

    gap: 24px;

    padding: 15px 18px;

    box-sizing: border-box;

    background:
        linear-gradient(
            100deg,
            rgba(33, 18, 43, 0.98),
            rgba(14, 10, 20, 0.99) 65%
        );

    border-bottom: 1px solid rgba(161, 86, 207, 0.35);

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.28),
        inset 0 -1px 0 rgba(255,255,255,0.025);
}

#market-panel .exchange-brand {
    min-width: 0;
}

#market-panel .exchange-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: #bd6dff;

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

#market-panel .exchange-brand h1 {
    margin: 0;

    color: #f5edf9;

    font-size: clamp(24px, 2.1vw, 38px);
    line-height: 1;

    font-weight: 950;
    letter-spacing: 0.025em;

    text-shadow:
        0 0 16px rgba(177, 79, 255, 0.28);
}

#market-panel .exchange-brand p {
    margin: 6px 0 0;

    color: #9c90aa;

    font-size: 11px;
    line-height: 1.4;
}


/* ============================================================
   HEADER STATUS
   ============================================================ */

#market-panel .exchange-command-status {
    flex: 0 0 auto;

    display: flex;
    align-items: stretch;

    gap: 8px;
}

#market-panel .exchange-status-card {
    min-width: 108px;

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

    padding: 9px 14px;

    border: 1px solid rgba(126, 72, 154, 0.32);
    border-radius: 4px;

    background: rgba(8, 7, 12, 0.56);

    box-shadow:
        inset 0 0 14px rgba(83, 32, 113, 0.08);
}

#market-panel .exchange-status-card span {
    color: #8f7a9e;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.15em;
}

#market-panel .exchange-status-card strong {
    margin-top: 4px;

    color: #eee5f6;

    font-size: 13px;
    letter-spacing: 0.04em;
}

#market-panel .exchange-status-card.exchange-status-gold strong {
    color: #f1d875;
}

#market-panel .exchange-close {
    width: 34px;
    min-width: 34px;

    border: 1px solid rgba(183, 91, 234, 0.5);
    border-radius: 4px;

    background: rgba(32, 18, 41, 0.82);

    color: #d8b3ed;

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

    cursor: pointer;

    transition:
        background 140ms ease,
        border-color 140ms ease,
        color 140ms ease;
}

#market-panel .exchange-close:hover {
    background: rgba(104, 39, 137, 0.55);
    border-color: #c870f6;
    color: #fff;
}


/* ============================================================
   EXCHANGE NAVIGATION
   ============================================================ */

#market-panel .market-buttons.exchange-nav {
    flex: 0 0 auto;

    display: flex;
    align-items: stretch;
    justify-content: flex-start;

    gap: 5px;

    min-width: 0;

    margin: 0;
    padding: 7px 9px;

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

    background: #130d1a;

    border-bottom: 1px solid rgba(120, 67, 151, 0.38);

    scrollbar-width: thin;
}

#market-panel .market-buttons.exchange-nav button {
    flex: 0 0 auto;

    min-height: 32px;

    margin: 0;
    padding: 7px 14px;

    border: 1px solid rgba(111, 69, 132, 0.38);
    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            rgba(33, 22, 42, 0.92),
            rgba(20, 14, 27, 0.95)
        );

    color: #b6a5c1;

    box-shadow: none;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.075em;

    text-shadow: none;

    cursor: pointer;

    transform: none;

    transition:
        background 130ms ease,
        color 130ms ease,
        border-color 130ms ease;
}

#market-panel .market-buttons.exchange-nav button:hover {
    background: rgba(79, 38, 98, 0.75);
    border-color: rgba(185, 104, 226, 0.62);
    color: #f0e3f7;

    box-shadow: none;
    transform: none;
}

#market-panel .market-buttons.exchange-nav button.active {
    background:
        linear-gradient(
            180deg,
            rgba(115, 47, 151, 0.92),
            rgba(70, 29, 91, 0.96)
        );

    border-color: rgba(205, 124, 246, 0.78);

    color: #fff;

    box-shadow:
        inset 0 0 10px rgba(217, 143, 255, 0.11),
        0 0 9px rgba(151, 64, 193, 0.17);

    transform: none;
}

#market-panel .exchange-nav-spacer {
    flex: 1 1 auto;
    min-width: 12px;
}

#market-panel .market-buttons.exchange-nav .exchange-throne-btn {
    border-color: rgba(194, 148, 60, 0.42);

    background:
        linear-gradient(
            180deg,
            rgba(61, 46, 21, 0.68),
            rgba(34, 25, 15, 0.9)
        );

    color: #dbc67d;
}

#market-panel .market-buttons.exchange-nav .exchange-throne-btn:hover {
    border-color: rgba(235, 194, 91, 0.7);
    background: rgba(83, 62, 27, 0.82);
    color: #fff0a9;
}


/* ============================================================
   COMMAND STRIP
   ============================================================ */

#market-panel .exchange-command-strip {
    flex: 0 0 auto;

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

    gap: 20px;

    margin: 10px 12px 8px;
    padding: 10px 13px;

    border: 1px solid rgba(113, 64, 139, 0.34);
    border-radius: 4px;

    background:
        linear-gradient(
            90deg,
            rgba(36, 21, 46, 0.84),
            rgba(18, 13, 24, 0.78)
        );
}

#market-panel .exchange-command-title {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;
}

#market-panel .exchange-command-icon {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(172, 86, 219, 0.47);
    border-radius: 3px;

    background: rgba(19, 11, 25, 0.8);

    color: #cf7eff;

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

#market-panel .exchange-command-title strong {
    display: block;

    color: #f0e7f5;

    font-size: 11px;
    letter-spacing: 0.045em;
}

#market-panel .exchange-command-title small {
    display: block;

    margin-top: 3px;

    color: #817689;

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

#market-panel .exchange-operational {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 6px;

    padding: 6px 9px;

    border: 1px solid rgba(68, 153, 95, 0.32);
    border-radius: 3px;

    background: rgba(19, 50, 30, 0.23);

    color: #78d69a;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.07em;
}

#market-panel .exchange-operational > span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #67dc91;

    box-shadow: 0 0 7px rgba(103, 220, 145, 0.8);
}


/* ============================================================
   MAIN WORKSPACE
   THIS IS THE SCROLLING AREA
   ============================================================ */

#market-panel .market-content.exchange-workspace {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    margin: 0 12px 9px;
    padding: 10px;

    box-sizing: border-box;

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

    overscroll-behavior: contain;

    border: 1px solid rgba(93, 58, 111, 0.31);
    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            rgba(13, 10, 17, 0.88),
            rgba(8, 7, 11, 0.94)
        );

    box-shadow:
        inset 0 0 24px rgba(71, 28, 91, 0.06);

    scrollbar-width: thin;
    scrollbar-color:
        rgba(145, 75, 179, 0.62)
        rgba(13, 10, 17, 0.8);
}

#market-panel .market-content.exchange-workspace::-webkit-scrollbar {
    width: 9px;
}

#market-panel .market-content.exchange-workspace::-webkit-scrollbar-track {
    background: rgba(13, 10, 17, 0.8);
}

#market-panel .market-content.exchange-workspace::-webkit-scrollbar-thumb {
    border: 2px solid rgba(13, 10, 17, 0.8);
    border-radius: 8px;

    background: rgba(145, 75, 179, 0.62);
}


/* ============================================================
   DYNAMIC MARKET CONTENT
   ============================================================ */

#market-panel .market-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);

    gap: 10px;

    min-width: 0;

    margin: 0;
}

#market-panel .market-row,
#market-panel .market-listing {
    box-sizing: border-box;

    margin: 0 0 7px;
    padding: 11px 12px;

    border: 1px solid rgba(91, 57, 107, 0.42);
    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            rgba(28, 20, 34, 0.78),
            rgba(17, 13, 22, 0.86)
        );

    color: #dcd1e3;

    box-shadow: none;

    transition:
        border-color 120ms ease,
        background 120ms ease;
}

#market-panel .market-row:hover,
#market-panel .market-listing:hover {
    border-color: rgba(174, 94, 211, 0.62);

    background:
        linear-gradient(
            180deg,
            rgba(44, 26, 54, 0.88),
            rgba(22, 15, 28, 0.9)
        );

    box-shadow: none;
    transform: none;
}

#market-panel .market-item-name {
    margin-bottom: 4px;

    color: #f0e7f5;

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

#market-panel .market-item-desc {
    margin-bottom: 5px;

    color: #91859a;

    font-size: 10px;
    line-height: 1.45;
}

#market-panel .market-price {
    color: #e5cb73;

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

#market-panel .market-price.up {
    color: #74d596;
    text-shadow: none;
}

#market-panel .market-price.down {
    color: #df7979;
    text-shadow: none;
}


/* ============================================================
   MARKET SIDEBAR
   ============================================================ */

#market-panel .market-sidebar {
    min-width: 0;

    padding: 11px;

    border: 1px solid rgba(93, 57, 111, 0.38);
    border-radius: 3px;

    background: rgba(18, 13, 23, 0.82);

    box-shadow: none;
}

#market-panel .market-sidebar h3 {
    margin: 0 0 10px;

    color: #e9dff0;

    font-size: 11px;
    letter-spacing: 0.05em;

    text-shadow: none;
}


/* ============================================================
   MARKET ACTION BUTTONS
   ============================================================ */

#market-panel .market-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 31px;

    margin-top: 7px;
    padding: 7px 12px;

    border-radius: 3px;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.055em;

    text-shadow: none;

    cursor: pointer;

    transition:
        background 120ms ease,
        border-color 120ms ease;
}

#market-panel .market-btn.buy {
    border: 1px solid rgba(72, 170, 106, 0.46);

    background: rgba(29, 93, 51, 0.28);

    color: #9ae2b1;

    box-shadow: none;
}

#market-panel .market-btn.buy:hover {
    border-color: rgba(92, 213, 133, 0.72);

    background: rgba(39, 125, 69, 0.42);

    box-shadow: none;
    transform: none;
}

#market-panel .market-btn.sell {
    border: 1px solid rgba(190, 75, 75, 0.46);

    background: rgba(101, 33, 37, 0.3);

    color: #e9a0a0;

    box-shadow: none;
}

#market-panel .market-btn.sell:hover {
    border-color: rgba(227, 104, 104, 0.7);

    background: rgba(132, 43, 48, 0.42);

    box-shadow: none;
    transform: none;
}


/* ============================================================
   GENERIC DYNAMIC CONTENT CONTROLS
   ============================================================ */

#market-panel .exchange-workspace button {
    cursor: pointer;
}

#market-panel .exchange-workspace input,
#market-panel .exchange-workspace select,
#market-panel .exchange-workspace textarea {
    box-sizing: border-box;

    border: 1px solid rgba(108, 67, 128, 0.46);
    border-radius: 3px;

    background: rgba(8, 7, 11, 0.86);

    color: #e8deed;

    outline: none;
}

#market-panel .exchange-workspace input:focus,
#market-panel .exchange-workspace select:focus,
#market-panel .exchange-workspace textarea:focus {
    border-color: rgba(185, 98, 225, 0.72);

    box-shadow:
        0 0 0 1px rgba(185, 98, 225, 0.11);
}


/* ============================================================
   FOOTER
   ============================================================ */

#market-panel .exchange-footer {
    flex: 0 0 auto;

    min-height: 27px;

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

    gap: 20px;

    padding: 6px 12px;

    box-sizing: border-box;

    border-top: 1px solid rgba(95, 57, 114, 0.3);

    background: rgba(8, 7, 11, 0.94);

    color: #625a68;

    font-size: 8px;
}

#market-panel .exchange-footer > div {
    display: flex;
    align-items: center;

    gap: 6px;
}

#market-panel .exchange-live-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #5ed287;

    box-shadow:
        0 0 6px rgba(94, 210, 135, 0.7);
}


/* ============================================================
   TABLES CREATED BY DYNAMIC MARKET JS
   ============================================================ */

#market-panel table {
    width: 100%;

    border-collapse: collapse;

    color: #cfc3d6;

    font-size: 10px;
}

#market-panel th {
    padding: 8px 9px;

    border-bottom: 1px solid rgba(119, 71, 140, 0.42);

    background: rgba(34, 21, 41, 0.64);

    color: #9d82aa;

    font-size: 8px;
    letter-spacing: 0.08em;

    text-align: left;
}

#market-panel td {
    padding: 9px;

    border-bottom: 1px solid rgba(83, 55, 95, 0.24);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {

    #market-panel .exchange-status-card {
        display: none;
    }

    #market-panel .market-layout {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 760px) {

    #market-panel .exchange-header {
        min-height: 76px;
        padding: 12px;
    }

    #market-panel .exchange-brand p {
        display: none;
    }

    #market-panel .exchange-brand h1 {
        font-size: 22px;
    }

    #market-panel .exchange-command-strip {
        margin:
            7px 7px 6px;
    }

    #market-panel .exchange-operational {
        display: none;
    }

    #market-panel .market-content.exchange-workspace {
        margin:
            0 7px 6px;

        padding: 7px;
    }

    #market-panel .exchange-footer {
        padding:
            5px 8px;
    }

    #market-panel .exchange-footer > div:last-child {
        display: none;
    }
}

/* ============================================================
   GLOBAL EXCHANGE - REMOVE LEGACY OUTER EDGE / WHITE HALO
   ============================================================ */

html,
body {
    background: #07060b;
}

#market-panel.market-exchange {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}

#market-panel.market-exchange::before,
#market-panel.market-exchange::after {
    display: none !important;
    content: none !important;
}



/* ============================================================
   GLOBAL EXCHANGE - CREATE LISTING COMMAND CONSOLE
   ============================================================ */

#market-panel .market-create-console {
    width: 100%;
    min-height: 100%;
    padding: 24px;
    box-sizing: border-box;
}

#market-panel .market-create-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 0 2px 16px;
    border-bottom: 1px solid rgba(153, 115, 190, 0.22);
}

#market-panel .market-create-heading {
    min-width: 0;
}

#market-panel .market-create-kicker {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #9d7bc2;
}

#market-panel .market-create-heading h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: 0.045em;
    color: #f2edf7;
}

#market-panel .market-create-heading p {
    max-width: 760px;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: #928b9b;
}

#market-panel .market-create-security {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 145px;
    padding: 9px 12px;
    border: 1px solid rgba(184, 145, 61, 0.28);
    background: rgba(184, 145, 61, 0.055);
}

#market-panel .market-create-security-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b8923d;
    box-shadow: 0 0 9px rgba(184, 146, 61, 0.45);
}

#market-panel .market-create-security small,
#market-panel .market-create-security strong {
    display: block;
}

#market-panel .market-create-security small {
    margin-bottom: 2px;
    font-size: 8px;
    letter-spacing: 0.14em;
    color: #776d7d;
}

#market-panel .market-create-security strong {
    font-size: 10px;
    letter-spacing: 0.09em;
    color: #d5b766;
}

#market-panel .market-create-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.35fr) minmax(245px, 0.75fr);
    gap: 14px;
    align-items: stretch;
}

#market-panel .market-create-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(122, 87, 157, 0.24);
    background:
        linear-gradient(
            180deg,
            rgba(30, 23, 39, 0.88),
            rgba(15, 12, 20, 0.94)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 10px 24px rgba(0, 0, 0, 0.16);
}

#market-panel .market-create-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(123, 91, 151, 0.16);
}

#market-panel .market-create-step {
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    border: 1px solid rgba(145, 102, 187, 0.42);
    background: rgba(103, 64, 139, 0.12);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #b08ad2;
}

#market-panel .market-create-card-head strong,
#market-panel .market-create-card-head small {
    display: block;
}

#market-panel .market-create-card-head strong {
    margin-bottom: 3px;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #e7deef;
}

#market-panel .market-create-card-head small {
    font-size: 9px;
    line-height: 1.4;
    color: #777080;
}

#market-panel .market-create-field {
    min-width: 0;
    margin-bottom: 14px;
}

#market-panel .market-create-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    color: #93869d;
}

#market-panel .market-create-field select,
#market-panel .market-create-field input {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
}

#market-panel .market-create-terms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#market-panel .market-create-field-note {
    display: block;
    margin-top: 6px;
    font-size: 8px;
    letter-spacing: 0.04em;
    color: #68616f;
}

#market-panel .market-create-gold-input {
    position: relative;
}

#market-panel .market-create-gold-input > span {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 2;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 900;
    color: #c4a14d;
    pointer-events: none;
}

#market-panel .market-create-gold-input input {
    padding-left: 31px !important;
}

#market-panel .market-create-availability {
    min-height: 56px;
    margin-top: 5px;
    padding: 11px 12px;
    box-sizing: border-box;
    border: 1px solid rgba(108, 78, 137, 0.2);
    background: rgba(6, 5, 9, 0.34);
    font-size: 10px;
    line-height: 1.45;
}

#market-panel .market-create-settlement {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 11px;
}

#market-panel .market-create-settlement > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(112, 80, 143, 0.18);
    background: rgba(7, 6, 10, 0.3);
}

#market-panel .market-create-settlement span,
#market-panel .market-create-settlement strong {
    display: block;
}

#market-panel .market-create-settlement span {
    margin-bottom: 4px;
    font-size: 7px;
    letter-spacing: 0.12em;
    color: #665f6d;
}

#market-panel .market-create-settlement strong {
    overflow: hidden;
    font-size: 9px;
    letter-spacing: 0.07em;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #a99faf;
}

#market-panel .market-create-deploy-card {
    display: flex;
    flex-direction: column;
}

#market-panel .market-create-dossier {
    flex: 1 1 auto;
    min-height: 112px;
    padding: 14px;
    border-left: 2px solid rgba(175, 135, 54, 0.6);
    background: rgba(180, 136, 45, 0.045);
}

#market-panel .market-create-dossier-label {
    display: block;
    margin-bottom: 10px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #8e7541;
}

#market-panel .market-create-dossier strong {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #d7c17f;
}

#market-panel .market-create-dossier p {
    margin: 0;
    font-size: 10px;
    line-height: 1.55;
    color: #807783;
}

#market-panel .market-create-submit {
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

#market-panel .market-create-status {
    min-height: 20px;
    margin-top: 10px;
    font-size: 10px;
}

@media (max-width: 1050px) {
    #market-panel .market-create-layout {
        grid-template-columns: 1fr 1fr;
    }

    #market-panel .market-create-deploy-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    #market-panel .market-create-console {
        padding: 14px;
    }

    #market-panel .market-create-header {
        align-items: stretch;
        flex-direction: column;
    }

    #market-panel .market-create-layout,
    #market-panel .market-create-terms-grid,
    #market-panel .market-create-settlement {
        grid-template-columns: 1fr;
    }

    #market-panel .market-create-deploy-card {
        grid-column: auto;
    }
}


/* ============================================================
   GLOBAL EXCHANGE - EMBEDDED BROWSE MARKET
   Browse is a workspace tab, never a separate full-screen panel.
   ============================================================ */

#market-panel #market-listings-panel.market-browser-embedded {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;

    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

#market-panel .market-browser-embedded .exchange-browser-filters {
    flex: 0 0 auto;
    margin: 0 0 10px 0;
}

#market-panel .market-browser-embedded .exchange-browser-workspace {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

#market-panel .market-browser-embedded .exchange-browser-list-column,
#market-panel .market-browser-embedded .exchange-browser-details {
    min-height: 0;
}

#market-panel .market-browser-embedded .exchange-listings-scroll,
#market-panel .market-browser-embedded .market-listing-details {
    overflow-y: auto;
}



/* ============================================================
   GLOBAL EXCHANGE - EMBEDDED MARKET LISTING CARDS
   ============================================================ */

#market-panel .market-browser-embedded #market-listings-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    box-sizing: border-box;
}

#market-panel .market-browser-embedded .market-listing-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) 100px 120px minmax(150px, 0.8fr);
    align-items: center;
    gap: 14px;

    min-height: 58px;
    padding: 10px 14px;
    box-sizing: border-box;

    border: 1px solid rgba(124, 86, 157, 0.28);
    border-left: 3px solid rgba(119, 72, 156, 0.72);

    background:
        linear-gradient(
            90deg,
            rgba(40, 27, 52, 0.88),
            rgba(18, 14, 24, 0.92)
        );

    cursor: pointer;

    transition:
        border-color 0.14s ease,
        background 0.14s ease,
        transform 0.14s ease;
}

#market-panel .market-browser-embedded .market-listing-row:hover {
    border-color: rgba(161, 111, 201, 0.62);
    border-left-color: #a36bd0;

    background:
        linear-gradient(
            90deg,
            rgba(55, 34, 70, 0.96),
            rgba(22, 16, 29, 0.96)
        );

    transform: translateX(2px);
}

#market-panel .market-browser-embedded .market-listing-row.selected,
#market-panel .market-browser-embedded .market-listing-row.active {
    border-color: rgba(187, 135, 225, 0.72);
    border-left-color: #c07ee5;
    background: rgba(82, 48, 104, 0.34);
}

#market-panel .market-browser-embedded .listing-name {
    min-width: 0;

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

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.035em;
    color: #eee7f5;
}

#market-panel .market-browser-embedded .listing-amount {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #a59bab;
}

#market-panel .market-browser-embedded .listing-price {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.035em;
    color: #d6b85c;
}

#market-panel .market-browser-embedded .listing-seller {
    min-width: 0;

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

    font-size: 10px;
    letter-spacing: 0.05em;
    color: #81788a;
}

/* ------------------------------------------------------------
   Listing dossier
   ------------------------------------------------------------ */

#market-panel .market-browser-embedded .market-listing-details {
    padding: 16px;
    box-sizing: border-box;
}

#market-panel .market-browser-embedded .detail-name {
    margin-bottom: 5px;

    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.035em;
    color: #f0eaf5;
}

#market-panel .market-browser-embedded .detail-type,
#market-panel .market-browser-embedded .detail-category,
#market-panel .market-browser-embedded .detail-rarity,
#market-panel .market-browser-embedded .detail-element,
#market-panel .market-browser-embedded .detail-tier,
#market-panel .market-browser-embedded .detail-race,
#market-panel .market-browser-embedded .detail-special,
#market-panel .market-browser-embedded .detail-training,
#market-panel .market-browser-embedded .detail-amount,
#market-panel .market-browser-embedded .detail-price,
#market-panel .market-browser-embedded .detail-seller {
    margin-top: 8px;
    padding: 8px 10px;

    border: 1px solid rgba(117, 82, 147, 0.18);
    background: rgba(10, 8, 14, 0.35);

    font-size: 10px;
    line-height: 1.4;
    color: #a89eae;
}

#market-panel .market-browser-embedded .detail-price {
    color: #d5b660;
    font-weight: 800;
}

#market-panel .market-browser-embedded .detail-rarity {
    color: #b78bd4;
}

#market-panel .market-browser-embedded .detail-gear-stats {
    margin-top: 10px;
    padding: 10px;

    border: 1px solid rgba(117, 82, 147, 0.18);
    background: rgba(12, 9, 16, 0.42);
}

#market-panel .market-browser-embedded .market-purchase-controls {
    margin-top: 14px;
    padding-top: 14px;

    border-top: 1px solid rgba(115, 82, 145, 0.22);
}

#market-panel .market-browser-embedded .detail-total {
    margin: 10px 0;

    font-size: 12px;
    font-weight: 900;
    color: #d5b660;
}

#market-panel .market-browser-embedded .market-btn.buy {
    width: 100%;
    min-height: 40px;
}

/* ------------------------------------------------------------
   Empty / loading states
   ------------------------------------------------------------ */

#market-panel .market-browser-embedded .empty,
#market-panel .market-browser-embedded .market-loading,
#market-panel .market-browser-embedded .market-error {
    margin: 12px;
    padding: 18px;

    border: 1px solid rgba(115, 82, 145, 0.22);
    background: rgba(11, 8, 15, 0.42);

    font-size: 11px;
    color: #8f8595;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 1000px) {
    #market-panel .market-browser-embedded .market-listing-row {
        grid-template-columns: 1.5fr 80px 105px;
    }

    #market-panel .market-browser-embedded .listing-seller {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    #market-panel .market-browser-embedded .market-listing-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}


/* ============================================================
   SHADOWSKINGS — PREMIUM TOKEN MARKET
   Gold / Premium Token Settlement
   ============================================================ */

#market-panel .market-create-currency-selector {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 12px;
}


#market-panel .market-create-currency-btn {

    min-height: 40px;
    padding: 8px 10px;

    border:
        1px solid
        rgba(110, 82, 137, 0.3);

    background:
        rgba(8, 6, 12, 0.5);

    color: #8f8797;

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;

    cursor: pointer;

    transition:
        border-color 0.14s ease,
        background 0.14s ease,
        color 0.14s ease;
}


#market-panel .market-create-currency-btn:hover {

    border-color:
        rgba(159, 116, 198, 0.55);

    background:
        rgba(80, 48, 104, 0.2);
}


#market-panel .market-create-currency-btn.active {

    border-color:
        rgba(190, 142, 226, 0.72);

    background:
        rgba(100, 58, 133, 0.32);

    color: #eadcf5;

    box-shadow:
        inset 0 0 14px
        rgba(144, 86, 188, 0.12);
}


#market-panel .market-create-currency-symbol {

    display: inline-block;
    margin-right: 5px;
    font-weight: 900;
}


#market-panel .market-create-currency-symbol.gold {

    color: #c4a14d;
}


#market-panel .market-create-currency-symbol.premium {

    color: #b993ff;
}


#market-panel .market-create-price-label {

    margin-top: 12px;
}


#market-panel .market-create-gold-input.premium > span {

    color: #b993ff;
}


#market-panel .market-create-gold-input.premium input {

    border-color:
        rgba(174, 124, 224, 0.4);
}


#market-panel .premium-token-price {

    color: #c9a7ff;
    text-shadow:
        0 0 8px
        rgba(162, 103, 218, 0.22);
}


@media (max-width: 720px) {

    #market-panel .market-create-currency-selector {

        grid-template-columns: 1fr;
    }
}