/* [17 Okt 2026] Rapikan halaman Spot trading desktop (basic-trading/{PAIR}).
   Dipakai: views/admin-pages/basic-trading-bnb.blade.php, basic-trading.blade.php,
   basic-trading-decimal.blade.php (markup sama). Pendamping: assets/js/trading-desktop.js
   (opsional; tanpa JS semua aturan di bawah tetap berlaku, hanya chip urut + penanda
   baris aktif + label Vol yang tidak ada).

   Cakupan:
   - HANYA #content.tata-basic (page-class 'tata-'.$mode_tata) -> mode Pro (#content.tata-pro)
     tidak tersentuh sama sekali.
   - HANYA desktop: semua aturan di dalam @media (min-width: 992px). [17 Okt 2026, tablet] dulu 768px;
     keputusan Iqbal: tablet/iPad potret (768-991px) memakai tampilan HP (trade-mobile.css, kini
     max-width 991px; lebar 991 tepat dijembatani di sana karena .view-desktop main.blade.php mulai 991).
   - Blok ticker atas (bersarang) tetap menulis >= 991px; efektifnya >= 992px.
   - Mode gelap: #page-container.darkmode / body.darkmode-page (mekanisme yang sudah ada).

   Acuan gaya daftar pasar: assets/css/grafik-lanjutan.css (.gl-samping, .gl-cari,
   .gl-urut, .gl-kepala, .gl-daftar). Tidak ada id/kelas lama yang diganti;
   socket tetap menulis ke #last, #last_percent, #last_price_label, #24h_*_label. */

