.cqmem-hamfest-buy .cqmem-hamfest-stage{
  display:flex;
  gap:12px;
  align-items:stretch;
}
.cqmem-hamfest-buy .cqmem-hamfest-side{
  width: 300px;
  max-width: 38vw;
  border: 1px solid #d0d7de;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  overflow: auto;
  max-height: min(70vh, 650px);
}
.cqmem-hamfest-type-legend .type{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 10px 10px;
  margin-bottom: 10px;
  background: #fff;
}
.cqmem-hamfest-type-legend .type .tname{ font-weight: 800; }
.cqmem-hamfest-type-legend .type .meta{ font-size: 12px; opacity: .85; margin-top: 2px; }

.cqmem-hamfest-buy .cqmem-hamfest-canvas{
  position: relative;
  width: 100%;
  /* Match the admin layout editor coordinate space (1100x650).
     Allow scrolling on smaller screens instead of scaling. */
  height: 650px;
  border: 1px solid #d0d7de;
  border-radius: 12px;
  background: #f6f8fa;
  overflow: auto;
}

.cqmem-hamfest-status{
  border:1px solid #d0d7de;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fff;
  font-weight: 800;
}
.cqmem-hamfest-status.is-warn{ background:#fff8e5; }
.cqmem-hamfest-status.is-soldout{ background:#ffe5e5; }
.cqmem-hamfest-buy #cqmem-hamfest-buy-layer{
  position: relative;
  /* IMPORTANT: The backend table layout editor uses a fixed 1100x650 box
     with background-size: contain. Table coordinates are saved in that space.
     Keep the public view in the same coordinate system to avoid drift. */
  width: 1100px;
  height: 650px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  transform-origin: top left;
}
.cqmem-hamfest-table{
  position: absolute;
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,.15);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  text-align:center;
  padding: 4px;
  line-height: 1.05;
}
.cqmem-hamfest-table .sub{
  font-weight: 600;
  font-size: 12px;
  opacity: .85;
  margin-top: 2px;
}
.cqmem-hamfest-table.status-available{ background:#fff; }
.cqmem-hamfest-table.status-held{ background:#f8c6c6; }
.cqmem-hamfest-table.status-sold{ background:#b7f0b7; }

.cqmem-hamfest-buy-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:10px;}
.cqmem-hamfest-legend .leg{ display:inline-block; padding:4px 8px; border-radius:999px; margin-left:6px; font-size:12px; border:1px solid rgba(0,0,0,.12);}
.leg-avail{ background:#fff;}
.leg-hold{ background:#f8c6c6;}
.leg-sold{ background:#b7f0b7;}

.cqmem-hamfest-panel{
  margin-top: 10px;
  border:1px solid #d0d7de;
  border-radius:12px;
  padding:12px;
  background:#fff;
}
.cqmem-hamfest-panel .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px;}
.cqmem-hamfest-panel .msg{ margin-top:10px; font-weight:600;}

.cqmem-hamfest-table.selected{ outline: 3px solid #2da44e; outline-offset: 2px; }

/* Legend below layout (space efficient) */
.cqmem-hamfest-legend-below{margin-top:8px;}

/* If older side styles exist, neutralize */
.cqmem-hamfest-stage{display:block;}
.cqmem-hamfest-side{display:none;}
.cqmem-hamfest-canvas{width:100%;}


/* Compact legend lines */
.cqmem-hamfest-type-legend{display:block;}
.cqmem-hamfest-type-line{font-size:14px; line-height:1.35; padding:4px 0; border-bottom:1px solid #e6e8eb;}
.cqmem-hamfest-type-line:last-child{border-bottom:none;}