/* ============================================================
   SHADOWSKINGS
   GLOBAL EXCHANGE - MARKET LISTINGS
   ============================================================ */

#market-listings-panel.exchange-browser {
    position: fixed;
    inset: 0;

    z-index: 9100;

    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 15% 0%,
            rgba(103, 39, 143, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 100%,
            rgba(121, 86, 25, 0.06),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #100b16,
            #09070e 48%,
            #07060b
        );

    box-shadow: none;

    color: #eee7f5;
}


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

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

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

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


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

#market-listings-panel .exchange-browser-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;

    border-bottom:
        1px solid
        rgba(151, 82, 193, 0.34);

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


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


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

    margin-bottom: 5px;

    color: #bd6dff;

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


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

    color: #f4edf8;

    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.24);
}


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

    color: #9a8ea4;

    font-size: 11px;
}


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

#market-listings-panel .exchange-browser-status {
    display: flex;
    align-items: stretch;

    gap: 8px;
}


#market-listings-panel .exchange-browser-stat {
    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);
}


#market-listings-panel .exchange-browser-stat span {
    color: #8f7a9e;

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


#market-listings-panel .exchange-browser-stat strong {
    margin-top: 4px;

    color: #eee5f6;

    font-size: 13px;
}


#market-listings-panel .exchange-browser-stat-gold strong {
    color: #efd873;
}


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

    margin: 0;
    padding: 0;

    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;
}


#market-listings-panel .exchange-browser-close:hover {
    background:
        rgba(104, 39, 137, 0.55);

    border-color: #c870f6;

    color: white;
}


/* ============================================================
   COMMAND BAR
   ============================================================ */

#market-listings-panel .exchange-browser-nav {
    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-listings-panel .exchange-browser-nav-title {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;
}


#market-listings-panel .exchange-browser-nav-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-listings-panel .exchange-browser-nav-title strong {
    display: block;

    color: #f0e7f5;

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


#market-listings-panel .exchange-browser-nav-title small {
    display: block;

    margin-top: 3px;

    color: #817689;

    font-size: 9px;
}


#market-listings-panel .exchange-browser-operational {
    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-listings-panel .exchange-browser-operational > span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #67dc91;

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


/* ============================================================
   FILTER COMMAND BAR
   ============================================================ */

#market-listings-panel .market-listings-searchbar.exchange-browser-filters {
    flex: 0 0 auto;

    display: grid;

    grid-template-columns:
        minmax(240px, 2fr)
        minmax(140px, 0.8fr)
        minmax(140px, 0.8fr)
        minmax(160px, 0.9fr);

    gap: 8px;

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

    box-sizing: border-box;

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

    border-radius: 4px;

    background:
        rgba(10, 8, 14, 0.86);
}


#market-listings-panel .exchange-filter-field {
    min-width: 0;
}


#market-listings-panel .exchange-filter-field label {
    display: block;

    margin-bottom: 4px;

    color: #7f7288;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.11em;
}


#market-listings-panel .exchange-filter-field input,
#market-listings-panel .exchange-filter-field select {
    width: 100%;
    min-height: 33px;

    box-sizing: border-box;

    padding: 7px 9px;

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

    border-radius: 3px;

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

    color: #ddd3e4;

    font-size: 10px;

    outline: none;
}


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

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


/* ============================================================
   MAIN MARKET WORKSPACE
   ============================================================ */

#market-listings-panel .market-listings-layout.exchange-browser-workspace {
    flex: 1 1 auto;

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

    display: grid;

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

    gap: 8px;

    margin: 0 12px 8px;

    overflow: hidden;
}


/* ============================================================
   LISTING COLUMN
   ============================================================ */

#market-listings-panel .exchange-browser-list-column {
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

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

    border-radius: 4px;

    background:
        rgba(10, 8, 14, 0.78);
}


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

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

    gap: 16px;

    padding: 10px 12px;

    border-bottom:
        1px solid
        rgba(93, 58, 111, 0.28);

    background:
        rgba(26, 17, 32, 0.67);
}


#market-listings-panel .exchange-browser-section-header span {
    display: block;

    color: #9b75ab;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.1em;
}


#market-listings-panel .exchange-browser-section-header strong {
    display: block;

    margin-top: 3px;

    color: #ece4f1;

    font-size: 11px;
}


#market-listings-panel .exchange-browser-section-header small {
    color: #706675;

    font-size: 8px;
}


/* ============================================================
   ACTUAL LISTING SCROLLER
   ============================================================ */

#market-listings-panel .market-listings-left.exchange-listings-scroll {
    flex: 1 1 auto;

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

    padding: 8px;

    box-sizing: border-box;

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

    scrollbar-width: thin;

    scrollbar-color:
        rgba(143, 73, 178, 0.62)
        rgba(11, 8, 14, 0.9);
}


