body{
  margin:0;
  font-family:Arial,sans-serif;
  background:#111827;
  color:white;
  overflow:hidden;
}

.topbar{
  height:80px;
  background:#0f172a;
  border-bottom:2px solid #1e293b;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
}

.topbar h1{
  margin:0;
  font-size:28px;
}

.topbar p{
  margin:0;
  color:#94a3b8;
}

.toolbar{
  display:flex;
  gap:10px;
}

button{
  background:#2563eb;
  border:none;
  padding:10px 16px;
  border-radius:12px;
  color:white;
  font-weight:bold;
  cursor:pointer;
}

button:hover{
  background:#1d4ed8;
}

.main{
  display:flex;
  height:calc(100vh - 80px);
}

.sidebar{
  width:320px;
  background:#0f172a;
  border-right:2px solid #1e293b;
  padding:15px;
  overflow:auto;
}

.sidebar input{
  width:100%;
  box-sizing:border-box;
  margin-bottom:10px;
  padding:12px;
  border:none;
  border-radius:10px;
  background:#1e293b;
  color:white;
}

.full{
  width:100%;
  margin-bottom:15px;
}

#guestList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.guest{
  background:#1e293b;
  border-radius:15px;
  padding:10px;
  display:flex;
  gap:10px;
  align-items:center;
  cursor:grab;
}

.guest img{
  width:55px;
  height:55px;
  border-radius:50%;
  object-fit:cover;
}

.avatar{
  width:55px;
  height:55px;
  border-radius:50%;
  background:#2563eb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}

#hallWrapper{
  flex:1;
  overflow:auto;
  background:
    linear-gradient(#1e293b 1px, transparent 1px),
    linear-gradient(90deg, #1e293b 1px, transparent 1px);
  background-size:40px 40px;
}

#hall{
  width:2600px;
  height:1600px;
  position:relative;
  transform-origin:top left;
}

.table{
  position:absolute;
  background:white;
  border:5px solid #475569;
  color:black;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  cursor:move;
}

.round{
  width:180px;
  height:180px;
  border-radius:50%;
}

.square{
  width:220px;
  height:150px;
  border-radius:30px;
}

.seat{
  position:absolute;
  width:46px;
  height:46px;
  border-radius:50%;
  border:3px solid white;
  background:#3b82f6;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  overflow:hidden;
}

.seat img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.stage{
  position:absolute;
  right:120px;
  top:120px;
  width:350px;
  height:60px;
  border-radius:20px;
  background:#7c3aed;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}

.photo{
  position:absolute;
  right:180px;
  top:260px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:#9333ea;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}