/* NXG Trade — shop-like visual layer
   Uses shop.css tokens and top HUD, but keeps trade ids and old JS intact.
*/

:root{
  --trade-border: rgba(140,200,255,.16);
  --trade-border-2: rgba(140,200,255,.10);
  --trade-fill: rgba(0,0,0,.16);
  --trade-fill-2: rgba(7,10,16,.34);
  --trade-soft: rgba(255,255,255,.04);
  --trade-shadow: 0 22px 56px rgba(0,0,0,.46);
  --trade-glow: 0 0 24px rgba(86,214,255,.10);
  --slot-size: 76px;
  --slot-gap: 10px;
  --slot-clip: polygon(16% 0%,84% 0%,100% 50%,84% 100%,16% 100%,0% 50%);
}

.trade-page .layout.trade-layout{
  grid-template-columns: minmax(300px, 348px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.trade-page .trade-panel{
  position: relative;
  min-width: 0;
}

.trade-page .trade-panel .panel-head{
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--trade-border-2);
  align-items: center;
}

.trade-page .trade-panel .panel-sub{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color: var(--muted2);
  font-size: 11px;
}

.trade-page .trade-panel .panel-body{
  padding: 12px;
}

.trade-page .trade-panel--left .panel-body,
.trade-page .trade-panel--right .panel-body{
  display:grid;
  gap:12px;
}

.trade-page .trade-subpanel{
  position: relative;
  padding: 12px;
  border: 1px solid var(--trade-border);
  border-radius: 14px;
  background:
    radial-gradient(420px 160px at 20% 0%, rgba(86,214,255,.08), transparent 62%),
    radial-gradient(320px 160px at 100% 0%, rgba(176,107,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 32%),
    rgba(0,0,0,.12);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 14px 34px rgba(0,0,0,.20);
}

.trade-page .trade-subpanel::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(86,214,255,.26), transparent 60%) left top/24px 2px no-repeat,
    linear-gradient(180deg, rgba(86,214,255,.26), transparent 60%) left top/2px 24px no-repeat,
    linear-gradient(90deg, rgba(86,214,255,.18), transparent 60%) right top/24px 2px no-repeat,
    linear-gradient(180deg, rgba(86,214,255,.18), transparent 60%) right top/2px 24px no-repeat;
  opacity:.55;
  border-radius:14px;
}

.trade-page .trade-subhead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.trade-page .trade-subhead > span{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.trade-page .trade-subhead > small{
  color: var(--muted2);
  font-size:11px;
}

.trade-page .trade-overview{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--trade-border-2);
}
.trade-page .ov-card{
  position:relative;
  padding: 11px 12px 10px;
  min-height: 64px;
  border: 1px solid var(--trade-border);
  border-radius: 14px;
  background:
    radial-gradient(220px 90px at 24% 0%, rgba(86,214,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%),
    rgba(0,0,0,.12);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 10px 24px rgba(0,0,0,.18);
}
.trade-page .ov-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(86,214,255,.22), transparent 60%) left top/20px 2px no-repeat,
    linear-gradient(180deg, rgba(86,214,255,.22), transparent 60%) left top/2px 20px no-repeat;
  opacity:.62;
}
.trade-page .ov-k{
  display:block;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--muted2);
  margin-bottom: 7px;
}
.trade-page .ov-v{
  display:block;
  font-size:15px;
  font-weight:900;
  letter-spacing:.03em;
  color: var(--text);
  text-shadow: 0 0 14px rgba(86,214,255,.10);
}

.trade-page .row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.trade-page .sep{ color: rgba(255,255,255,.18); }

.trade-page .inp,
.trade-page select.inp,
.trade-page input.inp{
  min-width: 0;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  border:1px solid rgba(140,200,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%),
    rgba(7,10,16,.44);
  color: var(--text);
  outline:none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.trade-page .inp:focus{
  border-color: rgba(86,214,255,.48);
  box-shadow: 0 0 0 3px rgba(86,214,255,.10);
}
.trade-page .field{ min-width:0; }
.trade-page .field .lbl{
  display:block;
  font-size:10px;
  color:var(--muted2);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin: 0 0 6px;
}
.trade-page .grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.trade-page .btn{
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border:1px solid rgba(86,214,255,.28);
  background:
    radial-gradient(160px 60px at 50% 0%, rgba(86,214,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 35%),
    rgba(86,214,255,.10);
  color: var(--text);
  font-weight: 900;
  letter-spacing: .06em;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.trade-page .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(86,214,255,.42);
  background:
    radial-gradient(160px 60px at 50% 0%, rgba(86,214,255,.15), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%),
    rgba(86,214,255,.12);
  box-shadow: var(--trade-glow);
}
.trade-page .btn.ghost{
  border-color: rgba(140,200,255,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 35%),
    rgba(0,0,0,.14);
}
.trade-page .btn.ghost:hover{
  border-color: rgba(86,214,255,.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 35%),
    rgba(0,0,0,.18);
}
.trade-page .btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}

.trade-page .seg{
  display:inline-flex;
  gap:6px;
  padding: 4px;
  border-radius: 14px;
  border:1px solid var(--trade-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 38%),
    rgba(0,0,0,.14);
}
.trade-page .seg.small{ gap:4px; }
.trade-page .seg-btn{
  min-width: 102px;
  height: 34px;
  padding: 0 12px;
  border:0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .04em;
  cursor:pointer;
  transition: all .12s ease;
}
.trade-page .seg.small .seg-btn{
  min-width:auto;
  padding:0 10px;
}
.trade-page .seg-btn.active{
  color: var(--text);
  background:
    radial-gradient(160px 54px at 50% 0%, rgba(86,214,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%),
    rgba(86,214,255,.12);
  box-shadow:
    0 0 0 1px rgba(86,214,255,.18) inset,
    0 0 22px rgba(86,214,255,.08);
}
.trade-page .seg-btn:not(.active):hover{
  color: rgba(230,240,255,.92);
  background: rgba(255,255,255,.04);
}

.trade-page .inv-toolbar,
.trade-page .marketTools{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
}
.trade-page .marketTools{
  grid-template-columns: minmax(220px,1fr) minmax(220px,.6fr) auto;
  margin: 0 0 12px;
}

.trade-page .inv-wrap{
  margin-top: 0;
  padding: 10px;
  border: 1px solid var(--trade-border);
  border-radius: 14px;
  background:
    radial-gradient(300px 140px at 20% 0%, rgba(86,214,255,.08), transparent 62%),
    rgba(0,0,0,.16);
  max-height: 48vh;
  overflow:auto;
}

.trade-page .inv-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--slot-size), 1fr));
  gap: var(--slot-gap);
  align-content:start;
}
.trade-page .inv-empty{
  padding: 12px;
  border-radius: 12px;
  border:1px dashed rgba(140,200,255,.18);
  color: var(--muted);
  background: rgba(0,0,0,.16);
}

.trade-page .inv-item{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border:1px solid rgba(140,200,255,.14);
  border-radius: 14px;
  cursor:pointer;
  padding: 8px;
  clip-path: var(--slot-clip);
  background:
    radial-gradient(160px 70px at 50% 0%, rgba(86,214,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 35%),
    rgba(0,0,0,.18);
  transition: transform .1s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.trade-page .inv-item:hover{
  transform: translateY(-1px);
  border-color: rgba(86,214,255,.34);
  box-shadow: 0 0 0 1px rgba(86,214,255,.05) inset, 0 14px 28px rgba(0,0,0,.26);
}
.trade-page .inv-item.selected{
  border-color: rgba(86,214,255,.52);
  box-shadow: 0 0 0 2px rgba(86,214,255,.16) inset, 0 0 26px rgba(86,214,255,.10);
}
.trade-page .inv-item.locked{
  opacity:.55;
  filter: grayscale(.25);
}
.trade-page .inv-item img{
  width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.55));
  pointer-events:none;
}
.trade-page .inv-item .stack{
  position:absolute;
  right:8px; top:8px;
  min-width: 22px;
  padding:2px 6px;
  border-radius:999px;
  font-size:11px;
  line-height: 15px;
  background: rgba(0,0,0,.58);
  border:1px solid rgba(140,200,255,.16);
  color: rgba(255,255,255,.90);
}
.trade-page .inv-item .inv-lbl{
  position:absolute;
  left:8px; right:8px; bottom:8px;
  font-size:11px;
  line-height:1.1;
  color: rgba(230,240,255,.88);
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.trade-page .selbox{
  display:grid;
  grid-template-columns: 60px 1fr;
  gap:12px;
  margin-top: 10px;
  padding: 12px;
  border:1px solid var(--trade-border);
  border-radius:14px;
  background:
    radial-gradient(260px 90px at 20% 0%, rgba(86,214,255,.08), transparent 60%),
    rgba(0,0,0,.16);
}
.trade-page .sel-ico{
  width:60px; height:60px;
  border-radius:14px;
  border:1px solid var(--trade-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 35%),
    rgba(0,0,0,.24);
  display:flex; align-items:center; justify-content:center;
}
.trade-page .sel-ico img{
  width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.55));
}
.trade-page .sel-title{
  font-weight:800;
  font-size:14px;
  letter-spacing:.02em;
}
.trade-page .sel-sub{
  font-size:12px;
  color: var(--muted);
  margin-top:3px;
}
.trade-page .mono{ font-variant-numeric: tabular-nums; }

.trade-page .tblwrap{
  border:1px solid var(--trade-border);
  border-radius: 14px;
  overflow:auto;
  background:
    radial-gradient(420px 140px at 20% 0%, rgba(86,214,255,.06), transparent 62%),
    rgba(0,0,0,.14);
}
.trade-page .tbl{
  width:100%;
  border-collapse: collapse;
  min-width: 720px;
}
.trade-page .tbl th,
.trade-page .tbl td{
  padding: 11px 12px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(140,200,255,.08);
}
.trade-page .tbl th{
  position: sticky;
  top: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 50%),
    rgba(10,16,24,.92);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align:left;
}
.trade-page .tbl th.right,
.trade-page .tbl td.right,
.trade-page .tbl th.num,
.trade-page .tbl td.num{
  text-align:right;
}
.trade-page .tbl tbody tr{
  transition: background .12s ease;
}
.trade-page .tbl tbody tr:hover{
  background: rgba(255,255,255,.035);
}
.trade-page .tbl tbody tr:last-child td{
  border-bottom: 0;
}

.trade-page .itemcell{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 240px;
}
.trade-page .itemicon{
  width:64px; height:64px;
  object-fit: contain;
  border-radius: 12px;
  border:1px solid rgba(140,200,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 35%),
    rgba(0,0,0,.18);
}
.trade-page .itemtxt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.trade-page .itemlabel{
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.trade-page .itemcode{
  font-size: 11px;
  color: var(--muted2);
}
.trade-page .kbd{
  display:inline-flex;
  align-items:center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border:1px solid rgba(140,200,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--muted);
  font-size: 11px;
  letter-spacing:.06em;
}

.trade-page .msg{
  border:1px solid rgba(140,200,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 35%),
    rgba(0,0,0,.18);
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(230,240,255,.88);
  margin-top: 10px;
}
.trade-page .msg.err,
.trade-page .msg.error{
  border-color: rgba(255,120,120,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%),
    rgba(255,80,80,.08);
}
.trade-page .msg.ok{
  border-color: rgba(120,255,180,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%),
    rgba(80,255,160,.08);
}
.trade-page .muted,
.trade-page .hint{
  color: var(--muted2);
  font-size: 12px;
}
.trade-page .divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(140,200,255,.16), transparent);
  opacity:.9;
}


.trade-page .trade-panel--center .panel-body{
  display:grid;
  gap:14px;
}
.trade-page .trade-subpanel--activity{
  margin-top: 2px;
}
.trade-page .trade-activity-top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom: 10px;
}
.trade-page .trade-activity-body{
  display:grid;
  gap:12px;
}
.trade-page .trade-wide-table{
  min-width: 720px;
}
.trade-page .trade-rtab-tools{
  margin-bottom:10px;
  justify-content:space-between;
}
.trade-page #myWrap .row,
.trade-page #aucWrap .row,
.trade-page #histWrap .row{
  margin-bottom:10px;
  justify-content:space-between;
}

/* modal visuals — these override the css string injected by JS */
.nxg-modal-backdrop{
  background: rgba(2,6,10,.68) !important;
  backdrop-filter: blur(6px) saturate(1.05) !important;
}
.nxg-modal{
  width:min(560px, calc(100vw - 24px)) !important;
  border:1px solid rgba(140,200,255,.16) !important;
  background:
    radial-gradient(420px 140px at 20% 0%, rgba(86,214,255,.10), transparent 62%),
    radial-gradient(280px 140px at 100% 0%, rgba(176,107,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 35%),
    rgba(7,10,16,.94) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 20px 64px rgba(0,0,0,.58) !important;
  border-radius: 16px !important;
  position: relative;
  overflow: hidden;
}
.nxg-modal::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(86,214,255,.20), transparent 60%) left top/24px 2px no-repeat,
    linear-gradient(180deg, rgba(86,214,255,.20), transparent 60%) left top/2px 24px no-repeat,
    linear-gradient(90deg, rgba(86,214,255,.14), transparent 60%) right top/24px 2px no-repeat,
    linear-gradient(180deg, rgba(86,214,255,.14), transparent 60%) right top/2px 24px no-repeat;
  opacity:.65;
}
.nxg-modal h3{
  margin:0 0 8px !important;
  font-size:16px !important;
  letter-spacing:.08em !important;
  text-transform: uppercase;
}
.nxg-modal p{
  color: rgba(230,240,255,.84) !important;
}
.nxg-modal pre{
  border:1px solid rgba(140,200,255,.14) !important;
  background: rgba(0,0,0,.18) !important;
}
.nxg-modal .row{
  justify-content:flex-end;
}
.nxg-busy{
  border:1px solid rgba(140,200,255,.14) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 35%),
    rgba(7,10,16,.90) !important;
}

/* responsiveness */
@media (max-width: 1320px){
  .trade-page .layout.trade-layout{
    grid-template-columns: minmax(290px, 332px) minmax(0, 1fr);
  }
}
@media (max-width: 980px){
  .trade-page .layout.trade-layout{
    grid-template-columns: 1fr;
  }
  .trade-page .trade-overview{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .trade-page .marketTools{
    grid-template-columns: 1fr;
  }
  .trade-page .grid2{
    grid-template-columns: 1fr;
  }
  .trade-page .inv-toolbar{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px){
  .trade-page .trade-overview{
    grid-template-columns: 1fr;
  }
  .trade-page .tbl{
    min-width: 620px;
  }
  .trade-page .itemcell{
    min-width: 220px;
  }
}