@media (min-width: 992px) {

	/* ---------- token ---------- */
	#content.tata-basic {
		--dex-td-kartu: #FFFFFF;
		--dex-td-garis: rgba(15, 23, 42, .08);
		--dex-td-garis-2: rgba(15, 23, 42, .14);
		--dex-td-teks: #0F172A;
		--dex-td-teks-2: #64748B;
		--dex-td-hover: #F1F5F9;
		--dex-td-isi: #F8FAFC;
		--dex-td-input: #FFFFFF;
		--dex-td-aksen: #2563EB;
		--dex-td-aksen-bg: #EFF6FF;
		--dex-td-naik: #16A34A;
		--dex-td-naik-bg: #F0FDF4;
		--dex-td-turun: #E11D48;
		--dex-td-turun-bg: #FFF1F2;
		--dex-td-bintang: #F59E0B;
		/* latar kepala daftar Market. 14 Okt diputuskan abu-abu (#dde4ea); redesain ini
		   mengikuti grafik lanjutan (tanpa pita). Untuk kembali abu-abu cukup ubah nilai ini. */
		--dex-td-kepala: transparent;
		--dex-td-radius: 16px;
		font-family: 'Plus Jakarta Sans', 'Open Sans', system-ui, sans-serif;
	}
	#page-container.darkmode #content.tata-basic,
	body.darkmode-page #content.tata-basic {
		--dex-td-kartu: var(--surface, #121C30);
		--dex-td-garis: rgba(255, 255, 255, .08);
		--dex-td-garis-2: rgba(255, 255, 255, .16);
		--dex-td-teks: #F1F5F9;
		--dex-td-teks-2: #94A3B8;
		--dex-td-hover: rgba(255, 255, 255, .05);
		--dex-td-isi: rgba(255, 255, 255, .04);
		--dex-td-input: #0e2739;
		--dex-td-aksen: #60A5FA;
		--dex-td-aksen-bg: rgba(37, 99, 235, .18);
		--dex-td-naik: #4ADE80;
		--dex-td-naik-bg: rgba(74, 222, 128, .12);
		--dex-td-turun: #FB7185;
		--dex-td-turun-bg: rgba(251, 113, 133, .12);
	}
	#content.tata-basic input,
	#content.tata-basic button,
	#content.tata-basic textarea {
		font-family: inherit;
	}

	/* ---------- kartu: radius + garis tipis (latar tetap dari tema, termasuk mode gelap) ---------- */
	#content.tata-basic #header-market > .panel,
	#content.tata-basic .blok-grafik > .col-md-12.add-full-border,
	#content.tata-basic .blok-form > .col-md-12 > .panel,
	#content.tata-basic .blok-order-aktif .panel.add-full-border,
	#content.tata-basic .kolom-pasar > .row > .panel,
	#content.tata-basic .kolom-pasar #side-market-tab,
	#content.tata-basic #order-book .kolom-jual .panel.add-full-border,
	#content.tata-basic #order-book .kolom-beli .panel.add-full-border,
	#content.tata-basic #history-group {
		border: 1px solid var(--dex-td-garis);
		border-radius: var(--dex-td-radius);
		box-shadow: none;
	}
	/* panel luar Market & #side-market-tab bertumpuk: garis cukup satu (di dalam) */
	#content.tata-basic .kolom-pasar > .row > .panel { border-color: transparent; }

	/* ---------- judul panel ---------- */
	#content.tata-basic .text-title,
	#content.tata-basic #active-order-container .sub-header-title,
	#content.tata-basic #history-heading .sub-header-title {
		font-size: 14px;
		font-weight: 800;
		color: var(--dex-td-teks);
		letter-spacing: -.1px;
	}
	#content.tata-basic #active-order-container .sub-header-title .view-all-btn,
	#content.tata-basic #history-heading .sub-header-title .view-all-btn {
		font-size: 12px;
		font-weight: 700;
		color: var(--dex-td-aksen);
	}
	#content.tata-basic #order-book .title-order-book {
		margin: 2px 0 8px;
		font-size: 14px !important;
		font-weight: 800 !important;
		color: var(--dex-td-teks) !important;
	}

	/* ---------- bilah alat grafik: segmented kalem, bukan tombol biru berderet ---------- */
	#content.tata-basic .blok-grafik #chart_tabs,
	#content.tata-basic .blok-grafik #kline_tf,
	#content.tata-basic .blok-grafik #kline_ind {
		display: inline-flex;
		gap: 2px;
		padding: 3px;
		border-radius: 10px;
		background: var(--dex-td-hover);
	}
	#content.tata-basic .blok-grafik #chart_tabs > .btn,
	#content.tata-basic .blok-grafik #kline_tf > .btn,
	#content.tata-basic .blok-grafik #kline_ind > .btn {
		float: none;
		height: 24px;
		margin: 0;
		padding: 0 10px;
		border: 0 !important;
		border-radius: 7px !important;
		background: transparent !important;
		color: var(--dex-td-teks-2) !important;
		font-size: 11px;
		font-weight: 700;
		line-height: 24px;
		box-shadow: none;
	}
	#content.tata-basic .blok-grafik #chart_tabs > .btn.btn-primary,
	#content.tata-basic .blok-grafik #kline_tf > .btn.btn-primary,
	#content.tata-basic .blok-grafik #kline_ind > .btn.btn-primary {
		background: var(--dex-td-kartu) !important;
		color: var(--dex-td-aksen) !important;
		box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
	}
	#content.tata-basic .blok-grafik #kline_ind > .btn.dexapp-trd-mobile-only { display: none; }
	#content.tata-basic .blok-grafik .btn-tukar-tata,
	#content.tata-basic .blok-grafik .btn-advance {
		height: 30px;
		padding: 0 12px;
		border: 1px solid var(--dex-td-garis) !important;
		border-radius: 10px;
		background: transparent !important;
		color: var(--dex-td-teks) !important;
		font-size: 12px;
		font-weight: 700;
		line-height: 28px;
		box-shadow: none;
	}
	#content.tata-basic .blok-grafik .btn-tukar-tata:hover,
	#content.tata-basic .blok-grafik .btn-advance:hover {
		background: var(--dex-td-hover) !important;
	}

	/* =====================================================================
	   DAFTAR MARKET (panel kanan) -- meniru .gl-samping grafik lanjutan
	   Markup asli: tabel 5 kolom (Fav | Market | Price | %Change | Vol 24H),
	   kepala di tabel terpisah (.header-side-market), isi di .side-market
	   (simple-scrollbar + DataTables tanpa paging/ordering).
	   Baris dijadikan grid 4 kolom: bintang | ikon+simbol+nama | harga | %.
	   Kolom Vol disembunyikan (nilainya tetap ada untuk chip urut "Volume").
	   ===================================================================== */

	/* tab Market | Obrolan */
	#content.tata-basic .kolom-pasar #tab_right_side {
		gap: 4px;
		margin: 0;
		padding: 0 12px;
		border-bottom: 1px solid var(--dex-td-garis);
		background: transparent;
	}
	#content.tata-basic .kolom-pasar #tab_right_side > li,
	#content.tata-basic .kolom-pasar #tab_right_side > li.active {
		margin: 0 0 -1px;
		border: 0 !important;
		background: transparent;
	}
	#content.tata-basic .kolom-pasar #tab_right_side > li > a {
		margin: 0;
		padding: 11px 8px 9px;
		border: 0 !important;
		border-bottom: 2px solid transparent !important;
		border-radius: 0;
		background: transparent !important;
		color: var(--dex-td-teks-2) !important;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.3;
	}
	#content.tata-basic .kolom-pasar #tab_right_side > li > a:hover { color: var(--dex-td-teks) !important; }
	#content.tata-basic .kolom-pasar #tab_right_side > li.active > a {
		border-bottom-color: var(--dex-td-aksen) !important;
		color: var(--dex-td-teks) !important;
	}
	#content.tata-basic .kolom-pasar #side-market-tab > .tab-content,
	#content.tata-basic .kolom-pasar #market > .tab-content {
		padding-top: 0 !important;
	}

	/* tab pair (IDR / USDT / BTC) -> chip */
	#content.tata-basic .kolom-pasar #market > .nav-tabs {
		gap: 4px;
		margin: 8px 12px 0 !important;
		padding: 0;
		border: 0;
		background: transparent !important;
	}
	#content.tata-basic .kolom-pasar #market > .nav-tabs > li {
		margin: 0;
		border: 0 !important;
	}
	#content.tata-basic .kolom-pasar #market > .nav-tabs > li > a {
		margin: 0;
		padding: 4px 10px;
		border: 0 !important;
		border-radius: 8px;
		background: transparent !important;
		color: var(--dex-td-teks-2) !important;
		font-size: 12px;
		font-weight: 700;
		line-height: 1.4;
	}
	#content.tata-basic .kolom-pasar #market > .nav-tabs > li > a:hover { background: var(--dex-td-hover) !important; }
	#content.tata-basic .kolom-pasar #market > .nav-tabs > li.active > a {
		background: var(--dex-td-aksen-bg) !important;
		color: var(--dex-td-aksen) !important;
	}

	/* kotak cari (.gl-cari) */
	#content.tata-basic .kolom-pasar #market .tab-pane > .row:first-child {
		margin: 0 !important;
		padding: 8px 12px 0 !important;
	}
	#content.tata-basic .kolom-pasar #market .tab-pane > .row:first-child > .col-md-12 {
		margin: 0 !important;
		padding: 0 !important;
	}
	#content.tata-basic .kolom-pasar .search-box {
		display: flex;
		align-items: center;
		gap: 8px;
		height: 34px;
		margin: 0 !important;
		padding: 0 12px !important;
		border: 1px solid var(--dex-td-garis);
		border-radius: 10px;
		background: transparent;
		color: var(--dex-td-teks-2);
	}
	#content.tata-basic .kolom-pasar .search-box::before,
	#content.tata-basic .kolom-pasar .search-box::after { display: none; }
	#content.tata-basic .kolom-pasar .search-box:focus-within {
		border-color: var(--dex-td-aksen);
		box-shadow: 0 0 0 3px var(--dex-td-aksen-bg);
	}
	#content.tata-basic .kolom-pasar .search-box .icon-search {
		float: none;
		width: auto;
		padding: 0 !important;
		color: var(--dex-td-teks-2);
		font-size: 12px;
	}
	#content.tata-basic .kolom-pasar .search-box .search-custom {
		float: none;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		height: 32px;
		padding: 0;
		border: 0;
		outline: 0;
		background: transparent !important;
		color: var(--dex-td-teks) !important;
		font-size: 13px !important;
		font-weight: 500;
	}
	#content.tata-basic .kolom-pasar .search-box .search-custom::placeholder { color: var(--dex-td-teks-2); opacity: 1; }

	/* chip urut (dibuat assets/js/trading-desktop.js) -- .gl-urut */
	#content.tata-basic .dex-td-urut {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 4px;
		margin: 8px 12px 2px;
		padding: 3px;
		border-radius: 10px;
		background: var(--dex-td-hover);
	}
	#content.tata-basic .dex-td-urut button {
		height: 24px;
		padding: 0 4px;
		border: 0;
		border-radius: 7px;
		background: transparent;
		color: var(--dex-td-teks-2);
		font-size: 11px;
		font-weight: 700;
		white-space: nowrap;
		cursor: pointer;
	}
	#content.tata-basic .dex-td-urut button:hover { color: var(--dex-td-teks); }
	#content.tata-basic .dex-td-urut button.aktif {
		background: var(--dex-td-kartu);
		color: var(--dex-td-aksen);
		box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
	}
	#content.tata-basic .dex-td-urut button:focus-visible { outline: 2px solid var(--dex-td-aksen); outline-offset: 1px; }

	/* tabel -> blok + baris grid */
	#content.tata-basic .kolom-pasar .header-side-market,
	#content.tata-basic .kolom-pasar .side-market {
		padding-left: 0 !important;
		padding-right: 0 !important;
		border: 0;
		font-family: inherit !important;
	}
	#content.tata-basic .kolom-pasar .header-side-market { overflow: visible; margin-top: 4px; }
	#content.tata-basic .kolom-pasar .header-side-market > .table,
	#content.tata-basic .kolom-pasar .side-market .table-markets {
		display: block;
		width: 100% !important;
		margin: 0 !important;
		border: 0 !important;
		background: transparent;
		font-size: 12px;
	}
	#content.tata-basic .kolom-pasar .header-side-market > .table > thead,
	#content.tata-basic .kolom-pasar .side-market .table-markets > tbody {
		display: block;
	}
	#content.tata-basic .kolom-pasar .side-market .table-markets > thead { display: none !important; }
	#content.tata-basic .kolom-pasar .side-market .dataTables_wrapper { width: 100%; }
	#content.tata-basic .kolom-pasar .side-market .dataTables_filter,
	#content.tata-basic .kolom-pasar .side-market .dataTables_info,
	#content.tata-basic .kolom-pasar .side-market .dataTables_paginate { display: none !important; }
	/* simple-scrollbar: lebar isi = lebar panel (batang gulir bawaan disembunyikan,
	   batang tipis .ss-scroll tetap muncul saat hover) -- sama dengan order book di ui-fixes.css */
	#content.tata-basic .kolom-pasar .side-market .ss-content {
		width: 100% !important;
		scrollbar-width: none;
	}
	#content.tata-basic .kolom-pasar .side-market .ss-content::-webkit-scrollbar { width: 0; height: 0; }

	#content.tata-basic .kolom-pasar .header-side-market > .table > thead > tr,
	#content.tata-basic .kolom-pasar .side-market .table-markets > tbody > tr {
		display: grid;
		grid-template-columns: 16px minmax(0, 1.3fr) minmax(0, 1fr) 62px;
		column-gap: 8px;
		align-items: center;
		margin: 0 6px;
		padding: 6px 8px;
		border-radius: 8px;
	}
	#content.tata-basic .kolom-pasar .header-side-market > .table > thead > tr {
		padding-top: 4px;
		padding-bottom: 4px;
		background: var(--dex-td-kepala);
	}
	#content.tata-basic .kolom-pasar .header-side-market > .table > thead > tr > th,
	#content.tata-basic .kolom-pasar .side-market .table-markets > tbody > tr > td {
		display: block;
		width: auto !important;
		min-width: 0;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		text-align: left;
		vertical-align: middle;
	}
	#content.tata-basic .kolom-pasar .header-side-market > .table > thead > tr > th {
		color: var(--dex-td-teks-2) !important;
		font-size: 11px !important;
		font-weight: 600 !important;
		line-height: 1.6;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#content.tata-basic .kolom-pasar .header-side-market > .table > thead > tr > th:first-child { font-size: 0 !important; }
	#content.tata-basic .kolom-pasar .header-side-market > .table > thead > tr > th:nth-child(3),
	#content.tata-basic .kolom-pasar .header-side-market > .table > thead > tr > th:nth-child(4),
	#content.tata-basic .kolom-pasar .side-market .table-markets > tbody > tr > td:nth-child(3),
	#content.tata-basic .kolom-pasar .side-market .table-markets > tbody > tr > td:nth-child(4) {
		text-align: right;
	}
	#content.tata-basic .kolom-pasar .header-side-market > .table > thead > tr > th:nth-child(5),
	#content.tata-basic .kolom-pasar .side-market .table-markets > tbody > tr > td:nth-child(5) {
		display: none;
	}

	/* baris */
	#content.tata-basic .kolom-pasar .side-market .table-markets > tbody > tr {
		cursor: pointer;
		background: transparent !important;
		font-variant-numeric: tabular-nums;
		transition: background-color .12s ease;
	}
	#content.tata-basic .kolom-pasar .side-market .table-markets > tbody > tr:hover { background: var(--dex-td-hover) !important; }
	#content.tata-basic .kolom-pasar .side-market .table-markets > tbody > tr.dex-td-aktif { background: var(--dex-td-aksen-bg) !important; }
	#content.tata-basic .kolom-pasar .side-market .table-markets > tbody > tr.dexapp-suspend { opacity: .55; }

	/* kolom 1: bintang favorit. font-size 0 menyembunyikan nomor urut " N" yang
	   ditambahkan baris hasil update_marketsummary(), bintangnya diberi ukuran sendiri */
	#content.tata-basic .kolom-pasar .side-market .table-markets > tbody > tr > td:first-child {
		font-size: 0 !important;
		line-height: 1;
		text-align: center;
	}
	#content.tata-basic .kolom-pasar .side-market .btn-favourite {
		display: inline-block;
		padding: 2px 0;
		font-size: 12px;
		line-height: 1;
	}
	#content.tata-basic .kolom-pasar .side-market .btn-marked .far { color: var(--dex-td-garis-2) !important; }
	#content.tata-basic .kolom-pasar .side-market .btn-marked:hover .far { color: var(--dex-td-bintang) !important; }
	#content.tata-basic .kolom-pasar .side-market .btn-marked .fa { color: var(--dex-td-bintang) !important; }

	/* kolom 2: ikon bulat 20px + simbol tebal + nama koin kecil (span.market-alias yang
	   dulu display:none hanya untuk pencarian -- kini ditampilkan, tetap terbaca DataTables) */
	#content.tata-basic .kolom-pasar .side-market .asset-col {
		display: grid;
		grid-template-columns: 20px minmax(0, 1fr);
		column-gap: 8px;
		align-items: center;
		margin: 0;
		color: var(--dex-td-teks);
		font-size: 12px;
		font-weight: 800;
		line-height: 1.25;
		white-space: nowrap;
	}
	#content.tata-basic .kolom-pasar .side-market .asset-col::before,
	#content.tata-basic .kolom-pasar .side-market .asset-col::after { display: none; }
	#content.tata-basic .kolom-pasar .side-market .asset-col > .img-asset {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 20px;
		height: 20px;
		margin: 0;
		border-radius: 50%;
		background-position: center;
		background-size: cover;
		object-fit: cover;
	}
	#content.tata-basic .kolom-pasar .side-market .asset-col > .market-alias {
		display: block !important;
		grid-column: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		color: var(--dex-td-teks-2);
		font-size: 10px;
		font-weight: 500;
	}
	#content.tata-basic .kolom-pasar .side-market .asset-col > .market-alias:empty { display: none !important; }

	/* kolom 3-4: harga & persen */
	#content.tata-basic .kolom-pasar .side-market .table-markets > tbody > tr > td:nth-child(3) {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--dex-td-teks);
		font-size: 12px !important;
		font-weight: 600;
	}
	#content.tata-basic .kolom-pasar .side-market .table-markets > tbody > tr > td:nth-child(4) {
		white-space: nowrap;
		font-size: 12px !important;
		font-weight: 800;
	}
	#content.tata-basic .kolom-pasar .side-market .text-buy { color: var(--dex-td-naik) !important; }
	#content.tata-basic .kolom-pasar .side-market .text-sell { color: var(--dex-td-turun) !important; }
	#content.tata-basic .kolom-pasar .side-market .dataTables_empty {
		grid-column: 1 / -1;
		padding: 18px 0 !important;
		color: var(--dex-td-teks-2);
		font-size: 12px !important;
		text-align: center !important;
	}

	/* ---------- form Beli / Jual ---------- */
	#content.tata-basic .blok-form > .col-md-12 > .panel {
		padding-right: 12px;
		padding-bottom: 12px;
		padding-left: 2px;
	}
	#content.tata-basic #form-order {
		color: var(--dex-td-teks);
		font-size: 13px;
	}
	#content.tata-basic #form-order .btn-info-bnb {
		height: 28px;
		padding: 0 10px;
		border: 1px solid var(--dex-td-garis) !important;
		border-radius: 8px;
		background: transparent !important;
		color: var(--dex-td-aksen) !important;
		font-size: 12px;
		font-weight: 700 !important;
		line-height: 26px;
		box-shadow: none;
	}
	#content.tata-basic #form-order .btn-info-bnb:hover { background: var(--dex-td-aksen-bg) !important; }
	#content.tata-basic #form-order .type-order-label {
		color: var(--dex-td-teks-2) !important;
		font-size: 13px !important;
		font-weight: 600;
		cursor: pointer;
	}
	#content.tata-basic #form-order input[type="radio"] { accent-color: var(--dex-td-aksen); cursor: pointer; }
	#content.tata-basic #form-order form.add-full-border {
		padding: 14px 16px 16px !important;
		border: 1px solid var(--dex-td-garis);
		border-radius: 14px;
	}
	#content.tata-basic #form-order .form-group { margin-bottom: 10px; }
	#content.tata-basic #form-order .balance-row {
		align-items: center;
		color: var(--dex-td-teks-2);
		font-size: 12px;
		font-variant-numeric: tabular-nums;
	}
	#content.tata-basic #form-order .balance-row label { color: var(--dex-td-teks-2); font-weight: 600; }
	#content.tata-basic #form-order .balance-row a {
		color: var(--dex-td-teks);
		font-weight: 700;
	}
	#content.tata-basic #form-order .balance-row a:hover { color: var(--dex-td-aksen); }
	#content.tata-basic #form-order .logo-buy { font-size: 13px; font-weight: 800; color: var(--dex-td-teks); }
	#content.tata-basic #form-order .logo-bg { width: 22px; height: 22px; border-radius: 50%; background: transparent; }
	#content.tata-basic #form-order .logo-bg img { width: 20px; height: 20px; border-radius: 50%; }
	#content.tata-basic #form-order .control-label {
		padding-top: 10px;
		color: var(--dex-td-teks-2);
		font-size: 12px;
		font-weight: 600;
	}
	#content.tata-basic #form-order .input-group.add-full-border {
		display: flex;
		align-items: stretch;
		width: 100%;
		overflow: hidden;
		border: 1px solid var(--dex-td-garis-2) !important;
		border-radius: 10px;
		background: var(--dex-td-input);
		transition: border-color .12s ease, box-shadow .12s ease;
	}
	#content.tata-basic #form-order .input-group.add-full-border:focus-within {
		border-color: var(--dex-td-aksen) !important;
		box-shadow: 0 0 0 3px var(--dex-td-aksen-bg);
	}
	#content.tata-basic #form-order .input-group .form-control {
		flex: 1 1 auto;
		float: none;
		width: auto;
		min-width: 0;
		height: 38px;
		padding: 0 12px;
		border: 0;
		background: var(--dex-td-input) !important;
		color: var(--dex-td-teks) !important;
		font-size: 13px;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		box-shadow: none;
	}
	#content.tata-basic #form-order .input-group .input-group-addon {
		display: flex;
		align-items: center;
		width: auto;
		padding: 0 12px;
		border: 0;
		background: var(--dex-td-isi) !important;
		color: var(--dex-td-teks-2) !important;
		font-size: 12px;
		font-weight: 700;
	}
	#content.tata-basic #form-order .row-percentages { gap: 6px; }
	#content.tata-basic #form-order .btn-percentages {
		flex: 1 1 0;
		min-width: 0;
		height: 28px;
		padding: 0 2px;
		white-space: nowrap;
		border: 1px solid var(--dex-td-garis) !important;
		border-radius: 8px;
		background: transparent !important;
		color: var(--dex-td-teks-2) !important;
		font-size: 12px;
		font-weight: 700;
		box-shadow: none;
	}
	#content.tata-basic #form-order .btn-percentages:hover {
		border-color: var(--dex-td-garis-2) !important;
		color: var(--dex-td-teks) !important;
	}
	#content.tata-basic #form-order .btn-percentages.percent-active {
		border-color: var(--dex-td-aksen) !important;
		background: var(--dex-td-aksen-bg) !important;
		color: var(--dex-td-aksen) !important;
	}
	#content.tata-basic #form-order .btn-buy,
	#content.tata-basic #form-order .btn-sell {
		height: 42px;
		margin-top: 4px;
		border-radius: 10px;
		color: #FFFFFF;
		box-shadow: none;
		transition: filter .12s ease;
	}
	/* warna tombol tetap (tidak ikut token gelap yang lebih terang) supaya teks putih tetap kontras */
	#content.tata-basic #form-order .btn-buy { background: #16A34A !important; border-color: #16A34A !important; }
	#content.tata-basic #form-order .btn-sell { background: #E11D48 !important; border-color: #E11D48 !important; }
	#content.tata-basic #form-order .btn-buy:hover,
	#content.tata-basic #form-order .btn-sell:hover { filter: brightness(1.07); }
	#content.tata-basic #form-order .btn-block strong {
		font-size: 14px;
		font-weight: 800;
	}

	/* ---------- tabel: order book, order aktif, riwayat saya ---------- */
	#content.tata-basic #order-book .table > thead > tr > th,
	#content.tata-basic .blok-order-aktif .table > thead > tr > th,
	#content.tata-basic #my-trade-history .table > thead > tr > th {
		padding: 8px 12px !important;
		border-bottom: 1px solid var(--dex-td-garis) !important;
		background: transparent !important;
		color: var(--dex-td-teks-2) !important;
		font-size: 11px !important;
		font-weight: 600 !important;
		line-height: 1.4;
		white-space: nowrap;
	}
	#content.tata-basic #order-book .table > thead > tr { font-size: 11px !important; }
	#content.tata-basic #order-book .table > tbody > tr > td,
	#content.tata-basic .blok-order-aktif .table > tbody > tr > td,
	#content.tata-basic #my-trade-history .table > tbody > tr > td {
		padding: 5px 12px;
		border: 0;
		color: var(--dex-td-teks);
		font-size: 12px;
		font-weight: 500;
		font-variant-numeric: tabular-nums;
	}
	#content.tata-basic #order-book .table > tbody > tr { cursor: pointer; }
	#content.tata-basic #order-book .table > tbody > tr:hover,
	#content.tata-basic .blok-order-aktif .table > tbody > tr:hover,
	#content.tata-basic #my-trade-history .table > tbody > tr:hover {
		background-color: var(--dex-td-hover);
	}
	#content.tata-basic #order-book .table > tbody > tr.high_demand > td { font-weight: 800; }
	#content.tata-basic .blok-order-aktif .table > tbody > tr > td.f-w-700 { font-weight: 600 !important; }
	#content.tata-basic .blok-order-aktif .table > tbody > tr > td { padding-top: 8px; padding-bottom: 8px; }
	#content.tata-basic #my-trade-history .table > tbody > tr > td { padding-top: 7px; padding-bottom: 7px; }
	#content.tata-basic #order-book .text-sell,
	#content.tata-basic .blok-order-aktif .text-sell,
	#content.tata-basic #my-trade-history .text-sell { color: var(--dex-td-turun) !important; }
	#content.tata-basic #order-book .text-buy,
	#content.tata-basic .blok-order-aktif .text-buy,
	#content.tata-basic #my-trade-history .text-buy { color: var(--dex-td-naik) !important; }
	#content.tata-basic .blok-order-aktif .text-black,
	#content.tata-basic #my-trade-history .text-black { color: var(--dex-td-teks) !important; }
	#content.tata-basic .blok-order-aktif .table-order { font-weight: 500 !important; }
	#content.tata-basic .blok-order-aktif .btn-cancel-order {
		height: 24px;
		padding: 0 10px !important;
		border: 1px solid var(--dex-td-turun-bg) !important;
		border-radius: 7px;
		background: var(--dex-td-turun-bg);
		color: var(--dex-td-turun) !important;
		font-size: 11px !important;
		font-weight: 700 !important;
	}

	/* =====================================================================
	   BLOK TICKER ATAS (#header-market)
	   Satu bar seperti .gl-atas: [ikon + BTC/IDR + nama] [Harga | 24j | Low | High | Vol]
	   lalu di bawahnya strip dompet: Saldo BTC + Setor/Tarik | Saldo IDR + Setor/Tarik.
	   Tombol jadi ghost; primer hanya satu (Setor {pair}).
	   Struktur asli dibongkar dengan display:contents (tanpa mengubah markup).
	   ===================================================================== */
	@media (min-width: 991px) {
		#content.tata-basic #header-market > .panel { padding-top: 0 !important; }
		#content.tata-basic #header-market > .panel > .panel-body { padding: 14px 18px !important; }
		#content.tata-basic #header-market > .panel > .panel-body > .row {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			column-gap: 24px;
			row-gap: 12px;
		}
		#content.tata-basic #header-market > .panel > .panel-body > .row::before,
		#content.tata-basic #header-market > .panel > .panel-body > .row::after { display: none; }
		#content.tata-basic #header-market > .panel > .panel-body > .row > .col-md-7 { display: contents; }
		#content.tata-basic #header-market > .panel > .panel-body > .row > .col-md-7 > .view-desktop { display: contents !important; }

		/* identitas pasar */
		#content.tata-basic #header-market .view-desktop > .col-md-3 {
			order: 1;
			display: flex;
			align-items: center;
			gap: 10px;
			flex: 0 0 auto;
			float: none;
			width: auto;
			padding: 0;
		}
		#content.tata-basic #header-market .view-desktop > .col-md-3 > .pull-left { float: none; }
		#content.tata-basic #header-market .view-desktop > .col-md-3 img {
			display: block;
			width: 34px !important;
			height: 34px;
			border-radius: 50%;
			object-fit: cover;
		}
		#content.tata-basic #header-market .asset-title {
			margin-left: 0 !important;
			color: var(--dex-td-teks);
			font-size: 17px;
			font-weight: 800;
			letter-spacing: -.2px;
			line-height: 1.2;
		}
		#content.tata-basic #header-market .asset-sub-title {
			float: none !important;
			margin-left: 0 !important;
			color: var(--dex-td-teks-2);
			font-size: 12px;
			font-weight: 500;
			line-height: 1.3;
		}

		/* statistik (.gl-stat): label di atas, angka di bawah */
		#content.tata-basic #header-market .box-head {
			order: 2;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			column-gap: 24px;
			row-gap: 8px;
			flex: 1 1 0;
			float: none;
			width: auto;
			min-width: 0;
			padding: 0 !important;
			font-size: 13px;
		}
		#content.tata-basic #header-market .box-head > .header-row { display: contents; }
		#content.tata-basic #header-market .box-head > .header-row::before,
		#content.tata-basic #header-market .box-head > .header-row::after { display: none; }
		#content.tata-basic #header-market .box-head > .header-row > [class*="col-"] {
			display: flex;
			flex-direction: column-reverse;
			align-items: flex-start;
			gap: 2px;
			float: none;
			width: auto;
			padding: 0 !important;
			border: 0 !important;
			text-align: left;
			white-space: nowrap;
		}
		#content.tata-basic #header-market .box-head .header-row > [class*="col-"] > .row { margin: 0; }
		#content.tata-basic #header-market .box-head .header-title {
			color: var(--dex-td-teks-2);
			font-size: 11px;
			font-weight: 600;
		}
		#content.tata-basic #header-market .box-head .header-value {
			color: var(--dex-td-teks);
			font-size: 13px;
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			line-height: 1.35;
		}
		#content.tata-basic #header-market .box-head #last_price_label.header-value {
			font-size: 20px;
			font-weight: 800;
			letter-spacing: -.3px;
			line-height: 1.2;
		}
		/* 24h change sebagai pill (.gl-pill). Warna datang dari .text-green/.text-red yang
		   dipasang JS lama di div luar (setelah update socket) atau di span dalam (render awal). */
		#content.tata-basic #header-market .box-head div[id="24h_change_label"].header-value {
			padding: 1px 8px;
			border-radius: 8px;
			background: var(--dex-td-hover);
			font-weight: 800;
		}
		#content.tata-basic #header-market .box-head div[id="24h_change_label"].text-green { background: var(--dex-td-naik-bg); }
		#content.tata-basic #header-market .box-head div[id="24h_change_label"].text-red { background: var(--dex-td-turun-bg); }
		#content.tata-basic #header-market .box-head div[id="24h_change_label"]:has(.text-green) { background: var(--dex-td-naik-bg); }
		#content.tata-basic #header-market .box-head div[id="24h_change_label"]:has(.text-red) { background: var(--dex-td-turun-bg); }
		#content.tata-basic #header-market .box-head .text-green { color: var(--dex-td-naik) !important; }
		#content.tata-basic #header-market .box-head .text-red { color: var(--dex-td-turun) !important; }
		/* Vol 24h (div terpisah). Tanpa JS: satu baris rapi; dengan JS: label kecil di atas angka. */
		#content.tata-basic #header-market .box-head > .row.header-value {
			display: block;
			margin: 0;
			padding: 0 !important;
			border: 0 !important;
			text-align: left;
			white-space: nowrap;
			font-size: 13px;
		}
		#content.tata-basic #header-market .box-head > .row.header-value::before,
		#content.tata-basic #header-market .box-head > .row.header-value::after { display: none; }
		#content.tata-basic #header-market .box-head > .row.header-value.dex-td-vol {
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			column-gap: 4px;
			row-gap: 2px;
			max-width: 220px;
		}
		#content.tata-basic #header-market .dex-td-vol > .dex-td-label {
			flex: 0 0 100%;
			color: var(--dex-td-teks-2);
			font-size: 11px;
			font-weight: 600;
		}
		#content.tata-basic #header-market .dex-td-vol > .dex-td-unit {
			color: var(--dex-td-teks-2);
			font-size: 11px;
			font-weight: 600;
		}

		/* strip dompet */
		#content.tata-basic #header-market .view-desktop > .col-md-9 {
			order: 3;
			display: flex;
			flex: 1 1 100%;
			flex-wrap: wrap;
			align-items: center;
			gap: 10px 28px;
			float: none;
			width: auto;
			padding: 12px 0 0;
			border-top: 1px solid var(--dex-td-garis);
		}
		#content.tata-basic #header-market .view-desktop > .col-md-9 > .width-percent-50 {
			display: flex;
			flex: 0 1 auto;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			gap: 8px 12px;
			width: auto;
		}
		#content.tata-basic #header-market .width-percent-50 > .row {
			margin: 0 !important;
			order: 1;
		}
		#content.tata-basic #header-market .width-percent-50 > .row::before,
		#content.tata-basic #header-market .width-percent-50 > .row::after { display: none; }
		#content.tata-basic #header-market .width-percent-50 > .sub-balance {
			order: 0;
			color: var(--dex-td-teks-2);
			font-size: 12px;
			font-weight: 600;
			font-variant-numeric: tabular-nums;
			white-space: nowrap;
		}
		#content.tata-basic #header-market .sub-balance a {
			color: var(--dex-td-teks);
			font-weight: 800;
		}
		#content.tata-basic #header-market .sub-balance a:hover { color: var(--dex-td-aksen); }
		#content.tata-basic #header-market .sub-balance br { display: none; }
		#content.tata-basic #header-market .btn-balance {
			flex: 0 0 auto !important;
			height: 30px;
			padding: 0 12px !important;
			border: 1px solid var(--dex-td-garis-2) !important;
			border-radius: 8px;
			background: transparent !important;
			color: var(--dex-td-teks) !important;
			font-size: 12px !important;
			font-weight: 700 !important;
			line-height: 28px;
			box-shadow: none;
		}
		#content.tata-basic #header-market .btn-balance:hover { background: var(--dex-td-hover) !important; }
		/* satu-satunya tombol primer: Setor {pair} (kolom kedua, tombol pertama) */
		#content.tata-basic #header-market .view-desktop > .col-md-9 > .width-percent-50:last-child .btn-balance:first-child {
			border-color: var(--dex-td-aksen) !important;
			background: var(--dex-td-aksen) !important;
			color: #FFFFFF !important;
		}
		#content.tata-basic #header-market .view-desktop > .col-md-9 > .width-percent-50:last-child .btn-balance:first-child:hover { filter: brightness(1.08); }
		#page-container.darkmode #content.tata-basic #header-market .view-desktop > .col-md-9 > .width-percent-50:last-child .btn-balance:first-child,
		body.darkmode-page #content.tata-basic #header-market .view-desktop > .col-md-9 > .width-percent-50:last-child .btn-balance:first-child {
			background: #2563EB !important;
			border-color: #2563EB !important;
		}
	}

	/* layar 991-1279: jarak lebih rapat supaya statistik tidak terlalu cepat turun baris */
	@media (min-width: 991px) and (max-width: 1279px) {
		#content.tata-basic #header-market > .panel > .panel-body > .row,
		#content.tata-basic #header-market .box-head { column-gap: 16px; }
		#content.tata-basic #header-market .box-head #last_price_label.header-value { font-size: 18px; }
		#content.tata-basic #header-market .view-desktop > .col-md-9 { column-gap: 20px; }
	}

	/* =====================================================================
	   >= 992px: daftar market mengisi tinggi panel kanan.
	   Dulu .side-market bertinggi tetap (calc(9.6vw + 480px), .with-order, dst.);
	   karena chip urut menambah satu baris, daftar kini diregangkan mengikuti
	   tinggi kolom (baris .baris-atas = flex stretch) supaya tidak meluber.
	   Tab Obrolan tidak disentuh.
	   ===================================================================== */
	@media (min-width: 992px) {
		#content.tata-basic .kolom-pasar #side-market-tab {
			display: flex;
			flex-direction: column;
		}
		#content.tata-basic .kolom-pasar #side-market-tab > #tab_right_side { flex: 0 0 auto; }
		#content.tata-basic .kolom-pasar #side-market-tab > .tab-content {
			flex: 1 1 0;
			min-height: 0;
			height: auto;
		}
		#content.tata-basic .kolom-pasar #side-market-tab > .tab-content > #market.active {
			display: flex;
			flex-direction: column;
			height: 100%;
		}
		#content.tata-basic .kolom-pasar #market > .nav-tabs { flex: 0 0 auto; }
		#content.tata-basic .kolom-pasar #market > .tab-content {
			flex: 1 1 0;
			min-height: 0;
		}
		#content.tata-basic .kolom-pasar #market > .tab-content > .tab-pane.active {
			display: flex;
			flex-direction: column;
			height: 100%;
		}
		#content.tata-basic .kolom-pasar #market > .tab-content > .tab-pane.active > * { flex: 0 0 auto; }
		#content.tata-basic .kolom-pasar #market > .tab-content > .tab-pane.active > .side-market {
			flex: 1 1 0;
			min-height: 360px;
			height: auto !important;
			padding-bottom: 6px;
		}
	}
}

