/* The app pages (map, sector, coin, launch, spawn): plain pages on the template's stylesheet (type scale,
   buttons, header, footer), with their own grid, boards and controls. Loaded after sx.css. */
.sx-page { padding-top: 8.4rem; min-height: 70vh; }
.sx-page .container { max-width: 160rem; }
.sx-head { display: grid; gap: 1.6rem 4rem; align-items: end; margin-bottom: 3.2rem; }
@media (min-width: 1024px) { .sx-head { grid-template-columns: 1.25fr 1fr; } }
.sx-head .h1 { margin: .8rem 0 0; line-height: .98; }
.sx-lede { max-width: 52rem; color: var(--sx-mute); font-size: 1.6rem; line-height: 1.45; margin: 0; }
.sx-mono, .sx-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sx-label { font-family: var(--font-mono); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sx-dim); }
.sx-section { margin-top: 6.4rem; }
.sx-section > .sx-row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; border-top: 1px solid var(--sx-line); padding-top: 1.6rem; margin-bottom: 2rem; }
.sx-row-head .h2 { margin: 0; }
.sx-row-head p { margin: 0; color: var(--sx-mute); font-size: 1.4rem; max-width: 56rem; }
a.sx-link { color: var(--sx-ink); text-decoration: underline; text-decoration-color: var(--sx-line2); text-underline-offset: .2em; }
a.sx-link:hover { text-decoration-color: var(--sx-up); }
.sx-ext::after { content: " ↗"; font-family: var(--font-mono); font-size: .9em; color: var(--sx-dim); }

/* chips and tabs */
.sx-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.sx-chips button, .sx-chips a { font-family: var(--font-mono); font-size: 1.3rem; padding: .75rem 1.2rem; background: var(--sx-bg2); color: var(--sx-mute); border: 1px solid var(--sx-line); cursor: pointer; border-radius: .2rem; transition: background .2s, color .2s; }
.sx-chips button:hover, .sx-chips a:hover { color: var(--sx-ink); border-color: var(--sx-line2); }
.sx-chips button[aria-pressed="true"], .sx-chips a.on { background: var(--sx-ink); color: var(--sx-bg); border-color: var(--sx-ink); }

/* the board: LED sector panel + the map */
.sx-board { display: grid; gap: 1.2rem; }
@media (min-width: 1100px) { .sx-board { grid-template-columns: 35rem 1fr; } }
.sx-led { background: #060b17; border: 1px solid var(--sx-line); display: flex; flex-direction: column; }
.sx-led__top { display: flex; justify-content: space-between; padding: .9rem 1.2rem; border-bottom: 1px solid var(--sx-line); font-family: var(--font-mono); font-size: 1.2rem; color: var(--sx-dim); text-transform: uppercase; }
.sx-led__top b { color: var(--sx-up); font-weight: 500; }
.sx-led canvas.panel { display: block; width: 100%; flex: 1; min-height: 30rem; }
.sx-led canvas.strip { display: block; width: 100%; height: 3.6rem; border-top: 1px solid var(--sx-line); }
.sx-mapwrap { position: relative; border: 1px solid var(--sx-line); background: var(--sx-bg); }
.sx-mapwrap canvas { display: block; width: 100%; height: 68rem; }
@media (max-width: 1099px) { .sx-mapwrap canvas { height: 56rem; } .sx-led canvas.panel { min-height: 24rem; } }
@media (max-width: 600px) { .sx-mapwrap canvas { height: 64rem; } }
.sx-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--sx-bg3); border: 1px solid var(--sx-line2); padding: 1rem 1.2rem; display: grid; gap: .3rem; min-width: 19rem; font-size: 1.3rem; color: var(--sx-mute); }
.sx-tip b { color: var(--sx-ink); font-size: 1.5rem; }
.sx-tip span:last-child { font-family: var(--font-mono); }
.sx-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; margin-top: 1rem; font-family: var(--font-mono); font-size: 1.2rem; color: var(--sx-dim); }
.sx-legend .ramp { display: inline-flex; align-items: center; gap: .6rem; }
.sx-legend .ramp i { display: inline-block; width: 2.6rem; height: 1rem; }
.sx-loading { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 1.3rem; color: var(--sx-dim); pointer-events: none; }

/* stat tiles */
.sx-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--sx-line); border: 1px solid var(--sx-line); margin-bottom: 2.4rem; }
@media (min-width: 900px) { .sx-stats { grid-template-columns: repeat(5, 1fr); } }
.sx-stat { background: var(--sx-bg); padding: 1.4rem 1.6rem 1.6rem; min-width: 0; }
.sx-stat .k { font-family: var(--font-mono); font-size: 1.2rem; text-transform: uppercase; color: var(--sx-dim); }
.sx-stat .v { font-family: var(--font-mono); font-size: 2.4rem; margin-top: .8rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .4s; }
.sx-stat .s { margin-top: .4rem; font-size: 1.3rem; color: var(--sx-mute); }
.sx-flash { animation: sxflash .9s ease-out; }
@keyframes sxflash { from { background: var(--sx-bg3); } to { background: var(--sx-bg); } }

