.marketsPage{
  width:100%;
  margin:0;
}

.marketsWorkspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) 52px;
  gap:14px;
  align-items:start;
}

.marketViewRail{
  grid-column:2;
  grid-row:1;
  position:sticky;
  top:88px;
  display:grid;
  gap:8px;
  justify-items:center;
  padding:8px 0;
}

.marketPanel{
  grid-column:1;
  grid-row:1;
  min-width:0;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.marketPanelHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px;
  border-bottom:1px solid var(--border-color);
}

.marketDirectoryHeader{
  align-items:center;
  gap:14px;
  padding:12px 22px;
}

.marketDirectoryHeader h2{
  flex:0 0 auto;
  min-width:86px;
}

.marketPanelHeader h2{
  margin:0;
  color:var(--text-primary);
  font-size:18px;
  line-height:1.25;
}

.marketPanelHeader p{
  margin:6px 0 0;
  color:var(--text-secondary);
  font-size:13px;
}

.marketViewBtn,
.iconBtn,
.rowIconBtn{
  width:38px;
  height:38px;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:#fff;
  color:var(--text-secondary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}

.marketViewBtn svg,
.iconBtn svg,
.rowIconBtn svg,
.primaryActionBtn svg{
  width:18px;
  height:18px;
}

.marketViewBtn.active,
.marketViewBtn:hover,
.iconBtn:hover,
.rowIconBtn:hover{
  border-color:#0f766e;
  background:#ecfdf5;
  color:#0f766e;
}

.primaryActionBtn{
  height:40px;
  border:1px solid #0f766e;
  border-radius:8px;
  background:#0f766e;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}

.primaryActionBtn:hover{
  background:#0b5f58;
}

.primaryActionBtn:disabled{
  border-color:var(--gray-300);
  background:var(--gray-300);
  cursor:not-allowed;
}

.secondaryBtn{
  height:40px;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:#fff;
  color:var(--text-primary);
  padding:0 14px;
  font-weight:800;
  cursor:pointer;
}

.secondaryBtn:hover{
  border-color:var(--gray-500);
}

.marketFilters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
}

.marketSearch{
  flex:1 1 300px;
  max-width:520px;
}

.marketSearch input,
.marketFilter select,
.marketFormField input,
.marketFormField select,
.marketFormField textarea{
  width:100%;
  border:1px solid var(--gray-300);
  border-radius:8px;
  background:#fff;
  color:var(--text-primary);
  font:inherit;
}

.marketSearch input{
  height:42px;
  padding:0 14px;
}

.marketSearch input:focus,
.marketFilter select:focus,
.marketFormField input:focus,
.marketFormField select:focus,
.marketFormField textarea:focus{
  outline:3px solid rgba(15,118,110,.14);
  border-color:#0f766e;
}

.marketFilter{
  min-width:150px;
  display:grid;
  gap:6px;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:800;
}

.marketFilter select{
  height:42px;
  padding:0 10px;
}

.marketStatus{
  min-height:22px;
  padding:14px 22px 0;
  color:var(--text-secondary);
  font-size:13px;
}

.marketStatus.error{
  color:var(--danger);
}

.marketTableWrap{
  overflow:auto;
  padding:14px 22px 0;
  max-height:640px;
  scrollbar-gutter:stable both-edges;
}

.marketTable{
  width:100%;
  border-collapse:collapse;
  min-width:900px;
  color:var(--text-primary);
  font-size:14px;
}

.marketTable th,
.marketTable td{
  border-bottom:1px solid var(--border-color);
  text-align:left;
  vertical-align:middle;
}

.marketTable th{
  position:sticky;
  top:0;
  z-index:1;
  color:var(--text-secondary);
  background:var(--bg-secondary);
  padding:12px 16px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.marketTable td{
  padding:16px;
}

.marketSortBtn{
  border:0;
  background:transparent;
  color:inherit;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
}

.marketSortBtn:hover,
.marketSortBtn:focus-visible{
  color:var(--primary);
}

.marketSortBtn:focus-visible{
  outline:3px solid rgba(37,99,235,.14);
  outline-offset:4px;
  border-radius:4px;
}

.marketSortIndicator{
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  opacity:.28;
}

.marketSortBtn.active .marketSortIndicator{
  opacity:1;
}

.marketSortBtn.active[data-sort-dir="asc"] .marketSortIndicator{
  border-top:0;
  border-bottom:5px solid currentColor;
}

.marketSortBtn.active[data-sort-dir="desc"] .marketSortIndicator{
  border-bottom:0;
  border-top:5px solid currentColor;
}

.marketNameCell{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
}

.marketNameLink{
  color:var(--primary);
  text-decoration:none;
  transition:color .15s ease;
}

.marketNameLink:hover{
  color:var(--primary-hover);
  text-decoration:underline;
}

.marketPreviewBtn{
  width:24px;
  height:24px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-tertiary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
  padding:0;
  transition:background .15s ease,color .15s ease;
}

.marketPreviewBtn svg{
  width:14px;
  height:14px;
  pointer-events:none;
}

.marketPreviewBtn:hover,
.marketPreviewBtn:focus-visible{
  background:var(--gray-100);
  color:var(--primary);
}

.marketPreviewBtn:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(37,99,235,.14);
}

.marketSubtle{
  margin-top:3px;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.35;
}

.marketStatusText{
  color:var(--text-primary);
  font-weight:500;
}

.marketStatusText.inactive{
  color:var(--text-secondary);
}

.marketRowActions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.marketPager{
  min-height:62px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  padding:14px 22px 18px;
  color:var(--text-secondary);
  font-size:13px;
}

.marketPager button{
  height:36px;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:#fff;
  padding:0 12px;
  color:var(--text-primary);
  font-weight:800;
  cursor:pointer;
}

.marketPager button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.appetitePlaceholderTable{
  margin:22px;
  border:1px solid var(--border-color);
  border-radius:8px;
  overflow:hidden;
}

.appetitePlaceholderHead,
.appetitePlaceholderRow{
  display:grid;
  grid-template-columns:1fr 1fr 1.4fr;
}

.appetitePlaceholderHead span,
.appetitePlaceholderRow span{
  min-width:0;
  padding:14px;
  border-right:1px solid var(--border-color);
}

.appetitePlaceholderHead span:last-child,
.appetitePlaceholderRow span:last-child{
  border-right:0;
}

.appetitePlaceholderHead{
  background:#f8fafc;
  color:var(--text-secondary);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.appetitePlaceholderRow{
  color:var(--text-secondary);
  font-size:14px;
}

.marketModalBackdrop{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(15,23,42,.42);
}

.marketPreviewBackdrop{
  position:fixed;
  inset:0;
  z-index:1300;
  background:rgba(15,23,42,.48);
}

.marketPreviewModal{
  position:fixed;
  inset:0;
  z-index:1301;
  display:flex;
  flex-direction:column;
  border:0;
  border-radius:0;
  background:#fff;
  box-shadow:0 24px 64px rgba(15,23,42,.24);
  overflow:hidden;
}

.marketPreviewBackdrop[hidden],
.marketPreviewModal[hidden]{
  display:none !important;
}

.marketPreviewOpen{
  overflow:hidden;
}

.marketPreviewHeader{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 18px;
  border-bottom:1px solid var(--border-color);
  background:#fff;
}

.marketPreviewTitle{
  min-width:0;
  color:var(--text-primary);
  font-size:18px;
  font-weight:900;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.marketPreviewActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.marketPreviewFrame{
  flex:1;
  min-height:0;
  width:100%;
  border:0;
  background:#f8fafc;
}

.marketModal{
  position:fixed;
  z-index:1001;
  top:50%;
  left:50%;
  width:min(760px, calc(100vw - 32px));
  max-height:calc(100vh - 40px);
  transform:translate(-50%,-50%);
  border:1px solid var(--border-color);
  border-radius:8px;
  background:#fff;
  box-shadow:0 24px 64px rgba(15,23,42,.24);
  overflow:auto;
}

.marketModalHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px;
  border-bottom:1px solid var(--border-color);
}

.marketModalHeader h2{
  margin:0;
  font-size:20px;
}

.marketForm{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding:22px;
}

.marketFormField{
  display:grid;
  gap:7px;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:900;
}

.marketFormField input,
.marketFormField select{
  height:42px;
  padding:0 12px;
}

.marketFormField textarea{
  min-height:112px;
  padding:10px 12px;
  resize:vertical;
}

.marketCheckboxField{
  align-content:end;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:8px;
  padding-bottom:9px;
}

.marketCheckboxField input{
  width:18px;
  height:18px;
}

.span2{
  grid-column:1 / -1;
}

.marketFormActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width: 760px){
  .marketsWorkspace{
    grid-template-columns:1fr;
  }

  .marketViewRail{
    position:static;
    grid-column:1;
    grid-row:auto;
    display:flex;
    justify-content:flex-end;
  }

  .marketPanel{
    grid-column:1;
    grid-row:auto;
  }

  .marketPanelHeader,
  .marketFilters{
    padding-left:16px;
    padding-right:16px;
  }

  .marketDirectoryHeader{
    align-items:stretch;
    flex-direction:column;
  }

  .marketDirectoryHeader h2{
    min-width:0;
  }

  .marketDirectoryHeader .primaryActionBtn{
    align-self:flex-end;
  }

  .marketDirectoryHeader .marketFilters{
    padding-left:0;
    padding-right:0;
    width:100%;
  }

  .marketTableWrap,
  .marketStatus,
  .marketPager{
    padding-left:16px;
    padding-right:16px;
  }

  .marketForm{
    grid-template-columns:1fr;
  }

  .marketPreviewHeader{
    align-items:flex-start;
    flex-direction:column;
  }

  .span2{
    grid-column:auto;
  }

  .appetitePlaceholderHead,
  .appetitePlaceholderRow{
    grid-template-columns:1fr;
  }

  .appetitePlaceholderHead span,
  .appetitePlaceholderRow span{
    border-right:0;
    border-bottom:1px solid var(--border-color);
  }
}