/* ---------- STOCKXCHANGE PLAYABLE TERMINAL ---------- */
.sx-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 1080px) { .sx-layout { grid-template-columns: minmax(0, 1fr); } }
.sx-info { display: flex; flex-direction: column; gap: 18px; height: 100%; }
.project p.sx-try { font-size: 13px; color: var(--muted); }
.sx-try b { color: var(--acid) !important; font-weight: 400; }
.sx-try kbd { font-size: 10px; padding: 1px 6px; }

.sx {
  --up: var(--acid); --down: var(--ember); --panel: #090b0d;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--panel); border: 1px solid #262b31; border-radius: 14px;
  font-size: 12px; font-variant-numeric: tabular-nums;
  box-shadow: 0 30px 80px -30px rgba(198,255,61,.12), inset 0 0 0 1px rgba(255,255,255,.02);
}
.sx.is-shake { animation: sxShake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes sxShake { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); } 30%,50%,70% { transform: translateX(-7px); } 40%,60% { transform: translateX(7px); } }
.sx.flash-up::after, .sx.flash-down::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; animation: sxFlash .8s ease-out forwards; }
.sx.flash-up::after { box-shadow: inset 0 0 0 2px var(--up), inset 0 0 90px rgba(198,255,61,.25); }
.sx.flash-down::after { box-shadow: inset 0 0 0 2px var(--down), inset 0 0 90px rgba(255,91,46,.25); }
@keyframes sxFlash { from { opacity: 1; } to { opacity: 0; } }

.sx__scan { position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }

.sx__top { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.sx__brand { font-family: var(--display); font-weight: 700; color: var(--fg); letter-spacing: .02em; }
.sx__brand i { color: var(--acid); font-style: normal; }
.sx__phase b { color: var(--fg); font-weight: 600; }
.sx__clock { margin-left: auto; color: var(--fg); font-weight: 600; }
.sx__clock.is-hot { color: var(--down); animation: blink .5s steps(1) infinite; }
.sx__live { display: flex; align-items: center; gap: 6px; color: var(--down); font-weight: 600; letter-spacing: .1em; font-size: 10px; }
.sx__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--down); }
.sx__timer { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.sx__timer i { display: block; height: 100%; width: 100%; background: var(--acid); transform-origin: left; }
.sx__timer i.is-hot { background: var(--down); }

.sx__news { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: #0d0f12; overflow: hidden; min-height: 40px; }
.sx__flag { flex: none; background: var(--down); color: var(--bg); font-weight: 700; font-size: 10px; letter-spacing: .12em; padding: 2px 7px; border-radius: 3px; animation: blink 1.2s steps(1) infinite; }
.sx__headline { flex: 1; min-width: 0; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx__headline.is-new { animation: sxGlitch .5s steps(2) 2; }
@keyframes sxGlitch { 0% { transform: translateX(-3px); text-shadow: 2px 0 var(--ember), -2px 0 #7fc8ff; } 50% { transform: translateX(3px); text-shadow: -2px 0 var(--ember), 2px 0 #7fc8ff; } 100% { transform: none; text-shadow: none; } }
.sx__stamp { flex: none; font-family: var(--display); font-weight: 900; font-size: 12px; letter-spacing: .06em; padding: 1px 9px; border: 2px solid currentColor; border-radius: 4px; opacity: 0; transform: scale(2.4) rotate(-14deg); }
.sx__stamp.is-true, .sx__stamp.is-fake { animation: sxStamp .45s cubic-bezier(.2,1.6,.4,1) forwards; }
.sx__stamp.is-true { color: var(--up); }
.sx__stamp.is-fake { color: var(--down); }
@keyframes sxStamp { to { opacity: 1; transform: scale(1) rotate(-6deg); } }

.sx__main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.sx__chart { position: relative; border-right: 1px solid var(--line); min-width: 0; }
.sx__quote { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 10px 14px 0; }
.sx__quote b { font-family: var(--display); font-size: 16px; color: var(--fg); }
.sx__quote span { color: var(--muted); }
.sx__quote strong { margin-left: auto; font-size: 16px; color: var(--fg); font-weight: 600; transition: color .3s; }
.sx__quote strong.tick-up { color: var(--up); }
.sx__quote strong.tick-down { color: var(--down); }
.sx__quote em { font-style: normal; font-weight: 600; }
.sx__quote small { flex-basis: 100%; color: var(--muted); font-size: 10px; min-height: 14px; }
.sx .up { color: var(--up); }
.sx .down { color: var(--down); }
#sxCanvas { display: block; width: 100%; height: 262px; }

.sx__watch { display: flex; flex-direction: column; min-width: 0; }
.sx__row {
  display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 1px;
  text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent;
  transition: background .2s, border-color .2s; width: 100%; flex: 1;
}
.sx__row:last-child { border-bottom: 0; }
.sx__row:hover { background: #111418; }
.sx__row.is-active { background: #12160d; border-left-color: var(--acid); }
.sx__row b { color: var(--fg); font-weight: 600; }
.sx__row .px { text-align: right; color: var(--fg); padding: 0 4px; border-radius: 3px; }
.sx__row .px.flash-up { animation: cellUp .6s ease-out; }
.sx__row .px.flash-down { animation: cellDown .6s ease-out; }
@keyframes cellUp { from { background: rgba(198,255,61,.4); } to { background: transparent; } }
@keyframes cellDown { from { background: rgba(255,91,46,.4); } to { background: transparent; } }
.sx__row small { color: var(--muted); font-size: 10px; }
.sx__row small.ch { text-align: right; }
.sx__row .held { color: var(--acid); }
.sx__row .shorted { color: var(--ember); }

.sx__bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); }
.sx__bottom > div { padding: 12px 14px; min-width: 0; }
.sx__wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; border-right: 1px solid var(--line); align-content: center; }
.sx__wallet span, .sx__label { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.sx__wallet b { color: var(--fg); font-weight: 600; font-size: 13px; transition: color .3s; white-space: nowrap; }
.sx__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-right: 1px solid var(--line); align-content: center; }
.sx__btn {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 10px 12px; border-radius: 8px; font-weight: 700; letter-spacing: .08em; font-size: 12px;
  border: 1px solid; transition: background .2s, color .2s, transform .12s;
}
.sx__btn kbd { font-size: 9px; padding: 1px 5px; opacity: .7; }
.sx__btn:active, .sx__btn.is-pressed { transform: scale(.93); }
.sx__btn--buy { color: var(--up); border-color: rgba(198,255,61,.4); background: rgba(198,255,61,.06); }
.sx__btn--buy:hover { background: var(--up); color: var(--bg); }
.sx__btn--sell, .sx__btn--short { color: var(--down); border-color: rgba(255,91,46,.4); background: rgba(255,91,46,.06); }
.sx__btn--sell:hover, .sx__btn--short:hover { background: var(--down); color: var(--bg); }
.sx__btn--pass { color: var(--muted); border-color: var(--line); }
.sx__btn--pass:hover { color: var(--fg); border-color: var(--muted); }
.sx__btn.is-denied { animation: sxShake .35s; border-color: var(--down); }

.sx__board ol { list-style: none; position: relative; height: 92px; margin-top: 6px; }
.sx__board li {
  position: absolute; left: 0; right: 0; top: 0; height: 22px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; align-items: center;
  transition: transform .7s cubic-bezier(.7,0,.2,1); color: var(--muted);
}
.sx__board li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx__board li.is-you { color: var(--fg); }
.sx__board li.is-you .nm { color: var(--acid); }
.sx__board li.is-top .rk { color: #ffcc3d; }

.sx__fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.sx__float { position: absolute; font-weight: 700; white-space: nowrap; animation: sxFloat 1.2s cubic-bezier(.2,.8,.2,1) forwards; text-shadow: 0 0 10px currentColor; }
@keyframes sxFloat { from { opacity: 1; transform: translate(-50%, 0) scale(1.15); } to { opacity: 0; transform: translate(-50%, -70px) scale(1); } }
.sx__coin {
  position: absolute; width: 16px; height: 16px; margin: -8px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700;
  background: #ffcc3d; color: #5a3d00; box-shadow: inset 0 -2px 0 #c99a1c; animation: sxCoin 1.1s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes sxCoin { 0% { transform: translate(0,0) scale(.4); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 0; } }

.sx__splash {
  position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; text-align: center; gap: 6px; padding: 16px;
  background: rgba(7,8,10,.84); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.sx__splash.is-on { opacity: 1; visibility: visible; }
.sx__splash b { font-family: var(--display); font-weight: 900; font-size: clamp(22px, 3.4vw, 40px); letter-spacing: -.03em; color: var(--fg); text-transform: uppercase; line-height: 1; }
.sx__splash.is-on b { animation: sxPop .5s cubic-bezier(.2,1.6,.4,1); }
.sx__splash span { color: var(--muted); font-size: 13px; }
.sx__splash.is-shock b { color: var(--ember); animation: sxGlitch .4s steps(2) 3; }
.sx__splash.is-win b { color: var(--acid); }
@keyframes sxPop { from { transform: scale(.6); opacity: 0; } }
.project .sx__note { position: relative; z-index: 5; padding: 6px 14px; border-top: 1px solid var(--line); color: #4d535a; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 640px) {
  .sx__main, .sx__bottom { grid-template-columns: minmax(0, 1fr); }
  .sx__chart { border-right: 0; border-bottom: 1px solid var(--line); }
  .sx__watch { display: grid; grid-template-columns: 1fr 1fr; }
  .sx__row:nth-child(odd) { border-right: 1px solid var(--line); }
  .sx__row:nth-last-child(2) { border-bottom: 0; }
  .sx__wallet, .sx__actions { border-right: 0; border-bottom: 1px solid var(--line); }
  .sx__live, .sx__brand { display: none; }
  #sxCanvas { height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx__scan { display: none; }
}