/* tables */
.sx-table { width: 100%; border-collapse: collapse; font-size: 1.4rem; }
.sx-table th { text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: 1.2rem; text-transform: uppercase; color: var(--sx-dim); padding: 0 1rem 1rem; border-bottom: 1px solid var(--sx-line); white-space: nowrap; }
.sx-table td { padding: 1.1rem 1rem; border-bottom: 1px solid var(--sx-line); vertical-align: middle; }
.sx-table td.n, .sx-table th.n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-table tbody tr { transition: background .15s; }
.sx-table tbody tr[data-href] { cursor: pointer; }
.sx-table tbody tr:hover { background: var(--sx-bg2); }
.sx-table .who { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.sx-table .who img, .sx-ico { width: 2.8rem; height: 2.8rem; object-fit: cover; background: var(--sx-bg3); flex: none; border-radius: 0; }
.sx-table .who b { font-weight: 600; }
.sx-table .who small { display: block; color: var(--sx-dim); font-size: 1.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
.sx-swatch { display: inline-block; width: 1rem; height: 1rem; vertical-align: -.05rem; margin-right: .6rem; }
.sx-tag { display: inline-block; font-family: var(--font-mono); font-size: 1.2rem; padding: .2rem .6rem; border: 1px solid var(--sx-line2); color: var(--sx-mute); white-space: nowrap; }
.sx-tag.hot { border-color: var(--sx-up); color: var(--sx-up); }
.sx-more { margin-top: 1.4rem; }
.sx-scroll { overflow-x: auto; }
@media (max-width: 760px) { .sx-table .hide-s { display: none; } .sx-table td, .sx-table th { padding-left: .6rem; padding-right: .6rem; } .sx-table .who small { max-width: 13rem; } }

/* rotation bars */
.sx-rot { display: grid; gap: .6rem; }
.sx-rot__row { display: grid; grid-template-columns: 10rem 1fr 9rem; align-items: center; gap: 1.2rem; font-family: var(--font-mono); font-size: 1.3rem; }
.sx-rot__row a { color: var(--sx-ink); }
.sx-rot__bar { position: relative; height: 2.4rem; background: var(--sx-bg2); }
.sx-rot__bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sx-up); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.sx-rot__bar i.c { background: #3b4c74; }
.sx-rot__row .n { text-align: right; color: var(--sx-mute); }
.sx-split { display: grid; gap: 4rem; }
@media (min-width: 1024px) { .sx-split { grid-template-columns: 1fr 1fr; } }

/* movers lists */
.sx-movers { display: grid; gap: 2.4rem; }
@media (min-width: 900px) { .sx-movers { grid-template-columns: 1fr 1fr; } }
.sx-list { display: grid; }
.sx-list a { display: grid; grid-template-columns: 2.8rem 1fr auto; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--sx-line); color: var(--sx-ink); }
.sx-list a:hover { background: var(--sx-bg2); }
.sx-list img { width: 2.8rem; height: 2.8rem; object-fit: cover; background: var(--sx-bg3); }
.sx-list small { color: var(--sx-dim); font-size: 1.2rem; }
.sx-list .n { font-family: var(--font-mono); text-align: right; }
.sx-empty-note { color: var(--sx-mute); font-size: 1.4rem; padding: 1.6rem 0; }

/* coin page */
.sx-coin-head { display: flex; gap: 1.6rem; align-items: center; }
.sx-coin-head img { width: 7.2rem; height: 7.2rem; object-fit: cover; background: var(--sx-bg3); }
.sx-coin-grid { display: grid; gap: 2.4rem; }
@media (min-width: 1100px) { .sx-coin-grid { grid-template-columns: 1fr 40rem; align-items: start; } }
.sx-chart { position: relative; border: 1px solid var(--sx-line); background: var(--sx-bg); }
.sx-chart canvas { display: block; width: 100%; height: 38rem; }
.sx-panel { border: 1px solid var(--sx-line); background: var(--sx-bg2); padding: 2rem; }
.sx-panel + .sx-panel { margin-top: 1.2rem; }
.sx-panel .h3 { margin: 0 0 1.2rem; }
.sx-kv { display: grid; gap: 0; }
.sx-kv > div { display: flex; justify-content: space-between; gap: 1.6rem; padding: .8rem 0; border-bottom: 1px solid var(--sx-line); font-size: 1.4rem; }
.sx-kv > div:last-child { border-bottom: 0; }
.sx-kv span:first-child { color: var(--sx-mute); }
.sx-kv span:last-child { font-family: var(--font-mono); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.sx-curve { height: .8rem; background: var(--sx-bg); position: relative; margin: 1rem 0 .4rem; }
.sx-curve i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sx-up); }

