:root{
  --bg: #0C0A0A;
  --text: #e7ecf2;
  --muted: #9aa3ae;
  --up: #28d67a;
  --down: #ff4d5e;
  --accent: #27ff6a;
  --accent-2: #12d15d;
  --container-w: 100%;
  --cell-vpad: 14px;
  --cell-hpad: 16px;
  --action-hpad: calc(var(--cell-hpad) + 4px);
  --action-btn-max: 110px;
  --toolbar-gap: 12px;
}

/* ---------- TOOLBAR ---------- */
.xt-toolbar {
  width: var(--container-w);
  margin: 0 0 12px 0;
  padding: 0 var(--cell-hpad);
  box-sizing: border-box;
  display: flex;
  gap: var(--toolbar-gap);
  align-items: center;
  flex-wrap: wrap;
  background: transparent;
  z-index: 2;
}

.xt-pills { display:flex; gap:10px; align-items:center; }

.xt-pill{
  appearance:none;
  -webkit-appearance:none;
  background:#0f1113;
  color:var(--text);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:28px;
  padding:8px 14px;
  font:600 14px/1.2 "Inter","Segoe UI",Roboto,system-ui,sans-serif;
  outline:none;
  cursor:pointer;
  min-width:56px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45) inset;
}
.xt-pill:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 6px rgba(39,255,106,.03);
}

/* ---------- WRAP (таблица) ---------- */
.xt-wrap{
  width: var(--container-w);
  margin: 0 auto 32px;
  padding: 0 var(--cell-hpad);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  box-sizing: border-box;
}

/* ---------- TABLE ---------- */
.xt {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: transparent;
  color: var(--text);
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  box-sizing: border-box;
}

.xt, .xt th, .xt td, .xt tr, .xt thead, .xt tbody {
  border: none !important;
  background: transparent !important;
}

/* THEAD */
.xt thead th{
  text-align:left;
  color: var(--muted);
  padding: var(--cell-vpad) var(--cell-hpad);
  font-weight:600;
  font-size:13px;
  min-width: 0;
  box-sizing: border-box;
}

/* TDS */
.xt td{
  padding: var(--cell-vpad) var(--cell-hpad);
  vertical-align: middle;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  box-sizing:border-box;
}

/* ZEBRA + HOVER */
.xt tbody tr:nth-child(odd){ background: rgba(255,255,255,0.02); transition: background .22s ease; }
.xt tbody tr:nth-child(even){ background: transparent; transition: background .22s ease; }
.xt tbody tr:hover{ background: rgba(255,255,255,0.05); }

/* ASSET cell */
.xt-asset{ display:flex; align-items:center; gap:12px; min-width:0; }
.xt-icon{ width:28px; height:28px; border-radius:50%; flex-shrink:0; object-fit:contain; }
.xt-meta{ display:flex; flex-direction:row; align-items:baseline; gap:6px; min-width:0; overflow:hidden; flex:1 1 auto; }
.xt-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xt-sym{ font-size:12px; color:var(--muted); flex-shrink:0; }
.xt-sym:before{ content:'('; }
.xt-sym:after{ content:')'; }

/* PRICE flash */
.xt-price{
  font-variant-numeric: tabular-nums;
  transition: background-color .35s ease;
  text-align:left; /* изменено */
}
@keyframes xtFlashUp{ from{background:rgba(40,214,122,.12)} to{background:transparent} }
@keyframes xtFlashDown{ from{background:rgba(255,77,94,.12)} to{background:transparent} }
.xt-price.xt-tick-up{ animation: xtFlashUp .9s ease }
.xt-price.xt-tick-down{ animation: xtFlashDown .9s ease }

/* CHANGE */
.xt-chg{
  font-weight:600;
  text-align:left; /* изменено */
}
.xt-up{ color: var(--up); }
.xt-down{ color: var(--down); }