/* ===== [17 Okt 2026] masukan Iqbal: (1) daftar market terlalu lebar -> kolom kanan 340px seperti panel pasar
   grafik lanjutan; (2) kartu putih bersarang (sudut membulat tidak konsisten) -> hanya kartu luar yang jadi kartu,
   isi di dalamnya rata tanpa border/radius/latar sendiri. Cakupan tetap #content.tata-basic (Pro Mode tidak kena). */
@media (min-width: 1200px) {
	#content.tata-basic .baris-atas,
	#content.tata-basic .baris-bawah { display: flex; flex-wrap: nowrap; }
	#content.tata-basic .baris-atas::before, #content.tata-basic .baris-atas::after,
	#content.tata-basic .baris-bawah::before, #content.tata-basic .baris-bawah::after { display: none; }
	#content.tata-basic .baris-atas > .col-md-8,
	#content.tata-basic .baris-bawah > .col-md-8 { float: none; flex: 1 1 auto; width: auto; min-width: 0; }
	#content.tata-basic .baris-atas > .col-md-4,
	#content.tata-basic .baris-bawah > .col-md-4 { float: none; flex: 0 0 340px; width: 340px; max-width: 340px; }
}
@media (min-width: 992px) {
	/* form Beli/Jual: kartu luar "Tempat Order" saja; dua form di dalamnya rata, dipisah garis tipis */
	#content.tata-basic .blok-form > .col-md-12 > .panel > .panel-heading { background: transparent !important; border-radius: 0 !important; }
	#content.tata-basic #form-order form.add-full-border {
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}
	#content.tata-basic #form-order form[id^="form_sell"].add-full-border { border-left: 1px solid var(--dex-td-garis) !important; }

	/* order book: kartu luar saja; "Order Jual" & "Order Beli" rata di dalamnya, dipisah garis tipis */
	#content.tata-basic #order-book .kolom-jual .panel.add-full-border,
	#content.tata-basic #order-book .kolom-beli .panel.add-full-border {
		margin-top: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}
	#content.tata-basic #order-book .kolom-beli .panel.add-full-border { border-left: 1px solid var(--dex-td-garis) !important; }
	#content.tata-basic #order-book .panel-heading,
	#content.tata-basic #order-book .panel-body { background: transparent !important; border-radius: 0 !important; }
	#content.tata-basic .kolom-buku > .row > .col-md-12 > .panel,
	#content.tata-basic .kolom-buku > .row > .col-md-12 > .panel > .panel-body { overflow: hidden; }
}

