/* Canonical Trade workspace.
   One owner for the two-sided Elve-style Trade board, slots and asset picker. */
#tradeView{
  --trade-frame:color-mix(in srgb,var(--surface) 92%,var(--ink) 8%);
  --trade-cell:color-mix(in srgb,var(--surface-2) 88%,var(--ink) 12%);
  --trade-cell-line:color-mix(in srgb,var(--line) 82%,var(--ink) 18%);
  max-width:900px;
  margin:0 auto;
}
#tradeView .section-heading{
  align-items:center;
  margin-bottom:16px;
}
#tradeView .section-heading h1{
  font-size:clamp(1.55rem,2.3vw,2rem);
}
#tradeView .section-actions{
  gap:8px;
}
#tradeView .section-actions .quiet{
  padding:9px 13px;
  border-radius:999px;
}
#tradeView .trade-scorebar{
  display:grid;
  grid-template-columns:minmax(110px,1fr) minmax(210px,1.5fr) minmax(110px,1fr);
  align-items:center;
  gap:18px;
  padding:15px 24px;
  margin:0 auto 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--trade-frame);
}
#tradeView .trade-scorebar>strong{
  font-family:Manrope,sans-serif;
  font-size:clamp(1.15rem,2.4vw,1.65rem);
  text-align:center;
}
#tradeView .trade-score-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  min-width:0;
}
#tradeView .trade-score-labels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  width:100%;
  text-align:center;
  font-weight:900;
  font-size:.8rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}
#tradeView .difference{
  width:auto;
  padding:4px 10px;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--muted)!important;
  font-size:.8rem;
  white-space:nowrap;
}
#tradeView .trade-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);
  align-items:center;
  gap:14px;
  margin:0;
  padding:24px;
  border:1px solid var(--line);
  border-radius:32px;
  background:var(--trade-frame);
  box-shadow:none;
}
#tradeView .offer-panel,
#tradeView .offer-panel.accent{
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
#tradeView .offer-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:11px;
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
#tradeView .offer-title strong{
  font-family:Manrope,sans-serif;
  font-size:.9rem;
  letter-spacing:0;
}
#tradeView .offer-slots{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin:0;
  padding:5px;
  border:3px solid color-mix(in srgb,var(--line) 75%,var(--ink) 25%);
  border-radius:13px;
  background:color-mix(in srgb,var(--bg) 84%,#000 16%);
}
#tradeView .slot{
  width:100%;
  min-width:0;
  min-height:0;
  aspect-ratio:1/1;
  padding:0;
  border:1px solid var(--trade-cell-line);
  border-radius:5px;
  background:var(--trade-cell);
  color:var(--muted);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  box-shadow:none;
  transition:background .12s ease,border-color .12s ease,transform .12s ease;
}
#tradeView .slot:hover{
  transform:none;
  border-color:color-mix(in srgb,var(--ink) 40%,var(--line));
  background:color-mix(in srgb,var(--trade-cell) 88%,var(--ink) 12%);
}
#tradeView .slot.filled{
  border-style:solid;
  background:var(--trade-cell);
  cursor:pointer;
}
#tradeView .slot.filled small{
  display:none;
}
#tradeView .slot-symbol{
  font-size:clamp(1.65rem,4vw,3rem)!important;
  line-height:1;
}
#tradeView .trade-slot-photo,
#tradeView .slot.filled .mth-photo-inline{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:3px;
}
#tradeView .slot-plus{
  display:grid;
  place-items:center;
  width:58%;
  aspect-ratio:1;
  border-radius:50%;
  background:color-mix(in srgb,var(--surface) 90%,var(--ink) 10%);
  color:var(--ink);
  font-size:clamp(1.35rem,3.3vw,2.35rem);
  font-weight:500;
  line-height:1;
}
#tradeView .slot:not(.add-slot):not(.filled){
  cursor:pointer;
}
#tradeView .swap-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin:auto;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--surface);
  color:var(--muted);
  font-size:1.1rem;
}
#tradeView .offer-extras{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
}
#tradeView .add-cash,
#tradeView .add-condition{
  padding:5px 0;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:.8rem;
  font-weight:800;
}
#tradeView .add-cash:hover,
#tradeView .add-condition:hover{
  text-decoration:underline;
}
#tradeView .cash-label{
  font-size:.8rem;
  font-weight:800;
  color:var(--muted);
}
#tradeView .conditions{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:5px;
}
#tradeView .condition{
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-2);
  font-size:.8rem;
}
#tradeView .trade-picker{
  display:none;
  margin:14px 0 0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
}
#tradeView .trade-picker.is-open{
  display:block;
}
#tradeView .trade-picker-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
#tradeView .trade-picker-head h2{
  margin:2px 0 0;
  font-size:1rem;
}
#tradeView .picker-side-toggle{
  display:flex;
  padding:3px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
}
#tradeView .picker-side-toggle button{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:7px 10px;
  border-radius:7px;
  font-size:.8rem;
  font-weight:800;
}
#tradeView .picker-side-toggle button.active{
  background:var(--ink);
  color:var(--surface);
}
#tradeView .trade-search{
  height:42px;
  margin-top:10px;
}
#tradeView .trade-category-row{
  padding:10px 0 8px;
}
#tradeView .trade-asset-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
  max-height:300px;
  overflow:auto;
}
#tradeView .trade-pick-card{
  overflow:hidden;
  min-width:0;
}
#tradeView .trade-pick-card{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:11px;
  padding:0;
  text-align:left;
}
#tradeView .trade-pick-card:hover{
  border-color:color-mix(in srgb,var(--ink) 32%,var(--line));
  background:var(--surface-2);
}
#tradeView .trade-pick-card strong,
#tradeView .trade-pick-card small{
  display:block;
  padding:0 8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#tradeView .trade-pick-card strong{
  margin-top:7px;
  font-size:.8rem;
}
#tradeView .trade-pick-card small{
  padding-bottom:8px;
  margin-top:2px;
  color:var(--muted);
  font-size:.8rem;
}
#tradeView .trade-pick-visual{
  height:74px;
  overflow:hidden;
}
#tradeView .trade-pick-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#tradeView .trade-pick-visual span{
  font-size:2.5rem;
}
#tradeView .trade-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}
#tradeView .trade-actions .primary,
#tradeView .trade-actions .quiet{
  padding:10px 15px;
}
:root[data-theme="night"] #tradeView{
  --trade-frame:#151517;
  --trade-cell:#0e0f10;
  --trade-cell-line:#25272a;
}
:root[data-theme="night"] #tradeView .trade-scorebar,
:root[data-theme="night"] #tradeView .trade-layout{
  background:#171719;
  border-color:#303034;
}
:root[data-theme="night"] #tradeView .offer-slots{
  background:#08090a;
  border-color:#050506;
}
:root[data-theme="night"] #tradeView .slot{
  background:#0c0d0e;
  border-color:#232529;
}
:root[data-theme="night"] #tradeView .slot-plus{
  background:#a8a8aa;
  color:#111;
}
:root[data-theme="night"] #tradeView .swap-icon{
  background:#ededed;
  color:#111;
  border-color:#ededed;
}
@media(max-width:760px){
  #tradeView .section-heading{
    align-items:flex-start;
  }
  #tradeView .section-heading h1{
    font-size:1.5rem;
  }
  #tradeView .trade-scorebar{
    grid-template-columns:1fr 1.35fr 1fr;
    gap:8px;
    padding:11px 13px;
  }
  #tradeView .trade-score-labels{
    gap:8px;
    font-size:.8rem;
  }
  #tradeView .difference{
    font-size:.8rem;
    padding:3px 7px;
  }
  #tradeView .trade-layout{
    grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);
    gap:6px;
    padding:12px 8px;
    border-radius:22px;
  }
  #tradeView .swap-icon{
    width:32px;
    height:32px;
    font-size:.85rem;
  }
  #tradeView .offer-title{
    font-size:.8rem;
    margin-bottom:7px;
  }
  #tradeView .offer-title strong{
    font-size:.8rem;
  }
  #tradeView .offer-slots{
    gap:3px;
    padding:3px;
    border-width:2px;
    border-radius:9px;
  }
  #tradeView .slot{
    border-radius:3px;
  }
  #tradeView .slot-plus{
    width:62%;
    font-size:1.35rem;
  }
  #tradeView .add-cash,
  #tradeView .add-condition{
    font-size:.8rem;
  }
  #tradeView .cash-label{
    font-size:.8rem;
  }
  #tradeView .trade-asset-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  #tradeView .trade-pick-visual{
    height:66px;
  }
}
@media(max-width:420px){
  #tradeView .trade-layout{
    padding:10px 6px;
    gap:4px;
  }
  #tradeView .offer-title span{
    max-width:64px;
  }
  #tradeView .trade-scorebar>strong{
    font-size:.82rem;
  }
  #tradeView .trade-score-labels{
    font-size:.8rem;
  }
}