/* SPARK */
.xt-sparkcell { width: 90px; min-width: 60px; text-align:center; }
.xt-spark{ display:block; width:100%; height:28px; }
.xt-spark polyline{ stroke: currentColor; opacity: .95; stroke-width: 1.25; fill: none; stroke-linecap: butt; stroke-linejoin: miter; vector-effect: non-scaling-stroke; transition: opacity .12s ease, stroke-width .12s ease; }
.xt-spark-up{ color: var(--up); }
.xt-spark-down{ color: var(--down); }
.xt tbody tr:hover .xt-spark polyline { opacity: 1; stroke-width: 1.6; }

/* AUX columns */
.xt-cap, .xt-vol{
  color: var(--muted);
  text-align:left; /* изменено */
}

/* ACTION */
.xt-act {
  text-align:left; /* изменено */
  padding: var(--cell-vpad) var(--action-hpad);
  display:flex;
  align-items:center;
  justify-content:flex-start; /* изменено */
  box-sizing:border-box;
  min-width:0;
}

.xt-btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  background: linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#02140a;
  font-weight:700;
  text-decoration:none;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
  max-width: var(--action-btn-max);
  overflow:hidden;
  text-overflow:ellipsis;
  box-sizing:border-box;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 960px){
  :root{ --container-w: 100%; }
  .xt thead th, .xt td { padding: 12px; font-size: 13px; }
  .xt-icon{ width:24px; height:24px; }
  .xt td { white-space: normal; }
}

@media (max-width: 767px){
  .xt { table-layout: fixed; width: 100%; }
  .xt thead th, .xt td { padding: 10px 8px; font-size: 11px; white-space: normal; }
  .xt th, .xt td { min-width: 0; }
  .xt thead th:nth-child(3), .xt td:nth-child(3),
  .xt thead th:nth-child(5), .xt td:nth-child(5),
  .xt thead th:nth-child(6), .xt td:nth-child(6),
  .xt thead th:nth-child(7), .xt td:nth-child(7) { display: none !important; }
  .xt thead th:nth-child(1), .xt td:nth-child(1) { width: 56%; min-width: 0; }
  .xt thead th:nth-child(2), .xt td:nth-child(2) { width: 22%; text-align:left; } /* изменено */
  .xt thead th:nth-child(4), .xt td:nth-child(4) { width: 22%; text-align:left; } /* изменено */
  .xt-sym { display:none; }
  .xt-icon { width:20px; height:20px; }
  .xt-name { font-size: 12px; }
  .xt-btn { padding: 8px 12px; font-size: 12px; max-width: 96px; }
}

@media (max-width: 425px){
  .xt-pill.xt-chg { display: none !important; }
  .custom-select[data-name="xt-chg"] { display: none !important; }
}

/* ---------- CUSTOM SELECT ---------- */
.custom-select { position: relative; display: inline-block; vertical-align: middle; font-family: "Inter","Segoe UI",Roboto,system-ui,sans-serif; }
.custom-select .cs-trigger { appearance: none; -webkit-appearance: none; border: 1px solid rgba(255,255,255,0.06); background: #0f1113; color: var(--text); border-radius: 999px; padding: 8px 14px; font-weight: 600; cursor: pointer; min-width: 64px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.45) inset; }
.custom-select .cs-caret { display:inline-block; width:10px; height:10px; transform: rotate(0deg); transition: transform .18s ease; border-right: 2px solid rgba(255,255,255,0.7); border-bottom: 2px solid rgba(255,255,255,0.7); transform-origin:center; }
.custom-select .cs-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 140px; background: #0d1112; border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.6); padding: 6px 6px; transform-origin: top center; transform: scaleY(0); opacity: 0; transition: transform .18s cubic-bezier(.2,.9,.2,1), opacity .12s ease; z-index: 600; overflow: hidden; }
.custom-select.open .cs-menu { transform: scaleY(1); opacity: 1; }
.custom-select.open .cs-caret { transform: rotate(180deg); }
.cs-item { padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; font-size: 13px; color: var(--text); }
.cs-item[aria-selected="true"] { background: rgba(39,255,106,0.06); color: var(--text); }
.cs-item:hover { background: rgba(255,255,255,0.03); }

@media (max-width: 768px){
  .custom-select { display: none; }
  .xt-pill.native-visible { display: inline-block; opacity: 1; pointer-events: auto; }
}

.xt-pill.native-hidden { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }