/* ========== Crypto prices page (/crypto-prices/) ========== */
.px { --px-up: #0e9f6e; --px-down: #e0364f; }
:root[data-theme="dark"] .px { --px-up: #34d399; --px-down: #fb7185; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .px { --px-up: #34d399; --px-down: #fb7185; } }
.px-wrap { max-width: 1400px; }
.px [dir="ltr"] { unicode-bidi: isolate; }

/* Hero */
.px-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--night); color: #cfd5ea; padding-block: clamp(24px, 4vw, 44px) clamp(88px, 10vw, 120px); }
.px-hero__bg { position: absolute; inset: 0; z-index: -1; }
.px-hero__bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 60% 0%, #000 25%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 60% 0%, #000 25%, transparent 75%); }
.px-hero__bg span { position: absolute; border-radius: 50%; filter: blur(90px); }
.px-hero__bg span:nth-child(1) { width: 560px; height: 560px; background: #5b4cff; opacity: .45; top: -260px; inset-inline-end: -120px; }
.px-hero__bg span:nth-child(2) { width: 420px; height: 420px; background: #18d6b8; opacity: .22; bottom: -260px; inset-inline-start: 5%; }
.px-hero .crumbs ol, .px-hero .crumbs a, .px-hero .crumbs li::after { color: #8d96b8; }
.px-hero .eyebrow { color: #a59bff; }
.px-hero .eyebrow .dot { margin-inline-end: .25rem; }
.px-hero__title { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1.75rem; }

.px-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.px-stat { display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: 1.05rem 1.2rem; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.px-stat__label { font: 500 .82rem/1.2 var(--font-head); color: #8d96b8; }
.px-stat__val { font: 700 1.55rem/1.1 var(--font-head); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.px-stat__note { font-size: .8rem; color: #7f89ab; }
.px-stat .px-chg--up { color: #34d399; } .px-stat .px-chg--down { color: #fb7185; }
.px-dom { display: flex; gap: 1rem; flex-wrap: wrap; font: 600 .95rem/1.4 var(--font-head); color: #fff; margin-top: .15rem; }
.px-dom > span { display: inline-flex; align-items: center; gap: .35rem; }
.px-dom b { font-weight: 700; }
.px-dom i { width: 9px; height: 9px; border-radius: 3px; }
.px-dom__bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.12); margin-top: .35rem; }
.px-dom__btc { background: #f7931a; }
.px-dom__eth { background: #8577ff; }
.px-fng { display: flex; align-items: center; gap: .9rem; }
.px-fng > div { display: flex; flex-direction: column; }
.px-fng__txt { font: 600 .9rem/1.2 var(--font-head); color: #cfd5ea; }
.px-gauge { width: 92px; flex: none; overflow: visible; }
.px-gauge__needle { stroke: #fff; stroke-width: 3; stroke-linecap: round; transition: all .6s cubic-bezier(.2,.8,.2,1); }
.px-gauge circle { fill: #fff; }

/* Highlights */
.px-high { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: -64px; }
.px-mini { min-width: 0; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 18px; padding: 1rem 1.1rem .55rem; box-shadow: var(--shadow-lg); }
.px-mini__title { display: flex; align-items: center; gap: .5rem; font-size: .98rem; margin: 0 0 .45rem; }
.px-mini__ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-ink); }
.px-mini__ico--up { background: color-mix(in srgb, var(--px-up) 16%, transparent); color: var(--px-up); }
.px-mini__ico--down { background: color-mix(in srgb, var(--px-down) 16%, transparent); color: var(--px-down); }
.px-mini__ico .icon { width: 16px; height: 16px; }
.px-mini ul { list-style: none; margin: 0; padding: 0; }
.px-mini li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 76px; align-items: center; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--line); font-size: .92rem; }
.px-mini li:first-child { border-top: 0; }
.px-mini img { border-radius: 50%; }
.px-mini__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-mini__name small { color: var(--ink-3); font-size: .8em; }
.px-mini__price { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.px-mini .px-chg, .px-mini__vol { justify-self: end; }
.px-mini__vol { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Toolbar */
.px-board { padding-block: clamp(24px, 3vw, 36px) 0; }
.px-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 14px; }
.px-tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.px-tab { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .95rem; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink-2); font: 600 .9rem/1 var(--font-head); cursor: pointer; transition: background .15s, color .15s; }
.px-tab:hover { background: var(--bg-soft); color: var(--ink); }
.px-tab.is-on { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.px-tab svg { width: 15px; height: 15px; fill: var(--gold); }
.px-tab__n:not(:empty) { min-width: 1.4em; padding: .15em .4em; border-radius: 99px; background: var(--brand); color: #fff; font-size: .72rem; text-align: center; }
.px-tools { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.px-search { display: flex; align-items: center; gap: .45rem; height: 40px; padding-inline: .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev); color: var(--ink-3); transition: border-color .15s, box-shadow .15s; }
.px-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.px-search input { width: 200px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: .92rem; }
.px-cur { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--bg-soft); border: 1px solid var(--line); }
.px-cur button { height: 32px; padding: 0 .85rem; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 600 .88rem/1 var(--font-head); cursor: pointer; }
.px-cur button.is-on { background: var(--bg-elev); color: var(--ink); box-shadow: 0 1px 3px rgba(11,18,32,.15); }
.px-cur button:disabled { opacity: .4; cursor: not-allowed; }

/* Table */
.px-table-wrap { border: 1px solid var(--line); border-radius: 18px; background: var(--bg-elev); box-shadow: var(--shadow); }
.px-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .93rem; font-variant-numeric: tabular-nums; }
.px-table th, .px-table td { padding: .8rem .7rem; text-align: end; white-space: nowrap; border-bottom: 1px solid var(--line); background: var(--bg-elev); }
.px-table tbody tr:last-child > * { border-bottom: 0; }
.px-table thead th { position: sticky; top: 72px; z-index: 3; padding-block: .85rem; font: 600 .8rem/1.2 var(--font-head); color: var(--ink-3); background: var(--bg-elev); border-bottom: 1px solid var(--line); }
.admin-bar .px-table thead th { top: 104px; }
.px-table thead tr > :first-child { border-start-start-radius: 18px; }
.px-table thead tr > :last-child { border-start-end-radius: 18px; }
.px-table thead button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
.px-table thead button:hover { color: var(--ink); }
.px-table thead button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.px-table th[aria-sort] button { color: var(--brand-ink); }
.px-table th[aria-sort] button::after { content: "▼"; font-size: .65em; }
.px-table th[aria-sort="ascending"] button::after { content: "▲"; }
.px-table tbody tr { transition: background .15s; }
.px-table tbody tr:hover > * { background: var(--bg-soft); }
.px-c-star, .px-c-rank { text-align: center !important; }
.px-table .px-c-star { width: 36px; padding-inline: .5rem .1rem; }
.px-table .px-c-rank { width: 36px; color: var(--ink-3); font-size: .85rem; padding-inline: .2rem; }
.px-table .px-c-coin { text-align: start; font-weight: 400; }
.px-table .px-c-price { font-weight: 600; color: var(--ink); }
.px-table .px-c-spark { width: 150px; padding-block: .4rem; }

.px-star { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.px-star svg { width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; transition: transform .15s, fill .15s, stroke .15s; }
.px-star:hover svg { stroke: var(--gold); transform: scale(1.12); }
.px-star.is-on svg { fill: var(--gold); stroke: var(--gold); }

.px-coin { display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none !important; min-width: 190px; }
.px-coin img { border-radius: 50%; flex: none; background: var(--bg-soft); }
.px-coin__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; max-width: 210px; }
.px-coin__name, .px-coin__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-coin__name { font: 600 .98rem/1.25 var(--font-head); }
.px-coin__meta { font-size: .78rem; color: var(--ink-3); }
.px-coin__meta b { font-weight: 600; color: var(--ink-2); }
.px-coin__meta span { margin-inline-start: .45em; }
a.px-coin:hover .px-coin__name { color: var(--brand-ink); }
a.px-coin .px-coin__name::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: .4rem; border-radius: 50%; background: var(--brand); vertical-align: middle; opacity: .7; }

.px-chg { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--ink-3); }
.px-chg--up { color: var(--px-up); }
.px-chg--down { color: var(--px-down); }
.px-chg i { width: 0; height: 0; border-inline: 4px solid transparent; }
.px-chg--up i { border-bottom: 5px solid currentColor; }
.px-chg--down i { border-top: 5px solid currentColor; }

.px-supply { display: block; color: var(--ink-2); }
.px-supply__bar { display: block; width: 110px; height: 5px; margin-top: .35rem; margin-inline-start: auto; border-radius: 99px; background: var(--line); overflow: hidden; }
.px-supply__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ink-3); }
.px-table tbody tr:last-child > :first-child { border-end-start-radius: 18px; }
.px-table tbody tr:last-child > :last-child { border-end-end-radius: 18px; }

.px-spark { display: block; width: 130px; height: 42px; margin-inline-start: auto; direction: ltr; overflow: visible; }
.px-spark polyline { fill: none; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.px-spark--up polyline { stroke: var(--px-up); } .px-spark--up polygon { fill: color-mix(in srgb, var(--px-up) 12%, transparent); }
.px-spark--down polyline { stroke: var(--px-down); } .px-spark--down polygon { fill: color-mix(in srgb, var(--px-down) 12%, transparent); }

.px-flash-up { animation: px-up 1.6s ease-out; }
.px-flash-down { animation: px-down 1.6s ease-out; }
@keyframes px-up { 0%, 30% { background: color-mix(in srgb, var(--px-up) 22%, var(--bg-elev)); } }
@keyframes px-down { 0%, 30% { background: color-mix(in srgb, var(--px-down) 22%, var(--bg-elev)); } }

.px-empty { margin: 0; padding: 2.5rem 1rem; text-align: center; color: var(--ink-3); }
.px-foot { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: .9rem .25rem 0; font-size: .82rem; color: var(--ink-3); }
.px-foot > span { display: inline-flex; align-items: center; gap: .4rem; }
.px-foot b { color: var(--ink-2); }

/* Below the table */
.px-terms { padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-soft); margin-bottom: 2.5rem; }
.px-terms h2 { font-size: 1.1rem; margin-bottom: .8rem; }
.px-terms p { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.px-terms a, .px-terms p > :not(a) { padding: .4rem .85rem; border-radius: 99px; background: var(--bg-elev); border: 1px solid var(--line); font-size: .9rem; font-weight: 500; }
.px-terms a:hover { border-color: var(--brand); text-decoration: none; }
.px-faq__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.px-faq { display: grid; gap: .6rem; margin-bottom: 2.5rem; }
.px-faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); transition: border-color .15s; }
.px-faq details[open] { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.px-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; font: 600 1.02rem/1.4 var(--font-head); cursor: pointer; list-style: none; }
.px-faq summary::-webkit-details-marker { display: none; }
.px-faq summary .icon { transition: transform .2s; color: var(--ink-3); transform: rotate(90deg); }
.px-faq details[open] summary .icon { transform: rotate(-90deg); }
.px-faq details p { margin: 0; padding: 0 1.2rem 1.15rem; color: var(--ink-2); }
.px-risk { padding: 1.3rem 1.5rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold) 8%, var(--bg)); }
.px-risk h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; margin-bottom: .5rem; }
.px-risk h2 .icon { color: var(--gold); }
.px-risk p { margin: 0; color: var(--ink-2); font-size: .96rem; }

/* Responsive */
@media (max-width: 1280px) {
	.px-c-1h, .px-c-vol { display: none; }
}
@media (max-width: 1100px) {
	.px-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.px-high { grid-template-columns: 1fr 1fr; }
	.px-high > :last-child { display: none; }
	/* Narrower screens: scroll the table sideways with the coin column pinned. */
	.px-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
	.px-table thead th { position: static; }
	.px-c-1h, .px-c-vol { display: table-cell; }
	.px-table .px-c-coin { position: sticky; inset-inline-start: 0; z-index: 2; box-shadow: -8px 0 12px -10px rgba(11,18,32,.35); }
	.px-table .px-c-star, .px-table .px-c-rank { display: none; }
}
@media (max-width: 760px) {
	.px-hero { padding-bottom: 76px; }
	.px-stats { gap: 10px; }
	.px-stat { padding: .85rem .95rem; border-radius: 14px; }
	.px-stat__val { font-size: 1.25rem; }
	.px-gauge { width: 66px; }
	.px-fng { gap: .6rem; }
	.px-high { grid-template-columns: 1fr; margin-top: -52px; }
	.px-high > :nth-child(2) { display: none; }
	.px-bar { flex-direction: column; align-items: stretch; }
	.px-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
	.px-tabs::-webkit-scrollbar { display: none; }
	.px-tab { flex: none; }
	.px-tools { flex-wrap: nowrap; }
	.px-search { flex: 1; min-width: 0; }
	.px-search input { width: 100%; }
	.px-table { font-size: .88rem; }
	.px-table .px-c-1h { display: none; }
	.px-table th, .px-table td { padding: .7rem .55rem; }
	.px-coin { min-width: 0; max-width: 150px; gap: .5rem; }
	.px-coin img { width: 24px; height: 24px; }
	.px-coin__name { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.px-coin__meta span { display: none; }
	.px-table .px-c-spark { width: 110px; }
	.px-spark { width: 96px; height: 34px; }
	.px-terms, .px-risk { padding: 1.1rem 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
	.px-flash-up, .px-flash-down { animation: none; }
	.px-gauge__needle { transition: none; }
}