/* ===== [17 Okt 2026] masukan Iqbal: tab Obrolan lebih rapi & kartu "Riwayat Pertukaran Saya" seragam dengan
   order book (sejajar atas, tinggi sama, radius & garis sama, tanpa kepala abu-abu, tabel muat 340px). */
@media (min-width: 992px) {
	/* --- kartu bawah: order book & riwayat seragam --- */
	#content.tata-basic .kolom-buku > .row > .col-md-12 > .panel,
	#content.tata-basic .blok-milik #history-group {
		border: 1px solid var(--dex-td-garis) !important;
		border-radius: var(--dex-td-radius) !important;
		background: var(--dex-td-kartu) !important;
		box-shadow: none !important;
		overflow: hidden;
	}
	#content.tata-basic .blok-milik > .col-md-12 { padding-top: 0 !important; }
	#content.tata-basic .blok-milik #history-group { display: flex; flex-direction: column; height: 100%; margin: 0 !important; }
	#content.tata-basic .blok-milik #history-heading {
		flex: 0 0 auto;
		padding: 14px 16px 10px !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
	}
	#content.tata-basic .blok-milik #history-heading .sub-header-title {
		display: flex; align-items: center; justify-content: space-between; gap: 8px; float: none; width: 100%;
	}
	#content.tata-basic .blok-milik #history-heading .sub-header-title::before,
	#content.tata-basic .blok-milik #history-heading .sub-header-title::after { display: none; }
	#content.tata-basic .blok-milik #history-heading .sub-header-title > * { float: none !important; }
	#content.tata-basic .blok-milik #history-heading .text-title { font-size: 15px; font-weight: 700; }
	#content.tata-basic .blok-milik #history-heading .view-all-btn { font-size: 12px; font-weight: 700; white-space: nowrap; }
	#content.tata-basic .blok-milik #history-group > .panel-body {
		flex: 1 1 auto; min-height: 0; height: auto !important; padding: 0 !important; background: transparent !important;
	}
	#content.tata-basic .blok-milik #my-trade-history { height: 100% !important; max-height: none !important; }
	#content.tata-basic .blok-milik #my-trade-history table { width: 100% !important; table-layout: fixed; }
	#content.tata-basic .blok-milik #my-trade-history th,
	#content.tata-basic .blok-milik #my-trade-history td {
		padding: 8px 6px !important; font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		font-variant-numeric: tabular-nums;
	}
	#content.tata-basic .blok-milik #my-trade-history th:first-child,
	#content.tata-basic .blok-milik #my-trade-history td:first-child { padding-left: 16px !important; width: 25%; }
	#content.tata-basic .blok-milik #my-trade-history th:last-child,
	#content.tata-basic .blok-milik #my-trade-history td:last-child { padding-right: 16px !important; text-align: right; }

	/* --- Obrolan --- */
	#content.tata-basic .kolom-pasar #chat.active { display: flex; flex-direction: column; height: 100%; }
	#content.tata-basic .kolom-pasar #chat .chat-container { flex: 1 1 auto; min-height: 0; height: auto !important; }
	#content.tata-basic .kolom-pasar ul.chats { margin: 0; padding: 8px 6px; list-style: none; }
	#content.tata-basic .kolom-pasar ul.chats > li {
		margin: 0 !important; padding: 7px 8px !important; border: 0 !important; border-radius: 12px; background: transparent !important;
	}
	#content.tata-basic .kolom-pasar ul.chats > li:hover { background: var(--dex-td-hover) !important; }
	#content.tata-basic .kolom-pasar ul.chats > li > .message {
		display: flex; align-items: flex-start; gap: 9px; margin: 0 !important; padding: 0 !important;
		border: 0 !important; background: transparent !important; color: var(--dex-td-teks);
	}
	#content.tata-basic .kolom-pasar .dex-td-av {
		flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
		background: hsl(var(--av-h, 210), 75%, 92%); color: hsl(var(--av-h, 210), 55%, 35%); font-size: 12px; font-weight: 800;
	}
	body.darkmode-page #content.tata-basic .kolom-pasar .dex-td-av { background: hsla(var(--av-h, 210), 70%, 55%, .2); color: hsl(var(--av-h, 210), 80%, 75%); }
	#content.tata-basic .kolom-pasar .dex-td-chat-isi { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
	#content.tata-basic .kolom-pasar .dex-td-chat-isi > a {
		display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; line-height: 1.3;
		color: var(--dex-td-teks-2) !important; text-decoration: none !important;
	}
	#content.tata-basic .kolom-pasar .dex-td-chat-isi > a:hover { color: var(--dex-td-aksen) !important; }
	#content.tata-basic .kolom-pasar .dex-td-chat-isi > a small { font-size: 9px !important; line-height: 1; }
	#content.tata-basic .kolom-pasar .dex-td-chat-isi > a .icon-diamond { color: var(--dex-td-aksen) !important; }
	#content.tata-basic .kolom-pasar .dex-td-chat-admin .dex-td-chat-isi > a { color: var(--dex-td-turun) !important; }
	#content.tata-basic .kolom-pasar .dex-td-chat-mitra .dex-td-chat-isi > a { color: #D97706 !important; }
	#content.tata-basic .kolom-pasar .dex-td-chat-teks {
		font-size: 13px; line-height: 1.45; color: var(--dex-td-teks); overflow-wrap: anywhere; word-break: break-word;
	}
	/* kotak tulis pesan */
	#content.tata-basic .kolom-pasar #chat > .row {
		flex: 0 0 auto; margin: 0 !important; padding: 10px 8px 6px !important; border-top: 1px solid var(--dex-td-garis);
	}
	#content.tata-basic .kolom-pasar #chat > .row > .col-md-12 {
		display: flex; flex-direction: column; gap: 8px; float: none; width: 100%; padding: 0 !important;
	}
	#content.tata-basic .kolom-pasar #chat > .row > .col-md-12::before,
	#content.tata-basic .kolom-pasar #chat > .row > .col-md-12::after { display: none; }
	#content.tata-basic .kolom-pasar #chat > .row > .col-md-12 > div { float: none; width: 100% !important; padding: 0 !important; }
	#content.tata-basic .kolom-pasar #chat > .row > .col-md-12 > div:last-child { display: flex; justify-content: flex-end; gap: 6px; }
	#content.tata-basic .kolom-pasar #chat #message {
		height: 44px !important; min-height: 44px; max-height: 96px; padding: 11px 12px !important;
		border: 1px solid var(--dex-td-garis) !important; border-radius: 12px !important;
		background: var(--dex-td-input, transparent) !important; color: var(--dex-td-teks) !important; font-size: 13px; box-shadow: none !important;
	}
	#content.tata-basic .kolom-pasar #chat #message:focus { border-color: var(--dex-td-aksen) !important; box-shadow: 0 0 0 3px var(--dex-td-aksen-bg) !important; }
	#content.tata-basic .kolom-pasar #chat #message:disabled { opacity: .75; cursor: not-allowed; }
	#content.tata-basic .kolom-pasar #chat .btn-info {
		width: 34px; height: 34px; padding: 0 !important; border: 1px solid var(--dex-td-garis) !important; border-radius: 10px !important;
		background: transparent !important; color: var(--dex-td-teks-2) !important; box-shadow: none !important;
	}
	#content.tata-basic .kolom-pasar #chat .btn-info:hover { color: var(--dex-td-aksen) !important; border-color: var(--dex-td-aksen) !important; }
}

/* ===== [17 Okt 2026] masukan Iqbal: (1) panah kecil di kiri avatar obrolan = ::before "ekor balon" CSS tema lama;
   (2) jarak kartu kiri-kanan baris bawah (order book -> riwayat, 20px) beda dengan baris atas (grafik -> market, 4px)
   -> baris bawah ikut 4px; (3) judul Riwayat satu baris & kolom tabel tidak terpotong "...". */
@media (min-width: 992px) {
	#content.tata-basic .kolom-pasar ul.chats > li > .message::before,
	#content.tata-basic .kolom-pasar ul.chats > li > .message::after,
	#content.tata-basic .kolom-pasar ul.chats > li::before,
	#content.tata-basic .kolom-pasar ul.chats > li::after { display: none !important; content: none !important; }

	#content.tata-basic .blok-milik #history-heading .text-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
	#content.tata-basic .blok-milik #history-heading .view-all-btn { font-size: 11px; flex: 0 0 auto; }
	#content.tata-basic .blok-milik #my-trade-history th { white-space: normal !important; line-height: 1.25; vertical-align: bottom; font-size: 10px !important; }
	#content.tata-basic .blok-milik #my-trade-history th:nth-child(1), #content.tata-basic .blok-milik #my-trade-history td:nth-child(1) { width: 22% !important; white-space: normal !important; line-height: 1.3; }
	#content.tata-basic .blok-milik #my-trade-history th:nth-child(2), #content.tata-basic .blok-milik #my-trade-history td:nth-child(2) { width: 30% !important; }
	#content.tata-basic .blok-milik #my-trade-history th:nth-child(3), #content.tata-basic .blok-milik #my-trade-history td:nth-child(3) { width: 26% !important; }
	#content.tata-basic .blok-milik #my-trade-history th:nth-child(4), #content.tata-basic .blok-milik #my-trade-history td:nth-child(4) { width: 22% !important; }
	#content.tata-basic .blok-milik #my-trade-history td { text-overflow: clip !important; }
}
@media (min-width: 992px) {
	/* baris bawah mengikuti baris atas: jarak kartu 4px (2px + 2px, keputusan 14 Okt di view basic-trading-bnb) */
	#content.tata-basic:not(.tata-pro) .baris-bawah > .col-md-8 { padding-right: 2px !important; }
	#content.tata-basic:not(.tata-pro) .baris-bawah > .col-md-4 { padding-left: 2px !important; }
}

/* ===== [17 Okt 2026] masukan Iqbal: sudut kartu konsisten, garis di atas "Tempat Order", garis tengah sejajar ===== */
@media (min-width: 992px) {
	/* isi kartu (panel-body) berlatar putih persegi menutupi sudut membulat kartu induk -> ikut transparan */
	#content.tata-basic #header-market > .panel > .panel-body,
	#content.tata-basic .blok-form > .col-md-12 > .panel > .panel-body,
	#content.tata-basic .kolom-pasar #side-market-tab > .tab-content,
	#content.tata-basic .kolom-pasar #side-market-tab .tab-content { background: transparent !important; }
	/* panel-heading kosong (tinggi 1px) di kartu Tempat Order hanya menampilkan garis bawah -> dihilangkan */
	#content.tata-basic .blok-form > .col-md-12 > .panel > .panel-heading { border-bottom: 0 !important; }
	/* garis pemisah Order Jual | Order Beli dipasang di kolom (bukan panel dalam yang menjorok 5px) supaya
	   sejajar dengan garis Beli | Jual di Tempat Order (keduanya tepat di tengah kartu) */
	#content.tata-basic #order-book .kolom-beli .panel.add-full-border { border-left: 0 !important; }
	#content.tata-basic #order-book .kolom-beli { border-left: 1px solid var(--dex-td-garis); }
}
@media (min-width: 992px) {
	/* simbol panjang (mis. 1MBABYDOGE/IDR) menimpa kolom harga: teks simbol adalah node teks langsung di grid
	   (tidak bisa diberi ellipsis) -> dipotong di batas kolom */
	#content.tata-basic .kolom-pasar .side-market .asset-col { overflow: hidden; }
}

