/* Trading profile page. Bento grid, square corners, rose tokens. Scrolls unlike the trade shell. */
html:has(body.v2-profile) {
  height: auto;
  overflow: auto;
}
body.v2-profile {
  min-width: 1280px;
  overflow: auto;
  height: auto;
  min-height: 100%;
  background: var(--v2-line);
}
body.v2-profile::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  background: repeating-linear-gradient(to bottom, var(--v2-scan) 0 1px, transparent 1px 3px);
  opacity: var(--v2-scan-opacity);
}
.v2-prof {
  display: grid;
  width: 100%;
  min-height: 100vh;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: var(--v2-rule);
  background: var(--v2-line);
  padding-bottom: var(--v2-rule);
}
.v2-prof-nav {
  grid-column: 1 / -1;
  height: var(--v2-nav-h);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--v2-header);
  position: sticky;
  top: 0;
  z-index: 20;
}
.v2-prof-nav .v2-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-weight: 700;
  letter-spacing: var(--v2-track-logo);
  border-right: var(--v2-rule) solid var(--v2-line);
  text-decoration: none;
  color: inherit;
}
/* Same Chromium <details> bugs as shell.css — pin five 104px tabs. */
.v2-prof-nav .v2-nav-fold {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-self: stretch;
  height: 100%;
  flex: 0 0 calc(5 * 104px);
  width: calc(5 * 104px);
  min-width: calc(5 * 104px);
}
.v2-prof-nav .v2-nav-more {
  display: none;
  list-style: none;
}
.v2-prof-nav .v2-nav-more::-webkit-details-marker {
  display: none;
}
.v2-prof-nav .v2-nav-fold > .v2-nav-links {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.v2-prof-nav .v2-nav-fold > .v2-nav-links .v2-navb {
  height: 100%;
}
.v2-prof-nav .v2-navb {
  border-right: var(--v2-rule) solid var(--v2-line);
  width: 104px;
  flex: 0 0 104px;
  overflow: hidden;
  text-decoration: none;
}
.v2-prof-nav .v2-spacer {
  flex: 1 1 auto;
  border-right: var(--v2-rule) solid var(--v2-line);
}
.v2-prof-nav .v2-wallet {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-right: var(--v2-rule) solid var(--v2-line);
}
.v2-prof-nav .v2-wallet {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(28vw, 14em);
}
.v2-prof-nav .v2-wallet-go {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--v2-muted);
  font: inherit;
  letter-spacing: var(--v2-track-label);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.v2-prof-nav .v2-wallet-go:hover,
.v2-prof-nav .v2-wallet-go:hover b {
  color: var(--v2-rose);
}
.v2-prof-nav .v2-wallet-go > span,
.v2-prof-nav .v2-wallet-addr {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--v2-text);
  font-weight: 400;
}
.v2-prof-nav .v2-wallet-go > span {
  color: var(--v2-muted);
  font-weight: inherit;
}
.v2-prof-src {
  grid-column: 1 / -1;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background: var(--v2-tile);
  color: var(--v2-muted);
  letter-spacing: var(--v2-track-label);
  text-transform: uppercase;
}
.v2-prof-src .mono {
  color: var(--v2-text);
}
.v2-prof-src .v2-tag {
  padding: 0 6px;
  background: var(--v2-header);
  color: var(--v2-rose);
  font-size: var(--fs-12);
}
.v2-prof-src .v2-copy {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--v2-muted);
  width: 22px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.v2-prof-src .v2-copy:hover {
  color: var(--v2-rose);
}
.v2-prof-src .v2-copy svg {
  width: 14px;
  height: 14px;
}
.v2-prof-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--v2-rule);
  background: var(--v2-line);
  /* 4×2 stats grid — reserve height before data so Equity/Positions do not jump (CLS). */
  min-height: calc(2 * 100px + var(--v2-rule));
}
.v2-prof-stat {
  background: var(--v2-tile);
  padding: 10px 12px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  position: relative;
}
.v2-prof-sk {
  background: var(--hatch), var(--v2-tile);
  color: var(--v2-muted);
}
.v2-prof-sk .v2-pix {
  color: var(--v2-muted);
}
.v2-prof-stat:hover {
  outline: 1px solid var(--v2-rose);
  outline-offset: -1px;
  z-index: 5;
}
.v2-prof-stat,
.v2-prof-tile {
  transition: outline-color var(--t) var(--st);
}
.v2-prof-stat .v2-pix {
  font-size: var(--v2-fs-stat);
}
.v2-prof-stat .v2-d {
  color: var(--v2-muted);
  letter-spacing: var(--v2-track-label);
  text-transform: uppercase;
  font-size: var(--fs-12);
}
.v2-prof-stat .v2-lbl,
.v2-prof-src,
.v2-prof-table th {
  font-family: var(--mono);
  font-size: var(--fs-12);
}
.v2-prof-table td {
  font-size: var(--fs-12);
}
.v2-prof-tile {
  background: var(--v2-tile);
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.v2-prof-tile:hover {
  outline: 1px solid var(--v2-rose);
  outline-offset: -1px;
  z-index: 5;
}
.v2-prof-tile:hover > .v2-hd,
.v2-prof-tile:hover > .v2-hd .v2-idx {
  background: var(--v2-rose);
  color: var(--v2-bg);
}
.v2-prof-eq {
  grid-column: 1 / -1;
  min-height: 280px;
}
.v2-prof-eq .v2-body {
  background: var(--v2-tile);
  padding: 8px 10px;
}
.v2-prof-eq canvas {
  display: block;
  width: 100%;
  height: 240px;
}
.v2-prof-win {
  margin-left: auto;
  display: flex;
  gap: var(--v2-rule);
  background: var(--v2-line);
  height: 22px;
}
.v2-prof-win .v2-btn {
  height: 22px;
  min-height: 22px;
  padding: 0 8px;
}
.v2-prof-pos {
  grid-column: 1 / -1;
  min-height: 180px;
}
.v2-prof-ord {
  grid-column: 1 / -1;
  min-height: 140px;
}
.v2-prof-fills {
  grid-column: 1 / 7;
  min-height: 220px;
}
.v2-prof-fund {
  grid-column: 7 / 13;
  min-height: 220px;
}
.v2-prof-spot {
  grid-column: 1 / 7;
  min-height: 160px;
}
.v2-prof-vault {
  grid-column: 7 / 13;
  min-height: 160px;
}
.v2-prof-tile .v2-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--v2-tile);
}
.v2-prof-empty {
  padding: 24px 12px;
  color: var(--v2-muted);
  letter-spacing: var(--v2-track-label);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--hatch);
  min-height: 160px;
  font-size: var(--fs-12);
}
.v2-prof-empty b {
  color: var(--v2-text);
  font-weight: 700;
}
.v2-prof-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.v2-prof-table th {
  text-align: left;
  color: var(--v2-muted);
  font-weight: 400;
  letter-spacing: var(--v2-track-label);
  padding: 5px 8px;
  border-bottom: var(--v2-rule) solid var(--v2-line);
  text-transform: uppercase;
  position: sticky;
  top: 0;
  background: var(--v2-tile);
  z-index: 1;
  font-size: var(--fs-12);
}
.v2-prof-table th.r,
.v2-prof-table td.r {
  text-align: right;
}
.v2-prof-table td {
  padding: 7px 8px;
  border-bottom: var(--v2-rule) solid var(--v2-line);
  vertical-align: middle;
  font-size: var(--fs-12);
}
.v2-prof-lazy {
  min-height: 80px;
}
.v2-prof-src .v2-tag {
  font-size: var(--fs-12);
}
@media (prefers-reduced-motion: reduce) {
  .v2-prof-stat,
  .v2-prof-tile {
    transition: none;
  }
}