/* forms */
.sx-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.6rem; }
.sx-tabs button { font-family: var(--font-primary); font-weight: 600; font-size: 1.5rem; padding: 1rem; background: var(--sx-bg); color: var(--sx-mute); border: 1px solid var(--sx-line); cursor: pointer; }
.sx-tabs button[aria-selected="true"][data-side="buy"] { background: var(--sx-up); color: var(--sx-up-ink); border-color: var(--sx-up); }
.sx-tabs button[aria-selected="true"][data-side="sell"] { background: var(--sx-down); color: #fff; border-color: var(--sx-down); }
.sx-field { position: relative; margin-bottom: 1.4rem; }
.sx-field label { display: block; font-family: var(--font-mono); font-size: 1.2rem; text-transform: uppercase; color: var(--sx-dim); margin-bottom: .6rem; }
.sx-input, .sx-field textarea, .sx-field select { width: 100%; background: var(--sx-bg); border: 1px solid var(--sx-line2); padding: 1.2rem 1.2rem; font-family: var(--font-mono); font-size: 1.6rem; color: var(--sx-ink); border-radius: 0; outline: none; }
.sx-field textarea { font-family: var(--font-primary); font-size: 1.5rem; min-height: 9rem; resize: vertical; }
.sx-input:focus, .sx-field textarea:focus { border-color: var(--sx-up); }
.sx-input::placeholder, .sx-field textarea::placeholder { color: #5f6c88; font-family: var(--font-primary); }
.sx-unit { position: absolute; right: 1.2rem; bottom: 1.3rem; font-family: var(--font-mono); font-size: 1.3rem; color: var(--sx-mute); }
.sx-note { font-size: 1.3rem; color: var(--sx-mute); margin: .8rem 0 0; line-height: 1.45; }
.sx-msg { min-height: 2rem; font-size: 1.4rem; margin-top: 1.2rem; color: var(--sx-mute); }
.sx-msg.bad { color: #ff8a8e; }
.sx-msg.ok { color: var(--sx-up); }
.sx-page .btn { max-width: 100%; }
.sx-page .btn.w-full .btn__text { flex: 1; }
.sx-page .btn[disabled] { opacity: .5; pointer-events: none; }
.sx-drop { display: flex; gap: 1.2rem; align-items: center; border: 1px dashed var(--sx-line2); padding: 1.2rem; cursor: pointer; background: var(--sx-bg); }
.sx-drop img { width: 6.4rem; height: 6.4rem; object-fit: cover; background: var(--sx-bg3); }
.sx-drop span { color: var(--sx-mute); font-size: 1.4rem; }
.sx-launch { display: grid; gap: 3.2rem; }
@media (min-width: 1100px) { .sx-launch { grid-template-columns: 1fr 46rem; align-items: start; } .sx-launch__side { position: sticky; top: 8rem; } }
.sx-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; }
.sx-pairs .sx-more { grid-column: 1 / -1; justify-self: start; margin-top: .4rem; }
.sx-pair { display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem .8rem; align-items: center; text-align: left; padding: .9rem 1rem; background: var(--sx-bg); border: 1px solid var(--sx-line); color: var(--sx-ink); cursor: pointer; }
.sx-pair img { width: 2.4rem; height: 2.4rem; grid-row: span 2; object-fit: cover; background: var(--sx-bg3); }
.sx-pair b { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 500; }
.sx-pair small { font-size: 1.2rem; color: var(--sx-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-pair[aria-pressed="true"] { border-color: var(--sx-up); background: #0f2a22; }
.sx-ladder { display: grid; gap: .4rem; margin-top: 1rem; }
.sx-ladder > div { display: grid; grid-template-columns: 5rem 1fr auto; gap: 1rem; font-family: var(--font-mono); font-size: 1.3rem; align-items: center; }
.sx-ladder i { display: block; height: .8rem; background: var(--sx-up); }
.sx-ladder .off i { background: #3b4c74; }
.sx-steps { display: grid; gap: .4rem; margin-top: 1rem; font-family: var(--font-mono); font-size: 1.3rem; color: var(--sx-dim); }
.sx-steps .on { color: var(--sx-ink); }
.sx-steps .done { color: var(--sx-up); }

/* spawn page */
.sx-facts { display: grid; gap: 1px; background: var(--sx-line); border: 1px solid var(--sx-line); }
@media (min-width: 900px) { .sx-facts { grid-template-columns: 1fr 1fr; } }
.sx-fact { background: var(--sx-bg); padding: 2rem; }
.sx-fact .h3 { margin: 0 0 .8rem; }
.sx-fact p { color: var(--sx-mute); font-size: 1.5rem; line-height: 1.5; margin: 0 0 .8rem; }
.sx-fact code, .sx-code { font-family: var(--font-mono); font-size: 1.3rem; color: var(--sx-ink); background: var(--sx-bg3); padding: .1rem .4rem; overflow-wrap: anywhere; }
.sx-compare th:not(:first-child), .sx-compare td:not(:first-child) { text-align: right; font-family: var(--font-mono); }
.sx-compare td.hl { color: var(--sx-up); }
.sx-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.2rem; margin-bottom: 1.6rem; }
.sx-pair b, .sx-pair small { text-transform: none; }
.sx-sep { padding: 0 .7rem; }
/* no layout jumps while the map fills in: room kept for rotation and movers, the count line stays one line */
.sx-rot { min-height: 30rem; align-content: start; }
.sx-movers .sx-list { min-height: 28rem; align-content: start; }
#map-count, #s-count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }