/* CX Playground — interactive trading terminal */
.cxp{
  padding:64px 0 96px;
  background:linear-gradient(180deg,#06080d 0%,#0a0e16 100%);
  color:#e9eef7;
  position:relative;
}
.cxp-head{max-width:980px;margin:0 auto 40px;padding:0 24px;text-align:center}
.cxp-eyebrow{font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.22em;color:#5EFFA4;margin-bottom:18px}
.cxp-h{font:600 clamp(34px,4.4vw,56px)/1.04 var(--font-display,'Inter',system-ui);letter-spacing:-.02em;margin:0 0 16px;color:#fff;text-wrap:balance}
.cxp-h em{font-style:italic;color:#a8b4c8;font-weight:500}
.cxp-sub{font:400 17px/1.55 var(--font-body,'Inter',system-ui);color:#9aa6bc;max-width:720px;margin:0 auto;text-wrap:pretty}

.cxp-app{
  max-width:1480px;margin:0 auto;
  background:#0b1019;
  border:1px solid #1c2230;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
  position:relative;
}

/* TOP CHROME */
.cxp-chrome{
  display:flex;align-items:center;gap:24px;
  padding:12px 18px;
  background:#0e131d;
  border-bottom:1px solid #1c2230;
}
.cxp-logo{font:700 14px/1 ui-monospace,Menlo,monospace;letter-spacing:.05em;color:#fff;display:flex;align-items:center;gap:8px}
.cxp-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:5px;background:linear-gradient(135deg,#5EFFA4,#37d6c8);color:#06120a;font-weight:800;font-size:13px}
.cxp-tag{font-size:9px;padding:2px 6px;border:1px solid #2a3142;border-radius:3px;color:#9aa6bc;letter-spacing:.12em}
.cxp-nav{display:flex;gap:18px;font:500 13px/1 var(--font-body);color:#7a8499}
.cxp-nav .on{color:#fff;position:relative}
.cxp-nav .on::after{content:'';position:absolute;left:0;right:0;bottom:-14px;height:2px;background:#5EFFA4;border-radius:2px}
.cxp-acc{margin-left:auto;display:flex;align-items:center;gap:18px}
.cxp-bal{display:flex;flex-direction:column;gap:2px;font-family:ui-monospace,Menlo,monospace}
.cxp-bal span{font-size:9px;letter-spacing:.16em;color:#5a6378}
.cxp-bal b{font-size:12px;color:#e9eef7;font-weight:600}
.cxp-pulse{display:flex;align-items:center;gap:6px;font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;color:#5EFFA4;padding:5px 9px;border:1px solid rgba(94,255,164,.25);border-radius:4px;background:rgba(94,255,164,.06)}
.cxp-pulse span{width:6px;height:6px;border-radius:50%;background:#5EFFA4;animation:cxp-pulse 1.6s ease-in-out infinite}
@keyframes cxp-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* MARKET BAR */
.cxp-mktbar{display:flex;align-items:center;gap:24px;padding:10px 18px;background:#0a0e16;border-bottom:1px solid #1c2230;font-family:ui-monospace,Menlo,monospace}
.cxp-pair-sel{
  background:#0e131d;border:1px solid #1c2230;color:#fff;
  font:700 14px/1 ui-monospace,Menlo,monospace;
  padding:6px 10px;border-radius:5px;cursor:pointer;
}
.cxp-mb-px,.cxp-mb-d{display:flex;flex-direction:column;gap:2px}
.cxp-mb-px span,.cxp-mb-d span{font-size:9px;letter-spacing:.14em;color:#5a6378}
.cxp-mb-px b{font-size:18px;font-weight:700}
.cxp-mb-d b{font-size:12px;color:#e9eef7;font-weight:600}
.cxp-mb-px b.up,.cxp-mb-d b.up{color:#5EFFA4}
.cxp-mb-px b.dn,.cxp-mb-d b.dn{color:#FF6B7A}

/* GRID */
.cxp-grid{
  display:grid;
  grid-template-columns:200px 1fr 240px 200px;
  grid-template-rows:auto auto;
  gap:1px;
  background:#1c2230;
}
.cxp-pairs,.cxp-chart,.cxp-book,.cxp-trades,.cxp-form{background:#0b1019;min-height:0}
.cxp-pairs{grid-row:1 / span 2}
.cxp-chart{grid-column:2;grid-row:1}
.cxp-book{grid-column:3;grid-row:1 / span 2}
.cxp-trades{grid-column:4;grid-row:1}
.cxp-form{grid-column:2 / span 1;grid-row:2}
.cxp-form{grid-column:4;grid-row:2}

/* fix layout: order book + trades vertical right, form below chart left side */
.cxp-grid{
  grid-template-columns:200px 1fr 240px 220px;
  grid-template-rows:auto auto;
}
.cxp-chart{grid-column:2;grid-row:1}
.cxp-form{grid-column:2;grid-row:2}
.cxp-book{grid-column:3;grid-row:1 / span 2}
.cxp-trades{grid-column:4;grid-row:1 / span 2}

/* PAIRS SIDEBAR */
.cxp-pairs-h{padding:10px 12px;font:600 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.18em;color:#5a6378;border-bottom:1px solid #1c2230}
.cxp-prow{
  width:100%;display:grid;grid-template-columns:50px 1fr auto;gap:8px;align-items:center;
  padding:8px 12px;border:0;background:transparent;color:#9aa6bc;
  font:500 11px/1.2 ui-monospace,Menlo,monospace;cursor:pointer;text-align:left;
  border-bottom:1px solid rgba(28,34,48,.5);
}
.cxp-prow:hover{background:rgba(255,255,255,.02)}
.cxp-prow.on{background:rgba(94,255,164,.06);color:#fff}
.cxp-prow.on .cxp-prow-s{color:#5EFFA4}
.cxp-prow-s{font-weight:700;color:#e9eef7}
.cxp-prow-p{text-align:right;color:#e9eef7;font-size:11px}
.cxp-prow-d{font-size:10px}
.cxp-prow-d.up{color:#5EFFA4}
.cxp-prow-d.dn{color:#FF6B7A}

/* CHART */
.cxp-chart{display:flex;flex-direction:column}
.cxp-tf{display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:1px solid #1c2230;background:#0a0e16}
.cxp-tf button{background:transparent;border:0;color:#7a8499;font:500 11px/1 ui-monospace,Menlo,monospace;padding:5px 10px;border-radius:3px;cursor:pointer;letter-spacing:.04em}
.cxp-tf button:hover{color:#fff;background:rgba(255,255,255,.04)}
.cxp-tf button.on{color:#5EFFA4;background:rgba(94,255,164,.08)}
.cxp-tools{margin-left:auto;display:flex;gap:14px;font:500 11px/1 var(--font-body);color:#5a6378}
.cxp-tools span{cursor:pointer}
.cxp-tools span:hover{color:#9aa6bc}
.cxp-chart-svg{flex:1;min-height:340px;position:relative;cursor:crosshair;background:#06080d}
.cxp-chart-svg svg{display:block;width:100%;height:100%}
.cxp-chart-tag{position:absolute;top:10px;left:14px;font:600 11px/1 ui-monospace,Menlo,monospace;color:#5a6378;letter-spacing:.06em;pointer-events:none}
.cxp-vol{display:flex;align-items:flex-end;height:48px;padding:0 0 0 0;background:#06080d;border-top:1px solid #1c2230;gap:1px}
.cxp-vb{flex:1;min-width:2px}
.cxp-vb.up{background:rgba(94,255,164,.4)}
.cxp-vb.dn{background:rgba(255,107,122,.4)}

/* ORDER BOOK */
.cxp-book{display:flex;flex-direction:column;font-family:ui-monospace,Menlo,monospace}
.cxp-bk-head{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;
  padding:8px 12px;
  font:500 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#5a6378;
  border-bottom:1px solid #1c2230;background:#0a0e16;
}
.cxp-bk-head span:nth-child(2),.cxp-bk-head span:nth-child(3){text-align:right}
.cxp-asks,.cxp-bids{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.cxp-bids{justify-content:flex-start}
.cxp-bk-row{
  position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;
  padding:3px 12px;font-size:11px;color:#9aa6bc;cursor:pointer;
}
.cxp-bk-row:hover{background:rgba(255,255,255,.04)}
.cxp-bk-row span:nth-child(3),.cxp-bk-row span:nth-child(4){text-align:right;color:#e9eef7}
.cxp-bk-fill{position:absolute;top:0;right:0;bottom:0;pointer-events:none;opacity:.18}
.cxp-bk-row.ask .cxp-bk-fill{background:#FF6B7A}
.cxp-bk-row.bid .cxp-bk-fill{background:#5EFFA4}
.cxp-bk-row .up{color:#5EFFA4}
.cxp-bk-row .dn{color:#FF6B7A}
.cxp-spread{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:#0e131d;border-top:1px solid #1c2230;border-bottom:1px solid #1c2230;
}
.cxp-spread .up{color:#5EFFA4;font-size:14px;font-weight:700}
.cxp-spread .dn{color:#FF6B7A;font-size:14px;font-weight:700}
.cxp-sp-bps{font-size:9px;letter-spacing:.1em;color:#5a6378;margin-left:auto}

/* TRADES */
.cxp-trades{display:flex;flex-direction:column;font-family:ui-monospace,Menlo,monospace}
.cxp-tr-list{flex:1;min-height:0;overflow:hidden}
.cxp-tr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:3px 12px;font-size:11px;color:#9aa6bc}
.cxp-tr span:nth-child(2),.cxp-tr span:nth-child(3){text-align:right;color:#7a8499}
.cxp-tr .up{color:#5EFFA4}
.cxp-tr .dn{color:#FF6B7A}

/* FORM */
.cxp-form{padding:14px;display:flex;flex-direction:column;gap:10px;border-top:1px solid #1c2230}
.cxp-side{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#1c2230;border-radius:5px;overflow:hidden}
.cxp-side-b{background:#0e131d;border:0;color:#7a8499;font:600 13px/1 var(--font-body);padding:10px;cursor:pointer}
.cxp-side-b.buy.on{background:rgba(94,255,164,.14);color:#5EFFA4}
.cxp-side-b.sell.on{background:rgba(255,107,122,.14);color:#FF6B7A}
.cxp-type{display:flex;gap:14px;font:500 12px/1 var(--font-body);color:#7a8499;border-bottom:1px solid #1c2230;padding-bottom:8px}
.cxp-type button{background:transparent;border:0;color:inherit;cursor:pointer;padding:4px 0;position:relative}
.cxp-type button.on{color:#fff}
.cxp-type button.on::after{content:'';position:absolute;left:0;right:0;bottom:-9px;height:2px;background:#5EFFA4}
.cxp-l{display:flex;flex-direction:column;gap:5px;font:500 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:#5a6378}
.cxp-l input{
  background:#0a0e16;border:1px solid #1c2230;border-radius:4px;
  color:#fff;font:500 13px/1 ui-monospace,Menlo,monospace;
  padding:9px 10px;
}
.cxp-l input:focus{outline:none;border-color:#5EFFA4}
.cxp-l input:disabled{opacity:.5}
.cxp-slider input[type=range]{width:100%;accent-color:#5EFFA4}
.cxp-pcts{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.cxp-pcts button{background:#0a0e16;border:1px solid #1c2230;color:#7a8499;font:500 10px/1 ui-monospace,Menlo,monospace;padding:5px;border-radius:3px;cursor:pointer}
.cxp-pcts button.on{border-color:#5EFFA4;color:#5EFFA4;background:rgba(94,255,164,.08)}
.cxp-summary{display:flex;justify-content:space-between;font:500 11px/1.4 ui-monospace,Menlo,monospace;color:#7a8499}
.cxp-summary b{color:#e9eef7;font-weight:600}
.cxp-place{
  border:0;border-radius:6px;
  padding:13px;font:700 14px/1 var(--font-body);
  color:#fff;cursor:pointer;letter-spacing:.02em;
  margin-top:4px;
}
.cxp-place.buy{background:linear-gradient(180deg,#5EFFA4,#2ecf7c);color:#06120a}
.cxp-place.sell{background:linear-gradient(180deg,#FF6B7A,#d83a4f)}
.cxp-place:hover{filter:brightness(1.1)}
.cxp-fees{font:500 9px/1 ui-monospace,Menlo,monospace;color:#5a6378;letter-spacing:.1em;text-align:center}

/* OPEN ORDERS */
.cxp-orders{border-top:1px solid #1c2230;background:#0a0e16}
.cxp-orders-tabs{display:flex;gap:24px;padding:10px 18px;border-bottom:1px solid #1c2230;font:500 12px/1 var(--font-body);color:#7a8499}
.cxp-orders-tabs span{cursor:pointer;position:relative;padding:4px 0}
.cxp-orders-tabs span.on{color:#fff}
.cxp-orders-tabs span.on::after{content:'';position:absolute;left:0;right:0;bottom:-11px;height:2px;background:#5EFFA4}
.cxp-orders-tabs i{font-style:normal;color:#5a6378;font-size:11px;margin-left:3px}
.cxp-orders-head,.cxp-or{
  display:grid;grid-template-columns:90px 90px 70px 60px 1fr 1fr 1fr 90px 80px;
  gap:10px;padding:8px 18px;
  font:500 11px/1.2 ui-monospace,Menlo,monospace;color:#9aa6bc;
}
.cxp-orders-head{color:#5a6378;font-size:9px;letter-spacing:.14em;border-bottom:1px solid #1c2230;background:#0b1019}
.cxp-or{border-bottom:1px solid rgba(28,34,48,.5)}
.cxp-or .up{color:#5EFFA4}
.cxp-or .dn{color:#FF6B7A}
.cxp-st{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.cxp-st.open{color:#FFCB5C}
.cxp-st.filled{color:#5EFFA4}
.cxp-st.cancelled{color:#5a6378}
.cxp-cancel{background:transparent;border:1px solid #2a3142;color:#9aa6bc;font:500 10px/1 ui-monospace,Menlo,monospace;padding:4px 8px;border-radius:3px;cursor:pointer}
.cxp-cancel:hover{border-color:#FF6B7A;color:#FF6B7A}
.cxp-empty{padding:24px 18px;color:#5a6378;font:500 12px/1.5 var(--font-body);text-align:center}

/* TOAST */
.cxp-toast{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  padding:11px 18px;border-radius:8px;
  font:600 13px/1 ui-monospace,Menlo,monospace;
  background:#0e131d;border:1px solid #1c2230;
  box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:10;
  animation:cxp-toast-in .3s cubic-bezier(.2,.8,.2,1);
}
.cxp-toast.ok{border-color:#5EFFA4;color:#5EFFA4}
.cxp-toast.err{border-color:#FF6B7A;color:#FF6B7A}
@keyframes cxp-toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* FOOTER STRIP */
.cxp-foot{max-width:1480px;margin:24px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0 24px}
.cxp-foot-i{padding:18px 22px;background:rgba(255,255,255,.02);border:1px solid #1c2230;border-radius:10px}
.cxp-foot-i b{display:block;font:600 14px/1.2 var(--font-display);color:#fff;margin-bottom:6px}
.cxp-foot-i span{font:400 13px/1.5 var(--font-body);color:#9aa6bc}

@media (max-width:1100px){
  .cxp-grid{grid-template-columns:1fr 240px 220px;grid-template-rows:auto auto auto}
  .cxp-pairs{display:none}
  .cxp-chart{grid-column:1;grid-row:1}
  .cxp-form{grid-column:1;grid-row:3}
  .cxp-book{grid-column:2;grid-row:1 / span 2}
  .cxp-trades{grid-column:3;grid-row:1 / span 2}
}
@media (max-width:780px){
  .cxp-grid{grid-template-columns:1fr;grid-template-rows:repeat(4,auto)}
  .cxp-chart,.cxp-book,.cxp-trades,.cxp-form{grid-column:1}
  .cxp-chart{grid-row:1}.cxp-book{grid-row:2}.cxp-trades{grid-row:3}.cxp-form{grid-row:4}
  .cxp-nav,.cxp-acc{display:none}
  .cxp-mktbar{overflow-x:auto}
  .cxp-foot{grid-template-columns:1fr}
}