/* The guest pages do not load app-mobile.css; values must match :root there. */
#content.dexapp-trade {
	--dexapp-blue: #2563EB;
	--dexapp-blue-soft: #EFF6FF;
	--dexapp-text: #0F172A;
	--dexapp-text-2: #64748B;
	--dexapp-muted: #94A3B8;
	--dexapp-surface: #fff;
	--dexapp-fill: #F0F2F5;
	--dexapp-green: #10B981;
	--dexapp-red: #EF4444;
	--dexapp-radius-card: 16px;
	--dexapp-radius-tile: 12px;
	--trd-bg: #EEF1F5;
	--trd-green-soft: rgba(16, 185, 129, .12);
	--trd-red-soft: rgba(239, 68, 68, .1);
	--trd-border: #E2E8F0;
}
.darkmode #content.dexapp-trade {
	--dexapp-blue-soft: rgba(59, 130, 246, .16);
	--dexapp-text: #F1F5F9;
	--dexapp-text-2: #94A3B8;
	--dexapp-surface: #162033;
	--dexapp-fill: #1E293B;
	--trd-bg: #0B1322;
	--trd-border: rgba(255, 255, 255, .08);
}

.dexapp-trd,
#kline_ind > .dexapp-trd-mobile-only {
	display: none;
}

@media (max-width: 767px) {

	#page-container > #header.header,
	#content.dexapp-trade #header-market,
	#content.dexapp-trade #order-book {
		display: none !important;
	}
	#page-container.page-header-fixed {
		padding-top: 0;
	}
	#page-container.page-header-fixed > #content.dexapp-trade {
		padding-top: 0 !important;
	}
	#page-container:not(.darkmode) > #content.content.dexapp-trade,
	.darkmode > #content.content.dexapp-trade {
		background: var(--trd-bg);
	}

	#content.dexapp-trade #kline_ind > .dexapp-trd-mobile-only {
		display: inline-block;
	}
	.dexapp-trd {
		display: block;
		color: var(--dexapp-text);
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 400;
	}
	.dexapp-trd button {
		font-family: inherit;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd .is-up { color: var(--dexapp-green); }
	.dexapp-trd .is-down { color: var(--dexapp-red); }
	.dexapp-trd .is-neutral { color: var(--dexapp-text-2); }

	.dexapp-trd-bar {
		position: sticky;
		z-index: 20;
		top: 0;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: calc(16px + env(safe-area-inset-top, 0px)) 0 8px;
		background: var(--trd-bg);
	}
	.dexapp-trd-icon {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 0 none;
		border-radius: 10px;
		background: var(--dexapp-surface);
		color: var(--dexapp-text);
		box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
	}
	.dexapp-trd-icon:hover,
	.dexapp-trd-icon:focus {
		color: var(--dexapp-text);
		text-decoration: none;
	}
	.dexapp-trd-title {
		flex: 1 1 auto;
		min-width: 0;
		line-height: 1.2;
	}
	.dexapp-trd-title b {
		display: block;
		overflow: hidden;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 17px;
		font-weight: 700;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.dexapp-trd-title b span {
		color: var(--dexapp-muted);
		font-weight: 500;
	}
	.dexapp-trd-title small {
		display: block;
		overflow: hidden;
		color: var(--dexapp-muted);
		font-size: 10.5px;
		letter-spacing: .02em;
		text-transform: uppercase;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.dexapp-trd-fav svg {
		fill: none;
		color: var(--dexapp-muted);
	}
	.dexapp-trd-fav.is-active svg {
		fill: #F59E0B;
		color: #F59E0B;
	}

	.dexapp-trd-price {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-top: 4px;
		padding: 12px 14px;
		border-radius: var(--dexapp-radius-card);
		background: var(--dexapp-surface);
		box-shadow: 0 2px 12px rgba(15, 23, 42, .05);
	}
	.dexapp-trd-coin {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: 11px;
		background: var(--dexapp-blue-soft);
	}
	.dexapp-trd-coin img {
		width: 24px;
		height: 24px;
		border-radius: 50%;
	}
	.dexapp-trd-price > div {
		min-width: 0;
	}
	.dexapp-trd-price b[data-trd="last"] {
		display: block;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: clamp(16px, 4.6vw, 19px);
		font-weight: 500;
		line-height: 1.15;
		word-break: break-all;
	}
	.dexapp-trd-change {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		margin-top: 4px;
		font-size: 11px;
		font-weight: 500;
	}
	.dexapp-trd-pill {
		padding: 2px 7px;
		border-radius: 6px;
		background: var(--dexapp-fill);
	}
	.dexapp-trd-pill.is-up { background: var(--trd-green-soft); }
	.dexapp-trd-pill.is-down { background: var(--trd-red-soft); }

	/* Tiles grow to fill the row and only scroll when long prices do not fit. */
	.dexapp-trd-stat {
		display: flex;
		gap: 6px;
		margin: 8px -12px 14px;
		padding: 0 12px 2px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.dexapp-trd-stat::-webkit-scrollbar {
		display: none;
	}
	.dexapp-trd-stat > div {
		flex: 1 0 auto;
		min-width: 68px;
		padding: 7px 10px;
		border-radius: var(--dexapp-radius-tile);
		background: var(--dexapp-surface);
	}
	.dexapp-trd-stat small {
		display: block;
		color: var(--dexapp-muted);
		font-size: 10px;
		white-space: nowrap;
	}
	.dexapp-trd-stat b {
		display: block;
		margin-top: 2px;
		color: var(--dexapp-blue);
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
		font-weight: 700;
		white-space: nowrap;
	}
	#dexapp-trd .dexapp-trd-stat b {
		font-size: 11px;
	}
	.dexapp-trd-stat b.is-up { color: var(--dexapp-green); }
	.dexapp-trd-stat b.is-down { color: var(--dexapp-red); }

	.dexapp-trd-h {
		margin: 18px 0 8px;
		color: var(--dexapp-text);
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 15px;
		font-weight: 700;
	}
	.dexapp-trd-card {
		border-radius: var(--dexapp-radius-card);
		background: var(--dexapp-surface);
	}
	.dexapp-trd-portfolio {
		padding: 2px 14px;
	}
	.dexapp-trd-portfolio > div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 11px 0;
		color: var(--dexapp-muted);
		font-size: 12px;
		font-weight: 400;
	}
	.dexapp-trd-portfolio > div + div {
		border-top: 1px solid var(--trd-border);
	}
	.dexapp-trd-portfolio-value {
		min-width: 0;
		text-align: right;
	}
	.dexapp-trd-portfolio b {
		color: var(--dexapp-text);
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 13px;
		font-weight: 700;
		white-space: nowrap;
	}
	.dexapp-trd-portfolio b.is-up { color: var(--dexapp-green); }
	.dexapp-trd-portfolio b.is-down { color: var(--dexapp-red); }
	.dexapp-trd-portfolio small {
		color: var(--dexapp-muted);
		font-size: 10.5px;
		font-weight: 400;
		white-space: nowrap;
	}

	.dexapp-trd-porto-guest {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 22px 16px;
		text-align: center;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-porto-guest:hover,
	.dexapp-trd-porto-guest:focus {
		text-decoration: none;
	}
	.dexapp-trd-porto-guest-icon {
		display: block;
		margin-bottom: 8px;
		color: var(--dexapp-text-2);
	}
	.dexapp-trd-porto-guest b {
		color: var(--dexapp-text);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.35;
	}
	.dexapp-trd-porto-guest span {
		color: var(--dexapp-text-2);
		font-size: 12px;
		font-weight: 400;
		line-height: 1.45;
	}

	/* Bootstrap's -10px row margin pulled every section below the header 10px wider than the header cards. */
	#content.dexapp-trade > .row.height-stretch {
		margin-right: 0;
		margin-left: 0;
	}
	#content.dexapp-trade [data-trd-screen="none"],
	#content.dexapp-trd-view-chart [data-trd-screen="trade"],
	#content.dexapp-trd-view-trade [data-trd-screen="chart"] {
		display: none !important;
	}
	body.dexapp-trd-locked {
		overflow: hidden;
	}
	.dexapp-trd [hidden] {
		display: none !important;
	}

	.dexapp-trd-book-wrap {
		margin-top: 16px;
	}
	.dexapp-trd-book {
		padding: 10px 8px 6px;
	}
	.dexapp-trd-seg {
		display: flex;
		margin: 0 2px 8px;
		padding: 3px;
		border-radius: 10px;
		background: var(--dexapp-fill);
	}
	.dexapp-trd-seg > button {
		flex: 1 1 0;
		padding: 7px 8px;
		border: 0 none;
		border-radius: 8px;
		background: transparent;
		color: var(--dexapp-text-2);
		font-size: 12px;
		white-space: nowrap;
	}
	.dexapp-trd-seg > button.is-active {
		background: var(--dexapp-surface);
		color: var(--dexapp-text);
		font-weight: 600;
		box-shadow: 0 1px 4px rgba(15, 23, 42, .1);
	}
	.darkmode .dexapp-trd-seg > button.is-active {
		background: #2A3A52;
	}

	.dexapp-trd-ob-head,
	.dexapp-trd-ob-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.dexapp-trd-ob-head > div {
		display: grid;
		grid-template-columns: auto auto;
		align-items: end;
		justify-content: space-between;
		row-gap: 4px;
		padding: 2px 6px 6px;
		color: var(--dexapp-muted);
		font-size: 10.5px;
		white-space: nowrap;
	}
	.dexapp-trd-ob-head > div:first-child {
		border-right: 1px solid var(--trd-border);
	}
	.dexapp-trd-ob-side {
		grid-column: 1 / -1;
		justify-self: end;
	}
	.dexapp-trd-ob-head > div:last-child .dexapp-trd-ob-side {
		justify-self: start;
	}
	.dexapp-trd-ob-head button {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		padding: 0;
		border: 0 none;
		background: transparent;
		color: var(--dexapp-muted);
		font-size: 10.5px;
	}
	.dexapp-trd-ob-head button svg {
		color: var(--dexapp-blue);
	}
	.dexapp-trd-ob-row > div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 6px;
		min-width: 0;
		min-height: 28px;
		padding: 0 6px;
		color: var(--dexapp-text);
		font-size: 11.5px;
		font-variant-numeric: tabular-nums;
	}
	.dexapp-trd-ob-row > .dexapp-trd-ob-bid {
		border-right: 1px solid var(--trd-border);
	}
	.dexapp-trd-ob-row > .dexapp-trd-ob-bid.is-large { background: var(--trd-green-soft); }
	.dexapp-trd-ob-row > .dexapp-trd-ob-ask.is-large { background: var(--trd-red-soft); }
	.dexapp-trd-ob-row span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.dexapp-trd-ob-row b {
		flex: 0 0 auto;
		font-weight: 500;
	}
	.dexapp-trd-ob-bid b { color: var(--dexapp-green); }
	.dexapp-trd-ob-ask b { color: var(--dexapp-red); }

	.dexapp-trd-mt-head,
	.dexapp-trd-mt-row {
		display: grid;
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: 8px;
		padding: 0 6px;
	}
	.dexapp-trd-mt-head {
		padding-top: 4px;
		padding-bottom: 8px;
		color: var(--dexapp-text-2);
		font-size: 11px;
	}
	.dexapp-trd-mt-head button {
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
		gap: 3px;
		padding: 0;
		border: 0 none;
		background: transparent;
		color: var(--dexapp-text-2);
		font-size: 11px;
		white-space: nowrap;
	}
	.dexapp-trd-mt-head button svg {
		color: var(--dexapp-blue);
	}
	.dexapp-trd-mt-row {
		min-height: 36px;
		border-bottom: 1px solid var(--trd-border);
		color: var(--dexapp-text);
		font-size: 11.5px;
		font-variant-numeric: tabular-nums;
	}
	.dexapp-trd-mt-row:last-child {
		border-bottom: 0 none;
	}
	.dexapp-trd-mt-row > span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.dexapp-trd-mt-head > :nth-child(2),
	.dexapp-trd-mt-row > :nth-child(2) {
		text-align: center;
	}
	.dexapp-trd-mt-head > :nth-child(3),
	.dexapp-trd-mt-row > :nth-child(3) {
		justify-self: end;
		text-align: right;
	}
	.dexapp-trd-mt-row b {
		font-weight: 400;
	}
	.dexapp-trd-empty {
		margin: 0;
		padding: 24px 0;
		color: var(--dexapp-muted);
		font-size: 12px;
		text-align: center;
	}
	[data-trd-pane="book"].is-empty .dexapp-trd-ob-head {
		display: none;
	}
	.dexapp-trd-book-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 14px;
		min-height: 240px;
		padding: 32px 16px 40px;
		text-align: center;
	}
	.dexapp-trd-book-empty-art {
		display: block;
		width: 104px;
		height: auto;
	}
	.dexapp-trd-book-empty p {
		margin: 0;
		color: var(--dexapp-text-2);
		font-size: 14px;
		line-height: 1.4;
	}

	.dexapp-trd-more {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 100%;
		margin-top: 4px;
		padding: 10px 0;
		border: 0 none;
		background: transparent;
		color: var(--dexapp-blue);
		font-size: 14px;
		font-weight: 500;
	}

	.dexapp-trd-backdrop {
		position: fixed;
		z-index: 1060;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(15, 23, 42, .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s ease, visibility .2s ease;
	}
	.dexapp-trd-backdrop.is-open {
		opacity: 1;
		visibility: visible;
	}
	.dexapp-trd-sheet {
		position: fixed;
		z-index: 1061;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		max-height: 88vh;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		border-radius: 18px 18px 0 0;
		background: var(--dexapp-surface);
		transform: translateY(100%);
		transition: transform .25s ease;
	}
	.dexapp-trd-sheet.is-open {
		transform: translateY(0);
	}
	.dexapp-trd-grip {
		display: block;
		flex: 0 0 auto;
		width: 36px;
		height: 4px;
		margin: 8px auto;
		border-radius: 2px;
		background: var(--trd-border);
	}
	.dexapp-trd-sheet-seg {
		flex: 0 0 auto;
		margin: 4px 14px 6px;
	}
	.dexapp-trd-sheet-body {
		flex: 1 1 auto;
		min-height: 0;
		padding: 4px 8px 8px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.dexapp-trd-close {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		gap: 5px;
		padding: 12px 0 10px;
		border: 0 none;
		background: transparent;
		color: var(--dexapp-blue);
		font-size: 14px;
		font-weight: 500;
	}
}

@media (max-width: 767px) {

	#page-container:has(#content.dexapp-trd-view-chart) #dexapp-tabbar,
	#page-container:has(#content.dexapp-trd-view-chart) .dexguest-tabbar {
		display: none;
	}

	/* Edge to edge like the app: the chart escapes the page and column gutters whatever their width. */
	#content.dexapp-trade .dexapp-trd-chart {
		margin: 4px calc(50% - 50vw) 0 !important;
	}
	#content.dexapp-trade .dexapp-trd-chart > div {
		padding: 4px 0 0 !important;
		border: 0 none !important;
		border-radius: 0;
		background: var(--dexapp-surface);
		overflow: hidden;
	}
	#content.dexapp-trade .dexapp-trd-chart > div > .row:first-child,
	#content.dexapp-trade #chart_container,
	#content.dexapp-trade .tv-atribusi {
		display: none !important;
	}
	#content.dexapp-trade .dexapp-trd-chart > div > .row {
		margin: 0;
	}
	#content.dexapp-trade #kline_wrap {
		height: clamp(330px, 50vh, 420px) !important;
	}
	/* Flatten the toolbar so the timeframes stay above the chart and the indicators move below it, as in the app. */
	#content.dexapp-trade #kline_wrap > div:first-child {
		display: contents !important;
	}
	#content.dexapp-trade #kline_tf {
		order: 0;
		margin: 4px 10px 2px;
	}
	#content.dexapp-trade #kline_ohlc {
		order: 1;
	}
	#content.dexapp-trade #kline_wrap > div:last-child {
		order: 2;
	}
	#content.dexapp-trade #kline_ind {
		order: 3;
		margin: 0;
		padding: 6px 10px;
		border-top: 1px solid var(--trd-border);
	}
	#content.dexapp-trade #kline_tf,
	#content.dexapp-trade #kline_ind {
		display: flex;
		flex: 0 0 auto;
		gap: 2px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	#content.dexapp-trade #kline_tf::-webkit-scrollbar,
	#content.dexapp-trade #kline_ind::-webkit-scrollbar {
		display: none;
	}
	#content.dexapp-trade #kline_tf > .btn,
	#content.dexapp-trade #kline_ind > .btn {
		float: none;
		margin: 0;
		padding: 4px 9px;
		border: 0 none !important;
		border-radius: 6px !important;
		background: transparent !important;
		box-shadow: none;
		color: var(--dexapp-text-2) !important;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 11px;
		font-weight: 500;
		line-height: 1.4;
	}
	#content.dexapp-trade #kline_tf > .btn-primary,
	#content.dexapp-trade #kline_ind > .btn-primary {
		background: var(--dexapp-blue-soft) !important;
		color: var(--dexapp-blue) !important;
		font-weight: 600;
	}
	#content.dexapp-trade #kline_ohlc {
		height: 26px !important;
		padding: 0 10px !important;
		color: var(--dexapp-text-2);
		font-size: 9.5px !important;
		line-height: 1.35 !important;
	}

	.dexapp-trd-actions {
		position: fixed;
		z-index: 1031;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--trd-border);
		background: var(--dexapp-surface);
	}
	.dexapp-trd-actions > button {
		height: 46px;
		border: 0 none;
		border-radius: 12px;
		font-family: 'Plus Jakarta Sans', sans-serif;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-alert {
		display: inline-flex;
		flex: 0 0 46px;
		align-items: center;
		justify-content: center;
		background: var(--dexapp-fill);
		color: var(--dexapp-text);
	}
	.dexapp-trd-action {
		flex: 1 1 0;
		min-width: 0;
		overflow: hidden;
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.dexapp-trd-action.is-buy { background: var(--dexapp-green); }
	.dexapp-trd-action.is-sell { background: var(--dexapp-red); }
	.dexapp-trd-action.is-login {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 46px;
		border-radius: 12px;
		background: var(--dexapp-blue);
		font-family: 'Plus Jakarta Sans', sans-serif;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-action.is-login:hover,
	.dexapp-trd-action.is-login:focus {
		color: #fff;
		text-decoration: none;
	}
}

@media (max-width: 767px) {

	.dexapp-trd-head {
		padding-top: calc(10px + env(safe-area-inset-top, 0px));
	}
	.dexapp-trd-head-card {
		display: flex;
		align-items: center;
		gap: 7px;
		padding: 10px;
		border-radius: var(--dexapp-radius-card);
		background: var(--dexapp-surface);
		box-shadow: 0 2px 12px rgba(15, 23, 42, .05);
	}
	.dexapp-trd-head-card .dexapp-trd-coin {
		width: 34px;
		height: 34px;
		border-radius: 10px;
	}
	.dexapp-trd-head-card .dexapp-trd-coin img {
		width: 22px;
		height: 22px;
	}
	.dexapp-trd-head-pair {
		flex: 1 1 auto;
		min-width: 0;
		color: var(--dexapp-text);
		text-decoration: none;
	}
	.dexapp-trd-head-pair:hover,
	.dexapp-trd-head-pair:focus {
		color: var(--dexapp-text);
		text-decoration: none;
	}
	.dexapp-trd-head-pair > b {
		display: flex;
		align-items: center;
		gap: 3px;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.25;
		white-space: nowrap;
	}
	.dexapp-trd-head-pair > b svg {
		flex: 0 0 auto;
		color: var(--dexapp-muted);
	}
	/* Price and change share one line, as in the app; the tools column is kept compact so BTC-length prices fit. */
	.dexapp-trd-head-price {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 5px;
		min-width: 0;
		margin-top: 3px;
	}
	.dexapp-trd-head-price b {
		min-width: 0;
		overflow: hidden;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.3;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.dexapp-trd-head-price .dexapp-trd-pill {
		flex: 0 0 auto;
		padding: 1px 5px;
		border-radius: 5px;
		font-size: 10px;
		font-weight: 600;
		line-height: 1.5;
		white-space: nowrap;
	}
	.dexapp-trd-head-tools {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 4px;
	}
	.dexapp-trd-tool {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		padding: 0;
		border: 0 none;
		border-radius: 50%;
		background: var(--dexapp-fill);
		color: var(--dexapp-blue);
	}
	.dexapp-trd-tool svg {
		width: 16px;
		height: 16px;
	}
	.dexapp-trd-tool.dexapp-trd-fav:not(.is-active) svg {
		color: var(--dexapp-blue);
	}
	.dexapp-trd-tool.is-chart {
		background: var(--dexapp-blue-soft);
	}
	.dexapp-trd-stat-fit {
		margin-bottom: 4px;
	}
	.dexapp-trd-stat-fit > div {
		flex: 1 1 0;
		min-width: 0;
	}
	.dexapp-trd-stat-fit b {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media (max-width: 767px) {

	.dexapp-trd-deal {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
		gap: 8px;
		margin-top: 12px;
	}
	/* Both cards share the row height; order book rows spread out so its menu lines up with the submit button. */
	.dexapp-trd-cb {
		display: flex;
		flex-direction: column;
		padding: 10px;
	}
	.dexapp-trd-cb-list {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		justify-content: space-between;
	}
	.dexapp-trd-cb-title {
		margin: 0 0 6px;
		padding-bottom: 8px;
		border-bottom: 1px solid var(--trd-border);
		color: var(--dexapp-text);
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 13px;
		font-weight: 600;
	}
	.dexapp-trd-cb-head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 4px;
		margin-bottom: 4px;
		color: var(--dexapp-text-2);
		font-size: 9.5px;
		line-height: 1.3;
	}
	.dexapp-trd-cb-head button {
		display: inline-flex;
		align-items: flex-end;
		gap: 2px;
		padding: 0;
		border: 0 none;
		background: none;
		color: inherit;
		font-size: inherit;
		text-align: right;
	}
	.dexapp-trd-cb-head button svg {
		flex: 0 0 auto;
		margin-bottom: 1px;
		color: var(--dexapp-blue);
	}
	.dexapp-trd-cb-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 4px;
		margin: 0 -4px;
		padding: 3px 4px;
		font-size: clamp(9.5px, 2.6vw, 11px);
		font-variant-numeric: tabular-nums;
		line-height: 1.3;
		white-space: nowrap;
		cursor: pointer;
	}
	.dexapp-trd-cb-row b {
		font-weight: 500;
	}
	.dexapp-trd-cb-row span {
		color: var(--dexapp-text);
		text-align: right;
	}
	.dexapp-trd-cb-row.is-ask b { color: var(--dexapp-red); }
	.dexapp-trd-cb-row.is-bid b { color: var(--dexapp-green); }
	.dexapp-trd-cb-row.is-ask.is-large { background: var(--trd-red-soft); }
	.dexapp-trd-cb-row.is-bid.is-large { background: var(--trd-green-soft); }
	.dexapp-trd-cb-mid {
		padding: 6px 0;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: clamp(12px, 3.6vw, 14px);
		font-weight: 700;
		text-align: center;
		white-space: nowrap;
	}
	.dexapp-trd-cb-mode {
		position: relative;
		flex: 0 0 auto;
		margin-top: 8px;
	}
	.dexapp-trd-cb-toggle,
	.dexapp-trd-cb-menu > button {
		display: flex;
		align-items: center;
		width: 100%;
		border: 0 none;
		background: transparent;
		color: var(--dexapp-text);
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
		text-align: left;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-cb-toggle:focus,
	.dexapp-trd-cb-menu > button:focus {
		outline: none;
	}
	.dexapp-trd-cb-toggle {
		justify-content: space-between;
		height: 32px;
		padding: 0 10px;
		border: 1px solid var(--trd-border);
		border-radius: 10px;
	}
	.dexapp-trd-cb-mode.is-open .dexapp-trd-cb-toggle {
		border-color: var(--dexapp-blue);
	}
	.dexapp-trd-cb-toggle [data-trd-cb-current],
	.dexapp-trd-cb-menu > button {
		gap: 8px;
	}
	.dexapp-trd-cb-toggle [data-trd-cb-current] {
		display: inline-flex;
		align-items: center;
	}
	.dexapp-trd-cb-caret {
		flex: 0 0 auto;
		color: var(--dexapp-blue);
		transition: transform .15s;
	}
	.dexapp-trd-cb-mode.is-open .dexapp-trd-cb-caret {
		transform: rotate(180deg);
	}
	.dexapp-trd-cb-menu {
		position: absolute;
		z-index: 30;
		right: 0;
		bottom: calc(100% + 6px);
		left: 0;
		padding: 4px;
		border: 1px solid var(--trd-border);
		border-radius: 12px;
		background: var(--dexapp-surface);
		box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
	}
	.dexapp-trd-cb-menu > button {
		padding: 8px;
		border-radius: 8px;
	}
	.dexapp-trd-cb-menu > button.is-active {
		background: var(--dexapp-blue-soft);
		color: var(--dexapp-blue);
		font-weight: 600;
	}
	.dexapp-trd-cb-check {
		margin-left: auto;
		visibility: hidden;
	}
	.dexapp-trd-cb-menu > button.is-active .dexapp-trd-cb-check {
		visibility: visible;
	}
}

@media (max-width: 767px) {

	.dexapp-trd-form {
		display: flex;
		flex-direction: column;
		padding: 10px;
	}
	.dexapp-trd-form[data-side="buy"] [data-trd-side-only="sell"],
	.dexapp-trd-form[data-side="sell"] [data-trd-side-only="buy"] {
		display: none;
	}
	.dexapp-trd-form button {
		border: 0 none;
		font-family: 'Plus Jakarta Sans', sans-serif;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-form button:focus,
	.dexapp-trd-form input:focus {
		outline: none;
	}
	.dexapp-trd-form-side {
		display: flex;
		padding: 3px;
		border-radius: 10px;
		background: var(--dexapp-fill);
	}
	.dexapp-trd-form-side > button {
		flex: 1 1 0;
		height: 32px;
		border-radius: 8px;
		background: transparent;
		color: var(--dexapp-text-2);
		font-size: 11.5px;
		font-weight: 700;
		text-transform: uppercase;
	}
	.dexapp-trd-form-side > button[data-trd-form-side="buy"].is-active {
		background: var(--dexapp-green);
		color: #fff;
	}
	.dexapp-trd-form-side > button[data-trd-form-side="sell"].is-active {
		background: var(--dexapp-red);
		color: #fff;
	}
	.dexapp-trd-form-label {
		display: block;
		margin: 8px 0 4px;
		color: var(--dexapp-text);
		font-size: 11.5px;
		font-weight: 500;
		line-height: 1.3;
	}
	.dexapp-trd-form-type {
		display: flex;
		gap: 4px;
	}
	.dexapp-trd-form-type > button {
		flex: 1 1 0;
		height: 28px;
		border-radius: 8px;
		background: var(--dexapp-fill);
		color: var(--dexapp-text-2);
		font-size: 11.5px;
		font-weight: 500;
	}
	.dexapp-trd-form-type > button.is-active {
		background: var(--dexapp-blue-soft);
		color: var(--dexapp-blue);
	}
	.dexapp-trd-form-type > button:disabled {
		opacity: .6;
	}
	.dexapp-trd-field {
		display: flex;
		align-items: center;
		gap: 4px;
		height: 34px;
		padding: 0 10px;
		border: 1.5px solid var(--trd-border);
		border-radius: 10px;
		background: var(--dexapp-surface);
	}
	.dexapp-trd-field:focus-within {
		border-color: var(--dexapp-blue);
	}
	.dexapp-trd-field input {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		height: 100%;
		padding: 0;
		border: 0 none;
		background: transparent;
		color: var(--dexapp-text);
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 13px;
		font-variant-numeric: tabular-nums;
	}
	.dexapp-trd-field input::placeholder {
		color: var(--dexapp-muted);
	}
	.dexapp-trd-field > span {
		flex: 0 0 auto;
		color: var(--dexapp-blue);
		font-size: 11px;
		font-weight: 500;
	}
	.dexapp-trd-form-balance {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 6px;
		margin-top: 8px;
		padding: 0;
		background: transparent;
		text-align: right;
	}
	.dexapp-trd-form-balance > span {
		flex: 0 0 auto;
		color: var(--dexapp-muted);
		font-size: 10.5px;
	}
	.dexapp-trd-form-balance b {
		min-width: 0;
		overflow: hidden;
		color: var(--dexapp-text);
		font-size: 11.5px;
		font-weight: 600;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.dexapp-trd-form-pct {
		display: flex;
		gap: 3px;
		margin: 8px 0 10px;
	}
	.dexapp-trd-form-pct > button {
		flex: 1 1 0;
		min-width: 0;
		height: 24px;
		padding: 0;
		border-radius: 6px;
		background: var(--dexapp-fill);
		color: var(--dexapp-text-2);
		font-size: 8.5px;
		font-weight: 500;
	}
	.dexapp-trd-form-pct > button.is-active {
		background: var(--dexapp-blue-soft);
		color: var(--dexapp-blue);
	}
	.dexapp-trd-form-submit {
		height: 34px;
		margin-top: auto;
		border-radius: 8px;
		background: var(--dexapp-green);
		box-shadow: 0 6px 14px rgba(16, 185, 129, .25);
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
	}
	.dexapp-trd-form[data-side="sell"] .dexapp-trd-form-submit {
		background: var(--dexapp-red);
		box-shadow: 0 6px 14px rgba(239, 68, 68, .25);
	}
	.dexapp-trd-form .dexapp-trd-form-submit.is-login,
	.dexapp-trd-form[data-side="sell"] .dexapp-trd-form-submit.is-login {
		height: 40px;
		border-radius: 12px;
		background: var(--dexapp-blue);
		box-shadow: 0 6px 14px rgba(37, 99, 235, .25);
		font-size: 14px;
		text-transform: none;
	}
	.dexapp-trd-form.is-locked [data-trd-pct]:disabled {
		color: var(--dexapp-muted);
		cursor: not-allowed;
	}
	.dexapp-trd-form.is-locked .dexapp-trd-field {
		cursor: not-allowed;
	}
}

@media (max-width: 767px) {

	.dexapp-trd-form[data-type="market"] .dexapp-trd-field.is-price {
		background: var(--dexapp-fill);
	}
	.dexapp-trd-field input:disabled {
		-webkit-text-fill-color: var(--dexapp-muted);
		opacity: 1;
	}
	.dexapp-trd-field input[readonly] {
		color: var(--dexapp-text-2);
	}
}

@media (max-width: 767px) {

	.dexapp-trd-orders {
		margin-top: 12px;
	}
	.dexapp-trd-orders > .dexapp-trd-card {
		padding: 4px 12px 8px;
	}
	.dexapp-trd-orders-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--trd-border);
	}
	.dexapp-trd-orders-tabs {
		display: flex;
		gap: 18px;
	}
	.dexapp-trd-orders-tabs > button {
		position: relative;
		padding: 12px 0 10px;
		border: 0 none;
		background: none;
		color: var(--dexapp-text-2);
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 13px;
		font-weight: 500;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-orders-tabs > button:focus {
		outline: none;
	}
	.dexapp-trd-orders-tabs > button.is-active {
		color: var(--dexapp-text);
		font-weight: 700;
	}
	.dexapp-trd-orders-tabs > button.is-active::after {
		position: absolute;
		right: 0;
		bottom: -1px;
		left: 0;
		height: 2.5px;
		border-radius: 2px;
		background: var(--dexapp-blue);
		content: "";
	}
	.dexapp-trd-orders-all {
		display: inline-flex;
		color: var(--dexapp-blue);
	}
	.dexapp-trd-orders-all:hover,
	.dexapp-trd-orders-all:focus {
		color: var(--dexapp-blue);
	}
	.dexapp-trd-orders-list {
		min-height: 64px;
	}
	.dexapp-trd-orders-list .dexapp-trd-empty {
		margin: 0;
		padding: 22px 0 16px;
	}
	.dexapp-trd-guest-notice {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 40px 16px 44px;
		color: var(--dexapp-text-2);
		text-align: center;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-guest-notice:hover,
	.dexapp-trd-guest-notice:focus {
		color: var(--dexapp-text-2);
		text-decoration: none;
	}
	.dexapp-trd-guest-notice svg {
		display: block;
		margin-bottom: 8px;
	}
	.dexapp-trd-guest-notice b {
		color: var(--dexapp-text);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.35;
	}
	.dexapp-trd-guest-notice span {
		font-size: 12px;
		line-height: 1.45;
	}
	.dexapp-trd-orders-list[data-trd-orders] {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-top: 12px;
	}
	.dexapp-trd-order {
		padding: 12px 14px;
		border-radius: 12px;
		background: var(--dexapp-surface);
		box-shadow: var(--dexapp-shadow-card);
	}
	.dexapp-trd-order-top {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.dexapp-trd-order-top b {
		color: var(--dexapp-text);
		font-size: 13px;
		font-weight: 600;
	}
	.dexapp-trd-order > time {
		display: block;
		margin: 6px 0 10px;
		color: var(--dexapp-muted);
		font-size: 11px;
		font-variant-numeric: tabular-nums;
	}
	.dexapp-trd-order-side {
		padding: 2px 8px;
		border-radius: 5px;
		font-size: 11px;
		font-weight: 700;
		line-height: 1.4;
		text-transform: uppercase;
	}
	.dexapp-trd-order-side.is-buy {
		background: var(--trd-green-soft);
		color: var(--dexapp-green);
	}
	.dexapp-trd-order-side.is-sell {
		background: var(--trd-red-soft);
		color: var(--dexapp-red);
	}
	.dexapp-trd-order-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	.dexapp-trd-order-grid > div {
		min-width: 0;
	}
	.dexapp-trd-order-grid > div:nth-child(2) {
		text-align: center;
	}
	.dexapp-trd-order-grid > div:nth-child(3) {
		text-align: right;
	}
	.dexapp-trd-order-grid span {
		display: block;
		margin-bottom: 2px;
		color: var(--dexapp-muted);
		font-size: 11px;
	}
	.dexapp-trd-order-grid b {
		display: block;
		overflow: hidden;
		color: var(--dexapp-text);
		font-size: 12px;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.dexapp-trd-order-cancel {
		margin-left: auto;
		height: 26px;
		padding: 0 14px;
		border: 0 none;
		border-radius: 8px;
		background: var(--trd-red-soft);
		color: var(--dexapp-red);
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
		font-weight: 600;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-toast {
		position: fixed;
		z-index: 1060;
		right: 16px;
		bottom: calc(var(--dexapp-tabbar-h, 60px) + env(safe-area-inset-bottom, 0px) + 16px);
		left: 16px;
		display: flex;
		align-items: center;
		gap: 10px;
		max-width: 420px;
		margin: 0 auto;
		padding: 11px 14px;
		border-radius: 12px;
		background: rgba(15, 23, 42, .92);
		box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
		color: #fff;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
		line-height: 1.4;
		opacity: 0;
		transform: translateY(8px);
		transition: opacity .2s ease, transform .2s ease;
		pointer-events: none;
	}
	.dexapp-trd-toast.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
	.dexapp-trd-toast-icon {
		display: inline-flex;
		flex: 0 0 18px;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: var(--dexapp-red);
		color: #fff;
		font-size: 11px;
		font-weight: 700;
	}
	.dexapp-trd-hist-row {
		display: grid;
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr);
		gap: 6px;
		padding: 5px 0;
		font-size: 11px;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}
	.dexapp-trd-hist-row > * {
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.dexapp-trd-hist-row > :not(:first-child) {
		text-align: right;
	}
	.dexapp-trd-hist-row b {
		font-weight: 500;
	}
	.dexapp-trd-hist-row.is-head {
		padding-top: 10px;
		color: var(--dexapp-text-2);
		font-size: 10px;
	}
}

@media (max-width: 767px) {

	/* The orders card is the last block of the trade screen; it grows to the bottom edge so no page background shows under it. */
	#content.content.dexapp-trd-view-trade {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		min-height: 100dvh;
		padding-bottom: 0;
	}
	#content.dexapp-trd-view-trade > .dexapp-trd-orders {
		display: flex;
		flex: 1 0 auto;
		flex-direction: column;
	}
	#content.dexapp-trd-view-trade > .dexapp-trd-orders > .dexapp-trd-card {
		flex: 1 0 auto;
		padding-bottom: calc(var(--dexapp-tabbar-h, 60px) + env(safe-area-inset-bottom, 0px) + 12px);
		border-radius: var(--dexapp-radius-card) var(--dexapp-radius-card) 0 0;
	}
	body:has(#content.dexapp-trade) .bg-foot-mobile {
		display: none !important;
	}
}

/* sweetalert2 appends its popup to <body>, outside #content.dexapp-trade, so the tokens above do not reach it. */
@media (max-width: 767px) {
	.swal2-popup.dexapp-trd-error-swal {
		max-width: calc(100vw - 32px);
		padding: 20px 20px 16px;
		border-radius: 16px;
	}
	.dexapp-trd-error-swal .swal2-icon {
		margin: -4px auto -8px;
		transform: scale(.7);
	}
	.dexapp-trd-error-swal .swal2-title {
		margin: 0 0 6px;
		color: #0F172A;
		font-size: 17px;
		font-weight: 700;
		line-height: 1.35;
	}
	.dexapp-trd-error-swal .swal2-content {
		color: #64748B;
		font-size: 13px;
		line-height: 1.5;
		word-break: break-word;
	}
	.dexapp-trd-error-swal .swal2-actions {
		width: 100%;
		margin-top: 18px;
	}
	.dexapp-trd-error-swal .swal2-confirm.swal2-styled {
		width: 100%;
		height: 42px;
		margin: 0;
		border-radius: 12px;
		font-size: 14px;
		font-weight: 600;
	}
}

.swal2-popup.dexapp-trd-error-swal .swal2-styled,
.swal2-popup.dex-interactive-swal .swal2-styled,
.swal2-popup.dexapp-trd-error-swal .swal2-close,
.swal2-popup.dex-interactive-swal .swal2-close {
	-webkit-tap-highlight-color: transparent;
}
.swal2-popup.dexapp-trd-error-swal .swal2-styled:focus,
.swal2-popup.dex-interactive-swal .swal2-styled:focus,
.swal2-popup.dexapp-trd-error-swal .swal2-close:focus,
.swal2-popup.dex-interactive-swal .swal2-close:focus {
	outline: none;
	box-shadow: none;
}

@media (max-width: 767px) {
	#content.dexapp-trade a,
	#content.dexapp-trade button,
	#content.dexapp-trade [role="button"],
	#content.dexapp-trade [role="tab"] {
		-webkit-tap-highlight-color: transparent;
	}
	#content.dexapp-trade a:focus,
	#content.dexapp-trade a:active,
	#content.dexapp-trade button:focus,
	#content.dexapp-trade button:active,
	#content.dexapp-trade [role="button"]:focus,
	#content.dexapp-trade [role="tab"]:focus {
		outline: none;
	}
}

/* Guest sign-in screen on the trade page; same look as the guest Wallet page (wallet-guest-mobile.css). */
.dexapp-trd-gate[hidden] {
	display: none !important;
}
@media (max-width: 767px) {
	html.dexapp-trd-gate-open,
	html.dexapp-trd-gate-open body {
		overflow: hidden;
	}
	.dexapp-trd-gate {
		position: fixed;
		z-index: 1060;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(180deg, var(--dexapp-navy, #0F172A) 0%, var(--dexapp-blue, #2563EB) 100%);
		color: #fff;
		text-align: center;
	}
	.dexapp-trd-gate-close {
		position: absolute;
		top: calc(12px + env(safe-area-inset-top, 0px));
		left: 16px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 0 none;
		border-radius: 12px;
		background: rgba(255, 255, 255, .14);
		color: #fff;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-gate-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 72px;
		height: 72px;
		margin-bottom: 20px;
		border-radius: 18px;
		background: rgba(255, 255, 255, .14);
		color: rgba(255, 255, 255, .9);
	}
	.dexapp-trd-gate-title {
		margin: 0 0 6px;
		color: #fff;
		font-size: 22px;
		font-weight: 700;
		line-height: 1.3;
	}
	.dexapp-trd-gate-sub {
		max-width: 320px;
		margin: 0;
		color: rgba(255, 255, 255, .72);
		font-size: 13px;
		line-height: 1.5;
	}
	.dexapp-trd-gate-actions {
		display: flex;
		gap: 12px;
		margin-top: 24px;
	}
	.dexapp-trd-gate-btn,
	.dexapp-trd-gate-btn:hover,
	.dexapp-trd-gate-btn:focus {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 112px;
		height: 44px;
		padding: 0 22px;
		border-radius: 12px;
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-gate-btn.is-ghost,
	.dexapp-trd-gate-btn.is-ghost:hover,
	.dexapp-trd-gate-btn.is-ghost:focus {
		border: 1.5px solid rgba(255, 255, 255, .35);
		background: transparent;
		color: #fff;
	}
	.dexapp-trd-gate-btn.is-light,
	.dexapp-trd-gate-btn.is-light:hover,
	.dexapp-trd-gate-btn.is-light:focus {
		background: #fff;
		color: var(--dexapp-blue, #2563EB);
	}
}

/* Asset picker sheet (layout.mobile-trade-pairs). Base sheet and backdrop come from .dexapp-trd-sheet above. */
@media (max-width: 767px) {
	.dexapp-trd-sheet.dexapp-trd-pairs {
		height: 84vh;
		max-height: 84vh;
	}
	.dexapp-trd-pairs-head {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px 10px;
	}
	.dexapp-trd-pairs-head h2 {
		margin: 0;
		color: var(--dexapp-text, #0F172A);
		font-size: 15px;
		font-weight: 700;
	}
	.dexapp-trd-pairs-x {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border: 0 none;
		border-radius: 50%;
		background: var(--dexapp-fill, #F0F2F5);
		color: var(--dexapp-text-2, #64748B);
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-pairs-search {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 9px;
		height: 42px;
		margin: 0 16px 10px;
		padding: 0 14px;
		border-radius: 12px;
		background: var(--dexapp-fill, #F0F2F5);
		color: var(--dexapp-muted, #94A3B8);
		cursor: text;
	}
	.dexapp-trd-pairs-search input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		padding: 0;
		border: 0 none;
		outline: 0;
		background: transparent;
		color: var(--dexapp-text, #0F172A);
		font-size: 13px;
	}
	.dexapp-trd-pairs-tabs {
		display: flex;
		flex: 0 0 auto;
		gap: 4px;
		margin: 0 16px 6px;
		padding: 4px;
		border-radius: 12px;
		background: var(--dexapp-fill, #F0F2F5);
	}
	.dexapp-trd-pairs-tabs > button {
		flex: 1 1 0;
		min-width: 0;
		height: 32px;
		padding: 0 4px;
		border: 0 none;
		border-radius: 9px;
		background: transparent;
		color: var(--dexapp-text-2, #64748B);
		font-size: 12px;
		white-space: nowrap;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-pairs-tabs > button.is-active {
		background: var(--dexapp-surface, #fff);
		box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
		color: var(--dexapp-text, #0F172A);
		font-weight: 600;
	}
	.dexapp-trd-pairs-list {
		flex: 1 1 auto;
		min-height: 0;
		padding: 0 8px 8px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.dexapp-trd-pair {
		display: grid;
		grid-template-columns: 36px minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 10px 8px;
		border: 0 none;
		border-bottom: 1px solid #F1F4F8;
		background: transparent;
		text-align: left;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-pair[hidden] {
		display: none;
	}
	.dexapp-trd-pair.is-current {
		border-radius: 12px;
		background: var(--dexapp-blue-soft, #EFF6FF);
	}
	.dexapp-trd-pair.is-suspend {
		opacity: .55;
	}
	.dexapp-trd-pair-logo {
		width: 36px;
		height: 36px;
		padding: 6px;
		border-radius: 10px;
		background: #EEF2F8;
		object-fit: contain;
	}
	.dexapp-trd-pair-name {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		min-width: 0;
	}
	.dexapp-trd-pair-name b {
		color: var(--dexapp-text, #0F172A);
		font-size: 13px;
		font-weight: 600;
	}
	.dexapp-trd-pair-name b small {
		margin-left: 2px;
		color: var(--dexapp-muted, #94A3B8);
		font-size: 11px;
		font-weight: 400;
	}
	.dexapp-trd-pair-name > small {
		max-width: 100%;
		overflow: hidden;
		color: var(--dexapp-muted, #94A3B8);
		font-size: 11px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.dexapp-trd-pair-maint {
		padding: 1px 6px;
		border-radius: 4px;
		background: #FEF3C7;
		color: #B45309;
		font-size: 10px;
		line-height: 1.4;
	}
	.dexapp-trd-pair-price {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 3px;
	}
	.dexapp-trd-pair-price b {
		color: var(--dexapp-text, #0F172A);
		font-size: 13px;
		font-weight: 600;
		white-space: nowrap;
	}
	.dexapp-trd-pair-price em {
		padding: 1px 6px;
		border-radius: 6px;
		font-size: 11px;
		font-style: normal;
		white-space: nowrap;
	}
	.dexapp-trd-pair-price em.is-up {
		background: rgba(16, 185, 129, .1);
		color: var(--dexapp-green, #10B981);
	}
	.dexapp-trd-pair-price em.is-down {
		background: rgba(239, 68, 68, .1);
		color: var(--dexapp-red, #EF4444);
	}
	.dexapp-trd-pairs-empty {
		margin: 0;
		padding: 32px 0;
		color: var(--dexapp-muted, #94A3B8);
		font-size: 13px;
		text-align: center;
	}
	.darkmode .dexapp-trd-pair {
		border-bottom-color: rgba(255, 255, 255, .06);
	}
	.darkmode .dexapp-trd-pair-logo {
		background: rgba(255, 255, 255, .06);
	}
	.darkmode .dexapp-trd-pairs-head h2,
	.darkmode .dexapp-trd-pair-name b,
	.darkmode .dexapp-trd-pair-price b {
		color: #fff;
	}
	.darkmode .dexapp-trd-pairs-search,
	.darkmode .dexapp-trd-pairs-tabs,
	.darkmode .dexapp-trd-pairs-x {
		background: rgba(255, 255, 255, .06);
	}
	.darkmode .dexapp-trd-pairs-tabs > button.is-active {
		background: rgba(255, 255, 255, .12);
		color: #fff;
	}
}

@media (max-width: 767px) {

	.dexapp-trd-mode {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		height: 30px;
		padding: 2px;
		border-radius: 999px;
		background: var(--dexapp-fill);
	}
	.dexapp-trd-mode > button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
		padding: 0;
		border: 0 none;
		border-radius: 50%;
		background: transparent;
		color: var(--dexapp-text-2);
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-mode > button.is-active {
		background: var(--dexapp-surface);
		box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
		color: var(--dexapp-blue);
	}
	.dexapp-trd-mode > button:focus {
		outline: none;
	}

	.dexapp-trd .is-mode-off,
	.dexapp-trd.is-mode-off {
		display: none !important;
	}

	.dexapp-trd-ins {
		display: flex;
		flex-direction: column;
		padding: 16px;
	}
	.dexapp-trd-ins[data-side="buy"] [data-trd-side-only="sell"],
	.dexapp-trd-ins[data-side="sell"] [data-trd-side-only="buy"] {
		display: none !important;
	}
	.dexapp-trd-ins-side {
		display: flex;
		padding: 3px;
		border-radius: 12px;
		background: var(--dexapp-fill);
	}
	.dexapp-trd-ins-side > button {
		flex: 1 1 0;
		height: 38px;
		border: 0 none;
		border-radius: 10px;
		background: transparent;
		color: var(--dexapp-text-2);
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 14px;
		font-weight: 700;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-ins-side > button[data-trd-ins-side="buy"].is-active {
		background: var(--dexapp-green);
		box-shadow: 0 4px 10px rgba(16, 185, 129, .25);
		color: #fff;
	}
	.dexapp-trd-ins-side > button[data-trd-ins-side="sell"].is-active {
		background: var(--dexapp-red);
		box-shadow: 0 4px 10px rgba(239, 68, 68, .25);
		color: #fff;
	}
	.dexapp-trd-ins-label {
		display: block;
		margin: 18px 0 4px;
		color: var(--dexapp-text-2);
		font-size: 12px;
		font-weight: 500;
		text-align: center;
	}
	.dexapp-trd-ins-amount {
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 10px;
	}
	.dexapp-trd-ins-unit {
		flex: 0 0 auto;
		color: var(--dexapp-muted);
		font-size: 20px;
		font-weight: 500;
	}
	.dexapp-trd-ins-amount input {
		width: 2ch;
		min-width: 0;
		max-width: 75%;
		padding: 0;
		border: 0 none;
		background: transparent;
		color: var(--dexapp-text);
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 28px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		text-align: left;
		outline: none;
		-webkit-appearance: none;
	}
	.dexapp-trd-ins-amount input::placeholder {
		color: var(--dexapp-muted);
		opacity: .6;
	}
	.dexapp-trd-ins-est {
		margin: 4px 0 14px;
		color: var(--dexapp-muted);
		font-size: 12px;
		font-variant-numeric: tabular-nums;
		text-align: center;
	}
	.dexapp-trd-ins-pct {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}
	.dexapp-trd-ins-pct > button {
		height: 32px;
		border: 1px solid var(--trd-border);
		border-radius: 8px;
		background: var(--dexapp-surface);
		color: var(--dexapp-text);
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
		font-weight: 500;
		-webkit-tap-highlight-color: transparent;
	}
	.dexapp-trd-ins[data-side="sell"] .dexapp-trd-ins-pct > button {
		border-color: transparent;
		background: var(--dexapp-fill);
	}
	.dexapp-trd-ins-pct > button.is-active {
		border-color: var(--dexapp-blue);
		background: var(--dexapp-blue-soft);
		color: var(--dexapp-blue);
	}
	.dexapp-trd-ins-info {
		margin: 14px 0 16px;
	}
	.dexapp-trd-ins-info > div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 0;
		border-top: 1px solid var(--trd-border);
	}
	.dexapp-trd-ins-info > div:last-child {
		border-bottom: 1px solid var(--trd-border);
	}
	.dexapp-trd-ins-info dt {
		color: var(--dexapp-text-2);
		font-size: 12px;
		font-weight: 400;
	}
	.dexapp-trd-ins-info dd {
		margin: 0;
		color: var(--dexapp-text);
		font-size: 12px;
		font-weight: 500;
		font-variant-numeric: tabular-nums;
		text-align: right;
	}
	.dexapp-trd-ins-info dd.is-balance {
		color: var(--dexapp-blue);
	}
	.dexapp-trd-ins-submit {
		height: 44px;
		border: 0 none;
		border-radius: 12px;
		background: var(--dexapp-green);
		box-shadow: 0 6px 14px rgba(16, 185, 129, .25);
		color: #fff;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 14px;
		font-weight: 700;
	}
	.dexapp-trd-ins[data-side="sell"] .dexapp-trd-ins-submit {
		background: var(--dexapp-red);
		box-shadow: 0 6px 14px rgba(239, 68, 68, .25);
	}
	.dexapp-trd-ins .dexapp-trd-ins-submit.is-login {
		background: var(--dexapp-blue);
		box-shadow: none;
	}
}