/* ===== [17 Okt 2026] masukan Iqbal: (1) obrolan mode Pro disamakan dengan Basic (aturan & token di bawah = salinan
   blok tata-basic dengan prefix #content.tata-pro; JS obrolan di trading-desktop.js kini juga jalan di tata-pro);
   (2) daftar market Basic memakai tab "<PAIR> | Favorit n" + petunjuk "/" seperti Pro. ===== */
@media (min-width: 992px) {
	#content.tata-pro {
		--dex-td-kartu: #FFFFFF;
		--dex-td-garis: rgba(15, 23, 42, .08);
		--dex-td-garis-2: rgba(15, 23, 42, .14);
		--dex-td-teks: #0F172A;
		--dex-td-teks-2: #64748B;
		--dex-td-hover: #F1F5F9;
		--dex-td-isi: #F8FAFC;
		--dex-td-input: #FFFFFF;
		--dex-td-aksen: #2563EB;
		--dex-td-aksen-bg: #EFF6FF;
		--dex-td-naik: #16A34A;
		--dex-td-naik-bg: #F0FDF4;
		--dex-td-turun: #E11D48;
		--dex-td-turun-bg: #FFF1F2;
		--dex-td-bintang: #F59E0B;
		/* latar kepala daftar Market. 14 Okt diputuskan abu-abu (#dde4ea); redesain ini
		   mengikuti grafik lanjutan (tanpa pita). Untuk kembali abu-abu cukup ubah nilai ini. */
		--dex-td-kepala: transparent;
		--dex-td-radius: 16px;
	}
	#page-container.darkmode #content.tata-pro,
	body.darkmode-page #content.tata-pro {
		--dex-td-kartu: var(--surface, #121C30);
		--dex-td-garis: rgba(255, 255, 255, .08);
		--dex-td-garis-2: rgba(255, 255, 255, .16);
		--dex-td-teks: #F1F5F9;
		--dex-td-teks-2: #94A3B8;
		--dex-td-hover: rgba(255, 255, 255, .05);
		--dex-td-isi: rgba(255, 255, 255, .04);
		--dex-td-input: #0e2739;
		--dex-td-aksen: #60A5FA;
		--dex-td-aksen-bg: rgba(37, 99, 235, .18);
		--dex-td-naik: #4ADE80;
		--dex-td-naik-bg: rgba(74, 222, 128, .12);
		--dex-td-turun: #FB7185;
		--dex-td-turun-bg: rgba(251, 113, 133, .12);
	}
	/* --- Obrolan --- */
	#content.tata-pro .kolom-pasar #chat.active { display: flex; flex-direction: column; height: 100%; }
	#content.tata-pro .kolom-pasar #chat .chat-container { flex: 1 1 auto; min-height: 0; height: auto !important; }
	#content.tata-pro .kolom-pasar ul.chats { margin: 0; padding: 8px 6px; list-style: none; }
	#content.tata-pro .kolom-pasar ul.chats > li {
		margin: 0 !important; padding: 7px 8px !important; border: 0 !important; border-radius: 12px; background: transparent !important;
	}
	#content.tata-pro .kolom-pasar ul.chats > li:hover { background: var(--dex-td-hover) !important; }
	#content.tata-pro .kolom-pasar ul.chats > li > .message {
		display: flex; align-items: flex-start; gap: 9px; margin: 0 !important; padding: 0 !important;
		border: 0 !important; background: transparent !important; color: var(--dex-td-teks);
	}
	#content.tata-pro .kolom-pasar .dex-td-av {
		flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
		background: hsl(var(--av-h, 210), 75%, 92%); color: hsl(var(--av-h, 210), 55%, 35%); font-size: 12px; font-weight: 800;
	}
	body.darkmode-page #content.tata-pro .kolom-pasar .dex-td-av { background: hsla(var(--av-h, 210), 70%, 55%, .2); color: hsl(var(--av-h, 210), 80%, 75%); }
	#content.tata-pro .kolom-pasar .dex-td-chat-isi { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
	#content.tata-pro .kolom-pasar .dex-td-chat-isi > a {
		display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; line-height: 1.3;
		color: var(--dex-td-teks-2) !important; text-decoration: none !important;
	}
	#content.tata-pro .kolom-pasar .dex-td-chat-isi > a:hover { color: var(--dex-td-aksen) !important; }
	#content.tata-pro .kolom-pasar .dex-td-chat-isi > a small { font-size: 9px !important; line-height: 1; }
	#content.tata-pro .kolom-pasar .dex-td-chat-isi > a .icon-diamond { color: var(--dex-td-aksen) !important; }
	#content.tata-pro .kolom-pasar .dex-td-chat-admin .dex-td-chat-isi > a { color: var(--dex-td-turun) !important; }
	#content.tata-pro .kolom-pasar .dex-td-chat-mitra .dex-td-chat-isi > a { color: #D97706 !important; }
	#content.tata-pro .kolom-pasar .dex-td-chat-teks {
		font-size: 13px; line-height: 1.45; color: var(--dex-td-teks); overflow-wrap: anywhere; word-break: break-word;
	}
	/* kotak tulis pesan */
	#content.tata-pro .kolom-pasar #chat > .row {
		flex: 0 0 auto; margin: 0 !important; padding: 10px 8px 6px !important; border-top: 1px solid var(--dex-td-garis);
	}
	#content.tata-pro .kolom-pasar #chat > .row > .col-md-12 {
		display: flex; flex-direction: column; gap: 8px; float: none; width: 100%; padding: 0 !important;
	}
	#content.tata-pro .kolom-pasar #chat > .row > .col-md-12::before,
	#content.tata-pro .kolom-pasar #chat > .row > .col-md-12::after { display: none; }
	#content.tata-pro .kolom-pasar #chat > .row > .col-md-12 > div { float: none; width: 100% !important; padding: 0 !important; }
	#content.tata-pro .kolom-pasar #chat > .row > .col-md-12 > div:last-child { display: flex; justify-content: flex-end; gap: 6px; }
	#content.tata-pro .kolom-pasar #chat #message {
		height: 44px !important; min-height: 44px; max-height: 96px; padding: 11px 12px !important;
		border: 1px solid var(--dex-td-garis) !important; border-radius: 12px !important;
		background: var(--dex-td-input, transparent) !important; color: var(--dex-td-teks) !important; font-size: 13px; box-shadow: none !important;
	}
	#content.tata-pro .kolom-pasar #chat #message:focus { border-color: var(--dex-td-aksen) !important; box-shadow: 0 0 0 3px var(--dex-td-aksen-bg) !important; }
	#content.tata-pro .kolom-pasar #chat #message:disabled { opacity: .75; cursor: not-allowed; }
	#content.tata-pro .kolom-pasar #chat .btn-info {
		width: 34px; height: 34px; padding: 0 !important; border: 1px solid var(--dex-td-garis) !important; border-radius: 10px !important;
		background: transparent !important; color: var(--dex-td-teks-2) !important; box-shadow: none !important;
	}
	#content.tata-pro .kolom-pasar #chat .btn-info:hover { color: var(--dex-td-aksen) !important; border-color: var(--dex-td-aksen) !important; }
	#content.tata-pro .kolom-pasar ul.chats > li > .message::before,
	#content.tata-pro .kolom-pasar ul.chats > li > .message::after,
	#content.tata-pro .kolom-pasar ul.chats > li::before,
	#content.tata-pro .kolom-pasar ul.chats > li::after { display: none !important; content: none !important; }

	/* --- Basic: tab pair + Favorit (dibuat trading-desktop.js), petunjuk "/" di kolom cari --- */
	#content.tata-basic #market > ul.nav.dex-td-pair-tunggal { display: none !important; }
	#content.tata-basic .kolom-pasar .search-box::after {
		content: '/'; display: inline-grid !important; place-items: center; flex: 0 0 18px; width: 18px; height: 18px;
		border: 1px solid var(--dex-td-garis-2); border-radius: 5px; color: var(--dex-td-teks-2); font-size: 10px; font-weight: 800;
	}
	#content.tata-basic .kolom-pasar .search-box:focus-within::after { display: none !important; }
	#content.tata-basic .dex-td-pasar-tab { display: flex; gap: 4px; margin: 8px 12px 0; }
	#content.tata-basic .dex-td-pasar-tab button {
		display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 0; border-radius: 8px;
		background: transparent; color: var(--dex-td-teks-2); font-size: 12px; font-weight: 700; cursor: pointer;
	}
	#content.tata-basic .dex-td-pasar-tab button:hover { background: var(--dex-td-hover); color: var(--dex-td-teks); }
	#content.tata-basic .dex-td-pasar-tab button[aria-pressed="true"] { background: var(--dex-td-aksen-bg); color: var(--dex-td-aksen); }
	#content.tata-basic .dex-td-pasar-tab button:focus-visible { outline: 2px solid var(--dex-td-aksen); outline-offset: 1px; }
	#content.tata-basic .dex-td-pasar-tab svg { width: 13px; height: 13px; fill: var(--dex-td-bintang); stroke: var(--dex-td-bintang); stroke-width: 1.5; stroke-linejoin: round; }
	#content.tata-basic .dex-td-jml {
		display: inline-grid; place-items: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px;
		background: var(--dex-td-hover); color: var(--dex-td-teks-2); font-size: 10px; font-weight: 800;
	}
	#content.tata-basic .kolom-pasar tr.dex-td-tersaring { display: none !important; }
	#content.tata-basic .dex-td-pasar-kosong {
		display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px;
		color: var(--dex-td-teks-2); font-size: 12px; text-align: center;
	}
	#content.tata-basic .dex-td-pasar-kosong[hidden] { display: none; }
	#content.tata-basic .dex-td-pasar-kosong p { margin: 0; }
	#content.tata-basic .dex-td-pasar-kosong svg { width: 26px; height: 26px; fill: none; stroke: var(--dex-td-bintang); stroke-width: 1.6; stroke-linejoin: round; }
}