#market-listings-panel .market-listings-left::-webkit-scrollbar {
    width: 8px;
}


#market-listings-panel .market-listings-left::-webkit-scrollbar-track {
    background:
        rgba(11, 8, 14, 0.9);
}


#market-listings-panel .market-listings-left::-webkit-scrollbar-thumb {
    border-radius: 8px;

    background:
        rgba(143, 73, 178, 0.62);
}


/* ============================================================
   COMMON DYNAMIC LISTING CARD STYLES
   ============================================================ */

#market-listings-panel .market-listing-card,
#market-listings-panel .listing-card,
#market-listings-panel .market-listing,
#market-listings-panel .listing-item {
    box-sizing: border-box;

    margin-bottom: 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;

    cursor: pointer;

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


#market-listings-panel .market-listing-card:hover,
#market-listings-panel .listing-card:hover,
#market-listings-panel .market-listing:hover,
#market-listings-panel .listing-item: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)
        );
}


/* ============================================================
   DETAIL DOSSIER
   ============================================================ */

#market-listings-panel .market-listings-right.exchange-browser-details {
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(103, 64, 122, 0.38);

    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            rgba(22, 15, 29, 0.92),
            rgba(11, 9, 15, 0.94)
        );
}


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

    padding: 12px;

    border-bottom:
        1px solid
        rgba(96, 59, 113, 0.3);

    background:
        rgba(30, 19, 38, 0.62);
}


#market-listings-panel .exchange-browser-detail-header span {
    display: block;

    color: #a578b8;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.11em;
}


#market-listings-panel .exchange-browser-detail-header h3 {
    margin: 4px 0 3px;

    color: #f0e7f5;

    font-size: 13px;
}


#market-listings-panel .exchange-browser-detail-header small {
    color: #786c80;

    font-size: 8px;
}


/* ============================================================
   DYNAMIC DETAIL CONTENT
   ============================================================ */

#market-listings-panel .market-listing-details {
    flex: 1 1 auto;

    min-height: 0;

    padding: 12px;

    box-sizing: border-box;

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

    color: #cfc4d5;

    font-size: 10px;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(143, 73, 178, 0.62)
        transparent;
}


#market-listings-panel .exchange-browser-empty-detail {
    min-height: 220px;

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

    padding: 22px;

    text-align: center;
}


#market-listings-panel .exchange-browser-empty-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 12px;

    border:
        1px solid
        rgba(160, 83, 199, 0.42);

    border-radius: 4px;

    background:
        rgba(39, 21, 48, 0.42);

    color: #c878ef;

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


#market-listings-panel .exchange-browser-empty-detail strong {
    color: #e8deed;

    font-size: 12px;
}


#market-listings-panel .exchange-browser-empty-detail p {
    max-width: 250px;

    margin: 6px 0 0;

    color: #766b7d;

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


/* ============================================================
   DETAIL BUTTONS / INPUTS GENERATED BY JS
   ============================================================ */

#market-listings-panel button {
    font-family: inherit;
}


#market-listings-panel .market-listing-details button {
    min-height: 31px;

    padding: 7px 12px;

    border:
        1px solid
        rgba(187, 139, 59, 0.54);

    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            rgba(93, 68, 28, 0.65),
            rgba(48, 35, 18, 0.88)
        );

    color: #edd88b;

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

    cursor: pointer;
}


#market-listings-panel .market-listing-details button:hover {
    border-color:
        rgba(236, 198, 102, 0.74);

    background:
        rgba(112, 82, 34, 0.78);

    color: #fff0a9;
}


#market-listings-panel .market-listing-details input,
#market-listings-panel .market-listing-details select {
    box-sizing: border-box;

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

    border-radius: 3px;

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

    color: #e1d6e7;
}


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

#market-listings-panel .exchange-browser-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-listings-panel .exchange-browser-footer > div {
    display: flex;
    align-items: center;

    gap: 6px;
}


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

    border-radius: 50%;

    background: #5ed287;

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


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

@media (max-width: 1050px) {

    #market-listings-panel .exchange-browser-stat {
        display: none;
    }

    #market-listings-panel .market-listings-layout.exchange-browser-workspace {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(270px, 320px);
    }

}


@media (max-width: 760px) {

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

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

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

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

    #market-listings-panel .market-listings-searchbar.exchange-browser-filters {
        grid-template-columns:
            1fr
            1fr;

        margin:
            0 7px 7px;
    }

    #market-listings-panel .exchange-filter-search {
        grid-column:
            1 / -1;
    }

    #market-listings-panel .market-listings-layout.exchange-browser-workspace {
        grid-template-columns:
            1fr;

        overflow-y: auto;

        margin:
            0 7px 6px;
    }

    #market-listings-panel .exchange-browser-list-column {
        min-height: 360px;
    }

    #market-listings-panel .exchange-browser-details {
        min-height: 340px;
    }

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

}