.supra-market { --market-surface: #0b1420; --market-border: #26364b; --market-muted: #afbed0; --market-positive: #64dfb5; --market-negative: #ff9eac; --market-intermediate: #f2c66b; --market-text: #e5edf5; }
html[data-bs-theme="light"] .supra-market { --market-surface: #fff; --market-border: #d5dfeb; --market-muted: #536278; --market-positive: #09754f; --market-negative: #b42340; --market-intermediate: #885709; --market-text: #172535; }
.supra-market main { max-width: 1560px; }
.supra-market .market-heading, .supra-market .market-toolbar, .supra-market .market-card-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.supra-market .market-heading { margin: .75rem 0 1.25rem; }
.supra-market .market-heading h1 { font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -.04em; }
.supra-market .market-kicker { color: var(--market-muted); font-size: .7rem; letter-spacing: .16em; }
.supra-market label { font-size: .8rem; }
.supra-market .market-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.supra-market .market-card, .supra-market .market-table-card { min-width: 0; background: var(--market-surface); border: 1px solid var(--market-border); border-radius: 18px; padding: 1.25rem; box-shadow: 0 8px 30px #00000010; }
.supra-market .market-card { display: flex; flex-direction: column; gap: .4rem; }
.supra-market .market-card h2 { font-size: 1rem; margin: 0 0 .8rem; }
.supra-market .small { color: var(--market-muted); }
.supra-market .market-price { display: block; font-size: 2rem; font-variant-numeric: tabular-nums; margin: .5rem 0; }
.supra-market .market-periods { display: flex; gap: .4rem; margin-top: 1rem; }
.supra-market .market-periods button { min-height: 36px; }
.supra-market [data-period][hidden] { display: none; }
.supra-market .market-periods [aria-pressed="true"] { background: #27c9df; color: #111827; }
.supra-market .market-chart { height: 160px; width: 100%; }
.supra-market .market-overview > .market-card:first-child .market-chart { flex: 1 1 160px; height: auto; min-height: 160px; max-height: 260px; }
.supra-market .market-trending-period { align-self: flex-end; width: 6rem; max-width: 100%; margin-top: .5rem; }
.supra-market .market-trending-period > select { min-height: 2rem; font-size: .8rem; padding: .3rem 2rem .3rem .6rem; }
.supra-market .market-card-symbol { display: inline-grid; place-items: center; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: .75rem; font-size: 1.5rem; }
.supra-market .market-symbol-index { color: #a78bfa; background: color-mix(in srgb, #a78bfa 14%, var(--market-surface)); }
.supra-market .market-symbol-trending { color: #e59716; background: color-mix(in srgb, #e59716 14%, var(--market-surface)); }
.supra-market .market-trending { display: flex; flex: 1; flex-direction: column; justify-content: space-around; padding: 0; margin: 1.25rem 0 0; list-style: none; }
.supra-market .market-trending li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; font-size: .8rem; min-width: 0; }
.supra-market .market-trending li > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.supra-market .market-trending li > span:last-child { flex: 0 1 auto; min-width: 0; max-width: 52%; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.supra-market .market-token-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #27c9df20; color: var(--theme-primary); width: 30px; height: 30px; flex: 0 0 30px; font-weight: 700; }
.supra-market .market-token-icon { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.supra-market .market-token-icon[hidden] { display: none; }
.supra-market .market-token-icon-loaded .market-token-initial { visibility: hidden; }
.supra-market .market-token > .market-token-mark + div { min-width: 0; }
.supra-market .market-advertisement { --ad-control: #9ce4ec; --ad-hover: #ffffff12; position: relative; padding: 0; gap: 0; overflow: hidden; border: 1px solid var(--market-border); border-radius: 18px; background: var(--market-surface); color: var(--market-text); }
html[data-bs-theme="light"] .supra-market .market-advertisement { --ad-control: #086574; --ad-hover: #1528390d; }
.supra-market .market-advertisement .carousel-inner { display: grid; flex: 1; }
.supra-market .market-advertisement .carousel-item { grid-area: 1 / 1; display: flex; flex-direction: column; float: none; margin-right: 0; visibility: hidden; min-width: 0; height: 100%; padding-bottom: 2.75rem; background: var(--market-surface); }
.supra-market .market-advertisement .carousel-item:is(.active, .carousel-item-next, .carousel-item-prev) { visibility: visible; }
.supra-market .market-advertisement-visual { position: relative; display: flex; align-items: center; justify-content: center; height: 13rem; flex-shrink: 0; min-width: 0; }
.supra-market .market-ad-artwork { position: relative; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.supra-market .market-advertisement img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(transparent, #000 4%, #000 92%, transparent); mask-image: linear-gradient(transparent, #000 4%, #000 92%, transparent); }
.supra-market .market-ad-meme .market-advertisement-visual::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../images/market/meme-season.webp") center / cover; filter: blur(16px); opacity: .3; -webkit-mask-image: radial-gradient(ellipse, #000 25%, transparent 70%); mask-image: radial-gradient(ellipse, #000 25%, transparent 70%); }
.supra-market .market-ad-meme .market-ad-artwork { max-width: 23rem; }
.supra-market .market-ad-meme img { -webkit-mask-image: linear-gradient(transparent, #000 1%, #000 98%, transparent); mask-image: linear-gradient(transparent, #000 1%, #000 98%, transparent); }
.supra-market .market-ad-labs .market-ad-artwork { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 98%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 98%, transparent); }
.supra-market .market-ad-labs img { -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 84%, transparent); }
.supra-market .market-ad-available .market-advertisement-visual { height: auto; aspect-ratio: 4 / 3; overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.supra-market .market-ad-available .market-ad-artwork { width: 100%; height: 100%; overflow: hidden; }
.supra-market .market-ad-available img { position: absolute; top: -12%; }
.supra-market .market-advertisement-caption { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; min-width: 0; padding: .75rem 1.1rem 1rem; text-align: left; }
.supra-market .market-advertisement h2 { margin: 0; color: var(--market-text); font-size: clamp(1.2rem, 1.5vw, 1.55rem); font-weight: 700; line-height: 1.2; text-wrap: balance; }
.supra-market .market-advertisement-caption p { margin: 0; color: var(--market-muted); font-size: .85rem; line-height: 1.45; }
.supra-market .market-advertisement .market-ad-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; max-width: 100%; padding: .65rem 1rem; border-radius: .375rem; white-space: normal; margin-top: .2rem; font-weight: 600; color: var(--ad-button-text); background: var(--ad-button); border-color: var(--ad-button); }
.supra-market .market-ad-meme { --ad-button: #c82b40; --ad-button-hover: #aa2033; --ad-button-text: #fff; }
.supra-market .market-ad-labs { --ad-button: #2dd4e8; --ad-button-hover: #20bdd1; --ad-button-text: #111827; }
.supra-market .market-ad-available { --ad-button: #166534; --ad-button-hover: #14532d; --ad-button-text: #fff; }
.supra-market .market-advertisement .market-ad-cta:is(:hover, :active) { background: var(--ad-button-hover); border-color: var(--ad-button-hover); color: var(--ad-button-text); }
.supra-market .market-advertisement .market-ad-cta:focus-visible { outline: 2px solid var(--market-text); outline-offset: 3px; }
.supra-market .market-advertisement:not(.market-advertisement-wide) .market-advertisement-caption { flex: 1; }
.supra-market .market-advertisement:not(.market-advertisement-wide) .market-ad-cta { margin-top: auto; }
.supra-market .market-advertisement-wide { --market-text: #f3f5f8; --market-muted: #c3ccd8; --ad-control: #b6e8f4; margin-block: 1rem; background: #000; }
html[data-bs-theme="light"] .supra-market .market-advertisement-wide { --ad-control: #b6e8f4; --ad-hover: #ffffff12; }
.supra-market .market-advertisement-wide .market-ad-meme { --ad-image: url("../images/market/meme-season.webp"); }
.supra-market .market-advertisement-wide .market-ad-labs { --ad-image: url("../images/market/tcp-labs.webp"); }
.supra-market .market-advertisement-wide .market-ad-available { --ad-image: url("../images/market/ziosam.webp"); }
.supra-market .market-advertisement-wide .carousel-item { flex-direction: row; align-items: stretch; padding-bottom: 0; min-height: 17rem; background: #000; }
.supra-market .market-advertisement-wide .market-advertisement-visual { width: 50%; height: auto; aspect-ratio: auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.supra-market .market-advertisement-wide .market-advertisement-visual::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--ad-image) center / cover; filter: blur(18px) brightness(.3); opacity: .45; -webkit-mask-image: none; mask-image: none; }
.supra-market .market-advertisement-wide .market-ad-artwork { position: absolute; inset: 0; display: flex; align-items: center; max-width: none; height: 100%; }
.supra-market .market-advertisement-wide :is(.market-ad-meme, .market-ad-labs) img { width: 100%; height: 100%; object-fit: contain; }
.supra-market .market-advertisement-wide .market-ad-labs .market-ad-artwork { right: 10%; width: 90%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 98%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 98%, transparent); }
.supra-market .market-advertisement-wide .market-ad-available img { width: auto; height: 175%; left: 50%; top: -16%; transform: translateX(-50%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.supra-market .market-advertisement-wide .market-advertisement-caption { flex: 1; justify-content: center; align-items: flex-start; gap: .9rem; padding: 1.5rem 1.75rem 3.25rem; }
.supra-market .market-advertisement-wide .market-advertisement-caption h2 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); }
.supra-market .market-advertisement-wide .market-advertisement-caption p { max-width: 46ch; font-size: 1rem; line-height: 1.5; }
.supra-market .market-ad-controls { position: absolute; inset-inline: .75rem; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 0; }
.supra-market .market-ad-controls[hidden] { display: none; }
.supra-market .market-ad-controls button { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 44px; border: 0; border-radius: .5rem; background: transparent; color: var(--ad-control); font-size: .9rem; }
.supra-market .market-ad-controls button:hover { background: var(--ad-hover); }
.supra-market .market-ad-controls button:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
.supra-market .market-ad-controls button:disabled { opacity: .5; }
.supra-market .market-ad-indicators { display: flex; }
.supra-market .market-ad-indicators span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; }
.supra-market .market-ad-indicators [aria-current="true"] span { opacity: 1; box-shadow: 0 0 0 2px #b6e8f450; }
@media (max-width: 767.98px) {
    .supra-market .market-advertisement-wide .carousel-item { flex-direction: column; padding-bottom: 2.75rem; min-height: 0; }
    .supra-market .market-advertisement-wide .market-advertisement-visual { width: 100%; min-height: 0; height: auto; }
    .supra-market .market-advertisement-wide .market-ad-artwork { position: relative; inset: auto; height: auto; }
    .supra-market .market-advertisement-wide .market-ad-labs .market-ad-artwork { right: auto; width: 100%; }
    .supra-market .market-advertisement-wide :is(.market-ad-meme, .market-ad-labs) img { height: auto; }
    .supra-market .market-advertisement-wide .market-advertisement-visual { -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent); }
    .supra-market .market-advertisement-wide .market-ad-available .market-advertisement-visual { height: auto; aspect-ratio: 4 / 3; }
    .supra-market .market-advertisement-wide .market-ad-available .market-ad-artwork { height: 100%; }
    .supra-market .market-advertisement-wide .market-ad-available img { width: 100%; height: auto; top: -12%; left: auto; transform: none; -webkit-mask-image: linear-gradient(transparent, #000 4%, #000 92%, transparent); mask-image: linear-gradient(transparent, #000 4%, #000 92%, transparent); }
    .supra-market .market-advertisement-wide .market-advertisement-caption { padding: .75rem 1.1rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { .supra-market .market-advertisement .carousel-item { transition: none !important; } }
.supra-market .market-table-card { padding: 1.25rem; }
.supra-market .market-toolbar nav { display: flex; gap: .5rem; }
.supra-market #market-table-wrap { min-width: 0; }
.supra-market .market-table-region { position: relative; min-width: 0; min-height: 25rem; }
.supra-market .market-table-region .dt-empty { height: 14rem; vertical-align: middle; }
.supra-market .market-table-region[data-loading="initial"] .dt-empty { color: transparent; }
.supra-market .market-table-region:is([data-loading="initial"], [data-loading="unavailable"]) :is(.dt-info, .dt-paging) { visibility: hidden; }
.supra-market .market-table-loading:not([hidden]) { position: absolute; inset: 7rem 1rem 4rem; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .75rem; pointer-events: none; color: var(--market-muted); font-size: .875rem; }
.supra-market .market-table-status { display: flex; align-items: center; gap: .5rem; min-height: 1.95rem; min-width: 0; margin-top: .4rem; }
.supra-market .market-table-region { overflow-anchor: none; }
.supra-market .market-toolbar-boxes { display: flex; align-items: stretch; flex-wrap: wrap; gap: .6rem; max-width: 100%; }
.supra-market .market-feed-box, .supra-market .market-update-box { position: relative; display: flex; flex-direction: column; justify-content: center; gap: .25rem; padding: .45rem .65rem; border: 1px solid var(--market-border); border-radius: .6rem; min-height: 3.6rem; max-width: 100%; }
.supra-market .market-update-box { min-width: 9rem; padding-right: 1.8rem; }
.supra-market .market-update-label { font-size: .68rem; color: var(--market-muted); }
.supra-market .market-update-time { font-size: .82rem; font-variant-numeric: tabular-nums; }
.supra-market .market-update-box .market-refresh-indicator { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); }
.supra-market .market-update-box[data-state="error"] { border-color: var(--market-negative); }
.supra-market .market-feed-providers { display: flex; flex-wrap: wrap; gap: .35rem; }
.supra-market .market-provider { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .4rem; font-size: .75rem; color: var(--market-muted); border: 1px solid var(--market-border); border-radius: .4rem; text-decoration: none; }
.supra-market .market-provider img { width: 20px; height: 20px; object-fit: contain; }
.supra-market .market-provider.is-active { color: var(--market-text); border: 2px solid var(--theme-primary); padding: calc(.2rem - 1px) calc(.4rem - 1px); background: color-mix(in srgb, var(--theme-primary) 12%, var(--market-surface)); box-shadow: 0 0 8px color-mix(in srgb, var(--theme-primary) 30%, transparent); }
.supra-market .market-provider-state { color: var(--market-muted); font-size: .7rem; }
.supra-market .market-activity-toolbar { justify-content: flex-end; }
.supra-market .market-refresh-indicator { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; }
.supra-market .market-refresh-indicator[hidden] { display: inline-grid !important; visibility: hidden; }
.supra-market .market-status-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; min-width: 0; max-height: 2.6em; font-size: .75rem; line-height: 1.3; color: var(--market-muted); overflow-wrap: break-word; }
.supra-market .market-table-loading-icon { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; border: 2px solid var(--market-border); border-top-color: var(--theme-primary); border-radius: 50%; animation: market-table-spin .85s linear infinite; }
.supra-market .market-refresh-indicator .market-table-loading-icon { width: .875rem; height: .875rem; }
@keyframes market-table-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .supra-market .market-table-loading-icon { animation: none; border-color: var(--theme-primary); } }
.supra-market .dt-container { margin-top: .75rem; min-width: 0; }
.supra-market .dt-container > .row { margin-inline: 0; row-gap: .75rem; align-items: center; }
.supra-market .dt-length { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding-block: .5rem; }
.supra-market .dt-length label { margin: 0; white-space: normal; }
.supra-market .dt-length select { width: auto; min-width: 5rem; min-height: 44px; margin: 0; }
.supra-market .dt-search { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.supra-market .dt-search input { width: min(18rem, 100%); min-height: 44px; margin: 0; }
.supra-market .market-price-value { border: 0; background: transparent; color: inherit; padding: 0; min-height: 44px; white-space: nowrap; font: inherit; text-decoration: underline dotted; text-underline-offset: .2em; }
.supra-market .market-price-mobile { display: none; }
.supra-market .market-price-cell { overflow-wrap: normal; word-break: normal; }
.supra-market .market-price-dialog { width: min(30rem, calc(100% - 2rem)); border: 1px solid var(--market-border); border-radius: 18px; padding: 1.5rem; background: var(--market-surface); color: inherit; }
.supra-market #market-token-dialog { width: min(52rem, calc(100% - 2rem)); }
.supra-market .market-price-dialog::backdrop { background: #0009; }
.supra-market #market-full-price { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.supra-market #market-table { width: 100% !important; table-layout: auto; --theme-table-bg: transparent; --theme-table-border-color: var(--market-border); }
.supra-market #market-table th { font-size: .75rem; font-weight: 600; color: var(--market-text); white-space: normal; word-break: normal; overflow-wrap: normal; padding-block: .9rem; vertical-align: middle; }
.supra-market #market-table th:is(.dt-orderable-asc, .dt-orderable-desc) { padding-right: 1.5rem; }
.supra-market #market-table th .dt-column-order { right: .2rem; width: 1rem; }
.supra-market #market-table td { padding-block: .55rem; font-size: .85rem; font-variant-numeric: tabular-nums; }
.supra-market #market-table .market-numeric-cell { text-align: right; }
.supra-market #market-table .market-identity-cell { text-align: left; }
.supra-market #market-table .market-indicator-cell { text-align: center; }
.supra-market #market-table .market-position-cell { width: 2.5rem; text-align: center; white-space: nowrap; color: var(--market-muted); }
.supra-market #market-table .market-favorite-cell { width: 32px; padding-inline: 0; text-align: center; }
.supra-market .market-supply { color: var(--market-muted); font-size: .75em; white-space: nowrap; }
.supra-market .market-sentiment { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.supra-market .market-sentiment-number { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.supra-market .market-sentiment-unavailable { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; color: var(--market-muted); font-size: .75rem; }
.supra-market .market-sentiment-progress { width: 72px; height: 6px; background: var(--market-border); }
.supra-market .market-updated-cell { max-width: 11rem; color: var(--market-muted); font-size: .75rem !important; }
.supra-market .market-meter { appearance: none; display: block; border: 0; border-radius: 999px; height: 8px; background: var(--market-border); }
.supra-market .market-meter::-webkit-meter-bar { border: 0; border-radius: 999px; height: 8px; background: var(--market-border); box-shadow: none; }
.supra-market .market-meter::-webkit-meter-optimum-value { border-radius: 999px; background: currentColor; }
.supra-market .market-meter::-moz-meter-bar { border-radius: 999px; background: currentColor; }
.supra-market .market-sentiment-stale { color: var(--market-muted); }
.supra-market .market-token { display: flex; align-items: center; gap: .5rem; text-align: left; min-width: 0; }
.supra-market .market-token button { text-align: left; border: 0; background: none; color: inherit; padding: 0; overflow-wrap: break-word; }
.supra-market .market-token small { display: block; color: var(--market-muted); overflow-wrap: anywhere; }
.supra-market .market-identifier { display: inline-flex; align-items: center; gap: .2rem; max-width: 100%; white-space: nowrap; }
.supra-market .market-identifier a { color: var(--theme-primary); text-decoration: underline dotted; text-underline-offset: .15em; }
.supra-market .market-copy-icon { display: inline-grid; place-items: center; flex: 0 0 30px; width: 30px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--theme-primary); }
.supra-market .market-copy-icon:hover, .supra-market .market-copy-icon:focus-visible { background: color-mix(in srgb, currentColor 12%, transparent); }
.supra-market .market-inline-feedback { --feedback-accent: var(--theme-primary); }
.supra-market .market-inline-feedback[data-tone="success"] { --feedback-accent: var(--market-positive); }
.supra-market .market-inline-feedback[data-tone="error"] { --feedback-accent: var(--market-negative); }
.supra-market .market-inline-feedback:not([hidden]) { position: fixed; z-index: 1050; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; align-items: flex-start; gap: .65rem; max-width: min(24rem, calc(100vw - 2rem)); margin: 0; padding: .85rem 1rem; border: 1px solid color-mix(in srgb, var(--feedback-accent) 60%, var(--market-border)); border-left: 4px solid var(--feedback-accent); border-radius: 10px; background: var(--market-surface); box-shadow: 0 8px 30px #0006; color: var(--market-text); font-size: .85rem; line-height: 1.45; }
.supra-market .market-inline-feedback > i { color: var(--feedback-accent); font-size: 1.25rem; flex: 0 0 auto; }
.supra-market .market-star, .supra-market .market-expand { min-height: 44px; min-width: 32px; border: 0; background: transparent; color: var(--theme-primary); padding: .2rem; }
.supra-market .market-star[aria-pressed="true"] { color: #bd8100; }
.supra-market .market-positive { color: var(--market-positive); }
.supra-market .market-negative { color: var(--market-negative); }
.supra-market .market-spark { display: block; width: 120px; height: 34px; color: #5396ff; }
.supra-market .market-expand { display: none; }
.supra-market .collapsed .market-expand { display: inline-block; }
.supra-market .dtr-details { width: 100%; text-align: left; }
.supra-market .dtr-details li { display: flex; flex-wrap: wrap; gap: .5rem; }
.supra-market .dtr-data { min-width: 0; overflow-wrap: anywhere; }
.supra-market .dt-paging .page-link { min-width: 36px; min-height: 44px; padding-inline: .5rem; }
.supra-market .market-login { position: relative; min-height: 240px; display: grid; place-items: center; text-align: center; }
.supra-market .market-login[hidden] { display: none; }
.supra-market .market-ghost { position: absolute; inset: 1rem; filter: blur(5px); opacity: .18; font-size: 2rem; pointer-events: none; }
.supra-market .market-login > div:last-child { position: relative; max-width: 480px; }
.supra-market :is(a, button, input, select, summary):focus-visible { outline: 3px solid #27c9df; outline-offset: 3px; }
.supra-market .market-chart:focus-visible { outline: 3px solid #27c9df; outline-offset: 3px; border-radius: .5rem; }
.supra-market .market-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.supra-market .market-title-row h1 { margin: 0; }
.supra-market .market-subtitle { margin: .6rem 0 0; color: var(--market-muted); }
.supra-market .market-card .market-supra-title { font-size: 1.5rem; font-weight: 650; margin: 0; }
.supra-market .market-supra-symbol { width: 44px; height: 44px; flex: 0 0 44px; }
.supra-market .market-card-heading h2 { margin: 0; }
.supra-market .market-gauge { width: 100%; height: clamp(210px, 18vw, 250px); }
.supra-market .market-index-card { gap: .35rem; justify-content: flex-start; }
.supra-market .market-index-card h2 { margin-bottom: .25rem; }
.supra-market .market-index-score { display: block; text-align: center; font-size: clamp(2rem, 2.8vw, 2.7rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.supra-market .market-index-meter { width: 100%; margin: .15rem 0; }
.supra-market .market-index-meter[hidden] { display: none; }
.supra-market .market-index-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; margin: 0; font-size: .85rem; }
.supra-market .market-intermediate { color: var(--market-intermediate); }
.supra-market .market-neutral { color: var(--market-muted); }
.supra-market .market-overview { margin-bottom: 1rem; }
.supra-market .market-health { font-size: .75rem; color: var(--market-negative); }
.supra-market .market-health summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; border-radius: .5rem; }
.supra-market .market-health summary::-webkit-details-marker { display: none; }
.supra-market .market-health p { max-width: 28rem; margin: .25rem 0; }
.supra-market .market-health-pill { display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; padding: .25rem .55rem; border: 1px solid color-mix(in srgb, currentColor 38%, transparent); border-radius: 9px; background: color-mix(in srgb, currentColor 12%, transparent); white-space: nowrap; }
.supra-market .market-health-icon { display: inline-grid; place-items: center; width: 21px; height: 21px; flex: 0 0 21px; }
.supra-market .market-health-icon svg { display: block; width: 21px; height: 21px; }
.supra-market .market-health-light { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px color-mix(in srgb, currentColor 55%, transparent); }
.supra-market .market-health .badge { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; line-height: 1; }
.supra-market .market-health[data-state="operational"] { color: var(--market-positive); }
.market-title-row .market-health {
    position: relative;
    top: 6px;
}

@media (max-width: 767.98px) {
    .market-title-row .market-health {
        top: 0;
    }
}
.supra-market #market-notice { color: var(--market-muted); }
@keyframes market-meter-stripes { to { background-position: 16px 0; } }
@media (prefers-reduced-motion: reduce) {
    .supra-market .market-sentiment-progress .progress-bar-animated { animation: none; }
}
.supra-market .market-activity { margin-block: 1rem; --activity-swap: #27c9df; --activity-pool: #c5a0ff; --activity-farm: #64dfb5; --activity-burn: #ffab79; }
html[data-bs-theme="light"] .supra-market .market-activity { --activity-swap: #00788c; --activity-pool: #7041b3; --activity-farm: #09754f; --activity-burn: #b54708; }
.supra-market .market-activity-tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin-block: 1rem; }
.supra-market .market-activity-tabs .nav-link { min-height: 44px; color: var(--market-text); background: transparent; }
.supra-market .market-activity-tabs .nav-link.active { border-bottom: 2px solid currentColor; }
.supra-market [data-activity-kind="swap"], .supra-market .market-activity-swap { color: var(--activity-swap) !important; }
.supra-market [data-activity-kind="pool"], .supra-market .market-activity-pool { color: var(--activity-pool) !important; }
.supra-market [data-activity-kind="farm"], .supra-market .market-activity-farm { color: var(--activity-farm) !important; }
.supra-market [data-activity-kind="burn"], .supra-market .market-activity-burn { color: var(--activity-burn) !important; }
.supra-market #activity-panel { min-width: 0; }
.supra-market #activity-table { width: 100% !important; --theme-table-bg: transparent; --theme-table-border-color: var(--market-border); font-size: .8rem; }
.supra-market #activity-table th { white-space: normal; overflow-wrap: normal; }
.supra-market #activity-table td { overflow-wrap: break-word; padding-block: .55rem; vertical-align: middle; }
.supra-market .market-activity-assets { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.supra-market .market-activity-assets > small { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; min-height: 1.8rem; color: var(--market-muted); }
.supra-market .market-activity-details .market-identifier { white-space: normal; overflow-wrap: anywhere; }
.supra-market #activity-table .activity-control { width: 36px; padding-inline: 0; }
.supra-market #activity-table .activity-control .dt-column-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.supra-market .activity-expand { width: 32px; min-height: 32px; border: 1px solid var(--market-border); border-radius: .4rem; background: color-mix(in srgb, var(--market-muted) 8%, var(--market-surface)); color: var(--market-text); }
.supra-market .activity-expand[aria-expanded="true"] { border-color: var(--theme-primary); background: color-mix(in srgb, var(--theme-primary) 15%, var(--market-surface)); }
.supra-market .market-activity-action { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.supra-market .market-flow-badge { color: var(--market-muted); background: var(--market-border); font-size: .65rem; }
.supra-market .activity-expand[aria-expanded="true"] i { display: inline-block; transform: rotate(180deg); }
.supra-market .market-activity-details { margin: 0; }
.supra-market .market-activity-details dd { overflow-wrap: anywhere; margin-bottom: .6rem; }
@media (max-width: 767.98px) { .supra-market #activity-table { table-layout: fixed; } .supra-market .market-activity { padding: .7rem; } }
@media (min-width: 1200px) {
    .supra-market .market-advertisement:not(.market-advertisement-wide) .market-ad-available .market-advertisement-visual { height: 13.625rem; aspect-ratio: auto; -webkit-mask-image: linear-gradient(#000 97%, transparent); mask-image: linear-gradient(#000 97%, transparent); }
    .supra-market .market-advertisement:not(.market-advertisement-wide) .market-ad-available img { width: min(100%, 22.5rem); left: 50%; top: -18%; transform: translateX(-50%); }
}
@media (max-width: 1199.98px) { .supra-market .market-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .supra-market .market-table-region { min-height: 29rem; }
    .supra-market .market-table-loading:not([hidden]) { inset: 11rem .5rem 5rem; }
    .supra-market .market-overview { grid-template-columns: minmax(0, 1fr); }
    .supra-market .dt-search { justify-content: flex-start; }
    .supra-market .market-table-card { padding: .7rem; }
    .supra-market #market-table { table-layout: fixed; }
    .supra-market #market-table th, .supra-market #market-table td { padding-inline: .2rem; font-size: .7rem; }
    .supra-market #market-table .market-favorite-cell { width: 32px; }
    .supra-market #market-table .market-identity-cell { width: 32%; }
    .supra-market #market-table .market-price-cell { width: 30%; }
    .supra-market #market-table .market-token { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .25rem; }
    .supra-market #market-table .market-token > div { display: contents; }
    .supra-market #market-table .market-token small, .supra-market #market-table .market-token .market-expand { grid-column: 1 / -1; }
    .supra-market .market-price-desktop { display: none; }
    .supra-market .market-price-mobile { display: inline; }
}
